SlideShare una empresa de Scribd logo
1 de 43
Descargar para leer sin conexión
The Broken Pattern
GRAPHICS AND WIREFRAMES - WHERE INTERACTION DESIGN AND
GRAPHIC DESIGN MEET




» USER FOCUS| OCTOBER 2012



                          www.designforcontext.com   Scott McDaniel
Background




                                                  SCOTT MCDANIEL




SLIDE   2   Design Concept |   October 19, 2012
Set a pattern.
                                                Break it.



SLIDE   3   Design Concept |   October 19, 2012
The Archer of the Rose
Donato Giancola
2008
The Archer of the Rose
Donato Giancola
2008
England Expects
Morgan Penn
2007
England Expects
Morgan Penn
2007
Set a pattern.
                                                Break it.



SLIDE   8   Design Concept |   October 19, 2012
The Next 20 Minutes of Your Life



        Part 1
        » Graphic Design Fundamentals for the Web

                     Part 2
                     » Wireframes to Finished Design

                                    Part 3
                                    » Critique Party


SLIDE   9   Design Concept |   October 19, 2012
PART 1: Graphic Design Fundamentals


        » To set up a visual hierarchy, use

                •   White Space
                •   Grouping and Gestalt
                •   Color and Contrast
                •   Typography



                                              Disclaimer
                                                   This is far from the full set of techniques.




SLIDE   10   Design Concept |   October 19, 2012
Active and Passive White Space




SLIDE   11   Design Concept |   October 19, 2012
Active and Passive White Space




                                                   Passive White Space

SLIDE   12   Design Concept |   October 19, 2012
Active and Passive White Space




                                                   Active White Space


