Design Mock-up for Your Website: Lessons From the Designer’s Workshop

Design Mock-up for Your Website: Lessons From the Designer's Workshop

Umbrella IT

To design the indescribable, or things your designer shall be able to do.

It so happens that some picture or melody flies through your head, but you fail to describe the form, image or to sing the melody to some other person, as you possess no drawing or singing skills. Still, we try to exercise our best efforts to solve the situation.

Just imagine, designers need to listen to our wooly explanations, understand our idea, reproduce it and win our sincere admiration with the result. And they do cope with the challenge!

In our previous articles, we have already told of Umbrella IT approach to preparation activities prior to development and to creating wireframes.

Today we suggest to learn how to mockup website and to check how the web designers gift-wrap the customer’s wishes.

This is exactly what we expect of them, isn’t it?

We expect him/her to create a general picture in such a way, that the user would want to view it in more detail: to read the content, to follow the links, to click the buttons and then to add the site to favorites to come back again (and more than once).

Why Do We Need a Mockup?

No matter, in what a detailed and colorful way the customer describes his/her wishes, no matter how long is the specifications or technical inquiry, in most cases two persons will see the final result differently (with some rare exceptions).

For this reason, when the general scheme of the pages is ready, the website mockup is created to help each of the parties see a physical implementation of the idea, and check whether the expectations are met, or adjust things that cause doubts or simply do not fit.

What is a website mockup? This is a full-fledged design of pages for the future website. The mockup is used to choose website style: colors, fonts, shapes and determines the exact arrangement of the elements relative to each other. The mockup is developed for each page of the website and is presented for the customer’s review in a convenient format (for example, .jpeg).

WHY DOES THE DESIGNER NEED MOCKUP?

In order to:

  • accurately reproduce all ideas, check, what they will look like and eliminate any possible deficiencies and errors;
  • present the customer the way his/her wishes will be implemented or offer alternative options;
  • discuss with the developers the possibilities of design implementation and eliminate any possible inconsistencies and challenges at the early stage.

WHY DOES THE DEVELOPER NEED MOCKUP?

In order to:

  • perceive in a better way the concept and style of the site;
  • think over in advance the exact way to implement the designer’s ideas and, if necessary, to make any adjustments before the mockup is complete.

WHY DOES THE CUSTOMER NEED MOCKUP?

In order to:

  • check whether the visual representation coincides with the idea that was initially invested in the website and introduce any adjustments if required;
  • study the alternative options offered and choose the best variant;
  • present the future website to investors, colleagues, potential clients.

How Does The Designer Make Website Mockup?

As a rule, the designer receives prepared wireframes as a basis for UI mockups for the website, which show interface elements and their arrangement, as well as page by page allocation of features.

1. Designer creates site style

  • COLOR

First, the mockup needs clear decision as to what color range will be used for the future site.

In fact, it's not as simple as may seem at first glance:

  • the color effects upon the emotional background. Therefore, the purpose of the website should be taken into account and correlated with the color impact on the psycho-emotional state of the user. For example:

Blue calms and radiates credibility.
Green gives optimism.
Orange warms and lends energy.

  • despite the fact that there are universal associations with certain colors, various cultures and countries perceive some colors in different ways. For example:

White color, as a rule, is perceived as a symbol of purity and easiness. But in Japan, India, and China, this is the color of mourning.

Red is the color of passion and strong energy. In China, red is considered the color of happiness, while in Egypt it is the color of mourning.

  • GRAPHIC ELEMENTS

Any buttons, pictures, drawing, photos intended to be used for the site shall be uniform styled.

Do you want to see how it works in practice? We would draw Material Design as an example. Buttons, graphic elements, font - everything fits the uniform idea.

2. Designer has three activity areas

  • CUSTOMER COMMUNICATION

There are different categories of customers:

Some of them initially know exactly, what they want to see in the finished product. Others have no idea, and the designer needs to start working with them from scratch. In the latter case, more responsibility rests with the designer.

But anyway, continuous communication with the customer is an indispensable condition for a successful mockup development. The designer creates the product not for himself or based on his/her own preferences, but for the customer. Therefore, both parties should be interested in participating in the process as actively as possible.

  • MARKET RESEARCH

Working on the website design mockups begins with studying analogs in the market and analyzing websites of competitors: on the one hand, this helps to avoid duplications, and on the other hand, helps to find fresh ideas and approaches.

  • CREATIVE INSPIRATION

Inspiration is the last but not the least important aspect. This is the main weapon used by the designer. Without it all the websites would most likely be identical or of the same type.

Communication with the customer and market analysis serve as the basis, the foundation to build the product. But how attractive and original the site will look, largely depends on the designer's passion for the project idea and his/her professionalism.

3. Designer creates logo

As our expert has a general idea of the style for the future website, he/she starts working on the logo (if the customer has no logo yet) or on its upgrade (if necessary).

