Live event blog: Web design crash course with Rob Weir

By Cole Kennedy

The Palmer Room (RJI100) is filling up and we're getting ready to start our web design crash course with Rob Weir. Still time to come on down and learn the fundamentals, like typography, layout, and color scheme.

Rob's presentation is titled "Web design in 60 minutes," and we're excited to see what we can learn in an hour.

Rob is the director of digital development for the Columbia Missourian, so he takes care of all of the Missourian's technology.

The basics: web design is 95 percent typography. The other five percent is made up of:
  • color, contrast, and balance
  • presenting relevant information
  • letting your content tell its own story

Sites that are readable, usable, and built with a clear vision in mind are the best sites on the modern web. Sites that confuse decoration for design that obscure or minimize navigation and readability; or that use non-native ways to present content, fail.

There is an issue of "material honesty" on the web. Don't mask web pages with design elements that are not native to the web. A plywood Eames chair is materially honest, a plastic Atari box is not.

The foundation materials of the web are http, html, and URLs. For style, most websites use CSS. For interaction, good web design uses Javascript. Some sites, however, rely solely on Javascript to render their pages fail the "material honesty" test.

Rob's showing a clip from the documentary Objectified, which highlights industrial design.

We've arrived at the discussion of skeuomorphism; this is a term means that physical ornament or design on an object is made to resemble another material or technique. It's been a very trendy term lately, though sometimes it is used incorrectly.

When Xerox designed the first computer graphical user interface, they did it so that people would understand how to access information as they moved from a physical to a virtual environment.

By focusing too much on making web design skeuomorphic, designers can forget the very content that made media interesting and desirable in the first place.

It is critical for web design to be accessible.

Back to typography! Typography is two things: one is the actual design of typefaces, the other is the use of typefaces to convey meaning. The latter is more important to the web designer.

Type conveys meaning, the emotion and tone of the meaning, it can add to or detract from a site's credibility, and it works to organize information and indicate structure. Think about how a newspaper is laid out with a title, headline, subheads, and the article body.

There are many different types of type. There are serifs, slab serifs, and sans serifs. A serif is a little protrusion at the ends of individual characters. When the writing moved from handwriting to the press, serifs emerged as the preferable type style.

Matthew Butterick wrote a book, Practical Typography, that is freely available in the web. It includes a five-minute guide to using type better. He notes that the quality of your project is largely dependent on the quality of the body text, since there's more of that than anything else on the page. The size of the body text directly affects legibility, as does line spacing and length.

A critical aspect of making a credible and beautiful website is using professional fonts and avoiding system fonts.

An interesting trend in typography at the moment, in which designers will create a pair of typefaces, one serif and one sans-serif, that are meant to pair very well together. Consider Mrs. Eaves and Mr. Eaves.

There are a bunch of options to use professional typefaces, at varying price points and with different licensing options. TypeKit is owned by Adobe, and has an extensive library. Font Squirrel is similar to Typekit, but allows you to download free fonts for use on your site. Finally, Google Fonts offers free embeddable fonts for your site, but they have fewer options than Typekit and Font Squirrel.

A handy test for legibility: the Il1 test! An uppercase letter I, a lowercase letter l, and the numeral 1, set next to each other, to determine how difficult it is to tell the characters apart from one another.

A rule of thumb for color: too little is typically better than too much.

Desaturated images can help web designers understand how a page looks to a color blind web user, and how they navigate the web page. It's important to understand contrast as much as color itself.

There are four primary color classifications: monochromatic, analogous, complementary, and warm/cool. Color schemes connote an emotional effect.

Balance occurs when no single part of the page is significantly larger than another part of the page.

Of course, the biggest part of web design is content. Does your content align with what people want to see? Or is it there because it's there and it's always been there? Don't pummel your content with too much design.

To start designing a website, start sketching on paper. Then check out a website called 960.gs, which helps organize a web page on a grid that works with computer screen proportions. Another tool is grids.heroku.com and unsemantic.com for designing grids.

The best way to find out if your website works is to show it to another person. It doesn't take a lot of time or effort to test a website - a study actually showed that testing with only five users can reveal 80% of mistakes.

If you want to check out some of the links, and whole lot more links that are relevant to the talk, check out Rob's Delicious page: delicious.com/jschooltiger/onadesign14

Watch the entire event here:


1 comment:

  1. Rob is the director of digital development for the Columbia Missourian, so he takes care of all of the Missourian's technology.Web Design

    ReplyDelete