Website Composition: Beauty and Functionality
Composition in design is the environment in which we place the user. Our goal is to stimulate him to perform certain actions or acquire information. We can consider the composition as a visual path along which we lead our guest. A smart site composition sets the rules of the game and guides the user.
But since people want to control the situation themselves and have impact on something, it’s necessary to create a sense of control over the interface for them. A guest, after he has received an invitation and looked around, should feel like a master of the house. We must make him want to inspect everything from top to bottom.
The simpler the house (the more understandable the interface) is, the faster the guest learns and the more he understands what to do in this place. He did not come to exert himself and learn. Therefore, he must see at first glance, where what is located. It’s necessary to minimize the outer complexity and make everything predictable.
As a visual object, the interface follows the laws of composition. However, composition in design is not an identical equivalent of the artistic composition. The beauty of our home should be comfortable. Beauty itself does not make things comfortable, but thanks to it they look more convenient and attractive.
A good composition comprises not only outer aesthetics, but also functional efficiency. Beauty in our case should serve convenience (usability).
The key to the composition, which unites beauty and convenience, is the basic principles: hierarchy, emphasizing, direction, rhythm, balance and conversion. All of them are interrelated.
1. Hierarchy
Hierarchy is the structuring of elements in order of importance. Compositional hierarchy should clearly reflect the informational hierarchy. The informational hierarchy determines the structure of the site and the order of information processing, makes the design consistent and professional. The information structure determines the physical form and is based on logic and principles of priority.
The importance of main elements and the subordination of secondary elements to them is reflected in their location, size, shape, color and its saturation, rhythm, alignment, space, numeration, etc.
2. Emphasis on the essentials
The emphasis is a key element of the composition that immediately draws attention. The emphasis instantly captures the eye and communicates information (idea, feelings) as efficiently as possible. Each element of the composition has its own visual attraction, and, therefore, its own weight. The more parts of the composition draw the eye, the “heavier” they are. For this reason, weight should be given only to relevant information (which should be put into the “weighty” field).
You can emphasize an element (increase its weight) with size, color, shape, shade, position, texture, dynamics, contrasting effect, creating repetitions (to emphasize importance), etc.
3. Direction
Whilst the visual weight calls out: “Look at me!”, the visual direction indicates: “Look there!” The visual direction stimulates the glance to move on to other parts of the composition.
Directions make the design more dynamic. Of course, directions should serve to functionality at first, and only then — to beauty. You shouldn’t draw attention to an image with no information load.
Directions are created with help of dynamic lines and splashes of color, repetition, scaling, symmetry axis of figures, pointers, arrows, images of eyes looking in a certain direction, etc.
4. Contrast
Contrast is the difference between elements. The best way to attract attention by highlighting the main point is to create contrast. It helps to place emphasis as well as to increase the importance of information.
Contrast isn’t just a method of emphasis, but also contributes to hierarchy and balance. Therefore, it was set apart as an independent significant tool.
You can use the contrast of sizes (scaling), shapes, colors, tones, distances, etc.
5. Rhythm
Rhythm is an equable alternation of elements, based on repetition. The use of rhythm unites different parts and helps to create a good composition. To maintain consistency and subsequence, you can use certain elements from one section in other parts of the layout, repeat the same font or graphic pattern. Repeating elements give the design a logicality and allow the user to get a handle on the pages more quickly.
A rhythm is created by interchange of form, size, color, texture, tone, by constructing a hierarchy of headers, subheaders, and highlighting parts of the text.
6. Balance
Balance is the equation of elements without which a harmonious composition is impossible. The viewer usually feels the weight of the elements intuitively.
The balance is inseparably associated with the “weight” of objects and emphasizing, and therefore with their significance and importance.
Balance can also be created with help of size, shape, color, tone, position, orientation in space, complexity and other means.
7. Conversion
A beautiful design does not guarantee efficiency yet. If the design is not focused on conversion, the site will end in a fiasco. Design should not be a mean of artistic self-expression. This is a tool with which we approach a specific target audience. We create designs for different types of thinking, attract different visitors. Without taking into account the user specifics, all of the above-mentioned techniques of the composition may not work the way you want. For example, you should consider age and gender of users. Men and women are attracted by different colors. The older people are annoyed by the colorful, dynamic design, while the young ones like animation and eye-catching colors.
Site conversion can be increased using following methods:
- Creating of simple web forms
- Demonstration of benefits from the first screen
- Hierarchy that makes the site understandable
- User-friendly navigation
- Clear appeals (emphasis located in strategic locations of the layout)
- Visual F-model. Placing important textual information in the first two paragraphs. The line should begin with keywords that draw attention
- Using of the Z-scheme for landings
- Using negative space for emphasizing of the main things
- Posting of real photos to establish more credibility
- The above-mentioned means of composition (hierarchy, emphasis, contrast, direction, rhythm, balance)
