Interactive Media # 1

Aka DES261

Week # 5

Let's go over your Assignment

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.

Quiz time!

Let's go over the Project

So, now that we have the Strategy, Scope, Structure, and Skeleton done, we can now move onto the Surface plane.

Surface Plane

Here is an explanation of the surface as described by Jesse James Garrett, "On the surface you see a series of Web pages, made up of images and text. Some of these images are things you can click on, performing some sort of function such as taking you to a shopping cart. Some of these images are just illustrations, such as a photograph of a book cover or the logo of the site itself."

Comprehensive Design Layout (AKA Comp)

What is that?

Well, DrumBeat Marketing(https://www.drumbeatmarketing.net/seo-blog/what-is-a-design-comp) has a good explanation, "A design comp is the last part of the designing phase and is the closest draft to the final product."

Basically, your web design comp is going to be a reflection of how your web application is going to look like. We already have our skeleton in place, now we just need to flush it out with images, colors, fonts, etc.

Note: The article also talks about the initial parts of the design comp process as wireframing in the final part of the article, which is different than what we're learning. Ignore the final part.

Examples of Comps

My own examples:

https://www.flickr.com/photos/129051520@N04/

Tools for Comps

Adobe Photoshop
Adobe Illustrator

How to Create a Comp

1. Pick a tool for developing your comp

2. Open up your skeleton

3. Using your skeleton as a key, add all of the elements to your comp to make it a replica of the final product.

Essentially, you're just filling out your skeleton.

Note: Be sure to create one for mobile, tablet, and desktop

Work Time!

Work on implementing the final plane of UX. Remember, the surface is just a reflection of the final product. Make sure you create at least 3 pages per layout (3 mobile, 3 tablet, 3 desktop). The content would be the same across all 3 layouts, only the styling and positioning might change.

Assignment # 5:

Implement the final plane of UX. Remember, the surface is just a reflection of the final product. Make sure you create at least 3 pages per layout (3 mobile, 3 tablet, 3 desktop). The content would be the same across all 3 layouts, only the styling and positioning might change.

Reading

http://www.w3.org/standards/webdesign/htmlcss

https://www.youtube.com/watch?v=xIOeccZZ-5g