TOP-10 basic rules of composition in web design

Focus on the hero in the frame

The composition is based on a story about a hero. The value of a hammer is not in the hammer, but in its ability to drive nails and give a feeling a reliable tool makes him an honor as a master. The more value the story reveals on the page of the site, the higher the probability that the customer will be ignited by the idea of trying the product.

In the example, the OMUT brand is the production of jewelry to transform the image. OMUT helps you feel more confident when you need it most of all, it can serve as both armor and inspiration 🖤🔗⚔️ This is the culmination of the girl’s feelings on the first screen.

Support the story with secondary graphics

To create secondary graphics, it is important to divide the story into three threads:

• We will express the functional benefit graphically through the interface screens
• The social benefits are expressed through the orbits of the expanding universe of contacts
• We will beat the emotional benefit by switching from neutral to charged yellow, support the collage of the superhero’s helping hand and using the confident Gotham Pro font.

Apply contrast and nuance

Scale and graphic nuances are tools to capture attention. The principle of scale helps to enhance the significance of the object in the frame and create contact with the reader, and the nuance draws attention to a special note, which makes the hero memorable among others.

The example shows how these principles work together to create a special status around the product. A huge chair in the frame does not even fit completely, as if we came closer to consider its nuances of its texture and present your feelings of relaxation in his arms.

Note the asymmetry and set the dynamics, or apply symmetry and create space for concentration

Asymmetric balance is more dynamic and interesting. Asymmetry evokes a sense of modernity, movement, life and energy. Asymmetric equilibrium is more difficult to achieve because the relationships between the elements are more complex, but on the other hand, it leaves more room for creativity.

Create a focus point

A good design solution has its center or focus. By placing the elements in the frame, decide which of them the audience should notice first of all, which - in the second, third - so you will get a scheme of attention management.

If you make each element equally contrasting, a fight for attention will begin and in the end none of them will stand out. When there is no priority, all objects will speak simultaneously and equally loudly, but none of them will be heard.

Additional focus points are also contrasting, only not as strongly as the main element, which can be called the most dominant focal point. As with the dominant element, you can create additional focus points by providing im more visual weight.

For example, in the work we first focus on photos and views - this is the main point of focus, then we consider the title, line, button, badge, and stamp are additional focus points.

Show the action in the midst of events on stage based on the story

Help your potential customers feel the effect of working with a product / service, imagine what it’s like to work with you - show at what point and in what situation your service is especially valuable. Photos of situations will come in handy here with the product, and maybe even a collage or illustration that reveals the product in the midst of exciting and valuable work. Try to ignite the desire to try.

Provide recognition and surprise with rhythm and graphic rhyme

• Rome - is the harmony of graphic objects - the basis of corporate identity. It is thanks to rhyme that we see that we have objects from oneuniverse.

• Ритм - it is an alternation of accents and pauses. Rhythm helps us to experience the feeling of “recognition” every time and then comes the feeling pleasure - this is how our brain works.

In the example, we can see the rhyme of graphic spots, so no matter what screen of the page you find yourself, there is a “recognition” elements of brand identity and we enjoy what happens.

Draw attention to the main thing with free space

White space (or counterform) is the area between design elements. It is also the space inside the elements themselves, including spaces between typographic signs.

Contrary to its name, white space is not necessarily white. It can be any color, texture, pattern and even background image. The main thing is that against this background, the content is well read.

Organize the space with a modular grid

Module - a unit of space organization, a tool for managing the composition. The modular grid adjusts the location and proportions of objects on the screen and brings the design into harmony.

Design as a memorable composition. Objects of design as notes, and a grid and the module - rulers and a musical condition.

Check meanings through gestalt principles

The idea of the Gestalt is that “the whole is different from the sum of its parts.” This means that when the parts are combined, it is formed a whole that has a new dimension of existence - a new meaning. Gestalt principles: closeness, similarity, completeness, continuity and figure-background. With the help of Gestalt principles, you can make your visual message richer in meaning - this is where the space for creativity lies.