Practices to create a mockup



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.

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

  2. Observe the grid layout
    test
    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.:
    Header:
     - slider
     - sign-up button
    - navigating arrows
    - close cross

    Body
    - about us block
    - text 
    - who we are block
    - text
    - 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.
     
  3. Consider the screen resolution
    test
    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). 

  4. Think over the structure for different devices
    test
    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. 

  5. Feel free to create additional folders
    test
    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
    test
    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.).

  7. Specify colours
    test
    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.

  8. Describe the animation
    test
    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.

  9. Don't forget about typography elements
    test
    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.

 



Bogdan COO
Bogdan
COO
Views: 413
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
Optional
About you