Category Archives: Course Notes

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?

Persona Exercise

guy gamer

A real name: Griffin Oakes

Age: 19

Personal info:

Grew up in a Christian home in Magnolia, loves lacrosse, playing drums, has two parents (a bit older than average). Active with youth group. A little distracted when it comes to school work.

 Work environment (not a job description!)

Lives in the dorms here at NU – doesn’t go to the library much.

 Computer proficiency and comfort with the Web

Comfortable with web and searching, but not super-techy. Very game oriented.

Info-seeking habits

Asks friends, shows friends around games, does research on web about things he’s interested in.

Attitudes, including pet peeves

A bit shy, cares about what others think. Gets impatient with himself easily.

Personal and professional goals

Wants to go on the road with a band or be a game developer.

Motivation: why would this person use your product?

Entering freshman at NU – has to use site for class.

Fill in the pieces of the worksheet
And email it to me.



Details for Defining Personas

  • A name (a real name like Greg or Madeline, etc.)
  • Age
  • A photo or image is you can find one
  • Personal information, including family and home life
  • Work environment (the tools used and the conditions worked under, rather than a job description)
  • Computer proficiency and comfort level with using the Web
  • Pet peeves and technical frustrations
  • Attitudes
  • Motivation or “trigger” for using a high-tech product (not just tasks, but end results)
  • Information-seeking habits and favorite resources
  • Personal and professional goals
  • Candid quotes – if you could imagine what someone was saying.

Source: Alan Cooper, The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, Indianapolis: Sams, 1999, Chapter Nine. (Wording condensed and modified.)

From InfoToday

More Tasks To Think About

Kathy Gill’s Notes

Writing for the Web


  1. Choose a site similar to the one you are developing.
  2. Check out the writing – on the front page, on the “about” page, captions, etc
  3. Is the writing of good quality – is there too much of it – how can you take lessons for YOUR site?
  4. Pick one piece that is particularly good or bad – send me the link:


8 Common Mistakes

Tips for Web Writing