Create images for major functions in 1.0 app

Overall there should be hits of orange and black in the interface. White is always nice too.

A) The app icon:

1) Should be a Moodle M with a hat based on the one here: http://moodle.org/mod/forum/discuss.php?d=162906

Here are the specs for icons: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

B) The Dashboard buttons are also icon-sized:

1) Participants: some people / faces, possibly in groups
2) Upload: allows you to send photos/audio/video to Moodle: perhaps an arrow pointing up is enough
3) Web: (might be renamed) allows you access your Moodle site via the web browser
4) Help: (might be renamed) allows you to access Moodle Docs via the web browser

A background image is allowed, if you feel it helps, even a gradient perhaps. Otherwise a flat colour.

C) On the upload page, three more icons would be good, for:

1) Audio recording (soundwave or microphone?)
2) Photo gallery or capture (camera?)
3) Video recording (video camera or movie strip?)

D) On the Audio recording screen it will take up the full screen, we need to show

1) A nice big pretty microphone in the middle
2) 20 images that show recording levels from 0 to 20 (bar graph or dial, whatever you like)

E) On the participants task,

1) on the course listing, an icon for "Course" would be nice. Perhaps based on the one in Moodle.
2) on the user profile, small square icons for Email, Phone and Address would be nice but are not essential

F) On the sync page, we need two small square icons a little like Dropbox does.

1) One showing "file sent".
2) One showing "file not sent yet, still in queue".

Julian, you were volunteering for this at one stage. Do you still have time?

Yes. Happy to assist. Should attatch images to this issue?

I'll start workin on them ASAP

Do we know the pixel size and resolution needed for retina apps?

Julian

Ignore last reader on sizing. Just see. Specs listed above.

Julian

Hi, Julian

iPhone 3GS: 320 x 480
Retina screen: 640 x 960

Attached for perusal are the mockups of 3 potential app icons. I have attached them in three variations. Let me know which, if any, are preferred and any other feedback as needed.

Julian

App logo on white background.

App logo on grey background.

App logo on orange background.

I like the orange-on-orange - can't have too much orange!

Note that you don't need to do all the shiny stuff for the main icon, iOS does that automatically.

I know..was more about accurate mockup. Seeing what it looked like in a final version. My vote is also on the orange as it is a colour closely aligned with the brand. WOuld be instantly recognisable on an ios screen

Here is a first draft.OK,even I think way to much orange.

Are we happy however with the logo ideas or are they off the mark. I will continue to refine the design.

Funky! The current stripy background might be a bit distracting, that's all.

Hi, Julian

How is going with the icons and images?

Having re-read the brief and been in a better "design" state of mind I have designed a new mockup. Please give thoughts. How do you want the files? Is the photoshop files sufficient or do you need each element attached individually?

Julian

Attached is a new mockup focusing on more white space and cleaner icons.

Does this app have a name yet? The one I added is purely for the sake of the mockup. Also thought showing the status of the host server was a neat idea. Again, just added for the mockup however.

I have also created all the icons specified on the docs, not just the four needed now. This should help prep us for the future

Hi Julian

Better attach each element individually if it's not difficult.

Thanks!

Regards,
Dongsheng

New design looks awesome.

But one thing is missing, we will have a button on the bottom to syncing data, when you offline and try to upload a file, moodle app will store files in temp area, when you come online, that sync button will start to flash.

Dongsheng

this is a mockup of the upload screen.

Here is the upload screen again but now with a design for the navbar to sit within.

This is the mockup for the audio recorder. The circle is an audio meter that lights up as they talk to gauge audio levels

oops..Ignoire last audio mockup image.I uploaded a draft by mistake. Attached is the final image

Attached is current version of the mockup in PSD form. You will need the "Soul Papa" font installed on your system. Each of the screens is separated into a folder of layers.

Attached is the PSD of the moodle app icon in various sizes.

I just had a look before going to my next trip, nice mockups! thanks Julian.

PS: dongsheng, on my iPhone 3G I tried to install the last test app from mobile.moodle.net, the cert was installed, the app was downloaded ("load") but when the app is installing, I have an error message "Unable to install this app". No idea why I didn't look further (maybe the archive is on 4.3? Or maybe it's because I don't have a sim card in my phone). Anyway, I'll try back when I'm in new york. I read the tracker issues, you seem to do very well. Good luck.

Jerome, have you updated the certificate on mobile.moodle.net? I updated the certificate to adding more devices.

I am going there, found a few problem:

1. the psd file is 320x480, but on iphone, height should minus 20 (the height of status bar), therefore, it should 320x460
2. I need another action icon for sync button
3. the bottom bar, there are some technical difficulties to lose the top round corners, I still think it's possible, I will find out more tomorrow.

I re-assign this issue to myself.

Everything in mockup is doable exception the volume meter in cycle, I am not sure how to do it, I may implement a horizontal one.

Another small thing is the moodle on top left, it's not doable to be above the nav bar, it's possible, but then it will cover the back botton, maybe we should display the logo in first page only.

Dongsheng

i assume the meter is just 20 images isnt it? Why not make the meter the one big image including the mic in the middle. Wouldnt that work?

Julian, I will invest more time on volume meter, the bottom bar has been fixed now, I just need two icons for syncing button: when there are items to be syncing, it should be in red(or other color), otherwise it's grey

What size should the sync button be?

You mentioned you need two. Is this two states? Can you describe and then Ill build ASAP.

Julian

Just had a look at the latest images - way to go Julian! Great work!

We may need to rework the dashboard layout a bit in future when we have more icons but it's fine for now.

Julian, I cropped this background from you psd file http://i.min.us/ibMKKk.png, it should be 320x460 (because of the sys status bar of iphone), I resized it, so it looks a bit different from your original design, I don't know if you could crop one without changing the logo shape? and I need another one sized 320x416, and a variation without the logo on left corner

Julian, I updated the app on mobile.moodle.net, it needs more work on bottom toolbar in recorder UI tomorrow. I cropped the icon from your psd file with the shining effect, can you please create one for me without the effect because xcode will do that, the icon size will be 57x57 and 114x114

To remove the glossy effect we'll add to the Moodle-info.plist:

<key>UIPrerenderedIcon</key>
<true/>

However I think it would be better to have a icon without glossy effect at all, I'll see if I can revert it from the PSD history

done it, easy

I attached a little psd revised for photoshop noob
To create an image:
1- hide all layer that concerned other picture that the one you want
2- select tool, all around the picture
3- edit > copy merged
4- Create new image and past the selection
5- save for web (it could seems white background first but it should be transparent)

Thanks to Sam H. for the tutorial

I guess we can mark this issue as resolved now, thanks Julian for the design.