Improving the design of a website doesn't necessarily mean an overhaul that focusses on adopting modern trends. In fact, it can mean just the opposite. There are many small, time-tested methods for improving design, such as refining typography, choosing images wisely, considering white space, and embracing CSS3. Even things like editing content and linking intuitively can have a big impact with little effort. This session will provide pratical tips for improving readability, usability, aesthetics, and overall user experience, without having to gather the troops, form a committee, and embark on a journey to Mordor.

2. 3. Choose Images Wisely
1. Learn Design Principles & Elements
2. Refine Typography
4. Edit Content
5. Link Intuitively
6. Embrace CSS3
7. Consider White Space
8. Be Responsive
9. Remember Form Follows Function
10. Keep it Classic

3. LEARN DESIGN
PRINCIPLES & ELEMENTS
1

4. The elements of design are the
fundamental building blocks of art.
Wikipedia: Design Elements & Principles

5. DESIGN ELEMENTS
• Line
• Shape/Volume
• Texture
• Illusion of
Space
• Illusion of
Motion
• Value
• Color
Design Basics, David A. Lauer & Stephen Pentak

6. The principles of design describe how
the elements of design come together
to create a design.
Wikipedia: Design Elements & Principles

7. DESIGN PRINCIPLES
• Unity
• Emphasis/Focal
Point
• Scale/Proportion
• Balance
• Rhythm
Design Basics, David A. Lauer & Stephen Pentak

8. drupal.org
GRID SYSTEM

9. drupal.org (grid produced by 960 Gridder)
GRID SYSTEM

10. drupal.org
GRID SYSTEM

11. thegreatdiscontent.com (style sheet)
CSS GRID

12. apple.com
Illusion of space and
breaking of the grid
Selective color usage
Clear hierarchy
Good balance
MINIMAL DESIGN EXAMPLE

13. redtiki.com.au
Illusion of space and
breaking of the grid
Selective color usage
Clear hierarchy
Good balance
SATURATED DESIGN EXAMPLE

14. REFINE TYPOGRAPHY
2

15. www.lukew.com/ff/entry.asp?1288
WEB TYPOGRAPHY ADVICE

16. www.lukew.com/ff/entry.asp?1288
WEB TYPOGRAPHY ADVICE
Good typography is invisible.
Don’t make me think about how to
read, just let me read.
Jason Santa Maria, An Event Apart Presentation

17. www.lukew.com/ff/entry.asp?1288
WEB TYPOGRAPHY ADVICE
There are no rules in typography,
only guidelines and best practices.
Jason Santa Maria, An Event Apart Presentation

18. www.lukew.com/ff/entry.asp?1288
WEB TYPOGRAPHY ADVICE
Bigger is better.
Always err on the side of making
things bigger rather than smaller.
Jason Santa Maria, An Event Apart Presentation

19. www.lukew.com/ff/entry.asp?1288
KEEP THIS IN MIND
Typography is hard.
There are tons of fonts out there and
people go to school to study it.
Jason Santa Maria, An Event Apart Presentation

20. typekit.com
FONT OPTIONS

21. robedwards.org
Consider your style.
Then make sure your type
choices conform.
FONT CIRCUS

22. fusionbundle.com
Fits illustrative style
Restricted to “headers”
Upper and lower
case offers variation
DISPLAY FONTS

23. corporateriskwatch.com
Balance of two typefaces
(serif & sans serif)
creates further visual
interest and depth
Dramatic scale
variation gives page
energy and hierarchy
ELEGANT TYPEElegance through Subtlety
Use of italic sets
apart navigation

24. WEB TYPOGRAPHY ADVICE
If nothing else...
Consider scanability and readability.

25. socialwork.illinois.edu
READABILITY
Serif fonts are difficult to
scan and read in large doses
Serif fonts work well in
headers and pullouts

26. business.illinois.edu
READABILITY
Too much bold text,
or a heavy font can
weigh the page down
and look daunting
Weight matters

27. engineering.illinois.edu
READABILITY
Small type and long line
lengths are difficult to read
Wide leading and thin
paragraph spacing blends
all the page text together

28. alistapart.com
READABILITY
Optimal line lengths
Good spacing between
headers and paragraphs
Nice weight variation between
headers and paragraphs

29. cnn.com
READABILITY
Optimal line lengths
Good paragraph spacing

30. CHOOSE IMAGES WISELY
3

31. A photo is an image.
An image isn’t necessarily a photo.

32. There is no need to use generic images.
Content naturally produces relevant images.

33. markhobbs.net
Info graphics such as
charts, graphs, & tables
can add color & lines
to your page
Headers can serve as
graphics to bring visual
interest to a page
HEADERS & INFO GRAPHICS

34. apple.com
Icons can establish
visual identities
Icons can act as visual
entry points into your
content
ICONS

35. blog.squarespace.com
Who needs a photo?
Type alone can draw
your eye in
Large scale type
can quickly bring visual
interest to your page
TYPE AS IMAGE

36. futureofwebdesign.com
Buttons often benefit
from extra visual
emphasis
Navigation can easily
act as image
NAVIGATION & BUTTONS

37. dance.illinois.edu
Always produce the
smallest file size
possible, however large
your image
FILE SIZE MATTERS

38. CROP & EDIT
ORIGINAL VERSION

39. CROP & EDIT
EDITED VERSION

40. CROP & EDIT
Crop out unnecessary areas
EDITED VERSION
ORIGINAL VERSION
Enhance color
Provide a finishing touch
(such as a vignette)
You don’t need to
replace ‘so-so’ photos;
Simply tweak them

41. EDIT CONTENT
4

42. People seek your content,
not your design.

43. Design is what you do with your content.
The two should be one.