SLIDE   13   Design Concept |   October 19, 2012
Graphics and Wireframes (Scott McDaniel)
Bacon ipsum dolor sit amet salami labore tempor cillum ham. Nisi voluptate t-bone, ball tip prosciutto fugiat turkey aute. Laboris chuck qui, tenderloin eiusmod turkey nulla chicken.
   Cupidatat officia non in, ball tip boudin in filet mignon id venison ut exercitation. Minim jowl capicola rump officia, pork cow.
   Duis consequat corned beef est adipisicing biltong veniam proident frankfurter ball tip ex in id in. Pig et pork belly, jerky incididunt ham jowl enim andouille tail chuck non frankfurter mollit.
   Jowl cow fatback, proident eu short ribs laboris commodo meatball boudin hamburger. Leberkas meatball sed magna in ut pariatur consectetur ut. Excepteur eu pancetta, laboris nisi cillum
   dolore kielbasa pork chop est aliquip. Strip steak corned beef short ribs boudin sed, bacon meatloaf. Chicken pork loin proident, elit chuck leberkas ut bresaola nulla est enim velit ribeye.
   Tempor ribeye adipisicing excepteur, bresaola fatback in esse irure ham prosciutto laboris ex. Incididunt pork loin veniam ad, capicola t-bone non occaecat esse jowl prosciutto ham hock.
   Consequat capicola in pastrami veniam swine tempor sed. Ham hock dolore ball tip officia short ribs ut veniam fugiat tail. Minim biltong pancetta, non pastrami fugiat sunt id dolore est.
   Dolore pork belly mollit, bacon spare ribs andouille veniam.
   In shoulder venison, shankle anim minim tenderloin spare ribs occaecat pariatur. Adipisicing magna irure culpa short ribs dolor sirloin id pork belly. Exercitation swine venison meatloaf et.
   Venison salami short ribs anim cupidatat sirloin turkey elit tail. Cupidatat in ex, rump tail aliqua spare ribs fugiat beef ribs meatball labore in strip steak.
   Bacon id sirloin in ut beef ribs swine non. Commodo quis qui andouille leberkas short loin pariatur consequat, sirloin tail ham hock meatball deserunt. Ullamco t-bone pancetta frankfurter
   beef. Cow biltong turducken ham hock chuck in sint. Incididunt hamburger pork belly pastrami prosciutto. Non elit leberkas labore, est pork belly shank. Laborum esse cillum flank laboris
   sausage, eiusmod anim pork loin pariatur nostrud.
   Filet mignon flank sausage, id exercitation excepteur venison et nostrud aute eu. Jowl est in laboris. Occaecat est voluptate, boudin shank enim dolor bresaola kielbasa. Velit pork loin quis
   exercitation, pig adipisicing consequat culpa eu in shoulder pariatur sunt ut jerky. Sint mollit shoulder pastrami. Cow t-bone pork chop eu elit tongue.
   Beef ribs sed ut turkey labore andouille capicola venison et ham esse filet mignon leberkas aliquip. Commodo sint pork belly in flank beef ribs capicola corned beef labore consequat turkey
   elit. Esse tri-tip in venison bresaola reprehenderit turkey doner kielbasa tongue. Cupidatat exercitation do magna. Veniam corned beef drumstick nulla. Ribeye turkey chicken ham




                                                             Set a pattern.
   turducken meatball pork consequat.
   Pancetta biltong incididunt dolore. Voluptate ut shank, fatback in bacon jowl chuck swine aliquip strip steak deserunt flank bresaola ad. Non leberkas nisi doner chuck. Filet mignon kielbasa
   nisi, aliquip boudin chuck do enim pancetta exercitation sed. Proident tongue drumstick do, meatball tail flank incididunt dolore. Cow est non, rump in ex minim tail capicola laboris
   deserunt quis pork belly boudin bacon.
   Commodo eiusmod chuck brisket magna pork consequat pastrami ham beef. Ham tongue flank prosciutto jowl. Esse cupidatat biltong, cillum chuck culpa leberkas occaecat aliqua nulla
   frankfurter id in irure. Rump kielbasa pariatur nostrud. Proident ham shoulder shankle salami, minim laborum doner filet mignon ribeye consectetur venison kielbasa swine sunt.



                                                               Break it.
   Incididunt pork loin short loin ham hock, pastrami minim bresaola sausage exercitation salami jowl sunt. Non t-bone pancetta ham hock fatback. Bresaola labore aliquip andouille, aute
   laborum ribeye exercitation. Meatball aliquip hamburger shoulder sunt jerky.
   Laborum do ad, eiusmod tri-tip aute brisket fugiat shoulder consequat chicken nulla tongue rump. Short loin beef id, tail nostrud velit duis in chuck doner. Eiusmod eu duis bacon tail velit
   dolore shoulder ham veniam dolor nulla elit chicken biltong. Ex officia tail aliquip tri-tip ut ham duis corned beef sint beef ribs ut. Meatball in mollit commodo id, do anim eu prosciutto
   cupidatat.
   Exercitation leberkas t-bone, kielbasa ea et prosciutto adipisicing anim. Shankle in meatloaf adipisicing. Ut est deserunt short loin id ex spare ribs filet mignon pastrami qui. Labore enim
   nulla veniam rump venison. Sunt bacon ut doner duis, ad turkey in sirloin corned beef velit turducken qui ribeye. Excepteur non et cow exercitation consequat tri-tip in short loin. Est minim
   sirloin in bresaola, labore officia tempor nulla.
   Shankle pancetta leberkas kielbasa. Velit tempor quis capicola excepteur in jerky nisi turducken proident. Ad sed eiusmod sausage ham short ribs cow. Pork swine consequat pork loin sed
   andouille nostrud pork chop minim ea filet mignon nulla.
   Irure commodo magna chuck, esse laboris drumstick. Flank capicola pork bresaola, labore ribeye dolore shoulder elit ball tip kielbasa leberkas. Shank tempor frankfurter, pariatur velit tri-
   tip prosciutto consectetur tail duis. Ut ribeye turkey brisket deserunt aute, chuck id non meatloaf pariatur. Leberkas anim ex minim jerky dolore meatloaf t-bone fatback elit drumstick
   exercitation shoulder doner. Filet mignon ground round swine, cupidatat spare ribs ex prosciutto ut. Dolore nulla pork loin duis velit strip steak labore et ground round frankfurter
   incididunt.
   Boudin pig bacon duis. Do t-bone ut consectetur sed jerky nulla aliquip, sunt occaecat chicken ea. Jerky velit prosciutto, esse turducken spare ribs cow irure occaecat. Nulla beef in
   meatball, corned beef tri-tip eu pancetta excepteur shoulder ground round. Shank tongue fatback, strip steak esse pork belly consequat jowl proident magna aute excepteur corned beef
   enim. Pork velit bacon swine. Filet mignon flank sausage, id exercitation excepteur venison et nostrud aute eu. Jowl est in laboris. Occaecat est voluptate, boudin shank enim dolor
   bresaola kielbasa. Velit pork loin quis exercitation, pig adipisicing consequat culpa eu in shoulder pariatur sunt ut jerky. Sint mollit shoulder pastrami. Cow t-bone pork chop eu elit tongue.
   Beef ribs sed ut turkey labore andouille capicola venison et ham esse filet mignon leberkas aliquip. Commodo sint pork belly in flank beef ribs capicola corned beef labore consequat turkey
   elit. Esse tri-tip in venison bresaola reprehenderit turkey doner kielbasa tongue. Cupidatat exercitation do magna. Veniam corned beef drumstick nulla. Ribeye turkey chicken ham
   turducken meatball pork consequat.


