Uploaded image for project: '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

      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.

        Gliffy Diagrams

          Attachments

          1. app_icons.jpg
            app_icons.jpg
            18 kB
          2. audio_mockup.jpg
            audio_mockup.jpg
            28 kB
          3. audio_mockup.jpg
            audio_mockup.jpg
            28 kB
          4. iOS Simulator-1.jpg
            iOS Simulator-1.jpg
            32 kB
          5. mockup_new.jpg
            mockup_new.jpg
            35 kB
          6. mockup 2.psd
            1.16 MB
          7. moodle app logo.psd
            984 kB
          8. moodle app logo - revised.psd
            970 kB
          9. orange_on_grey.jpg
            orange_on_grey.jpg
            42 kB
          10. orange_on_orange.jpg
            orange_on_orange.jpg
            44 kB
          11. orange_on_white.jpg
            orange_on_white.jpg
            39 kB
          12. upload_mockup_navbar.jpg
            upload_mockup_navbar.jpg
            21 kB
          13. upload_mockup.jpg
            upload_mockup.jpg
            21 kB

            Issue Links

              Activity

              jerome Jérôme Mouneyrac created issue -
              jerome Jérôme Mouneyrac made changes -
              Field Original Value New Value
              Fix Version/s Sprint to 2.1 [ 10651 ]
              jerome Jérôme Mouneyrac made changes -
              Summary Theme the app New images for the app
              jerome Jérôme Mouneyrac made changes -
              Assignee Jerome Mouneyrac [ jerome ] Martin Dougiamas [ dougiamas ]
              jerome Jérôme Mouneyrac made changes -
              Priority Minor [ 4 ] Blocker [ 1 ]
              Hide
              dougiamas 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
              dougiamas 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".
              dougiamas Martin Dougiamas made changes -
              Summary New images for the app Create images for major functions in 1.0 app
              Hide
              dougiamas Martin Dougiamas added a comment -

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

              Show
              dougiamas Martin Dougiamas added a comment - Julian, you were volunteering for this at one stage. Do you still have time?
              Hide
              trogdor 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
              trogdor 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
              trogdor Julian Ridden added a comment -

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

              Julian

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

              Hi, Julian

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

              Show
              dongsheng Dongsheng Cai added a comment - Hi, Julian iPhone 3GS: 320 x 480 Retina screen: 640 x 960
              Hide
              trogdor 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
              trogdor 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
              trogdor Julian Ridden added a comment -

              App logo on white background.

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

              App logo on grey background.

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

              App logo on orange background.

              Show
              trogdor Julian Ridden added a comment - App logo on orange background.
              trogdor Julian Ridden made changes -
              Attachment orange_on_orange.jpg [ 24071 ]
              Hide
              dougiamas 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
              dougiamas 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
              trogdor 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
              trogdor 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
              trogdor 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
              trogdor 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.
              trogdor Julian Ridden made changes -
              Attachment app_icons.jpg [ 24078 ]
              Hide
              dougiamas Martin Dougiamas added a comment -

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

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

              Hi, Julian

              How is going with the icons and images?

              Show
              dongsheng Dongsheng Cai added a comment - Hi, Julian How is going with the icons and images?
              Hide
              trogdor 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
              trogdor 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
              trogdor 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
              trogdor 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
              trogdor Julian Ridden made changes -
              Attachment mockup_new.jpg [ 24229 ]
              Hide
              dongsheng Dongsheng Cai added a comment -

              Hi Julian

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

              Thanks!

              Regards,
              Dongsheng

              Show
              dongsheng Dongsheng Cai added a comment - Hi Julian Better attach each element individually if it's not difficult. Thanks! Regards, Dongsheng
              Hide
              dongsheng 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 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
              trogdor Julian Ridden added a comment -

              this is a mockup of the upload screen.

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

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

              Show
              trogdor Julian Ridden added a comment - Here is the upload screen again but now with a design for the navbar to sit within.
              trogdor Julian Ridden made changes -
              Attachment upload_mockup_navbar.jpg [ 24231 ]
              Hide
              trogdor 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
              trogdor 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
              trogdor Julian Ridden made changes -
              Attachment audio_mockup.jpg [ 24232 ]
              Hide
              trogdor Julian Ridden added a comment -

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

              Show
              trogdor Julian Ridden added a comment - oops..Ignoire last audio mockup image.I uploaded a draft by mistake. Attached is the final image
              trogdor Julian Ridden made changes -
              Attachment audio_mockup.jpg [ 24233 ]
              Hide
              trogdor 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
              trogdor 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.
              trogdor Julian Ridden made changes -
              Attachment mockup 2.psd [ 24234 ]
              Hide
              trogdor Julian Ridden added a comment -

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

              Show
              trogdor Julian Ridden added a comment - Attached is the PSD of the moodle app icon in various sizes.
              trogdor Julian Ridden made changes -
              Attachment moodle app logo.psd [ 24236 ]
              Hide
              jerome 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
              jerome 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 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 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 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 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 Dongsheng Cai made changes -
              Attachment iOS Simulator-1.jpg [ 24237 ]
              dongsheng Dongsheng Cai made changes -
              Assignee Martin Dougiamas [ dougiamas ] Dongsheng Cai [ dongsheng ]
              Hide
              dongsheng Dongsheng Cai added a comment -

              I re-assign this issue to myself.

              Show
              dongsheng Dongsheng Cai added a comment - I re-assign this issue to myself.
              dongsheng Dongsheng Cai made changes -
              Status Open [ 1 ] Development in progress [ 3 ]
              dongsheng Dongsheng Cai made changes -
              Link This issue has a non-specific relationship to MOBILE-47 [ MOBILE-47 ]
              Hide
              dongsheng 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 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
              trogdor 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
              trogdor 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 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 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
              trogdor 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
              trogdor 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
              dougiamas 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
              dougiamas 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 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 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 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 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 Dongsheng Cai made changes -
              Fix Version/s 1.0 [ 10542 ]
              Fix Version/s Sprint to 2.1 [ 10651 ]
              Hide
              jerome 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
              jerome 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
              jerome Jérôme Mouneyrac added a comment -

              done it, easy

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

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

              Show
              jerome Jérôme Mouneyrac added a comment - I guess we can mark this issue as resolved now, thanks Julian for the design.
              jerome Jérôme Mouneyrac made changes -
              Status Development in progress [ 3 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              marina Marina Glancy made changes -
              Workflow classic default workflow [ 97440 ] MOBILE Full Workflow [ 144057 ]

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    1/Jun/11