Visual Rhetoric March 25th


Published on

wire frames!

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Visual Rhetoric March 25th

  1. 1. 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…
  2. 2. So, starting off…I have spoken with Genesis about the web project. Weare currently in a state of what I’m going to call “flux.”I have their desires, but we’re having a little bit oftrouble determining where we’re going to stick thepage.More in that next week. :) For now, we can startlooking at how we’ll be working on the web with alittle bit of excitement we call wireframing.
  3. 3. Starting: wireframesSo you did some reading for today. Let’s start fromthere.What is a wireframe?
  4. 4. In short…… a wireframe is like a website blue print.This super-generic PowerPoint is a barebonesreduction of what a wireframe would look like for mytypical weekly PPT presentation. Let me take it a stepfurther.
  5. 5. Headline in Arial BlackContent in Calibri, as close to 32 point as possible.Usually too much content for a slide because Dr. Phillis wordy.
  6. 6. When making a website… a wireframe allows you to envision the underlyingarchitecture and think about the content.This can be the first step to hand-coding the CSS for apage, or it can lead to a more intricate wireframe thatcould be used, in concert with software likeDreamweaver, to build a page from the more detailedwireframe.Example time.
  8. 8. AH HA! I GET IT!
  9. 9. Activity one: reverse itThis 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
  10. 10. I’LL DO AN EXAMPLE
  11. 11. Having done that…… let’s take a break. Ten minutes or so. Be back at (willinsert time)
  12. 12. More complex wireframesAnother method is to make a wireframe that that ismore complex. In this form of wireframing, youessentially draw the site. For this to work well, youneed to think in pixel sizes, which luckily issomething we can do with our pal Photoshop.
  13. 13. Task 2Try to design a simple, but not dead simple,advanced wireframe that could be the basis foryour portfolio assignment in Photoshop. If thisgoes well, we’ll use them next week for anactivity on moving to Dreamweaver.If all else fails, we’ll use my design. Ugh. 
  14. 14. To keep us thinkingI am going to upload the raw video from the ACEinterviews to Niihka. It’ll be posted under“” but it’s likely to be very, very large.Starting next week, we will split class 50/50 betweendiscussing web stuff/working on web stuff anddiscussing video/working on video.Think about what resources OTHER than the ACEvideo you’ll want for the video project. Also thinkabout your teams.
  15. 15. Assuming I get……the feedback I hope to get this week, we willspend most of next class working on ACErevisions, though. So we might end up with a50/25/25 split next week, then 50/50 on out. :)I know, I know. It’s a little crazy.
  16. 16. Last thing…On Wednesday, April 3rd, I will be showingHelvetica, the movie, upstairs in the BachelorReading room (room 337), from 5:30 to 9 or so.It’ll be a chance to nerd out, talk fonts, eat somepizza, and talk to other PW/IMS/English students.If you’d like to come, please RSVP to me by the31st.