SLIDE   15   Design Concept |             October 19, 2012
Gestalt Perception Principles




                                                   Similarity
SLIDE   16   Design Concept |   October 19, 2012
Gestalt Perception Principles




                                                   Proximity
SLIDE   17   Design Concept |   October 19, 2012
Gestalt Perception Principles




                                                   Both
SLIDE   18   Design Concept |   October 19, 2012
http://www.alistapart.com




SLIDE   19   Design Concept |   October 19, 2012
Proximity in Action




SLIDE   20   Design Concept |   October 19, 2012
Similarity in Action




SLIDE   21   Design Concept |   October 19, 2012
Set a pattern.


                                                   Break it.



SLIDE   22   Design Concept |   October 19, 2012
Color Principles




                                                   Saturation
SLIDE   23   Design Concept |   October 19, 2012
Color Principles




                                                   Hue
SLIDE   24   Design Concept |   October 19, 2012
Color Principles




                                                   Brightness
SLIDE   25   Design Concept |   October 19, 2012
Color emphasizes the primary button




                          Client Name

                                   Project Name



                                   Project Name



                                  Project Name



                                  Project Name



                                  Project Name



                                  Project Name



                                  Project Name



                                  Project Name



                                  Project Name




SLIDE   26   Design Concept |    October 19, 2012
Set a pattern.




                                                     Break it.
SLIDE   27   Design Concept |   October 19, 2012
Contrast with Typography


        » You can vary size.

        » You can vary weight.

        » You can vary color.

        » You can vary font.

        » You can vary CAPITALIZATION.

        » You can vary letter spacing ( k e r n i n g ).

SLIDE   28   Design Concept |   October 19, 2012
Stack up the Typography Contrasts



   Effective contrast…
                   … in typography uses several of these cues at
                   once. You can use these contrasts within a
                   sentence or word, but in web pages they more
                   often differentiate headers or other page
                   elements. This block of text has different
                   color, font, kerning, capitalization, and weight
                   than the headline above.



SLIDE   29   Design Concept |   October 19, 2012
Typography Contrast in Action




SLIDE   30   Design Concept |   October 19, 2012
Set a pattern.




SLIDE   31   Design Concept |   October 19, 2012
PART 2: Wireframe to Finished Design


        » Manuscript Submission System

        » Internal Dashboard
                • Wireframes: Lisa Battle
                • Graphic Design: Kim Bieler

        » NITRC – Brain Imaging Products
                • Wireframes: Lynn Baumeister
                • Graphic Design: Kim Bieler




SLIDE   32   Design Concept |   October 19, 2012
Graphics and Wireframes (Scott McDaniel)
Graphics and Wireframes (Scott McDaniel)
Graphics and Wireframes (Scott McDaniel)
Graphics and Wireframes (Scott McDaniel)
Graphics and Wireframes (Scott McDaniel)
Graphics and Wireframes (Scott McDaniel)
SLIDE   39   Design Concept |   October 19, 2012
PART 3: The Critique Party


        » The 960 Grid System
        » http://960.gs

        » Grid System
                •   From print graphic design
                •   Define a number of columns and margins
                •   Elements of layout line up – a tool for harmonious design
                •   960 Grid System is a CSS grid system for web developers


        » To start: What is the visual hierarchy?


SLIDE   40   Design Concept |   October 19, 2012
http://960.gs




SLIDE   41   Design Concept |   October 19, 2012
Set a pattern.



SLIDE   42   Design Concept |   October 19, 2012
Thank you!


SCOTT MC DANIEL
scott@designforcontext.com




                                                        Lisa Battle
                             www.designforcontext.com
                                                        Laura Chessman

Más contenido relacionado

Más de uxpa-dc

