Monthly Archives: November 2013

Typography II


Site 1

Site 2

Site 3

Site 4

Site 5

Site 6

Site 7

In groups (3-4)

  1. What do you like about the typeface?
  2. How many are on the page?
  3. Is it readable?
  4. Would size change help?
  5. Would color change help/hurt?
  6. General feelings about whether the type works for this site.


Choosing a type and font makes a difference on the perception of your site:

To demonstrate their point, Sela and Berger conducted a number of clever experiments. In one test, they gave people a selection of airline flight options. One group was given these options in a small, low-contrast font (high-difficulty condition) while a second group was given the same options in a larger, high contrast font (low-difficulty condition). Not surprisingly, the hard-to-read font led to increased deliberation time, as people were forced to decipher their alternatives. What was more interesting is that this extra effort led to perceptions of increased importance: The flight options now seemed like a weighty decision with profound consequences. (This effect was especially pronounced when people were led to believe that the choice of flights was actually unimportant.)


Link to Typekit help on WP

More on Typekit

Typography Plugins

Best Practices


Typography Inspiration

Sitemaps & Wireframes, cont

NHMin site map & wireframe example

NHMin link to site

Wire Frames – mapping things out!

Tools: Mashable List, SixRevisions’ List, Webdesign Ledger’s List

Wireframe examples

MockupPublisher Examples

We’re going to map a church site – Mercer Island Presbyterian & a non-profit – Broad Street Ministries

Draw a “wireframe” or map of the site – number each box.

For each box make a page with the content shown, with the graphics as they exist, etc.


Site Maps & Wireframes

Some nice resources from a grad class at UW

Design Tools

  • Site Maps
  • Wireframes 
  • Storyboards
  • Now talk about site structure. What is the overall “table of contents” for the site? (This is another way to think about navigation structure.) What kind of content will live in each category? Which pieces of content will “live” in more than one category via the magic of hyperlinks?
  • Now talk about content.  Where are you going to get your content? What content is related to social media (either crowd-sourced or developed and deployed for social networking sites)? Remember, the final project has to contain content – so this is a good time to start identifying the content for the top level pages for each section, at a minimum. Think of this as a draft of your deliverable to me (content plan new/conversion and social media integration).
  • Finally, which social media sites absolutely must be integrated with this website? Why? How are you going to do this?