Presentation is loading. Please wait.

Presentation is loading. Please wait.

Saul Greenberg Graphic Design, part 1. Saul Greenberg Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential.

Similar presentations


Presentation on theme: "Saul Greenberg Graphic Design, part 1. Saul Greenberg Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential."— Presentation transcript:

1 Saul Greenberg Graphic Design, part 1

2 Saul Greenberg Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts consistency relationships organization legibility and readability navigational cues appropriate imagery familiar idioms Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

3 Saul Greenberg CRAP C ontrast –make different things different –brings out dominant elements –mutes lesser elements –creates dynamism R epetition –repeat design throughout the interface –consistency –creates unity A lignment –visually connects elements –creates a visual flow P roximity –groups related elements –separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press

4 Saul Greenberg

5

6 Original

7 Saul Greenberg Proximity

8 Saul Greenberg Alignment

9 Saul Greenberg Contrast

10 Saul Greenberg Repetition

11 Saul Greenberg Graphic Design, part 2

12 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall 5. Visual Organization In this chapter you will learn about: Four principles of visual organization and how to apply them Proximity Alignment Consistency Contrast

13 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Four organizing principles: proximity See next slide for a tongue-in-cheek example: mindless application of alphabetic organization Preview: the result is a hodge-podge as seen by the user

14 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Dan’s Clothing: the mindless version

15 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall What groups would make sense? Women’s clothes, Men’s clothes, Kid’s clothes, Special sizes July Specials, Sales on rainwear, Closeout on pink socks Store locations, Store hours Open an account, Your account status Check out us.

16 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Dan’s Clothing: with sensible groups

17 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Avoid centered alignment for lines that are of nearly equal length

18 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Lines are now greatly different in length: reader knows it’s intentional

19 Orpheus Chamber Orchestra: nice use of proximity and alignment

20 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall The principles are seen in combination Eddie Bauer site (next slide) has Horizontal alignment Vertical alignment Proximity, to group like items Consistency, in type size and font for links Contrast, between SALE and most else

21 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall

22 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Don’t be a slave to centered alignment...

23 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall... which is OK, but isn’t this better?

24 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Note the consistent layout in the next few slides

25 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide

26 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall One of the pages reachable from the previous slide

27 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall How can we make this more interesting?

28 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Use more contrast

29 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Talk about boring!

30 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall This is a quiz! (Not really) Look again at the previous slide. How many ways can you improve it? Can you put all four principles to work? Next slide shows one possible way You can find lots of others

31 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Here’s one way, but there are many other possibilities

32 Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall Summary In this chapter you learned: Four principles of visual organization Proximity Alignment Consistency Contrast Some ways they can be applied The message : There are principles; you can learn them and use them

33 Saul Greenberg Graphic Design, part 3

34 Saul Greenberg Grids Horizontal and vertical lines to locate window components –aligns related components Organization –contrast for dominant elements –element groupings by proximity –organizational structure –alignment Consistency –location –format –element repetition –organization window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

35 Saul Greenberg NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed

36 Saul Greenberg Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow

37 Saul Greenberg Visual consistency (repetition) internal consistency –elements follow same conventions and rules –set of application-specific grids enforce this external consistency –follow platform and interface style conventions –use platform and widget-specific grids deviate only when it provides a clear benefit to user Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss  

38 Saul Greenberg Relating screen elements proximal clusters alignment white (negative) space explicit structure Mmmm:  

39 Saul Greenberg Webforms Terrible alignment –no flow Poor contrast –cannot distinguish colored labels from editable fields Poor repetition –buttons do not look like buttons Poor explicit structure –blocks compete with alignment

40 Saul Greenberg IBM's Aptiva Communication Center No regard for order and organization

41 Saul Greenberg Haphazard layout Mullet & Sano

42 Saul Greenberg Repairing the layout Mullet & Sano

43 Saul Greenberg Using explicit structure as a crutch Mullet & Sano

44 Saul Greenberg Overuse of 3-d effects makes the window unnecessarily cluttered WebForms

45 Saul Greenberg Navigational cues provide initial focus direct attention as appropriate to important 2ndary, or peripheral items as appropriate order should follow a user’s conceptual model of sequences  

46 Saul Greenberg Redesigning a layout using alignment and factoring Mullet & Sano

47 Saul Greenberg The importance of negative space and alignment Mullet & Sano

48 Saul Greenberg Economy of visual elements minimize number of controls include only those that are necessary –eliminate, or relegate others to secondary windows minimize clutter –so information is not hidden NNNN MMMM xxx: ____ MMMM NNNN  

49 Saul Greenberg Repairing excessive display density Mullet & Sano

50 Saul Greenberg Tabs –excellent means for factoring related items –but can be overdone

51 Saul Greenberg Legibility and readability Characters, symbols, graphical elements should be easily noticeable and distinguishable Text set in Braggadocio Text set in Helvetica Text set in Courier TEXT SET IN CAPITALS   Text set in Times Roman

52 Saul Greenberg Legibility and readability Proper use of typography –1-2 typefaces (3 max) –normal, italics, bold –1-3 sizes max Large Medium Small Large Medium Small   Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive

53 Saul Greenberg Legibility and readability typesetting –point size –word and line spacing –line length –Indentation –color Readable Design components to be inviting and attractive Design components to be inviting and attractive   Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive

54 Saul Greenberg These choices must be really important, or are they? Time & Chaos

55 Saul Greenberg Greyed-out example text hard to read. Why not make it black? Regional preferences in Windows 95

56 Saul Greenberg Text orientation difficult to read Microsoft Word

57 Saul Greenberg Imagery Signs, icons, symbols –right choice within spectrum from concrete to abstract Icon design very hard –except for most familiar, always label them Image position and type should be related –image “family” Consistent and relevant image use –identifies situations, offerings... Partial icon family

58 Saul Greenberg Choosing levels of abstraction  Mullet & Sano

59 Saul Greenberg Refined vs excessive literal metaphors   Mullet & Sano

60 Saul Greenberg What do these images mean? no tooltips included one of the tabs is a glossary explaining these images! which one? Novell GroupWise 5.1

61 Saul Greenberg Idioms Familiar ways of using GUI components –appropriate for casual to expert users –builds upon computer literacy –must be applied carefully in walk up and use systems Pulldown menus Cascading menu Dialog box item Toolbars and tooltips Window manipulation Standard typographic controls Files What you see is what you get displays Microsoft Powerpoint

62 Saul Greenberg Widgets and complexity how can window navigation be reduced? –avoid long paths –avoid deep hierarchies  

63 Saul Greenberg Exercise Graphical redesign Create a grid emphasising: –visual consistency –relationships between screen elements –navigational cues –economy –legibility and readability –imagery

64 Saul Greenberg Constructing a grid 1.Maintain consistency with GUI style locate standard components - title bar, window controls, … 2.Decide navigational layout + white space + legibility + typography annotated grid shows location of generic components these generic components may have their own grids.

65 Saul Greenberg Using the grid 3.Determine relationships, navigational structure map navigational structure onto the grid 4.Economize collapse two windows into one trim sound dialog

66 Saul Greenberg Using the grid 5.Evaluate by displaying actual examples 6.Economize further decide which we prefer vs


Download ppt "Saul Greenberg Graphic Design, part 1. Saul Greenberg Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential."

Similar presentations


Ads by Google