Visual Design Assignment
Visual Design Assignment
BACKGROUND: The attached wireframe (see next page) is for an iPhone instant messaging (IM) app, outlining the chat screen. The chat screen consists of the following elements: Presence icon of the person you are chatting with (hereon known as the contact) Name of the contact (Peter Parker) Back arrow taking the user to a list of his contacts Messages exchanged between the user and the contact User and contact avatars Message timestamp (indicating when a message was sent or received) Message state (see table next to the wireframe for all states) Input box for sending a message to the contact Button to send message to the contact THE OBJECTIVE: To translate the wireframe into an appealing user interface for either iOS (iPhone) or Android that conforms to iOS Human Interface Guidelines or Android Design Guidelines. Your final visual design should be for either retina (640x960px - iPhone) resolution or for XHDPI resolution (720x1280px - Android), and should ideally include all elements shown the wireframe. Please do not include the actual iPhone/Android handset in your visual design, only the original app screen as per the specified dimensions. Feel free to use a colour scheme and a visual style of your choice and make assumptions as necessary. DELIVERABLES: Final screen design in PNG format Original source file in PSD format RESOURCES YOU CAN USE: 1. http://pttrns.com/ 2. http://androidpttrns.com/ 3. http://www.lovelyui.com/ 4. http://androidniceties.tumblr.com/ 5. http://www.androiduipatterns.com/ 6. http://mobile-patterns.com/ 7. http://www.iphonescreendumps.com/ 8. http://meer.li/
WIREFRAME: