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!
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).
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:
WHY DOES THE DEVELOPER NEED MOCKUP?
In order to:
WHY DOES THE CUSTOMER NEED MOCKUP?
In order to:
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.
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:
Blue calms and radiates credibility.
Green gives optimism.
Orange warms and lends energy.
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.
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.
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.
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.
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.
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.
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, 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.
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.
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.
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…
The World’s Worst Website Ever – is the perfect illustration of some top errors. Here are some of them:
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 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!
Create long-term relationship built on result & experience.
Tell us about your business ideas and goals and we will contact you.