Do you want to create a mockup which will not cause misunderstandings between web designers and web developers? We offer 9 best practices that can significantly help you to create a great mockup and implement it with ease.
- Separate every page/view
Every page/view should be prepared as a separate PSD file with corresponding intuitive name.
- Observe the grid layout
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 elements, eg.:
- sign-up button
- navigating arrows
- close cross
- about us block
- who we are block
- button find out more
The structure above is intuitively clear and possible to arrange properly. This makes it possible to quickly assemble the page frame and position elements on the page.
- Consider the screen resolution
All sizes and fonts should be integer values that are 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 resolutions).
- Think over the structure for different devices
If there should be a specific (different) structure for mobile compared to web, a designer must provide exact representations for those screens in order to keep all sizes, paddings and elements accordingly.
- Feel free to create additional folders
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.
- Describe graphic elements
For all the elements that have 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.).
- Specify colours
Sometimes there are specific colours that can hardly be seen on different screens types (as you know Macs have different displaying options and sometimes in-between tints are missing for the human eye). These colours must be specified with a HEX number.
- Describe the animation
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.
- Don't forget about typography elements
It is necessary to have a separate layout in which the design of the standard typography elements is presented (headings, paragraphs, tables, lists, blocks of quotation).
Any front-end developer who gets a design file like this 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.
A good mockup can simplify the life of the customer, the designer, the programmer and the whole team indeed.