The Web Design Process: 8 to-remember Practices

The Web Design Process: 8 to-remember Practices

These rules and suggestions focus on the importance of developing and sticking to a process when approaching Web design.

Suggestion: Always collect content as soon as possible

The design or prototyping stage is the most fun for most Web designers, as it starts to bring form to the project. During this phase, both technical and visual prototypes should be developed. However, before prototypes are built, consider collecting as much content as possible. The content itself will influence the site and help guide it form. If the content is written in a very serious tone but the visuals are fun and carefree, the site will seem very strange to the user. Seeing the content up front would allow the designer to integrate the design and content. Also, consider that content collection can be one of the slowest aspects of site design. Many participants in a Web project are quick to attend brainstorming meetings but are difficult to find once their content contributions are required. Lack of content is by far the biggest problem in Web projects. Deal with this potential problem early.

Rule: Visual design should proceed in a top-down fashion from home page to subsection pages and finally to content pages.

Design should proceed top-down. Think first about how the user will enter the site and conclude with about how they will leave. In most cases, this means designing the home page first, followed by subsection pages, and finally form or content pages.

First consider creating page mockups on paper in a block form. Block comps (or more commonly wireframes) allow designers to focus on the types of objects in the page and their organization without worrying too much about precise placement and detail of the layout itself. The block sectioning approach will also help the designer to consider making templates for pages, which will make it easier to implement them later on. Make sure to create your block comps within the constraints of a Web browser window. The influence of the browser’s borders can be a significant factor. Once the home page block comp has been built, flesh out the other types of pages in the site in a similar fashion. Once a complete scenario has been detailed in this abstract sense, make sure that the path through the blocked screen is logical. If it is, move on to the next phase.

Suggestion: Always consider the bordering effect of the browser window when developing visual composites.

The next phase of design is the paper or screen prototyping phase. In this phase, the designer can either sketch or create a digital composite that shows a much more detailed visual example of a typical page in the site. Make sure that, whether you do the composite on paper or screen, a browser window is assumed and that screen dimensions are considered. A piece of paper with a browser window outline as used in the block comp stage can be used for sketches.

Sketch the various buttons, headings, and features within the page. Make sure to provide some indication of text in the page—either a form of “greeked” text or real content, if possible.

Rule: Sites always have bugs, so test your site well.

For most developers, testing is probably the least favorite aspect of the Web development process. After all the hard work of specification, design, and implementation, most people are ready to just launch the site. Resist the urge. Testing is key to a positive user takeaway value. Don’t force your users to test your site after its release. If they encounter bugs with what is considered a production site, they won’t be forgiving.

Rule: Testing should address all aspects of a site, including content, visuals, function, and purpose.

Unfortunately, testing on the Web is generally relegated to a quick look at the site using a few browsers and maybe checking the links in the site. Bugs will exist in Web sites, no matter what. Unfortunately, most developers consider that if the site looks right, it is right. Remember that site design doesn’t just include visual design: you must test all the other aspects of site design as well.

Rule: User testing is the most important form of testing

User acceptance testing should be performed after the site appears to work correctly. In software, this form of testing is often called beta testing. Let the users actually try the working site and comment on it one last time. Do not perform this type of testing until the more obvious bugs have been rectified.

User testing is the most important form of testing because it most closely simulates real use. If problems are uncovered during this phase of testing, you may not be able to correct them right away. If the problems are not dramatic, you may still release the site and correct the problems later. However, if any significant issues are uncovered, it is wise to delay release until they can be corrected.

Rule: Site development is an ongoing process—plan, design, develop, release, repeat.

Once the site is ready to be released, don’t relax—you are not done. In fact, your work has just begun. It is now time to observe the site in action. Does the site meet user expectations? Were the site development goals satisfied? Are any small corrections required? The bottom line is that the site must live on. New features will be required.

Upgrades to deal with technology changes are inevitable. Visual changes to meet marketing demands are very likely. The initial development signifies the start of a continual development process most call maintenance. Once over the waterfall, it is time to climb back to the top.

Summary

1.    Suggestion: Always collect content as soon as possible.

2.    Rule: Visual design should proceed in a top-down fashion, from home page to subsection pages and finally to content pages.

3.    Suggestion: Always consider the bordering effect of the browser window when developing visual composites.

4.    Rule: Don’t marry your design prototypes. Listen to your users and refine your designs.

5.    Rule: Sites always have bugs, so test your site well.

6.    Rule: Testing should address all aspects of a site, including content, visuals, function, and purpose.

7.    Rule: User testing is the most important form of testing and should always be performed last.

8.    Rule: Site development is an ongoing process—plan, design, develop, release, repeat.