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

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

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

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”

8. Writing help UMBC writing center Get friends/family to proofread
Get friends/family to proofread
More drafts
I will look at writing during office hours (or by appointment)

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

10. Why layout matters Lead the eye What goes together?
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…

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

12. Robin Williams’s principles of design
We read about them

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

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

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.
This is one rule people are wimps about

16. This is one rule people are wusses about

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

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.”

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

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?

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?

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?

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?

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

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

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

33. Breaking the rules People look at this and say, WHOA, this is bold
But all of the other design is consistent

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

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)

37. Your Name Here IS 403 student Skills: UI design, HTML and CSS, user-centered design, prototyping
----- Meeting Notes (10/8/13 15:35) -----
james kaitlyn mike elena katrina bethany michael shawn eric shubam aditi polly dominique david joe kyle colin ian ting kirk

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

39. Next:
The typographic grid

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
We often see grids in 1-dimension

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

46. 1x 2x 4x 4x

48. Grid ≠ boring

51. Whitespace matters

53. ur doin it wrong

59. 

60. Grids in HTML The old way: HTML tables Using CSS
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