TODAY

1)Module 5 and Module 6: how’s the juggling act? 2)What’s coming next? 3)Wireframes: What they are, how that all works4)Activity: Wireframes: We’re going to make some5)The Resources tab on the site: now with content! 6)Homework

Mod 5/Mod 6

This is a part of the semester where we have numerous projects going at once. How is everyone doing?

Remember, Mod 5 is due April 5th and Mod 6 is due April 14th.

Any general questions about either module?

Coming Soon

On Thursday, we will look at how to integrate things we didn’t make ourselves into our layouts. And you will work a bit more with the activity from today.

Next Tuesday, we will talk all about how to create interesting navigation for our sites.

Next Thursday, we will use mock-ups and wireframes to do your first usability test.

Wireframing

As you saw in the reading for today, a wireframe is a bare bones visual representation of a website (often with notes).

A wireframe can be created in a number of ways. But first, let’s look at an example.

Why Wireframe?

Wireframes are useful for a number of reasons:

1) They allow designers to organize their sites with simple tools (maybe just pencil and paper)

2) They serve sort of the same purpose as an outline for a piece of writing– arrangement before execution

3) They are easier to mock-up and share and/or compare than full sites

4) They are valuable tools for figuring out what the site requires in order to do what it needs to do

How to WF

There are numerous ways to wireframe. 1) Pencil/pen and paper2) Cut/paste with paper3) Photoshop, MS Word, Illustrator, etc.4) Wireframe specific software

A quick sketch, like the one above, can be an effective wireframe. This allows the designer to think about the design without needing, in the moment, to figure out precisely how to make the layout work (leaving the technical details for later). This could be done anywhere one has a pen (or pencil) and paper. You could scrounge up the supplies from our tables here.

Some designers like to wireframe by cutting and pasting (you could do this with photos, for example), or like the sample to the right, some use post-it notes to design sites (particularly sites that will be modular.

The advantage of using post-it notes for a modular design is that you can easily move the pieces around (just as you will, in theory, be able to online later).

I usually wireframe in Photoshop, because as I have shown you previously in class, I often usePhotoshop to build my graphic elements into a mock-up that I can then work from. The shape and text tools in Photoshop allow for quick wireframing, particularly if you are already comfortable with the software.

There are also web apps, like Cacoo.com (above) that allow for wireframing entirely in a web browser window. These can be easily shared online, and allow for collaborative work. You can login to Cacoo through Facebook (and it opens a little chat window for you so you could, in theory, share a wireframe and chat with the person you’re working with/for while you both look at it).

Which one?

It doesn’t really matter HOW you wireframe. What matters is that you go through that stage of development and work to understand the site before you begin the act of coding.

You should use the wireframing technique that lends itself best to your process. If you are comfortable drawing, use pen and paper. If you like a particular piece of software, use that. Do what feels “right.”

Mock-ups

We will talk a bit later in specific terms about mock-ups, but if you think back to the web designs I’ve had you try to convert from Photoshop to code, those are mock-ups. They add color, specific fonts, and images.

Here’s an example. You’ve seen it before.

Activity

Last week, I gave you a set of directives to “build a site” from scratch. I specifically didn’t ask you to wireframe, because I wanted to see how you would approach it.

You did just fine for a first try, but as I circulated to ask questions, I noticed that you spent a great deal of time thinking through the layout (what you’d do with a wireframe).

So I’m going to give you a different set of directives.

Go to the site

And grab the “New site” PDF from the first post on the main page.

I want you to read it over, then partner up and create these two things:

1) Wireframes for the major pages needed for the site

2) A color palette (including suggestions for body background and text colors)

I will ask to see

…your work, but you will be keeping it. On Thursday, we will expand on what you’ve started here. The client will have a new request to add to things.

Homework

For next class, I want you to put your focus on finishing up on Module 5.

In class, we will look more at this activity and we will talk about how to incorporate media and plug-ins into our designs.

Your Twitter question: what style of wireframing works best for you? Why?