Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wireframing + CSS

kimbui
November 06, 2014

Wireframing + CSS

kimbui

November 06, 2014
Tweet

More Decks by kimbui

Other Decks in Education

Transcript

  1. Today’s timeline ❖ Quiz! 15 min ❖ Discussion w Katie

    - 15 min ❖ Discussion w Emily - 15 min ❖ Wireframing + CSS - Rest of class
  2. “A website wireframe 
 is a visual guide 
 that

    represents 
 the skeletal framework 
 of a website” Wikipedia:
  3. “Wireframing is a low-cost, rapid iterative design technique that offers

    one of the best methods for gaining design insight early” Nielsen/Norman Group: http://www.nngroup.com/courses/wireframing-and-prototyping/
  4. DIFFERENT WAYS TO TELL A STORY frame by frame, drawings

    key frames, textual descriptions key frames, spoken narrative
  5. Boxes usually contain a uniform kind of content, not the

    individual elements. However, it’s important to choose the right level of breakdown to support the discussion. Box
  6. User Page
 Navigation Global Navigation Multimedia 
 Content of the

    User Who to follow suggestions Trends User profile User Stats Messages Tweets
  7. N N N C C S S Box Box Box

    Box Box Box Box Box This high level box view is implicit most of the time, but it’s incredibly useful when applied on a number of pages to ensure consistency and reusability.
  8. Button Box Lorem ipsum gaium sit amet isciquitur elit in

    ellam lacustre pulzella. TEXT BUTTONS IMAGES ··· MORE...
  9. Box

  10. Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in

    ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! OFTEN EACH HIGH-LEVEL BOX CONTAINS A REPEATING PATTERN
  11. TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT

    MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
  12. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS Review

    journeys for the edge cases: errors, problems, etc ! !
  13. LOGIN PROCESS The story is even bigger in reality Home

    Reg. Form Confirmation Email Your Page Tweet Third party Third party
  14. Final Package ❖700 words worth of story (whether in one

    piece or many) ❖ 2:00 Audio Slideshow (minimal narration, with humans & captions) ❖ Minimum one web element (offering 2- min experience) ❖ On the template base (break it, but keep the main parts in check) http://alongtheline.ascjweb.com/templates/ Final period schedule: Thursday Dec. 11, 11-1 p.m.
  15. Finals ❖ Katie: History —> ????? ❖ Dale: Business—> Why

    don’t more small businesses expand? ❖ Caroline: Community Service—> YouthBuild ❖ Katherine: Health—-> Prop P rollout ❖ Emily: Education —> KIPP Charter Schools ❖ Alex: Ethnic boundaries—> Travel company ❖ Margaret: Environment—-> Recycling + small businesses ❖ Tanya: Arts+education—> Music School ❖ Madison: Immigration—> Young immigration stories ❖ Max: Public Safety—> LAFD response times ❖ Kevin: Food—> Local market improvement project
  16. Take the elements of your final, and lay the out

    in a wireframe. Label all the elements (text, headline, images, audio slideshow, web element, etc) Post a link to your wireframe in the comments of the blog. Deadline: Wednesday, Nov 12, 5 p.m. ASSIGNMENT: Wireframe your final
  17. Our Area: Maravilla Station The rules NO friends, NO family,

    NO USC The beats Dale: Business Caroline: Community Service Katherine: Health Emily: Education Alex: Ethnic boundaries Margaret: Environment Tanya: Arts+education Madison: Immigration Max: Public Safety Kevin: Food