Presentation is loading. Please wait.

Presentation is loading. Please wait.

Layout and Grid-based Design IS 403 – Fall 2013 12.

Similar presentations


Presentation on theme: "Layout and Grid-based Design IS 403 – Fall 2013 12."— Presentation transcript:

1 Layout and Grid-based Design IS 403 – Fall

2 Today FREEDOM –From HTML –From user-centered design basics Next few weeks –Basics of visual design –Making sites that look good (and work well) 2

3 Comments on A1 Back after class (75% got an A or A-, the rest B or B-) In general, good, but a few places to improve –How did tasks map to your comments? –Use images to help, not just eye candy –Pick sites that you have something to say about –Writing quality Run on sentences, grammar, etc. Too many words Sentences that don’t say anything 3

4 Writing tips Don’t speak for users that you don’t know –“this will be confusing to most users” Simple sentences –“the main home page displayed a highly contrasted scheme with light background and dark text that enabled easy reading” –“the home page had a high-contrast color scheme that was easy to read” 4

5 5

6 6

7 7

8 Writing help UMBC writing center –http://umbc.edu/lrc/writing_center.html Get friends/family to proofread More drafts –More drafts I will look at writing during office hours (or by appointment) 8

9 Upcoming Thursday 10/10: Intro to type Tuesday 10/15: A4 demos in class Thursday 10/17: Guest lecture –Shaun at youth STEM mentoring event Tuesday 10/22: Guest lecture –Shaun at ASSETS ’13 conference 9

10 Why layout matters Lead the eye –Reading order What goes together? –Things that go together should look that way –Things that don’t… shouldn’t And maybe it will look nice too… 10

11 The Non-Designer’s Design Book It’s really good You should buy it 11

12 Robin Williams’s principles of design C A R P 12

13 Robin Williams’s principles of design Contrast Alignment Repetition Proximity 13

14 Contrast “If two items are not exactly the same, then make them different. Really different.” 14

15 Contrast “If two items are not exactly the same, then make them different. Really different.” How can items differ? –Color (light vs. dark, bright vs. muted) –Size –Weight (heavy/bold or light) –Border effects etc. 15

16 16

17 Repetition “Repeat some aspect of the design throughout the entire piece.” Why? –Create a consistent “design language” –Give readers something familiar to latch on to 17

18 Proximity “Robin’s Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.” 18

19 19

20 20

21 21

22 Alignment “Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” 22

23 23

24 24

25 Center alignment Tyger! Tyger! burning bright In the forests of the night: What immortal hand or eye Could frame thy fearful symmetry? In what distant deeps or skies Burnt the fire of thine eyes? On what wings dare he aspire? What the hand dare sieze the fire? 25

26 Center alignment Tyger! Tyger! burning bright In the forests of the night: What immortal hand or eye Could frame thy fearful symmetry? In what distant deeps or skies Burnt the fire of thine eyes? On what wings dare he aspire? What the hand dare sieze the fire? 26

27 Center alignment And what shoulder, & what art Could twist the sinews of thy heart? And when thy heart began to beat What dread hand? & what dread feet? What the hammer? what the chain? In what furnace was thy brain? What the anvil? What dread grasp Dare its deadly terrors clasp? 27

28 Center alignment And what shoulder, & what art Could twist the sinews of thy heart? And when thy heart began to beat What dread hand? & what dread feet? What the hammer? what the chain? In what furnace was thy brain? What the anvil? What dread grasp Dare its deadly terrors clasp? 28

29 29

30 White space Literally just empty space in the document Helps “chunk” related items Space around the edges help with reading too 30

31 White space Literally just empty space in the document Helps “chunk” related items Space around the edges help with reading too 31

32 Is this all subjective? Yes, but there are useful principles and guidelines for design For this class: be able to justify your design decisions based on readings or principles Breaking design rules can be good –Especially to attract attention 32

33 Breaking the rules 33

34 34

35 Thumbnail sketching Sketch to get the major points of the piece –But not get bogged down by details 35

36 Let’s try it Take this boring business card and spice it up with contrast, alignment, repetition, proximity 4 minutes (design one side only) 36

37 Your Name Here IS 403 student Skills: UI design, HTML and CSS, user- centered design, prototyping 37

38 Your Name Here IS 403 student Skills: UI design, HTML and CSS, user- centered design, prototyping 38 Your Name Here IS 403 student Skills: UI design, HTML and CSS, user-centered design, prototyping

39 The typographic grid 39 Next:

40 The problem Why do we need grids?

41 The problem Complex documents can be too cluttered, difficult to search Providing a grid structure improves visual search Grids help even if the user doesn’t notice them

42 How to do it Lay out a page on a 2D-grid Identify an underlying grid structure (rows, columns) –Grid cell sizes are multiples of some “base” size Fill grid cells with content –Grid columns may not be same size –Elements may fill more than one row/column

43

44

45

46 1x 2x 4x

47

48 Grid ≠ boring

49

50

51 Whitespace matters

52

53 ur doin it wrong

54

55

56

57 57

58 58

59 59 

60 Grids in HTML The old way: HTML tables –Possible; bad for several reasons Using CSS –The “box model” –Hard to get right… but some libraries can help

61 Let’s try it Put Blackboard on a grid Next time: Working with type 61

62 62


Download ppt "Layout and Grid-based Design IS 403 – Fall 2013 12."

Similar presentations


Ads by Google