This is the P2PU Archive. If you want the current site, go to!

Intro to Design and Usability

Course description: Intro to Design and Usability

B. Maura Townsend's picture
Wed, 2010-12-29 21:20

This is a basic introduction to usability and design fundamentals for absolute beginners. Designing for the web is all about presenting your content so it works best within a relatively fixed environment, such as an HTML/CSS document, and usability is all about making it work well for users who have fairly fixed expectations of how to navigate a website, so they enjoy using your site and stay to use your content.

The focus of this class will be on basic design fundamentals and some introductory usability concepts for people who already have some very basic HTML skills. We will cover things like eye tracking and why certain layouts are more usable, why contrast, text sizes, type styles, choice of graphic elements, and color choice are important, and a basic overview of what user experience is and why it's important for any page.

I will be using the work of Vincent Flanders and Jakob Neilsen as our main resources, with a few others.

Prerequisites/skill demonstrations:
Some demonstration of very basic HTML and web familiarity

Items I plan to cover are:
  • Why design is important on every site
  • How web design is different from print design
  • The role of graphics, color choices and font styles in user experience
  • Eyetracking and user behavior, and what they mean in site design
  • Basic information presentation (menus, graphics, main and additional content)
  • How to present supplementary content (video, downloadables, interactives, galleries)
  • Where to get images legally plus a brief overview of copyright and how it applies to the web
  • Tools and resources for the beginner (including online tools like Aviary)

I'm planning on using the following sites for course materials:


About fonts:
This is planned to be a very general, beginners, course, and while a detailed typography section would be great for a more focused, semester-length, designer-focused course (such as the one I took in college on the fundamentals of print design), I think going over font styles in a general way will be more effective for people who are just starting out. What I'm planning to cover in the third bullet above are things like avoiding too much variation in fonts, sticking to one family for ease of reading, and avoiding fonts-as-graphics, unless absolutely necessary.

About Flash, Silverlight, games and other proprietary development software:

Since this is intended for people who have just learned or are just learning HTML, rather than experienced designers, I will not be touching on more advanced, proprietary, app-focused development software like Flash and Silverlight , beyond briefly discussing how such items can best be placed into a larger site. Though Flash-only sites are often lovely, they are an entirely different environment than a typical web page, and the design concerns are more like those involved in software interface design and game design than web design. While there is often a good deal more freedom in how you can structure such sites, and more you can visually do as a user, the design issues are more in what sort of environment you want to create and less in making your content work well for your viewers, within a relatively fixed environment, like a mostly-text web page.

I may only touch on proprietary app-focused stuff like Flash, because it's really beyond the scope of a beginner who is trying to create a simple site - something like "how to position supplementary material" - which will also apply to things like photo galleries, video, downloadables (PDFs, apps, etc) and audio content. I might go as far as suggesting it's not a really good idea to use Flash unless you have some interface design or professional media experience, since it's meant to create environments.