44. Edit. Don’t settle for ‘first-draft’ content.

45. jasonsantamaria.com
A lead should be brief
and highlight the main
point of the page
A good lead will bring
readers into your content
PROVIDE A LEAD

46. thebolditalic.com
A sub-header should
expand a good title,
providing more context
A lead and sub-header
can work together
USE A SUB-HEADER

47. bbc.com
Related links make good
pullout material
Additional related
content can break-up a
predictable flow
CREATE PULLOUTS

48. smashingmagazine.com
Block quotes are a great
way to add visual interest
Block quotes give readers
easy entry into the middle
of your content
STYLE BLOCK QUOTES

49. smashingmagazine.com
Lists are optimal
for good scanability
Headers break up your
content and help readers
scan quickly
HEADERS, LISTS, & PARAGRAPHS
Short paragraphs make
your content more
approachable

50. hanzell.com
Is there a video or
image that compliments
your text?
Block quotes can function
as their own elements
VARIETY IS KEY
Even paragraphs can have
different styles, depending
on their function

51. LINK INTUITIVELY
5

52. Every link is an opportunity.
Links can enhance your design.

53. Write links like you would write a heading.
Tips for Writing Great Links, gerrymcgovern.com

54. media.illinois.edu
URLs are not reader
friendly or easy to scan
Links should specify what
they will provide the reader
READABILITY & SCANABILITY

55. media.illinois.edu
Emails, like URLs, are
not reader friendly or
easy to scan
Limit links to 8 words or less
to improve scanability
READABILITY & SCANABILITY

56. housing.illinois.edu
Is this a link?
Headers and links should not be
treated the same, if headers
aren’t links
COLOR & UNDERLINE

57. foodsense.is
Is this a link?
No mistaking what’s a link
on this page
COLOR & UNDERLINE

58. mozilla.org & sylion.com
Buttons can be significant
design elements
CALL TO ACTION

59. barackobama.com
Links mean action
Why hide them?
CALL TO ACTION

60. apple.com
Images demand attention
Every image on this
page is a link
USE IMAGES

61. waterworks.com
Links introduce interaction
Symbols can provide
necessary clues to users
NAVIGATION & INTERACTION

62. EMBRACE CSS3
6

63. Visual effects that were dependent on
images and overcomplicated HTML are
now possible through CSS.

64. admissions.illinois.edu
Columns are great for short lists
and small sections of text
COLUMNS

65. COLUMN CODE
.column2 {
column-count: 2;
column-gap: 20px;
}
<div class=”column2”>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
HTMLCSS

66. admissions.illinois.edu
Old browsers show a single column
COLUMNS

67. admissions.illinois.edu
SHADOWS, GRADIENTS, & CORNERS
Gradients help set items
apart and add depth
Rounded corners help
soften a design
Shadows on text and
boxes add depth

68. h1 {
text-shadow: 1px 1px 1px #333;
}
div {
box-shadow: 3px 3px 5px #333;
border-radius: 3px;
}
CSS Gradient Generator: www.colorzilla.com/gradient-editor/
SHADOWS, GRADIENTS, & CORNERS
SAMPLE CSS

69. admissions.illinois.edu
Old browsers show a
flatter design
SHADOWS, GRADIENTS, & CORNERS

70. midwinter-dg.com
CSS3 TYPE EFFECTS

71. CONSIDER WHITE SPACE
7

72. White space is breathing room.
Blank space is awkward.

73. spurlock.illinois.edu
Is something missing?
Blank space is noticeable
and looks like a mistake
BLANK SPACE

74. fellswoop.com
Breath.
White space is simply
negative space and goes
unnoticed when used well
WHITE SPACE

75. hanzell.com
Room to operate
White space gives elements
margins for style
WHITE SPACE

76. BE RESPONSIVE
8

77. Big screens, small screens, whatever.
Responsive web design uses layouts
that adapt to the viewing environment.

78. @media only screen and
{min-width: 1024px} and
{max-width: 1140x} {
p {
font-size: .875em;
}}
RESPONSIVE MEDIA QUERY
SAMPLE CSS
Options galore
This code will change the font size of
paragraphs when the screen size is
between 1140px and 1024px

79. thegreatdiscontent.com
Large computer screen
RESPONSIVE EXAMPLE

80. thegreatdiscontent.com
Small computer screen
RESPONSIVE EXAMPLE

81. thegreatdiscontent.com
iPhone screen
RESPONSIVE EXAMPLE

82. thegreatdiscontent.com
RESPONSIVE EXAMPLE

83. smashingmagazine.com
RESPONSIVE EXAMPLE 2

84. smashingmagazine.com
1 2
3 4

85. smashingmagazine.com
5 6 7

86. thegreatdiscontent.com

87. REMEMBER FORM
FOLLOWS FUNCTION
9

88. Design has real purpose.
It isn’t about making something look good.
It’s about making content accessible and
leaving an impression.

89. amazon.com
Drop shadow to draw
attention to the menu
DESIGN = SELL
Featured item front
and center so you
will want it
Lots of tems you
want, featured with
thumbnails
Large search bar so you
can find your items fast

90. google.com
“I’m Feeling Lucky” button
sets fun tone while
assisting you with
searching
DESIGN = SEARCH
Iconic branding brings
visual attention to the
search area
Discreet menus to
prevent distraction
from searching
No distractions to keep
you from searching

91. colly.com
DESIGN = BROWSE

92. usatoday.com
DESIGN = READ

93. vimeo.com
DESIGN = WATCH

94. arias.ca
DESIGN = LOOK

95. KEEP IT CLASSIC
10

96. Less is more.
Keep it simple.

97. apple.com

98. mcsweeneys.net

99. designingmonsters.com

100. SWELL!
Any questions?