The 9 best ways to mockup a website

What is the best way to mockup a website? It is the one that will not cause misunderstandings between web designers and web developers.

We offer nine best practices to design a website mockup that can significantly help you to develop and implement it with ease.

1. Separate every page/view when design a website mockup 

Every page/view should be prepared as a separate PSD file with a corresponding intuitive name.

2. Observe the grid layout when mockup a website

All structural elements of the design should be arranged as an appropriate layered structure with clear titles, so a programmer can easily find all the parts, e.g.:
- slider
- sign-up button
- navigating arrows
- close cross

- about us block
- text
- who we are block
- text
- button find out more
The structure above is intuitively clear and possible to arrange correctly. It makes it possible to quickly assemble the page frame and position elements on the page.

3. Consider the screen resolution to improve design of a website mockup

All sizes and fonts should be integer values set in pixels and correspond to the size of the screen resolution that your design is prepared for (so a developer will not need to work on manual scaling or guessing how it should be changed for the different solutions).

4. Think over the structure for different devices when mockup a website

If there should be a specific (different) structure for mobile compared to the web, a designer must provide exact representations for those screens to keep all sizes, paddings, and elements accordingly.

5. Feel free to create additional folders for your website mockup

A designer must provide all used icons and all high-resolution images (if they exist for any kind of sliders, banners etc.) in a separate folder.

6. Describe graphic elements when design a website mockup

For all the elements with alternative visual states (like active, inactive, blocked, mouse-over, etc.), a designer must include a graphic representation of how these elements should look like for each particular state (it is related to buttons, navigation elements, etc.).

7. Specify colours to improve mockup design 

Sometimes there are specific colours that can hardly be seen on different screen types (as you know, Macs have other displaying options, and sometimes in-between tints are missing for the human eye). 

Specify these colours with a HEX number.

8. Describe the animation when design a website mockup

For all animations that a front-end developer needs to create (like flashes, pop-ups, etc.), a designer should describe them in an additional readme file.

9. Don't forget about typography elements to mockup a website

When you design a website mockup it is necessary to have a different layout with the standard typography design elements:

  • headings
  • paragraphs
  • tables
  • lists
  • blocks of quotation


Final words about mockup a website

Use these proven tips to design a website mockup any front-end developer will be happy to work with. 

Remember, that thr right website mockup can save plenty of communication and management time (from 10% to 30% of overall work time) when working with a particular view/web page/mobile screen. 

Just like any idea needs Proof of Concept, any design needs a well-thought-out mockup. It can simplify the customer’s life, the designer, the programmer, and the whole team indeed.

Views: 1847
Rate this article
5.00 / 5 Article rating
1 Reviews
Have a project idea? Contact us!
Use our extensive experience in software development and consulting to get your business challenges solved!
Your budget
About you