WRA 210 March 29, 2011
Upcoming SlideShare
Loading in...5
×
 

WRA 210 March 29, 2011

on

  • 803 views

 

Statistics

Views

Total Views
803
Slideshare-icon Views on SlideShare
765
Embed Views
38

Actions

Likes
0
Downloads
3
Comments
1

1 Embed 38

http://www.phillalexander.com 38

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Welcome to__militarylover.c o m__A place to meet military singles and admirers in the world!You can find friendship, love, romance, marriage or even more.Sign up is totally free,It's the best time to join now,have a try,you will love it.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WRA 210 March 29, 2011 WRA 210 March 29, 2011 Presentation Transcript

    • TODAY
      Module 5 and Module 6: how’s the juggling act?
      What’s coming next?
      Wireframes: What they are, how that all works
      Activity: Wireframes: We’re going to make some
      The Resources tab on the site: now with content!
      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:
      They allow designers to organize their sites with simple tools (maybe just pencil and paper)
      They serve sort of the same purpose as an outline for a piece of writing– arrangement before execution
      They are easier to mock-up and share and/or compare than full sites
      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.
      Pencil/pen and paper
      Cut/paste with paper
      Photoshop, MS Word, Illustrator, etc.
      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 use
      Photoshop 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:
      Wireframes for the major pages needed for the site
      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?