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

Creating a Mockup A web site design mockup, at its most basic level, is a visual representation of the information containers of a web page. Therefore, the mockup is used to create the layout of the web page based on the placement of the containers on the page. Once the containers have been laid out to your specific design, you can begin to modify the mockup to incorporate your color scheme, typography options, and navigation structure. How to Create a Mockup Since a web site mockup is simply the integration of rectangular page layout containers, colors, typography, and a navigation structure it can be created/represented in a variety of formats. In fact, many web designers first use paper and pencil to begin sketching their web design concept. Some designers will even get a bit artsy and use colored pencils to play with a selected color scheme. While there isn't anything wrong with starting the design process with a rough sketch, your draft/working mockup, the mockup you would present to the client, will need to be created digitally. There are a couple reasons to create your draft/working mockup in a digital format versus an analog format (paper and pencil): Digital mockups can be saved in a multitude of formats. This is important as you will want to ensure that you provide the mockup to the client in a format that he/she can view. Digital mockups can be shared easily. A digital mockup file can be shared with the client easily. For instance, a digital mockup file can be sent to the client as an email attachment or it can be loaded to a cloud storage location that the client has access to. Digital formats can be edited. If you present a digital mockup to the client and he/she provides design input, you can easily adjust the mockup integrating the clients edit suggestions. Software Applications for Creating Digital Mockups You are probably wondering what software application should be used to create a digital mockup. Essentially, any software application that allows you to draw shapes and add color and text to the shapes will work sufficiently. Presentation software applications and image-editing software applications work well. However, when selecting a software application to use, be sure to consider the file save formats available. You will want a software application that allows you to create: An editable version of the mockup that you will use for editing purposes. A read-only version of the mockup that you will provide to the client for review. As you progress in your web design practice, you may find a software application that suits all of your mockup design needs and is easy to work with or you may work for a web design firm that uses a proprietary software application that you are expected to use. For the purposes of this course, your instructor will specify the software application you will use to create your mockup as well as the file format your mockup should be saved in. As you begin to create your web site mockup, review the HTML 5 Design Examples previously presented as they may help guide you in the design of your page layout. On the other hand, don't be afraid to play around with a variety of page layout designs, but remember, you will be expected to transform your mockup (to include the page layout design) into an actual HTML site, using HTML 5 layout tags. Design wisely. Next

© 2008 KCDL. All rights reserved.