Interactive Media # 1

Aka DES261

Week # 4

Let's go over your Assignment

Complete the first 3 planes of UX by next week. Refer to the notes (https://docs.google.com/document/d/14rUu7KZoeXuv7Dp6rdX2Pl7YFkyKM600t4ct4ACaZmk) for a description of each. Once you're done, email me a .txt file with your assignment to opatel@mtsierra.edu.

Strategy
Scope
Structure

Submit your assignments as a .txt file and email it to opatel@mtsierra.edu.

Quiz time!

Let's go over the Project

Now that you have Strategy, Scope, and Structure, we're going to start working on the Skeleton.

Skeleton Plane

Here is an explanation of the skeleton as described by Jesse James Garrett, "Beneath that surface is the skeleton of the site; the placement of buttons, tabs, photos, and blocks of text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency--so that you remember the logo and can find that shopping cart button when you need it."

Wireframing

OK, so that basically just means we're extending the functionality we've already started building. How we do that is by creating a wireframe.

OK, so what's a wireframe?

Well, tutsplus(http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399) does a great job of explaining what a wireframe is, "Wireframing is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even copy."

I still don't get it

No problemo, this is why we have examples! Here are some good examples of wireframes I found online:

Drawn using online tools:

https://flic.kr/p/89qQcz
https://flic.kr/p/7h5y9W

Drawn freehand:

https://flic.kr/p/aJdb1i

Note: It's better to use a tool such as wireframe.cc rather than drawing. The benefits are:

Much easier to make changes
Easily shareable
Clearly readable

How to Wireframe

http://www.usability.gov/how-to-and-tools/methods/wireframing.html

What not to include: Colors and images. Also, be sure to use only one font.

What to generally include (if you have them): Logo, Search field, Breadcrumb (http://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/), Headers (including page title as the H1 and subheads H2-Hx), Navigation systems (including global navigation and local navigation), Body content, Share buttons, Contact information, Footer

Tools for Wireframing

https://wireframe.cc/
1. To use, just start drawing! However, you can only save one page at a time using the free version. I'll demo how to use this in class.
Adobe Photoshop

When Wireframing, incorporate elements of UI and UX

Make sure you use what you learned from your UI assignment into your wireframe. That is, keeping in mind the Project summary, Goals, Target Audiences, Messages, and Competition

Work Time!

Work on implementing the fourth plane of UX. Refer to the notes (https://docs.google.com/document/d/14rUu7KZoeXuv7Dp6rdX2Pl7YFkyKM600t4ct4ACaZmk and http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/02/l02_02.html?m=1) for a description of what the skeleton is. Be sure to create a minimum of 3 pages or a single-page site with 3 pages of content. Once you're done, email me a .txt file with your assignment to opatel@mtsierra.edu.

Assignment # 4:

Continue working on your project and implementing what we've learned in user experience. Complete the fourth plane of UX by next week. Refer to the notes (https://docs.google.com/document/d/14rUu7KZoeXuv7Dp6rdX2Pl7YFkyKM600t4ct4ACaZmk and http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/02/l02_02.html?m=1) for a description of what the skeleton is. Be sure to create a minimum of 3 pages or a single-page site with 3 pages of content. Once you're done, email me a .txt file with your assignment to opatel@mtsierra.edu.

Strategy
Scope
Structure

Reading

Optional: http://graphicdesign.stackexchange.com/questions/30860/what-is-the-difference-between-wireframes-and-mockups

http://blog.teamtreehouse.com/theres-more-than-one-way-to-mockup-a-website