Three misfortunes of responsive design and ways to prevent them Source
Scaling vs. rubber layout vs. responsive design. There are many misunderstandings related to these terms that are equally periodically committed by web developers. In truth, these terms mean the evolutionary…

Continue reading →

Definition of element clickable area
When creating code for a button or another clickable element, it is necessary to clearly define the boundaries of its activity, which are user-friendly. In this matter there is no…

Continue reading →

What is beyond the power of responsive design?
We all understand the importance of responsive design and against the background of the growing popularity of mobile devices, designers have to come to grips with the issue of presenting…

Continue reading →

Improving the registration form on the site (4 useful tips)
On the Internet, the registration procedure occurs to us as often as the authorization form on the sites. You have to do the following: in all kinds of web services…


Get rid of the guesses in the design

Creativity breathes life into successful sites. However, creative ideas and solutions often resemble guessing – a dangerous business, I tell you. So what can designers do to convince the customer, in their obsession with the best intentions, and in their decisions that they are hard as a stone? The following exercises will help build a real dialogue with the customer and teach you to document it, and the client will remove the veil of fear of creativity and get involved in the process of creating your website.

Some people think that they know why they need a website, and they are fighting for the right to formulate clear and measurable goals. Ambiguous goals force a person to speculate, and speculations can lead to disappointment. Goals like “sell more of our products” or “become more popular” are blurred and send almost nowhere.

An exercise with a modified acceptance criterion (modified acceptance criteria exercise) is the simplest and at the same time effective exercise that I know. It will teach us goal setting. Smart developers from different fields use it to show why they need to solve this problem and how it will fit into the overall picture of the case. A couple of changes and the exercise is suitable for setting goals in site building:

Request example:

* We will redesign the site because we need more traffic and a new look, and we want to become more respected in the market.

Example of the query construction scheme:

* We want ______ because ________ to _________.

An example of relevant goals:

* We want to increase site traffic by 20%, because we need more attention from potential customers in order to attract at least 8 customer contacts per month.
* We need to change the look of the site to a more modern one, because we need to better meet the needs of consumers in order to increase sales by 10%.
* We want to write four articles about our industry per month, because we want to help our market, with the aim of forming at least two partners per month.

Notice how the semantic division of “means”, “meaning” and “future result” outlines the client’s goals and describes why he wants to do it and how he will achieve it. Acceptance criteria for design is a great way to “wash” unnecessary deep, perhaps even unknown, intentions that will help the designer and customer to see the right decisions and avoid surprises in the future. Review goals until all significant people (who make decisions) understand them and agree with them.

Bonus: Formulate several goals to see which of them are secondary and tertiary, but do not overdo it – no site can solve many of the primary goals.

People are dragged from sites that help solve problems without any mental difficulties. The user must spend their mental strength to solve their problems, and not to understand how the site works.

Sorting cards is a great way to organize your site. Write a list of all pages on the site and write down their titles on the cards, then place the cards on the table. Move them back and forth until you build the most understandable outline of all sections and their subsections.

If you do not have the opportunity to do it yourself or your team does not have time to move the cards on the tables all together, then try to do it with colleagues online, filling in the table.

Next step: we need to understand the visual hierarchy of information on the page. Let us turn to the distribution of attention — I call this the “attention map” —and to the simplest arithmetic.

An attention card is a set of goals for a particular page; each goal has a certain number of points. Assign the total number of points necessary for a good distribution of information on this page, but do not overdo it, otherwise you can mess up and evaluate the information at different levels equally. The idea is to divide all information into blocks according to the criterion of value-importance relative to each other and build a clear hierarchy.

Example of scoring:

Fifteen points for four goals.
Example result:

Description of Services: 7 points
Benefit from use: 4 points
Articles about the market in general: 2 points
Related news: 2 points
The visual “attention card” itself is more effective than just a list of points distribution, since it allows you to allocate space for information on a site page. We have assigned “description of services” as much as seven points, which is three more than the “advantages” of the product, which means that the site should be given special attention to the “description”.

A strong archetype can create the strongest instant emotional binding. The archetype [4] is a set of characteristics and special features common to a certain group of people who speak any languages ​​and any nationality living on Earth. Each archetype has strong and weak features, its own fears and abilities. When applying these aspects of individuality in design, people will sensually identify themselves with it (with design). This creates a memorable image and builds confidence.

In The Hero and the Outlaw, the authors of Margaret Mark and Carol S. Pearson capture 12 archetypes, reflecting almost any manifestation of human nature:


Outcast or outlaw
Ordinary guy / ordinary girl
If you choose an outcast (just remember Harley Davidson), then start criticizing everything that would be disgusting to a person with truly unbridled mores and principles. You may be surprised at the number of new ideas that you can get by thinking about:

Ideas unbroken man outside the law:

Wants to take revenge or zatit revolution immediately
Wants to break everything that does not work
Hates powerlessness and banalism
Trying to shock people
Hopes to give everyone radical freedom
Perceived as evil
Most likely to become a criminal
If you manage to preserve these features and apply them to different designs, then do not forget to use them in any other products and campaigns that involve interaction with a person. This will create a very strong brand.

Trends of web design. Part 3
Custom designs Recently, there has been a strong trend towards more individual and creative designs. Instead of using conventional approaches, designers experiment with how the information is structured, how it…


What is Icon Fonts? Meet with FontAwesome and IcoMoon
Here I will demonstrate the excellent solutions that can be achieved using Icon Fonts, but let's first get acquainted with the very concept of font icons, as well as the…


4 Tips for creating one-page websites
Single-page websites are becoming popular and fashionable now - there is no doubt about it, although they are not suitable for every subject or organization. However, if done correctly, your…