Showing posts with label Low-Content Wireframes. Show all posts
Showing posts with label Low-Content Wireframes. Show all posts

11.11.2009

Group Discussion : Wireframes

In your small assigned groups share your user goal along with the sketches/storyboards showing ideas for interaction in your online environment. When sharing your sketches be sure to articulate the reason why you made a particular design decision.

"One important difference between interaction design patterns and architectural design patterns is the concern of interaction design patterns not only with structure and organization of elements but
also with dynamic behaviors and changes in elements in response
to user activity."

About Face 3 pg. 156

As a group begin to identify patterns in the structure and organization of the environment as well as patterns in object and user behaviors. Ask the following questions of your own work and your peers:
-are the patterns being set up visually consistent?
-are the behaviors consistent?
-do the patterns support the goal of the user?

Working with the notion of "elegant interaction design" from
the About Face 3 reading ask the following questions:
-are there any elements or behaviors that can be taken away?
-is every element and behavior necessary for the user
to meet their goal?

11.04.2009

MSU CAMP: Wireframe

by Hilda Lopez
For academic purposes only.


Wireframe Final
Wireframe Rough Draft 2
Wireframe Rough Draft 1

Douglas J Salon: Wireframe

by Jarod Lew
For academic purposes only.

Wireframe Final

Wireframe Rough Draft 2
Wireframe Rough Draft 1

East Lansing Food Co-op: Wireframe

by Emily Cumpata
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Flat, Black and Circular: Wireframe

by Matthew Bambach
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

MSU International Center Food Court: Wireframe

by Lei Zhang
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Meijer: Wireframe

by Jill Shuberg
For academic purposes only.


Wireframe Final
Wireframe Rough Draft 2
Wireframe Rough Draft 1

MSU Bowl: Wireframe

by Cleveland Thrasher
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

MSU Dairy Store: Wireframe

by Marjorie Verlin
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

MSU Planetarium: Wireframe

by Nate Sharp
For academic purposes only.


Wireframe Rough Final
Wireframe Rough Draft

MSU Sparty Stores: Wireframe

by Meneka Jayawardene
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Peace Corps: Wireframe

by Chad Powell
For academic purposes only.


Wireframe Rough Draft

Peckham: Wireframe

by Cory Pitzer
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Wharton Center: Wireframe

by Kristina Moore
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Wharton Center Usher: Wireframe

by Alina Tredeau
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

Wild Goose Inn: Wireframe

by Brittany Jensen
For academic purposes only.


Wireframe Final
Wireframe Rough Draft

11.02.2009

Project 2: Part 3: Low-Content Wireframes & Style

Project 2: Part 3: Low-stakes Wireframes & Style

Now that you have developed a user persona with a specific goal, begin to sketch how your user meets that goal in an online environment. Focus on the interactions within the environment: what the user is doing, how the system/environment responds or behaves in response to the user's actions. Annotate that these interactions along with ideas of what the content will be. These annotations must be clear enough so that one can read your wireframe notes and understand what is happening without you present. You can choose to make analog or digital wireframe sketches.

You are NOT working on what the environment "looks like" yet. These are low-content wireframes that begin to layout user paths, system behaviors, and patterns of interaction. The style and content will come in the next round of storyboards.

After you send you wireframe to me for review, you can start to think about the "look and feel" of the environment. Develop a mood/style board that gives a feeling of how your environment will be designed. Show typography, illustration and photography style as well as color palettes.