This tutorial is about designing your web site, including planning for the user experience, laying out the pages, designing for different devices with responsive design, doing a design critique, and implementing analytics.

The 4 “Ws” of Web Design

A work-in-progress, someone with a sense of humor determined that there are four “Ws” of web design, a reference to “www” or “W3”:

• Width—Design for width, let scrolling handle the height.
• Who—We do not know who will visit our site, but we want everyone to feel welcome and be able to use it, even with any sensory challenges they may face.
• What—We don’t know what equipment and software our users have, such as the computer platform or device, monitor or screen, operating system, browser, browser window size, color settings, and installed fonts. However we try to design for the common scenarios, such as large-screen monitors and cell phones, and give the fonts to users whenever possible.
• Where—We don’t know where our audience comes from, but we would like to keep them on our site as much as possible.

User Experience Design (UXD) and “DesignAgility”

Steve Jobs of Apple Computer once said something like, “We must always think about the customers first and develop technology to meet their needs; we cannot start by inventing cool tech and then look for a way to sell it.”

Likewise, when designing web pages, designers have to think about the purpose of the site, the audience, and the readers’ experience as they use it — a process commonly called “user experience design” (UXD). “DesignAgility,” a systematic approach to UXD for media, was created by Okke Schlüter from HdM-Stuttgart and Stefanie Quade (reference: Quade, Stefanie, and Okke Schlüter, DesignAgility—Toolbox Media Prototyping. Amazon Kindle Direct Publishing, 2019). DesignAgility combines “design thinking” with “agile manufacturing.”

The first step in DesignAgility, “Discovery,” is to think of a challenge or problem that people want to solve. For a web site, this could include questions like: What is the site’s purpose—to inform, persuade, entertain, or receive a product or service? What is the dominant media—text, photos, videos, animation? Who will the audience be, and what are their interests and possible sensory challenges they may face in reading and/or listening to the site?

The second step, “Interpretation,” means to develop an understanding of how people will meet their challenge by using your site. A valuable step in understanding users is to define several “personas,” who form a representative sampling of presumed users of the site, and their characteristics.

The third step, “Ideation,” means thinking of solutions to the design challenge. The personas’ perception and use of a site can be expressed in “user stories.”

Some additional DesignAgility steps are described in the table below.

DesignAgility Example

Discovery and Challenge Identification. Define a challenge or problem that people want to solve. For this example I plan to make a site about Russian fairytale boxes. These are small, hand-painted boxes with illustrations of little-known fairytale characters like “The Grey Wolf” and “The Firebird” that date back to the time of the Russian Czars. On a trip to Ukraine I bought several of the boxes and plan to photograph them so I will own the rights to the photos.  The photos and text are equally important. The site should to appeal to readers “from 6 to 106.”

Interpretation and Personas. In planning the site I developed 2 “personas” of presumed users:

Ideation and User Stories. On this site the pictures and text are equally important. The photos should look good in color and when rendered in black-and-white. The text should be high-contrast and enlargeable and be readable with a screen reader or included audio. The pages should be designed responsively so they look good on both desktop computers and tablets and cell phones.

Page Layout

A web site’s purpose and audience are important to know before designing pages. As discussed in Tutorial 1, page layout for the web is different than it is for print because the designer never knows what type of computer, device, operating system, monitor, screen, browser, or window size the readers will use. Regardless, we want everyone to feel included and be able to use the site.

Web pages can be designed with fixed or variable sizes. Fixed size is easiest for text-heavy pages, such as news stories, while variable sizes are good when photos are the dominant media.

Below are examples of fixed-width and variable-width pages.

Example of a fixed-width page for a text-heavy document, designed to look like a U.S. Letter or A4 page. The “page” centers itself in the browser window and remains the same size. Sizes were defined in px (pixels).	Example of a variable-width page used because the photo is the dominant medium. The photo and text expand as the browser window is enlarged. Sizes were defined in “vw” (viewport width) and “vh” (viewport height).

Responsive Design

Does your web page need to be readable and look good on a large-screen monitor, cell phone, and iPad or tablet? If so then it should be designed to be “responsive,” or adaptable to different screen sizes.

Styles for responsive design include “width” set in percent instead of pixels, and limiting the width to that of the browser window by using the “max-width” style in percent.

In the two examples below, the widths of the page elements in the responsive page are set as 100%, 20%, and 80%, respectively; while in the fixed-width page they are set in pixels (px).

Further refinements to responsive design can be made using the media query rule (@media), in which the resolution of the applicable styles is defined. Example: @media only screen and (max-width: 750px) {}. Inside the braces would go the styles applicable to screen resolutions of 750px or less. Details in Tutorial 4.

Design Critique

This section is based on a design critique contributed to class by Prof. Bettina Tabel, HdM-Stuttgart. When designing a web page, it can be useful to get a design critique from an objective third party.  Following is a list of questions to consider:

Home Page

1. What is the purpose of the site? Audience? Is this clear from the title and design?
2. From the title and main photo (if any), are the subject and theme of the site clear?
3. Does the site’s color scheme fit the target group and the subject? Should the color scheme be neutral, pastel, bright, complementary, analogous, or other theme?
4. Is the font selection appropriate to the site’s subject and audience?
5. Are the fonts legible (size, contrast)? Could they benefit from a drop shadow, complimentary-colored or lighter or darker background?
6. If the site has one or more photos, have the image rights been clarified?
7. Are photos sized appropriately to the pages and for viewing on different devices?

Other Pages

1. Do special effects (drop caps, callouts, sidebars) contribute to the theme of the site without being distracting?
2. Are photos large enough for readers to see detail? If the reader clicks on or touches a photo, does it link to a larger version that can be viewed in more detail?
3. Are sections (if present) separated clearly?

Sample Critique • Questions

1. 1. 1. Why are the top and bottom borders not the same height?
      2. Why are the links not vertically aligned in the menu bar
      3. Why are the links set in all caps?
      4. Why is a serif font used for the links?
      5. Why are the line lengths so long?
      6. Why was a script cap initial used when it’s difficult to read?

Common Design Flaws—Don’t Do It!

The graphic below shows several examples of common web design flaws, which are listed below and corrected in the second graphic.

1. Itty-bitty images—can’t see! Make ’em bigger because people want to see!
2. Excessively large image files (>1 MB) reduced in width in CSS. They take too long to download. Size appropriately in Photoshop or Preview.
3. Use of bold paragraph <p> for headings. Instead use heading tags <h1>, <h2>, …, <h6>.
4. Use of underline for headings, reminiscent of typewriter days. Use a heading tag and a complimentary font.
5. Use of default Times Roman font (boring!).
6. Itty-bitty font size (can’t read!). Make it 14pt or bigger and 1.4em line leading (line-height).
7. Insufficient vertical space between elements. Use padding and/or margin to adjust vertical height, not carriage returns <br/>.
8. Type lines too wide (can’t read!), set paragraph width to be 70 characters or less and center on the page.