The First Steps of Website Design - dummies

The First Steps of Website Design

By Lisa Lopuck

When you buy or receive toys labeled “some assembly required,” you know you’re in for a brain-twisting treat. The design phase of a website is your chance to write the instruction manual for the team before anyone begins pushing pixels around.

Creating a sitemap for a website

As with creating blueprints for a new office building, a primary task in the design phase for any website, large or small, is to create a sitemap, a diagram that shows all of a site’s pages and how they interconnect. Without a sitemap, you’re headed for frustration. For one thing, the team won’t have any unified direction. Secondly, without a plan, you can’t possibly anticipate all the content, pages, and features that need to go into the site.


Developing wireframes in web design

While the sitemap shows the website from a bird’s-eye view, it doesn’t give you the detail you need to design and build each page. For that, you need a series of wireframes.

During the Design phase, the information architect collects input from all team members and builds a diagram layout, called a wireframe, for each major page of the site. Like a sitemap, a wireframe is a diagram, but instead of displaying a zoomed-out view of all the site pages together, a wireframe shows a detailed view of a single web page. A wireframe shows the following elements:

  • Global navigation scheme (the navigation that appears on each page of your site)

  • Text and media chunks and their relative importance to one another

  • Interaction design (how people use the elements on the page, which is documented with callouts to label its parts)

    [Credit: © Qualcomm]
    Credit: © Qualcomm

Website user testing

Testing wireframes with users is an iterative process that you start in the Design phase and continue well into the Development phase. (Iterative means doing it over and over again, incorporating what each try tells you. In terms of testing, that’s something you better get used to right off the bat.) Testing early in the Design phase helps you stay on track because you can quickly make small adjustments before going too far down the production path.

Putting together a website content plan

Hand in hand with wireframe development is figuring out a content plan. After all, how can you suggest content like a news area on a page without knowing where the news will come from, how extensive it will be, and how often the client will be able to update it?

If the site will be using a content management system, or CMS (a database system that houses all your text and feeds it to your pages), the content strategist defines a list of all the kinds of text components that go on each page and establishes names and rules for each. For example, an “item title” may have a certain character limit and must use initial caps.

Lastly, during the Design phase, the content team thinks about the writing tone that would be best suited for the site, given the company’s brand personality and business goals established during the Definition phase.

Establishing “look and feel” in web design

After you finalize the sitemap with the client and develop the wireframes to the point where content and interactive elements contained on each page are more or less decided, the visual designers can explore different design directions for the site. Designers use the wireframes as the underlying skeleton to understand what content and interaction design they need to account for. They don’t simply “color in” the wireframes; they use them as a guide to understand the relative importance of items while they’re creating their layouts.

The general practice is to create a design treatment for the home page and a subpage (anything but the home page). This forces the designers to figure out a design that can tie the whole site together and account for the site’s navigation scheme.

[Credit: © Sentrigo, Inc.]
Credit: © Sentrigo, Inc.

Getting input from a focus group

Most often the client chooses the final design direction after one or two rounds of noodling or “frankensteining” (patching elements from different designs together). For high-profile websites, however, it’s a good idea to get input from a focus group to see which design resonates most clearly with them before you present the design to the client. That way, you have customer-feedback ammo when you present, and can help steer the client more objectively in the right direction.