Web Design - Design Elements: Designing with HTML 5

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Three:  Part A  |  Part B  |  Part C  |  Part D  |  Part E

Web Page Mockup

Mockup

An important step in the design process is the creation of a web page mock up. The mockup, also known as a storyboard or prototype, is a non-HTML, visual representation of your web site design.

Why Create a Mockup?

The web site design mockup is a beneficial tool for the web designer as well as the web site client; because while some web designers create web sites for their own use or purpose, most web designers create web sites for clients. The main reasons to create a web site design mockup include:

  • Consideration of Site Purpose/Meaning/Message - The creation of a mockup forces the web designer to stop and truly consider the purpose, meaning, and message of the web site to be created. This reflective process not only ensures that the design of the site aligns with the purpose of the site, but it also promotes a more efficient process for creating a web site. Without a mockup, a web designer might be tempted to create a web site on “the fly” which invariably leads to time wasted.

  • Integrating Client Input - The mockup creates a visual representation of the web site that can be presented to the client. Clients generally know what information they want to provide to site users and they may have some ideas about the look and feel of the site. The web designer uses the mockup to incorporate the wants/desires of the client into the site design. The client can then view the mockup and provide input regarding the overall design of the site. Further mockups may need to be created to ensure that the client’s wants/desires are addressed. Once a final mockup is agreed upon by the client, the web designer can begin the web authoring and development process.

  • Testing Multiple Design Concepts - A web designer can create multiple mockups with each mockup incorporating different design elements (page layout, color schemes, typography uses, and navigation structures). The web designer can experiment with different elements, in the mockup-creation process, to flush out the best design practices to integrate into the final design.

  • Designing for Multiple Display Platforms - A major consideration for web designers is designing for multiple display platforms. In fact, responsive design is a branch of web design that addresses the integration of a design concept across different display platforms; to include: desktop or laptop display, tablet display, and smartphone display. Web designers can use mockups to express how their design concepts are presented in each display platform.

NextNext

© 2008 KCDL. All rights reserved.