Hands on Usability Testing (Jonathan Rubin)
Hands on Usability Testing (Jonathan Rubin)Hands on Usability Testing (Jonathan Rubin)
Hands on Usability Testing (Jonathan Rubin)uxpa-dc
 
So you think you can moderate? (Andrew Schall)
So you think you can moderate? (Andrew Schall)So you think you can moderate? (Andrew Schall)
So you think you can moderate? (Andrew Schall)uxpa-dc
 
The hybrids are coming (John Whalen)
The hybrids are coming (John Whalen)The hybrids are coming (John Whalen)
The hybrids are coming (John Whalen)uxpa-dc
 
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...uxpa-dc
 
Usable Usability Reports (Dick Horst)
Usable Usability Reports (Dick Horst)Usable Usability Reports (Dick Horst)
Usable Usability Reports (Dick Horst)uxpa-dc
 
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)uxpa-dc
 
Intelligent content a case study
Intelligent content   a case studyIntelligent content   a case study
Intelligent content a case studyuxpa-dc
 
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)uxpa-dc
 
Agile / UX (Luis Rodriguez)
Agile / UX (Luis Rodriguez)Agile / UX (Luis Rodriguez)
Agile / UX (Luis Rodriguez)uxpa-dc
 
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...uxpa-dc
 
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...uxpa-dc
 
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...uxpa-dc
 
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...uxpa-dc
 
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...uxpa-dc
 
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)uxpa-dc
 
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)uxpa-dc
 
Optimal SEO (Marianne Sweeny)
Optimal SEO (Marianne Sweeny) Optimal SEO (Marianne Sweeny)
Optimal SEO (Marianne Sweeny) uxpa-dc
 
Agile UX Lineout! (Louis Rodriguez)
Agile UX Lineout! (Louis Rodriguez)Agile UX Lineout! (Louis Rodriguez)
Agile UX Lineout! (Louis Rodriguez)uxpa-dc
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...uxpa-dc
 
Steps to Design a Better Survey (Jean Fox & Scott Fricker)
Steps to Design a Better Survey (Jean Fox & Scott Fricker)Steps to Design a Better Survey (Jean Fox & Scott Fricker)
Steps to Design a Better Survey (Jean Fox & Scott Fricker)uxpa-dc
 

Más de uxpa-dc (20)

Hands on Usability Testing (Jonathan Rubin)
Hands on Usability Testing (Jonathan Rubin)Hands on Usability Testing (Jonathan Rubin)
Hands on Usability Testing (Jonathan Rubin)
 
So you think you can moderate? (Andrew Schall)
So you think you can moderate? (Andrew Schall)So you think you can moderate? (Andrew Schall)
So you think you can moderate? (Andrew Schall)
 
The hybrids are coming (John Whalen)
The hybrids are coming (John Whalen)The hybrids are coming (John Whalen)
The hybrids are coming (John Whalen)
 
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...
Developing a User Interface for Large-Scale Surveys (Jennifer Beck & Elizabet...
 
Usable Usability Reports (Dick Horst)
Usable Usability Reports (Dick Horst)Usable Usability Reports (Dick Horst)
Usable Usability Reports (Dick Horst)
 
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)
Behind Eyetracking: How the Brain Utilizies Its Eyes (Dixon Cleveland)
 
Intelligent content a case study
Intelligent content   a case studyIntelligent content   a case study
Intelligent content a case study
 
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
 
