Interaction: Core Studio

Topics

• In class blog work
• Production Graphics

Inspiration

Production Graphics

Once you have final design comps, you need to turn those parts of them that will be graphics in your html. The first thing to do is determine what parts of the comp should be graphics.

Elements that should NOT be graphics:

• Solid background colors
• Any text that can be rendered as live / html text (ie – anything that is a web-safe font)

Elements that SHOULD be graphics:

• Background images that are not solid colors
• Text that cannot be rendered as live/html text (logos, buttons, headers, etc)
• Photos, design elements, etc.

There are two methods to create production graphics from your comps:

Using the Slice Tool

This tool, which is available in both the Photoshop and Illustrator (although I find it much easier from PS) toolboxes, looks like an X-acto knife. It allows you to “slice” your comp into pieces and then output them as separate production graphics using the “Save for Web and Devices” option.

How to from Adobe

Duplicating Layers into a New Document

This is actually my preferred method for creating production graphics. Here’s a quick guide of how to do this from Photoshop:

1. Select the layer or group of layers that you want to create as a separate graphic
2. Choose “Duplicate Layer” from the Layer Panel menu:
3. A dialog box will pop-up. Choose “New” as the document destination, and give it a name. Once you hit “OK”, a new document will open with the layers that you selected.
4. You may need to trim or crop the new document down to eliminate any extra space in the new image. Once it is the proper size, you can save it into the proper format (see next section below).

Exporting your Production Graphics

Regardless of which method you use to prepare your comps to make production graphics, you should always export them out of Photoshop or Illustrator using the “Save for Web and Devices” option:

This brings up a window that has lots of options for saving out Web ready graphics. It automatically creates 72dpi images, so you don’t have to worry about that. When picking the image format to use, consider the following:

• JPEG is best for photos or other images with a lot of colors / gradients. They cannot be saved with transparent backgrounds
• Gif is best for limited palette graphics, like logos, and those requiring a transparency to be placed on a single color page background
• PNG is best for graphics with a transparent background to be placed against a multicolor page background, but you should know that they don’t work properly in IE 6

Production Graphics for Navigation Buttons with Rollover States

If your redesign calls for a nav element where the menu items call for a different appearance when you mouse over them (a “rollover”), you can set this graphic up as a single image. Here’s an example from the Apple site:

Semantic Markup

Using semantic markup means coding your page in such a way that the tags are used as intended, and “machine-readable” in some way, making the content of your site more easily indexed, searchable, and repurposed. Here’s a good article on HTML5, the next version of HTML that is attempting to be more semantic than ever:

A Preview of HTML5

Homework

For Thursday

1. Finalize the design comps for all your pages and post JPEGs of them to your blogs
2. Create the production graphics for your homepage. If your design includes a nav element that has rollover states (see above) , create a single standalone graphic like the Apple example, and use the CSS sprite / image replacement technique to create your graphic.
3. HTML/CSS for your homepage

Midterm Reviews

I will be sending your midterm reviews to you by Friday. Your grade will include work on your blog, so make sure that you have all the assignments and the documentation of your project posted to your blog. If one of your group members is posting all of the work, make sure that you at least link to their blog posts from yours.

Topics:

• Homepage Design Reviews

Homework

1. By Tuesday, redesign your homepage based on today’s critique and create design comps for the rest of the pages of your site, post them as jpegs to your blogs, and be prepared to discuss them next class. Each team member should create a new homepage design based on the choice you made today, and at least two other pages.

Class, as I said on Thursday, for next Tuesday do another round of the Wireframes, and we’ll cover the stuff we were going to do today then!

Topics

• What’s an Information Architect
• Why do we need one?
• What does an IA do?
  • Designing Navigation Systems
  • Creating Wireframes
  • What does an IA do?

• Reasearch Presentations 3
  • Katy
  • Ryan
  • Seung Won
  • Vicky
  • Victor

What’s an Information Architect

In the context of a Web development team, the IA is responsible for defining the organization, labeling, and navigation structure of the Web site.

Why do we need an Information Architect?

Notice the “Architect” part of the title? Imagine that instead of building a Web site, you were building a house. Would you try to build a house without a blueprint? The IA provides the blueprint that the designers and developers work from to build the house of your Web site.

What does an IA do?

An IA takes the requirements document or the creative brief and turns the needs of the project into functional requirements for the new site, we’ve already started this process by creating the Content Inventory and the Site Map. The next step is a set of Wireframes that will serve as that blueprint that I mentioned above.

For more information about Information Architecture and for some really great tools and resources, check out:

• The Information Architecture Institute
• Boxes and Arrows

Designing Navigation Systems

This boils down to some basic principles. At any point in the site, the user should be able to instantly and intuitively understand:

