9 rules of best practices when preparing a web/mobile design mockup

While co-work with both sides - web designers and web developers I noticed that there are always some misunderstandings between them in defining what a well prepared design file(mockup) is.

I prepared a 9 rules guideline for creating a web/mobile design file so the final result of this design mockup will be easy to work with during software development stage. If you are a designer - just follow this check list, if you are a developer - just give it to your teammate designer :wink:

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

2. All structural elements of design should be arranged as an appropriate layers structure with clear titles, so a programmer can easily find all the elements, eg.:


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

3. All sizes and fonts should be integer values that are set in pixels and correspond to the size of a 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 resolutions)

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

5. A designer must provide all used icons in a separate folder

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

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

8. Sometimes there are specific colours that could be hardly seen on different screens types(as you know macs have different displaying options and sometimes in-between tints are missing for a human eye). These colours must be specified with HEX number.

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

Any front-end developer who gets such a design file will be happy to work with it. Moreover it will 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.

Written by
Bogdan K.

You can send us your project/task details and get a free estimation in just 3 working days