The logo is either a graphic element, or a font pattern, or a combination of both.

Logo is a designation of the company, which will be used with the most diverse company products and promotional materials. Actually, the logo is one of key elements of the corporate identity. In fact, it sets the style for the whole site, and all other elements should be consistent with and complement it.

Here are some logo examples that no longer look like ordinary pictures or words for us, but carry with our previous impressions, present anticipations, and new opportunities.

To express the key idea with one small symbol and to attract customers attention, this is the next challenge for the designers!

As a rule, several variants of the logo are created and presented to the customer for approval. In some cases the customer accepts the first proposed variant or may choose one of the developed logos subject to some improvements.

In addition to the main variant, the black and white version of the logo is developed (in case of using against monochrome or contrast backgrounds).

Since the logo will be used with various media that differ in size, the designer also checks the way the logo will look when zoomed out or in.

4. Designer decide for site structure and elements layout

The commonplace truth is valid for any user actions in the network: the user does the things only, which are necessary and easy. Therefore the users will look through the content exactly as they like and used to. This means the most critical elements on the page shall be arranged in the areas, where the users will look first.

For example:

For example, most European users will view headlines from top to bottom and from left to right. Therefore, the most important information should be placed to the left.

Accordingly, on those websites where Hebrew or Arabic languages are used, more attention will be paid to the right side of the page.

5. Designer creates and arranges Call to Action elements

Any modern site is intended to induce the user to take some action: to purchase a product and/or a service, to subscribe, to register, to call or write, to ask a question, to choose one of the several options, etc.

CTA elements are made more noticeable due to arrangement and appearance. But at the same time, those interface elements are made EASY to use. Otherwise, the user may appreciate the beauty and accuracy of the design visually but will leave the site without activating the sacred button. Either it is difficult to find, or the user requires to perform some complicated and uneasy actions.

For example, Google Fonts offers some simply-looking, but really user-friendly solutions.

Anyone, who visits the site for the first time, will easily understand, what is to be done. At the same time, the site is stylish, and the red color works for highlighting settings and actions that are significant for users. While the user is not sidetracked with the color accent from the fonts, which are the actual subject of the site.

Designer Aid

Design is exclusively personal and creative activity, and it is quite difficult to apply common patterns and schemes to this area.

Although, this would make no sense to deny the progress advantages, and many designers today use additional online tools. Such services are in spades offered online. And under modern tough competition and rapid life tempo they are simply irreplaceable since they allow reducing working time while leaving enough room for creativity.

Source

For example, Sketch offers interesting possibilities.

Some new tools appear now and then, for instance:

While offering similar services Figma platform has one indisputable advantage. Figma allows several colleagues to simultaneously work with one mockup. The work result is constantly updated, thus, each team member always has a valid current version of the mockup.

On the other hand, the rich choice of available online tools allows the advanced users to start thinking of reproducing their ideas on their own. Today we are offered a lot of builders that help you to create mockups (Moqups) or even working site (SiteBuilder).

No doubt, everybody is free to choose for themselves, but whether the final result will meet your expectations. That is the question...

Possible Web Design Errors

The World’s Worst Website Ever - is the perfect illustration of some top errors. Here are some of them:

  • too original: acrowd of original designer ideas within one site will  divert user’s attention from the content;
  • user-unfriendly interface, which is simple for the designer only, and complicated navigation: transfer and choice options are not clear, some information has to be searched for;
  • uncombinable mixture of various styles, fonts, color solutions;
  • overloading the page with functions, elements and various colors;
  • extreme minimalism: site offers meager information or minimal number of elements without anything that could arise user’s interest and keep from leaving;
  • wrong color choice;
  • no accents made, the significant elements are not highlighted: for example, no eye-catching headlines are used though intended to attract attention and give a general idea of the content;
  • poorly distinguishable text: wrong choice of background colors, text colors, and fonts;
  • links are useless, if not highlighted, as the user does not pay any attention and does not use them;
  • display of pages in various browsers and on different devices is not considered properly.

Such typical errors have been much written and spoken about: funny stories like “you are a designer, you must know”, heaty forum discussions, lots of manuals. mistakes to learn to avoid them.

But the global network does not stand still, new ideas appear in the field of web and mobile design, and each new idea brings both new creative perspectives and new potential errors.

In this regard, the designer's activity is a constant “errors analysis".

The designer himself/herself may notice errors and inaccuracies, or he may be assisted by the developers. Inconsistencies are also revealed in the process of communicating with the customer.

But if as a result of this labor-intensive process the user not only likes the picture but starts searching through the site and forgets anything else, this means real success!

Umbrella IT team is always happy to take part in creating products that will bring joy and new positive emotions into our world! Contact us right now, do not put off your success till tomorrow!

Photo: Shutterstock.com