Pro Yearly is on sale from $80 to $50! »

Wireframing + CSS

E014f9fcb262d9ecb8f3df7972fe2a78?s=47 kimbui
November 06, 2014

Wireframing + CSS

E014f9fcb262d9ecb8f3df7972fe2a78?s=128

kimbui

November 06, 2014
Tweet

Transcript

  1. Quiz time! 
 Download the Word document here: http://bit.ly/j309QuizSM2014
 e-mail

    to: pkimbuiUSC@gmail.com
 subject: J309 quiz
  2. Today’s timeline ❖ Quiz! 15 min ❖ Discussion w Katie

    - 15 min ❖ Discussion w Emily - 15 min ❖ Wireframing + CSS - Rest of class
  3. Discussion: Emily/Katie, all yours…

  4. Discussions ❖ Nov 13 Dale ❖ Nov 20 Max

  5. @hjmediastudios THE IDEA OF WIREFRAME COMES FROM 3D MODELLING

  6. “A website wireframe 
 is a visual guide 
 that

    represents 
 the skeletal framework 
 of a website” Wikipedia:
  7. “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/
  8. THERE ARE DIFFERENT QUALITIES OF WIREFRAMES

  9. Even if wireframes display a single interface/page they are less

    like photos and more like movie stills
  10. WIREFRAMES AS STORIES © Ivor Beddoes @awfulshot

  11. WIREFRAMES AS STORYBOARDS FOR INTERFACES © Ivor Beddoes

  12. DIFFERENT WAYS TO TELL A STORY frame by frame, drawings

    key frames, textual descriptions key frames, spoken narrative
  13. Even if the storyboard is not visible it’s still the

    foundation of wireframes
  14. The minimal visual building block of a wireframe is the

    box. Box
  15. 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
  16. Content Box Box Box Navigation Logo

  17. Let’s wireframe Twitter. Boxes only.

  18. None
  19. User Page
 Navigation Global Navigation Multimedia 
 Content of the

    User Who to follow suggestions Trends User profile User Stats Messages Tweets
  20. 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.
  21. Button Box Lorem ipsum gaium sit amet isciquitur elit in

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

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

    ellam lacustre pulzella. Expand
  24. 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
  25. TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT

    MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
  26. Let’s build a journey. Imagine Twitter’s registration process.

  27. Home Reg. Form Confirmation LOGIN PROCESS The main steps of

    the journey
  28. Home Reg. Form Confirmation Your Page LOGIN PROCESS How do

    we guide the user to the value? ?
  29. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS An

    e-mail based approach
  30. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS A

    more direct way to engage the user
  31. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS Review

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

    Reg. Form Confirmation Email Your Page Tweet Third party Third party
  33. Let’s wireframe! Options: mockflow.com cacoo.com moqups.com axure.com

  34. A little bit more HTML in the form of CSS...

    http://bit.ly/j309CSS2014
  35. 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.
  36. 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
  37. 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
  38. 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