2. TODAY
1) The Web Project: where we stand
2) The Web Project: our way in
3) Wireframing: how it works
4) Wireframing activity one: reverse engineer
5) Wireframing activity two: Build a site in
Photoshop
6) Homework and from here forward…
3. 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.
5. 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.
6. Headline in Arial Black
Content in Calibri, as close to 32 point as possible.
Usually too much content for a slide because Dr. Phill
is wordy.
7. 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.
13. Activity one: reverse it
This one is pretty simple.
1)Find a website you like
2)Open Photoshop
3)Make a canvas the size of your screen
(roughly)
4)Draw a wireframe of the site
15. Having done that…
… let’s take a break. Ten minutes or so. Be back at (will
insert time)
16. More complex wireframes
Another 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.
17.
18. 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.
19. To keep us thinking
I 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.
20. 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.
21. 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.
