How to Make a Quick & Easy Web Site Mock Up

Creating a mock-up is the first step to planning your website design.

Creating a mock-up is one of the earliest steps in building a website. The term "mock-up" is often used interchangeably with "wireframe," but they're not quite the same, even though both are important to planning your site. A mock-up is the visual design of the site, whereas a wireframe focuses on the site's content and function.



Although a mock-up is critical to your site's development, it doesn't need to be complicated or time-consuming to create one. As long as you capture the idea for the site, it doesn't matter if you go high tech (graphic design software) or no tech (paper and pencil).

Instructions

1. Determine the basic layout of your site. Consider such things as number and placement of columns and key elements you want to appear above the scroll.

2. Break the page into designated areas for navigation, header, text content and video or still content. You may find that you rebalance the site's proportions through a few drafts of your mock-up.

3. Select images for key visual elements that evoke the feeling you want for the site. These do not have to be final selections; "comp" or "FPO" (for placement only) images are fine.

4. Select fonts and font sizes. Indicate styling for headings, standard paragraphs, lists and other text elements.

5. Identify a color scheme and label your site's elements accordingly.

Tips & Warnings

• Mock-ups are a draft of your site, and you'll likely go through a few versions before you settle on the final design plan for the site. The mock-up allows you to experiment with a variety of options before you start investing in developing the site itself, so stay flexible as the site evolves.

• If you're using design software to create your mock-up, insert placeholder text to see how the different sizes and weights of text flow on the page.

• Online color scheme generators are an valuable tool at any stage of website design. You can select from ready-made themes, extrapolate them from photos or images you like or create them yourself.

References

• University of Washington: Learning and Scholarly Technologies; Website Planning: Wireframes and Mockups
• Adobe: Macromedia Dreamweaver; Designing Page Layout

Resources

• Read this Article in Spanish
• 1stwebdesigner: 18 Wireframing, Mockup And Prototyping Tools To Plan Designs
• Spyre Studios: 15 Quality Web-Based Applications to Create Mock-Ups and Wireframes