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

        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