Lecture for Web/Mobile Design

1. Designing for the
Web
Media Design
Strauch

2. What do users like?
• Easy to Use
• Speedy
• Practical
• Simple
• Credible
• Support

6. General Principles
• Consistency
• same basic
layout grids
• same graphic
themes
• same
hierarchies of
organization

7. General Principles, cont.
• Interaction
• predictable
• visible
• reversible

8. General principles, cont.
• Instruction
• tell them what to do; don't make them guess

9. * more than one way to find what they're looking for

10. • Navigation
• hierarchical
• sequential

11. Hierarchy

12. • Control
• allow them
to
personalize

13. What? No Soccer
Players?!?

14. Visual principles
• Graphics
• tell at a glance if it's
decorative or a link
• Don’t use it if it doesn’t
have a purpose
• keep in mind global
audience

16. • Text
• organize into small,
digestible pieces
• scannable
• sans serif rather than serif
for body text
• roman rather than italic

17. • 9-11 pts for body text; 14-28 for headlines
• upper and lower case rather than all caps
• line lengths of less than 50 or 60 characters long.
• High contrast between text and background colors.

18. Layout
• use graphics to
illustrate, inform and
aid in navigation
• use white space with
visual "breathing
room" to visually
organize the page
• invisible table lines,
rather than visible
ones

19. Multiple points of entry
• Point of entry =
any way to get
further into your
site

21. Getting started
• First, know your purpose, your audience and your content
• Sketch it out. (Wireframe)
• Grid layout

25. More terms to know
• Cascading Style Sheets
• HTML5
• Responsive web design
• http://foodsense.is/
• http://www.bostonglobe.com/

26. Newspaper Website
Trends
From Smashing Magazine

27. Color Schemes
• dark text on a white background.
• blue and red colors in addition to a dark gray
or black for text.
• Blue = headlines, article titles and links. Red
= sparingly as an accent color.
• Some news websites also mix in more colors
in other places, such as in the navigation.

29. Header and Sidebar
Banners
• Some websites use banner ads on all pages, and others
exclude banners on the home page but display them
above the header on other pages.
• News websites commonly use 300 by 250 banners or tall
skyscrapers. Many of the websites mix in some AdSense
or other text link ads.

31. Top Navigation
• Most news websites put their primary navigation menu
just below the header and above the content.
• The New York Times and MSNBC are two of the
exceptions, as they both use the left sidebar for the main
navigation.

33. Tabbed Content Areas
• tabbed content areas allow visitors to see
popular articles, recent articles, most
commented articles, etc.
• sometimes used in the sidebar
• more control by users over what content and
links they see, and it can save space in the
design by making more content accessible in
a specific area.

35. Grid Based Layouts
• The grid is a popular choice not only because of the
sharp look it creates but because it’s one of the most
effective ways to manage and organize a large amount of
content.

37. Some top newspaper
websites

54. Good Business
Web Design
From
http://www.webdesignfromscratch.com
/current-style.php

55. Simple layout
• 1-2 columns
• But 3 column grid
also popular

56. Centered orientation

57. Design the content, not the page
• Freer, less boxed-in page layouts
• Softer, simpler, receding page "furniture"
• Strong color and 3D effects used to draw attention to the
content itself, including the main branding
• The focus is on making the site's subject look good, rather
than making the web designer look good (which is better for
the designer in the long-term!)

59. Soft, neutral background colors
• plain background, the most popular being white and
greyscale fades.
• These give a cool, neutral, soft base against which you
can flash strong color to draw the eye.

60. Strong color used sparingly
• A soft, stylish background is the perfect base for
adding eye-catching features. Strong colours and
tonal constrast are great for drawing the eye to the
more important elements on the page.

61. White Space
• Your eye needs space (guttering in typo language) round stuff
to help you clearly and cleanly identify things.
• Of course, "white" space doesn't have to be white. But it does
have to be space!
• “It's very rare that I look at a page and think: ‘Gosh, they really
need to cram that page up a bit!’”
• Law of proximity – pull related items together and then have a
larger bit of white space between that item and the next related
items.

63. Nice big text
• small text is fine for reading text; we tend to take in more when
text is a bit smaller.
• But…Make the most important text on the page bigger than
normal text
• If all your text is big, then none of your text is big.
• Use bigger text to help your visitors see quickly what the page
is about, what's most important, and figure out where they
want to look next to find what they want.