• Where they are
• Where they have been
• Where they can go

Seems simple, right? Then why is it so hard to find what you are looking for on so many Web sites?!

Types of Navigation

• Primary or Global - This is a persistent element that appears in the same place in the same way on every page of your site (with rare exceptions)
• Secondary of Local – This is navigation that is related to the particular section of the site that the user is currently again
• Contextual – These are hyperlinks or buttons that are place contextually with the content of a page
• Utility – These are links to parts of your site that don’t fit within the main hierarchy. Examples can include Login or User Registration, Privacy Policies or other legal information, Contact informations
• Search – All the above support browsing behavior of your users by encouraging them to explore your sites. But sometimes they just want to cut to the chase, type in a keyword or two, and get a list of results.

Here’s a short article that runs down these concepts in a little more detali:

• Site Navigation: A Few Helpful Definitions

And another that talks about different modes used in exploring a Web site:

• Four Modes of Seeking Information and How to Design for Them

Conventions

As designers, we feel pressure to constantly innovate. And we should! But when designing a Web site, we need to consider that our users spend most of their time on other peoples sites. On the most popular sites, highly paid professionals have spent countless hours trying to figure out how to make their site more usable. Certain conventions have arisen, and users are used to them. The bottom line, then, is don’t reinvent the wheel unless you need a new way to roll.

If you want to know how the big guys are doing things, here’s a list of the top 500 sites. Stands to reason they must be doing something right:

Alexa Top 500 Sites

Look at most of these Web sites, and you will see some that they tend to be very similar in their layouts

Design Patterns

Here are some great resources for common interaction design patterns that IAs and Web designers have worked out in the nearly 20 years that we’ve been doing this stuff:

• Welie.com
• 40+ Helpful Resources On User Interface Design Patterns
• UI Pattern Factory
• UX Design Patterns
• Yahoo! Design Pattern Library

And let’s look a few very different sites and see how they handle these IA challenges:

• Apple
• Wikipedia
• Flickr

Creating a Sitemap

The Sitemap is a visual diagram of the structure and flow of the proposed site.

Creating Wireframes

Visual Hierarchy

As you are going to find out in the reading, it isn’t enough to just put your navigation in the right general place. You need to create a visual hierarchy in your page. This is going to be the primary goal of your wireframes, to organize your information visually on each page of the site, and to give each element on the page the proper emphasis.

General Template

The first wireframes you should create are those that define the general layout of your site, with the persistent elements placed roughly where they will go. There should be one wireframe for each general layout that your page will have. Commonly you will have one for the homepage and one for the secondary pages, but this varies.

Page Template

Next you should create a wireframe for every major page type of the site. This time, be specific about the information on the page, using representative content that is as close as the final as possible. The more detailed these wireframes are, the easier the rest of your development process will be.

Functionality Notes

These are instructions that go with the wireframes to describe how the functionality of the page will work – including hyperlinks, buttons, forms, anything that requires user interaction.

Here’s a list of free wireframing tools. I haven’t used any of them, but, hey, they are free!

• 10 Completely Free Wireframe and Mockup Applications

Reading

Don’t Make Me Think by Steve Krug – Chapters 3-6 Do this reading before the homework, it will really help you out, and the chapters are short! (It’s not a great scan, so if you have the actual book, it’ll be an easier read)

Homework

1. Create a sitemap, general wireframes, page wireframes, and functionality notes for the pages of your site that you will be redesigning and post them to one of your group’s blog or Google docs as a single PDF.
2. Create blog posts for the “Map Your Digital Life” and “Redesign An Everyday Object” assignments and upload images of them to the posts.

Topics

• Research Presentations
• Usability and User Experience
• Project #2: Discovery Phase, Part 2

Research Presentations Group 1

Usability and User Experience

Project #2: Collaborative Redesign, Discovery Phase, Part 1

Discuss group site choices, target users, and competitors.

Reading

Don’t Make Me Think by Steve Krug Chapter 2 and Chapter 9 - link to PDF on this page

Homework

Project #2: Discovery Phase, Part 2

Due next Tuesday

1. User Experience Testing
   • Identify 3-4 tasks a user can perform on your site
   • For each test user, using the test script here as a guide, have them attempt to perform the tasks. Watch them do this, and take notes on where they get hung up in the process. They can verbalize what they are thinking as they explore the site, but you should try not to help them. If they need prompting, ask them questions rather than giving them instructions. You should also do a screencast of the test – record the activities on the computer screen using Screenflow.
   • Once they are done exploring the site, ask them the questions on the User Experience Survey (create your own!) or allow them to fill it out. If you are doing the test in person, it can be better to ask them so you can get them to elaborate if they are not clear.
2. Competitive Analysis
   • Compare your site and 3 competitor sites with this Competitive Analysis form