the broken pattern - interaction designers and graphic designers working together
DESCRIPTION
Interaction designers produce wireframes when designing a site - the blueprint for screens. Graphic designers contribute a visual hierarchy, branding, color palette, typography, and more. Both areas cover layout. How can graphic designers work effectively together to produce a high-quality, professional product?TRANSCRIPT
www.designforcontext.com Scott McDaniel
The Broken PatternGRAPHICS AND WIREFRAMES - WHERE INTERACTION DESIGN AND GRAPHIC DESIGN MEET
» USER FOCUS| OCTOBER 2012
Design Concept | October 19, 2012SLIDE 2
Background
SCOTT MCDANIEL
Design Concept | October 19, 2012SLIDE 3
Set a pattern.Break it.
The Archer of the RoseDonato Giancola2008
The Archer of the RoseDonato Giancola2008
England ExpectsMorgan Penn2007
England ExpectsMorgan Penn2007
Design Concept | October 19, 2012SLIDE 8
Set a pattern.Break it.
Design Concept | October 19, 2012SLIDE 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
Design Concept | October 19, 2012SLIDE 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.
Design Concept | October 19, 2012SLIDE 11
Active and Passive White Space
Design Concept | October 19, 2012SLIDE 12
Active and Passive White Space
Passive White Space
Design Concept | October 19, 2012SLIDE 13
Active and Passive White Space
Active White Space
Design Concept | October 19, 2012SLIDE 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 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.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.
Set a pattern.Break it.
Design Concept | October 19, 2012SLIDE 16
Gestalt Perception Principles
Similarity
Design Concept | October 19, 2012SLIDE 17
Gestalt Perception Principles
Proximity
Design Concept | October 19, 2012SLIDE 18
Gestalt Perception Principles
Both
Design Concept | October 19, 2012SLIDE 19
http://www.alistapart.com
Design Concept | October 19, 2012SLIDE 20
Proximity in Action
Design Concept | October 19, 2012SLIDE 21
Similarity in Action
Design Concept | October 19, 2012SLIDE 22
Set a pattern.
Break it.
Design Concept | October 19, 2012SLIDE 23
Color Principles
Saturation
Design Concept | October 19, 2012SLIDE 24
Color Principles
Hue
Design Concept | October 19, 2012SLIDE 25
Color Principles
Brightness
Design Concept | October 19, 2012SLIDE 26
Color emphasizes the primary button
Project Name
Project Name
Project Name
Project Name
Project Name
Project Name
Project Name
Project Name
Project Name
Client Name
Design Concept | October 19, 2012SLIDE 27
Break it.
Set a pattern.
Design Concept | October 19, 2012SLIDE 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 ).
Design Concept | October 19, 2012SLIDE 29
Stack up the Typography Contrasts
Eff ective 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.
Design Concept | October 19, 2012SLIDE 30
Typography Contrast in Action
Design Concept | October 19, 2012SLIDE 31
Set a pattern.
BREAK IT.
Design Concept | October 19, 2012SLIDE 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
Design Concept | October 19, 2012SLIDE 39
Set a pattern.
Break it.
Design Concept | October 19, 2012SLIDE 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?
Design Concept | October 19, 2012SLIDE 42
Set a pattern.
