How to Make a Quick & Easy Web Site Mock Up

by 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.

About the Author

Kristen King has been writing professionally since 2004. Her work has appeared in "iParent" magazine, "The Journal of Oncology Practice," "Association Publishing" and other print and online publications. King received the American Independent Writers President's Award in 2009. She holds a Bachelor of Arts in English from the University of Mary Washington and a Master of Professional Studies in publishing from The George Washington University.

Photo Credits

  • photo_camera website layout image by 6922Designer from