P01: Mockups

Description

In interface design, an adaptive layout is one that changes the size, layout and visibility of interface elements in order to adapt to the size, orientation and resolution of the screen or device the interface is being view on. This assignment

This project is to be completed individually.

Due

Before your lab time on Jan 23.

Worth

10% of your final grade.

Instructions

There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully.

Starting Jan 9

In interface design, an adaptive layout is one that changes the size, layout and visibility of interface elements in order to adapt to the size, orientation and resolution of the screen or device the interface is being view on. This week's assignment is to design and prototype a social media profile page and how it will appear at three different screen sizes listed below. Remember that we are able to scroll. The dimensions below should give you a reference point for where to start, but you can safely assume that your user can scroll around the display.

  1. Monitor — 16:10 ratio, 1680 x 1050 pixels.
  2. Tablet — 4:3 ratio, 1024 x 768 pixels.
  3. Smartphone — 9:16 ratio, 640 x 1136 pixels.

For all three sizes your design must contain the following elements:

For some (or all) of the sizes your design may contain some (or all) of the following elements:

Due in your Jan 16 lab:

1 set of completed screens, printed (at reasonable scale) for lab.

Starting Jan 16

While wireframes and mockups allow us to plan the layout and features of an interface in great detail they do not always give us a clear sense of how the user will interact with these features, nor are they an ideal format for testing such interactions with users. Tools such as Axure, Invision, and others allow us as designers to create interactive prototypes that allow us to better design and test interactions without needing to write code. Proficiency with this tool is an essential part of later assignments in this course and so for this week we will be making use of Axure to expand the design of our social media pages while stretching our creative brains with some simple storytelling for content.

Create a multi-linear, linked narrative that is experienced via an interactive prototype of your social media site which can be used via a web browser. Your narrative must have at least 12 story steps (which will typically be specific actions or choices performed by your user) and at least 3 different endings. You should design your narrative to fit the context of the social media site you designed in week 1. The design will form a “representation model” with which to present your narrative and thus it will likely play out through in-site chat conversations, photos, status updates, error messages or other means of your choosing.

Suggested steps for your process this week:

  1. Write out a narrative and map out how it fits together in a flow-chart.
  2. Quickly prototype any extra pages or interface elements as necessary.
  3. Build your interactive narrative using Axure and generate the prototype.
  4. Upload your interactive prototype to your SFU webspace.
  5. Test out your prototype on others to ensure that the narrative holds.

Final Delivery

Final deliverables are due to Canvas before your Jan 23 lab and double-check all your submitted files to ensure they can be opened. Final submission is 1 URL to your prototype.

Remember that Information Design is a design course, and as a result the submitted package of materials should be considered just as much as any other design you may work on.

Grading Rubric

Your project will be graded on the following criteria, a more detailed rubric is available on the course pages.

  1. Process — weekly deliverable checks (1pt)
  2. Design — quality of final interface design in standard considerations (legibility, hierarchy, efficiency/balance, consistency, feasibility) as well as relation to the narrative and adaptive nature of the prototype (9pts)