TODAY1) The Web Project: where we stand2) The Web Project: our way in3) Wireframing: how it works4) Wireframing activity one: reverse engineer5) Wireframing activity two: Build a site in

Photoshop6) Homework and from here forward…

So, starting off…I have spoken with Genesis about the web project. We are currently in a state of what I’m going to call “flux.” I have their desires, but we’re having a little bit of trouble determining where we’re going to stick the page.

More in that next week. :) For now, we can start looking at how we’ll be working on the web with a little bit of excitement we call wireframing.

Starting: wireframesSo you did some reading for today. Let’s start from there.

What is a wireframe?

In short…… a wireframe is like a website blue print.

This super-generic PowerPoint is a barebones reduction of what a wireframe would look like for my typical weekly PPT presentation. Let me take it a step further.

Headline in Arial BlackContent in Calibri, as close to 32 point as possible.

Usually too much content for a slide because Dr. Phill is wordy.

When making a website… a wireframe allows you to envision the underlying architecture and think about the content.

This can be the first step to hand-coding the CSS for a page, or it can lead to a more intricate wireframe that could be used, in concert with software like Dreamweaver, to build a page from the more detailed wireframe.

Example time.

LOOK FAMILIAR?

AH HA! I GET IT!

Activity one: reverse it

This one is pretty simple.1)Find a website you like2)Open Photoshop3)Make a canvas the size of your screen (roughly)4)Draw a wireframe of the site

I’LL DO AN EXAMPLE

Having done that…… let’s take a break. Ten minutes or so. Be back at (will insert time)

More complex wireframesAnother method is to make a wireframe that that is more complex. In this form of wireframing, you essentially draw the site. For this to work well, you need to think in pixel sizes, which luckily is something we can do with our pal Photoshop.

Task 2 Try to design a simple, but not dead simple, advanced wireframe that could be the basis for your portfolio assignment in Photoshop. If this goes well, we’ll use them next week for an activity on moving to Dreamweaver.

If all else fails, we’ll use my design. Ugh.

To keep us thinkingI am going to upload the raw video from the ACE interviews to Niihka. It’ll be posted under “ACEvideo.zip” but it’s likely to be very, very large.

Starting next week, we will split class 50/50 between discussing web stuff/working on web stuff and discussing video/working on video.

Think about what resources OTHER than the ACE video you’ll want for the video project. Also think about your teams.

Assuming I get……the feedback I hope to get this week, we will spend most of next class working on ACE revisions, though. So we might end up with a 50/25/25 split next week, then 50/50 on out. :)

I know, I know. It’s a little crazy.

Last thing…On Wednesday, April 3rd, I will be showing Helvetica, the movie, upstairs in the Bachelor Reading room (room 337), from 5:30 to 9 or so.

It’ll be a chance to nerd out, talk fonts, eat some pizza, and talk to other PW/IMS/English students.

If you’d like to come, please RSVP to me by the 31st.