How to Make a Quick & Easy Web Site Mock Upby Kristen King
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).
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.
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.
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.
Select fonts and font sizes. Indicate styling for headings, standard paragraphs, lists and other text elements.
Identify a color scheme and label your site's elements accordingly.
- check 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.
- check 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.
- check 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.
- photo_camera website layout image by 6922Designer from Fotolia.com