Moodle Mobile
  1. Moodle Mobile
  2. MOBILE-42

Create images for major functions in 1.0 app

    Details

    • Affected Branches:
      MOODLE_10_STABLE
    • Fixed Branches:
      MOODLE_10_STABLE
    • Rank:
      21024

      Description

      1. Create some images normal/HD
      2. replace images in the app:

      • dashboard
      • upload section (buttons, background image)
      • sync page (file sent or not)
      • Moodle app icon

      Test the app on 3GS and iPhone4 HD. Also try it on iPad.

      1. mockup 2.psd
        1.16 MB
        Julian Ridden
      2. moodle app logo.psd
        984 kB
        Julian Ridden
      3. moodle app logo - revised.psd
        970 kB
        Jérôme Mouneyrac
      1. app_icons.jpg
        18 kB
      2. audio_mockup.jpg
        28 kB
      3. audio_mockup.jpg
        28 kB
      4. iOS Simulator-1.jpg
        32 kB
      5. mockup_new.jpg
        35 kB
      6. orange_on_grey.jpg
        42 kB
      7. orange_on_orange.jpg
        44 kB
      8. orange_on_white.jpg
        39 kB
      9. upload_mockup_navbar.jpg
        21 kB
      10. upload_mockup.jpg
        21 kB

        Issue Links

          Activity

          Jérôme Mouneyrac created issue -
          Jérôme Mouneyrac made changes -
          Field Original Value New Value
          Fix Version/s Sprint to 2.1 [ 10651 ]
          Jérôme Mouneyrac made changes -
          Summary Theme the app New images for the app
          Jérôme Mouneyrac made changes -
          Assignee Jerome Mouneyrac [ jerome ] Martin Dougiamas [ dougiamas ]
          Jérôme Mouneyrac made changes -
          Priority Minor [ 4 ] Blocker [ 1 ]
          Hide
          Martin Dougiamas added a comment - - edited

          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".

          Show
          Martin Dougiamas added a comment - - edited 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".
          Martin Dougiamas made changes -
          Summary New images for the app Create images for major functions in 1.0 app
          Hide
          Martin Dougiamas added a comment -

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

          Show
          Martin Dougiamas added a comment - Julian, you were volunteering for this at one stage. Do you still have time?
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Hide
          Julian Ridden added a comment -

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

          Julian

          Show
          Julian Ridden added a comment - Ignore last reader on sizing. Just see. Specs listed above. Julian
          Hide
          Dongsheng Cai added a comment -

          Hi, Julian

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

          Show
          Dongsheng Cai added a comment - Hi, Julian iPhone 3GS: 320 x 480 Retina screen: 640 x 960
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Hide
          Julian Ridden added a comment -

          App logo on white background.

          Show
          Julian Ridden added a comment - App logo on white background.
          Julian Ridden made changes -
          Attachment orange_on_white.jpg [ 24069 ]
          Hide
          Julian Ridden added a comment -

          App logo on grey background.

          Show
          Julian Ridden added a comment - App logo on grey background.
          Julian Ridden made changes -
          Attachment orange_on_grey.jpg [ 24070 ]
          Hide
          Julian Ridden added a comment -

          App logo on orange background.

          Show
          Julian Ridden added a comment - App logo on orange background.
          Julian Ridden made changes -
          Attachment orange_on_orange.jpg [ 24071 ]
          Hide
          Martin Dougiamas added a comment -

          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.

          Show
          Martin Dougiamas added a comment - 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.
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Hide
          Julian Ridden added a comment -

          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.

          Show
          Julian Ridden added a comment - 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.
          Julian Ridden made changes -
          Attachment app_icons.jpg [ 24078 ]
          Hide
          Martin Dougiamas added a comment -

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

          Show
          Martin Dougiamas added a comment - Funky! The current stripy background might be a bit distracting, that's all.
          Hide
          Dongsheng Cai added a comment -

          Hi, Julian

          How is going with the icons and images?

          Show
          Dongsheng Cai added a comment - Hi, Julian How is going with the icons and images?
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Julian Ridden made changes -
          Attachment mockup_new.jpg [ 24229 ]
          Hide
          Dongsheng Cai added a comment -

          Hi Julian

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

          Thanks!

          Regards,
          Dongsheng

          Show
          Dongsheng Cai added a comment - Hi Julian Better attach each element individually if it's not difficult. Thanks! Regards, Dongsheng
          Hide
          Dongsheng Cai added a comment -

          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

          Show
          Dongsheng Cai added a comment - 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
          Hide
          Julian Ridden added a comment -

          this is a mockup of the upload screen.

          Show
          Julian Ridden added a comment - this is a mockup of the upload screen.
          Julian Ridden made changes -
          Attachment upload_mockup.jpg [ 24230 ]
          Hide
          Julian Ridden added a comment -

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

          Show
          Julian Ridden added a comment - Here is the upload screen again but now with a design for the navbar to sit within.
          Julian Ridden made changes -
          Attachment upload_mockup_navbar.jpg [ 24231 ]
          Hide
          Julian Ridden added a comment -

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

          Show
          Julian Ridden added a comment - This is the mockup for the audio recorder. The circle is an audio meter that lights up as they talk to gauge audio levels
          Julian Ridden made changes -
          Attachment audio_mockup.jpg [ 24232 ]
          Hide
          Julian Ridden added a comment -

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

          Show
          Julian Ridden added a comment - oops..Ignoire last audio mockup image.I uploaded a draft by mistake. Attached is the final image
          Julian Ridden made changes -
          Attachment audio_mockup.jpg [ 24233 ]
          Hide
          Julian Ridden added a comment -

          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.

          Show
          Julian Ridden added a comment - 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.
          Julian Ridden made changes -
          Attachment mockup 2.psd [ 24234 ]
          Hide
          Julian Ridden added a comment -

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

          Show
          Julian Ridden added a comment - Attached is the PSD of the moodle app icon in various sizes.
          Julian Ridden made changes -
          Attachment moodle app logo.psd [ 24236 ]
          Hide
          Jérôme Mouneyrac added a comment -

          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.

          Show
          Jérôme Mouneyrac added a comment - 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.
          Hide
          Dongsheng Cai added a comment -

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

          Show
          Dongsheng Cai added a comment - Jerome, have you updated the certificate on mobile.moodle.net? I updated the certificate to adding more devices.
          Hide
          Dongsheng Cai added a comment -

          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.

          Show
          Dongsheng Cai added a comment - 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.
          Dongsheng Cai made changes -
          Attachment iOS Simulator-1.jpg [ 24237 ]
          Dongsheng Cai made changes -
          Assignee Martin Dougiamas [ dougiamas ] Dongsheng Cai [ dongsheng ]
          Hide
          Dongsheng Cai added a comment -

          I re-assign this issue to myself.

          Show
          Dongsheng Cai added a comment - I re-assign this issue to myself.
          Dongsheng Cai made changes -
          Status Open [ 1 ] Development in progress [ 3 ]
          Dongsheng Cai made changes -
          Link This issue has a non-specific relationship to MOBILE-47 [ MOBILE-47 ]
          Hide
          Dongsheng Cai added a comment -

          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

          Show
          Dongsheng Cai added a comment - 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
          Hide
          Julian Ridden added a comment -

          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?

          Show
          Julian Ridden added a comment - 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?
          Hide
          Dongsheng Cai added a comment -

          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

          Show
          Dongsheng Cai added a comment - 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
          Hide
          Julian Ridden added a comment -

          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

          Show
          Julian Ridden added a comment - 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
          Hide
          Martin Dougiamas added a comment -

          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.

          Show
          Martin Dougiamas added a comment - 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.
          Hide
          Dongsheng Cai added a comment -

          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

          Show
          Dongsheng Cai added a comment - 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
          Hide
          Dongsheng Cai added a comment -

          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

          Show
          Dongsheng Cai added a comment - 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
          Dongsheng Cai made changes -
          Fix Version/s 1.0 [ 10542 ]
          Fix Version/s Sprint to 2.1 [ 10651 ]
          Hide
          Jérôme Mouneyrac added a comment -

          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

          Show
          Jérôme Mouneyrac added a comment - 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
          Hide
          Jérôme Mouneyrac added a comment -

          done it, easy

          Show
          Jérôme Mouneyrac added a comment - done it, easy
          Hide
          Jérôme Mouneyrac added a comment -

          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

          Show
          Jérôme Mouneyrac added a comment - 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
          Jérôme Mouneyrac made changes -
          Attachment moodle app logo - revised.psd [ 24641 ]
          Hide
          Jérôme Mouneyrac added a comment -

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

          Show
          Jérôme Mouneyrac added a comment - I guess we can mark this issue as resolved now, thanks Julian for the design.
          Jérôme Mouneyrac made changes -
          Status Development in progress [ 3 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]

            People

            • Votes:
              1 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development