0% found this document useful (0 votes)
83 views

Visual Design Assignment

The document provides background information and objectives for a visual design assignment to translate an iPhone instant messaging app wireframe into an appealing user interface design. The wireframe outlines the chat screen elements including presence icon, contact name, back arrow, messages, avatars, timestamps and message states. The objective is to design the screen for either iOS or Android following the respective guidelines. Deliverables include the final PNG design and original PSD source file. Suggested resources for design inspiration are also provided.

Uploaded by

sumitvfx87
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
83 views

Visual Design Assignment

The document provides background information and objectives for a visual design assignment to translate an iPhone instant messaging app wireframe into an appealing user interface design. The wireframe outlines the chat screen elements including presence icon, contact name, back arrow, messages, avatars, timestamps and message states. The objective is to design the screen for either iOS or Android following the respective guidelines. Deliverables include the final PNG design and original PSD source file. Suggested resources for design inspiration are also provided.

Uploaded by

sumitvfx87
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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:

You might also like