27 Feb 15 rules for quickly creating of mockups

Mockups – an important element used in work on the user interface. Based on the opinions of the designers, we have prepared the rules, which will help quickly and efficiently create UI mockups without losing high quality.

1. Work with sketches

Not so long ago we wrote about a paper prototype and one of its indisputable advantage – speed of creation. At work on the sketch will take no more than 10-15 minutes. But during that time you will be able to gather thoughts put together and once again think about the main idea.

In addition, paper sketch is easier to imagine an outline as a test case, the same than digital. And the main advantage – you can do so many variations as you need, until you find the one that perfectly matches your vision.

2. Start with the mobile gadgets instead of PC

Often referred us the trend of the previous and this year, adaptability, creating the mockup, take into account more than important. Especially check the availability of pages on a smartphone is much easier than in the web version.

Taking as basis the mobile version, designers at an early stage to identify key details, and then implement the necessary content for the following modifications.

3. Use additional programs in working with prototypes and models

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Mockup – this is an important, but still an integral part in the design process. The basis of the success of the mockup – it is designed to further model and prototype. The most effective of these elements are implemented in the digital domain.

Often, developing mockup designers choose Sketch or Photoshop. Both programs have extensive opportunities to work with graphic images, but incorrectly send images in tools for working with prototypes.

Fix this deficiency can be universal program for working with models and prototypes. They have a wide functionality, various additions: templates are GUI , smart elements, interactive library. 

Moreover, in some of the programs have the opportunity to send a document from the Sketch and Photoshop, and edit them.

4. Select “your” editor


In disagreements between designers – Sketch or Photoshop, there is no consensus. Yes, and it is difficult to say which one is better, it depends on individual preferences.

But if you can not resolve this dilemma for yourself, study the properties of these editors. Only then you will understand, what you need exactly, and which of them most closely meets the needs.

5. Analyze works of other designers

To learn something, need practice and more practice. But it is the well-known rule, the addition is not less important to constantly receive visual information from which to draw inspiration.

Keep an eye on the work of famous designers, popular projects, and, of course, analyze, what is the reason for success. And then decide, what their operating principles, you can borrow for themselves.

Sites that give a boost to creativity:

  • Dribbble (https://dribbble.com/)
  • Behance (https://www.behance.net/)
  • Site Inspire (www.siteinspire.com)
  • awwwards (www.awwwards.com/)
  • Pinterest (www.pinterest.com)


6. Learn how get rid of the unnecessary elements

The chaotic arrangement of the constituent components is not only ineffective in the interface, but also visually repellent. They scatter the attention, taking away from the essence of the content, hamper the search and content readability. Many designers believe these reasons are sufficiently strong to reduce the use of the elements in the interface.

Rejecting the indiscriminate use of the elements, you will learn to highlight only the most important. If an item – not the foundation on which is based the usability of the site or not a key, it is better to remove it.

Tom Green offers a methodology to identify superfluous elements:

  • organize all the necessary elements;
  • sort in order of importance of each of them and cross out unnecessary;
  • also distribute the remaining most important;
  • on the basis of the available elements make up content blocks;
  • place each of the blocks in accordance with the need for their use;
  • forms for elements until they become visually similar to GUI elements.


7. The grid and guides – it is is important

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Such a tool as a grid, is indispensable in the daily work of the designer. But here’s the paradox – not all of them are, and some do not perceive.

The main principle of the grid: it helps, given the accuracy of pixels, align, identify space and correctly place the content on the page. Working with font will be invaluable guides, and can be used both horizontal and vertical.

8. Use storage Free GUI elements and icons

Design, that takes into account the individual characteristics of the buttons, icons and graphics, often takes the same time as work with the layout.

Reduce time, searching help online storage, where designers can find free elements and icons for UI. In addition, quite often on these sites have the ability to edit, that allows to select the desired colors, fonts and other graphic details.

9. Choose vector graphics instead of raster

Raster graphics is limited in the amount of pixels, as a vector for it can range. Everything depends on the expansion or screen sizes.

An added bonus of vector images is that they preserve the quality of larger size. In addition, they can be operate as a Photoshop, as well as in the Sketch.

10. Fonts

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Any mockup – is the initial stage, but do not forget to work only with “proper” fonts, to reduce the risk of spoiling the project. First of all, always check that your font in the online mode is visible. This will not redo the work again or spend extra time searching.

Many designers choose the font Google Fonts, as it has repeatedly shown himself to work. But, of course, is not the limit. If idea of ​​your future product needs an individual font, get this issue closely. And, as we have already mentioned in the beginning, make sure it is visually represented on other sites.

11. Program for working with color


Problem correct choice exists not only with the type, and  with color. If this process you usually delayed for a long time, pay attention to the program for automatic color matching.

Cohesive Colors select color palette from given colors and elements. Another effective and, most importantly, a free program, Palleton, represents the color ring.

12. Dubbing of layers

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Perhaps, this is the rule for someone undeniable fact, but should not forget about it. Duplicating layers need to be designed on the basis of their different layout options.

Moreover, it does not have to do double work: if you use the same font, buttons, mockup pages, but slightly change the visualization, it is much easier to restore the original version, than each time to start anew.

13.  Work with a Layer Comps

Designers, using the panel Layer Comps in Photoshopfamiliar with its convenience. Layer Comps have an important function: does PSD images, removing selected groups and layers. Plus panels in the fact that you can create an unlimited number of pages for one document, simply by clicking on a specific layer. 

Unfortunately, users of the Sketch program are less fortunate, there is no such panel. But the developers claim, that actively working on the introduction of analogue Layer Comps in the program.

14.  Follow proper storage of files



As a rule, on the creation of the mockup, and further design work is not one person, and a series of experts. So you need to carefully select the source, where you will put the necessary documents.

There are two resources:

-Dropbox (other cloud resources).

Each of them has its own characteristics, so the choice depends on the size of the project and the number of files.

It is worth paying attention to the proper storage of information and freelancers, because in this way they will be able to better organize data and save time to work with them.

15. Testing on a real gadget

To see the finished mockup in an image editor – it’s good, but it needs to be tested in real conditions. It is necessary to assess your work and go to the next step, that is, the development.

Professionals are advised to use a program such as Skala Prewiev, or view the layout in format of images  on their devices.

No Comments

Post A Comment