Agile / UX (Luis Rodriguez)
Agile / UX (Luis Rodriguez)Agile / UX (Luis Rodriguez)
Agile / UX (Luis Rodriguez)
 
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...
User Experience Evaluation of Surveys (Jennifer Romano Bergstrom & Ricardo Ca...
 
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...
 
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...
Building Your UX Team Through Practical Usability Training (Jonathan Rubin & ...
 
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...
Developing Guidelines for Suites of Application (Rachel Sengers & Lesley Hump...
 
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...
Visually Integrative Representation of User Types in Surveys (Ricardo Carvalh...
 
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)
Note-Taker's Perspective During Usability Testing (Kristen Davis & Dana Douglas)
 
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
 
Optimal SEO (Marianne Sweeny)
Optimal SEO (Marianne Sweeny) Optimal SEO (Marianne Sweeny)
Optimal SEO (Marianne Sweeny)
 
Agile UX Lineout! (Louis Rodriguez)
Agile UX Lineout! (Louis Rodriguez)Agile UX Lineout! (Louis Rodriguez)
Agile UX Lineout! (Louis Rodriguez)
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
Steps to Design a Better Survey (Jean Fox & Scott Fricker)
Steps to Design a Better Survey (Jean Fox & Scott Fricker)Steps to Design a Better Survey (Jean Fox & Scott Fricker)
Steps to Design a Better Survey (Jean Fox & Scott Fricker)
 

Graphics and Wireframes (Scott McDaniel)

  • 1. The Broken Pattern GRAPHICS AND WIREFRAMES - WHERE INTERACTION DESIGN AND GRAPHIC DESIGN MEET » USER FOCUS| OCTOBER 2012 www.designforcontext.com Scott McDaniel
  • 2. Background SCOTT MCDANIEL SLIDE 2 Design Concept | October 19, 2012
  • 3. Set a pattern. Break it. SLIDE 3 Design Concept | October 19, 2012
  • 4. The Archer of the Rose Donato Giancola 2008
  • 5. The Archer of the Rose Donato Giancola 2008
  • 8. Set a pattern. Break it. SLIDE 8 Design Concept | October 19, 2012
  • 9. The Next 20 Minutes of Your Life Part 1 » Graphic Design Fundamentals for the Web Part 2 » Wireframes to Finished Design Part 3 » Critique Party SLIDE 9 Design Concept | October 19, 2012
  • 10. PART 1: Graphic Design Fundamentals » To set up a visual hierarchy, use • White Space • Grouping and Gestalt • Color and Contrast • Typography Disclaimer This is far from the full set of techniques. SLIDE 10 Design Concept | October 19, 2012
  • 11. Active and Passive White Space SLIDE 11 Design Concept | October 19, 2012
  • 12. Active and Passive White Space Passive White Space SLIDE 12 Design Concept | October 19, 2012
  • 13. Active and Passive White Space Active White Space SLIDE 13 Design Concept | October 19, 2012
  • 15. Bacon ipsum dolor sit amet salami labore tempor cillum ham. Nisi voluptate t-bone, ball tip prosciutto fugiat turkey aute. Laboris chuck qui, tenderloin eiusmod turkey nulla chicken. Cupidatat officia non in, ball tip boudin in filet mignon id venison ut exercitation. Minim jowl capicola rump officia, pork cow. Duis consequat corned beef est adipisicing biltong veniam proident frankfurter ball tip ex in id in. Pig et pork belly, jerky incididunt ham jowl enim andouille tail chuck non frankfurter mollit. Jowl cow fatback, proident eu short ribs laboris commodo meatball boudin hamburger. Leberkas meatball sed magna in ut pariatur consectetur ut. Excepteur eu pancetta, laboris nisi cillum dolore kielbasa pork chop est aliquip. Strip steak corned beef short ribs boudin sed, bacon meatloaf. Chicken pork loin proident, elit chuck leberkas ut bresaola nulla est enim velit ribeye. Tempor ribeye adipisicing excepteur, bresaola fatback in esse irure ham prosciutto laboris ex. Incididunt pork loin veniam ad, capicola t-bone non occaecat esse jowl prosciutto ham hock. Consequat capicola in pastrami veniam swine tempor sed. Ham hock dolore ball tip officia short ribs ut veniam fugiat tail. Minim biltong pancetta, non pastrami fugiat sunt id dolore est. Dolore pork belly mollit, bacon spare ribs andouille veniam. In shoulder venison, shankle anim minim tenderloin spare ribs occaecat pariatur. Adipisicing magna irure culpa short ribs dolor sirloin id pork belly. Exercitation swine venison meatloaf et. Venison salami short ribs anim cupidatat sirloin turkey elit tail. Cupidatat in ex, rump tail aliqua spare ribs fugiat beef ribs meatball labore in strip steak. Bacon id sirloin in ut beef ribs swine non. Commodo quis qui andouille leberkas short loin pariatur consequat, sirloin tail ham hock meatball deserunt. Ullamco t-bone pancetta frankfurter beef. Cow biltong turducken ham hock chuck in sint. Incididunt hamburger pork belly pastrami prosciutto. Non elit leberkas labore, est pork belly shank. Laborum esse cillum flank laboris sausage, eiusmod anim pork loin pariatur nostrud. Filet mignon flank sausage, id exercitation excepteur venison et nostrud aute eu. Jowl est in laboris. Occaecat est voluptate, boudin shank enim dolor bresaola kielbasa. Velit pork loin quis exercitation, pig adipisicing consequat culpa eu in shoulder pariatur sunt ut jerky. Sint mollit shoulder pastrami. Cow t-bone pork chop eu elit tongue. Beef ribs sed ut turkey labore andouille capicola venison et ham esse filet mignon leberkas aliquip. Commodo sint pork belly in flank beef ribs capicola corned beef labore consequat turkey elit. Esse tri-tip in venison bresaola reprehenderit turkey doner kielbasa tongue. Cupidatat exercitation do magna. Veniam corned beef drumstick nulla. Ribeye turkey chicken ham Set a pattern. turducken meatball pork consequat. Pancetta biltong incididunt dolore. Voluptate ut shank, fatback in bacon jowl chuck swine aliquip strip steak deserunt flank bresaola ad. Non leberkas nisi doner chuck. Filet mignon kielbasa nisi, aliquip boudin chuck do enim pancetta exercitation sed. Proident tongue drumstick do, meatball tail flank incididunt dolore. Cow est non, rump in ex minim tail capicola laboris deserunt quis pork belly boudin bacon. Commodo eiusmod chuck brisket magna pork consequat pastrami ham beef. Ham tongue flank prosciutto jowl. Esse cupidatat biltong, cillum chuck culpa leberkas occaecat aliqua nulla frankfurter id in irure. Rump kielbasa pariatur nostrud. Proident ham shoulder shankle salami, minim laborum doner filet mignon ribeye consectetur venison kielbasa swine sunt. Break it. Incididunt pork loin short loin ham hock, pastrami minim bresaola sausage exercitation salami jowl sunt. Non t-bone pancetta ham hock fatback. Bresaola labore aliquip andouille, aute laborum ribeye exercitation. Meatball aliquip hamburger shoulder sunt jerky. Laborum do ad, eiusmod tri-tip aute brisket fugiat shoulder consequat chicken nulla tongue rump. Short loin beef id, tail nostrud velit duis in chuck doner. Eiusmod eu duis bacon tail velit dolore shoulder ham veniam dolor nulla elit chicken biltong. Ex officia tail aliquip tri-tip ut ham duis corned beef sint beef ribs ut. Meatball in mollit commodo id, do anim eu prosciutto cupidatat. Exercitation leberkas t-bone, kielbasa ea et prosciutto adipisicing anim. Shankle in meatloaf adipisicing. Ut est deserunt short loin id ex spare ribs filet mignon pastrami qui. Labore enim nulla veniam rump venison. Sunt bacon ut doner duis, ad turkey in sirloin corned beef velit turducken qui ribeye. Excepteur non et cow exercitation consequat tri-tip in short loin. Est minim sirloin in bresaola, labore officia tempor nulla. Shankle pancetta leberkas kielbasa. Velit tempor quis capicola excepteur in jerky nisi turducken proident. Ad sed eiusmod sausage ham short ribs cow. Pork swine consequat pork loin sed andouille nostrud pork chop minim ea filet mignon nulla. Irure commodo magna chuck, esse laboris drumstick. Flank capicola pork bresaola, labore ribeye dolore shoulder elit ball tip kielbasa leberkas. Shank tempor frankfurter, pariatur velit tri- tip prosciutto consectetur tail duis. Ut ribeye turkey brisket deserunt aute, chuck id non meatloaf pariatur. Leberkas anim ex minim jerky dolore meatloaf t-bone fatback elit drumstick exercitation shoulder doner. Filet mignon ground round swine, cupidatat spare ribs ex prosciutto ut. Dolore nulla pork loin duis velit strip steak labore et ground round frankfurter incididunt. Boudin pig bacon duis. Do t-bone ut consectetur sed jerky nulla aliquip, sunt occaecat chicken ea. Jerky velit prosciutto, esse turducken spare ribs cow irure occaecat. Nulla beef in meatball, corned beef tri-tip eu pancetta excepteur shoulder ground round. Shank tongue fatback, strip steak esse pork belly consequat jowl proident magna aute excepteur corned beef enim. Pork velit bacon swine. Filet mignon flank sausage, id exercitation excepteur venison et nostrud aute eu. Jowl est in laboris. Occaecat est voluptate, boudin shank enim dolor bresaola kielbasa. Velit pork loin quis exercitation, pig adipisicing consequat culpa eu in shoulder pariatur sunt ut jerky. Sint mollit shoulder pastrami. Cow t-bone pork chop eu elit tongue. Beef ribs sed ut turkey labore andouille capicola venison et ham esse filet mignon leberkas aliquip. Commodo sint pork belly in flank beef ribs capicola corned beef labore consequat turkey elit. Esse tri-tip in venison bresaola reprehenderit turkey doner kielbasa tongue. Cupidatat exercitation do magna. Veniam corned beef drumstick nulla. Ribeye turkey chicken ham turducken meatball pork consequat. SLIDE 15 Design Concept | October 19, 2012
  • 16. Gestalt Perception Principles Similarity SLIDE 16 Design Concept | October 19, 2012
  • 17. Gestalt Perception Principles Proximity SLIDE 17 Design Concept | October 19, 2012
  • 18. Gestalt Perception Principles Both SLIDE 18 Design Concept | October 19, 2012
  • 19. http://www.alistapart.com SLIDE 19 Design Concept | October 19, 2012
  • 20. Proximity in Action SLIDE 20 Design Concept | October 19, 2012
  • 21. Similarity in Action SLIDE 21 Design Concept | October 19, 2012
  • 22. Set a pattern. Break it. SLIDE 22 Design Concept | October 19, 2012
  • 23. Color Principles Saturation SLIDE 23 Design Concept | October 19, 2012
  • 24. Color Principles Hue SLIDE 24 Design Concept | October 19, 2012
  • 25. Color Principles Brightness SLIDE 25 Design Concept | October 19, 2012
  • 26. Color emphasizes the primary button Client Name Project Name Project Name Project Name Project Name Project Name Project Name Project Name Project Name Project Name SLIDE 26 Design Concept | October 19, 2012
  • 27. Set a pattern. Break it. SLIDE 27 Design Concept | October 19, 2012
  • 28. Contrast with Typography » You can vary size. » You can vary weight. » You can vary color. » You can vary font. » You can vary CAPITALIZATION. » You can vary letter spacing ( k e r n i n g ). SLIDE 28 Design Concept | October 19, 2012
  • 29. Stack up the Typography Contrasts Effective contrast… … in typography uses several of these cues at once. You can use these contrasts within a sentence or word, but in web pages they more often differentiate headers or other page elements. This block of text has different color, font, kerning, capitalization, and weight than the headline above. SLIDE 29 Design Concept | October 19, 2012
  • 30. Typography Contrast in Action SLIDE 30 Design Concept | October 19, 2012
  • 31. Set a pattern. SLIDE 31 Design Concept | October 19, 2012
  • 32. PART 2: Wireframe to Finished Design » Manuscript Submission System » Internal Dashboard • Wireframes: Lisa Battle • Graphic Design: Kim Bieler » NITRC – Brain Imaging Products • Wireframes: Lynn Baumeister • Graphic Design: Kim Bieler SLIDE 32 Design Concept | October 19, 2012
  • 39. SLIDE 39 Design Concept | October 19, 2012
  • 40. PART 3: The Critique Party » The 960 Grid System » http://960.gs » Grid System • From print graphic design • Define a number of columns and margins • Elements of layout line up – a tool for harmonious design • 960 Grid System is a CSS grid system for web developers » To start: What is the visual hierarchy? SLIDE 40 Design Concept | October 19, 2012
  • 41. http://960.gs SLIDE 41 Design Concept | October 19, 2012
  • 42. Set a pattern. SLIDE 42 Design Concept | October 19, 2012
  • 43. Thank you! SCOTT MC DANIEL scott@designforcontext.com Lisa Battle www.designforcontext.com Laura Chessman

Notas del editor

  1. Introduce ourselvesTalk about applications we’ve designed
  2. Contrast is in the direction of lines/edges. Also brightness. Several types of contrast work together.
  3. Contrast is in the direction of lines/edges. Also brightness. Several types of contrast work together.
  4. Contrast can be as intangible as emotional expression – the main figure has higher brightness, but just as effective is the stoic expression.
  5. Contrast can be as intangible as emotional expression – the main figure has higher brightness, but just as effective is the stoic expression.
  6. Let’s be introspective. As you look at each of these screens, look for the search box. How long do you feel it takes you to find the box?
  7. Ask audience: How does white space affect your attention?