Interface design UX UI Interface designer. Visual Interface Design No matter how much effort you put into researching users and creating product behavior that helps achieve their goals, that effort will be Visual Information Design

Design patterns solve entire classes of design problems that arise by identifying and summarizing valuable design findings. Activities to formalize knowledge and capture the best design solutions serve many important purposes:

• reduce time and effort spent on design in new projects;
• improve the quality of design solutions;
• promote improved communication between designers and programmers;
• improve the professional level of designers.

Patterns are always applied within some context and are designed to be applicable in typical situations that have a similar context of use, similar constraints and conditions. When describing a pattern, it is important to clearly state the situation in which the solution is applicable, give one or more specific examples, list the abstract features that are characteristic of all examples, as well as reasoning that explains why the solution is good.

Design patterns are not recipes or ready-made solutions. In her book Designing Interfaces—a massive and useful collection of interaction design patterns—Jenifer Tidwell warns us: “[Patterns] are not ready-made components; each implementation of a pattern is slightly different from all the others” [3.1].

Types of Interaction Design Patterns

Interaction design patterns can be arranged in a hierarchy. They can be applied at different levels of the interface infrastructure:

• Positioning patterns can be applied at a conceptual level and help define the type of product in relation to the user.
• Structural patterns solve problems associated with controlling the display of information and functional elements on the screen.
• Behavioral patterns solve a wide range of problems related to specific interactions with certain interface elements.

Structural patterns are probably the least documented, yet they are ubiquitous. In Fig. Figure 3.1 shows one of the most widely used high-level structures: a navigation panel on the left, an overview panel on the top right, and a detail panel on the bottom right.

This template is optimal for applications in which the user needs to work with a variety of objects, combine objects into groups, and view the contents or properties of individual objects or documents without going to another screen.

Rice. 3.1.

Many email programs (including mobile ones) use this pattern (Figure 3.2), and variations of it are found in programs for creating and managing information, where quick access and management of many types of objects are often required.

However, everything is not so simple. This template in its pure form is certainly convenient for a relatively large screen (monitor or tablet), but it is of little use on a mobile phone. The solution to the problem is to abandon the single screen: by assigning each section its own screen entity and organizing the connection between them, you can get a highly functional application (Fig. 3.3).

Visual interface design

The effort you put into developing a software product's behavioral model will be wasted if you fail to properly communicate the principles of this behavior to users. In the case of mobile products, this is done visually - by displaying objects on the display (in some cases it is advisable to use tactile sensations from pressing).

Visual Interface Design is a much-needed and unique discipline that should be used in conjunction with interaction design and industrial design. It can seriously affect the effectiveness and attractiveness of a product, but to fully realize this potential, visual design must not be put off until later, but made one of the main tools for meeting the needs of users and business.

Fine arts, visual interface design and other design disciplines

Artists and visual designers work with the same visual media, but their work serves different purposes. The artist's goal is to create an object, the look of which evokes an aesthetic response. Fine art is the artist’s way of self-expression. The artist is not bound by almost any restrictions. The more unusual and original the product of his efforts, the higher it is valued.

Designers create objects that other people will use. When it comes to visual interface designers, they are looking for the best representation that conveys information about the behavior of the program they are involved in designing. Taking a goal-oriented approach, they should strive to present behavior and information in a clear and useful way that supports the organization's marketing goals and the emotional goals of the characters. Of course, the visual design of user interfaces does not exclude aesthetic considerations, but such considerations should not go beyond the functional framework.

Graphic design and user interfaces

Graphic designers tend to be very visual and less aware of the concepts behind how a software product behaves and interacts with it. They are able to create a beautiful and adequate appearance of interfaces, and in addition, introduce a corporate style into the appearance and behavior of a software product. For such specialists, design or interface design is, first of all, tone, style, composition, which are attributes of the brand, secondly, transparency and understandability of information, and only then - the transfer of information about behavior through the expected purpose.

Visual interface designers need some of the same skills as graphic designers, but they must also have a deep understanding and appreciation of the role of behavior. Their efforts are largely focused on the organizational aspects of design. Their focus is on the correspondence between the visual structure of the interface on the one hand and the logical structure of the user's mental model and program behavior on the other. They are also concerned with how to communicate program states to the user and what to do with the cognitive aspects of the user's perception of functions.

Visual Information Design

Information designers work on visualizing data, content, and navigation. The information designer's efforts are aimed at presenting data in a form that facilitates correct interpretation. The result is achieved through the manipulation of visual hierarchy using such means as color, shape, location and scale. Common objects of information design are all kinds of graphs, charts and other ways of displaying quantitative information.

To create attractive and usable user interfaces, an interface designer must master basic visual skills—an understanding of color, typography, shape, and composition—and know how they can be effectively applied to convey behavior and present information, create mood, and stimulate physiological responses. The interface designer also requires a deep understanding of the interaction principles and interface idioms that define the behavior of the product.

Building Blocks of Visual Interface Design

Interface design comes down to the question of how to design and arrange visual elements in such a way as to clearly reflect behavior and present information. Each element of a visual composition has a number of properties, and the combination of these properties gives the element meaning. The user is able to understand the interface through different ways of applying these properties to each of the interface elements. In cases where two objects share properties, the user will assume that the objects are related or similar. When users see that properties are different, they assume that the objects are not related.

When creating a user interface, consider the following visual properties for each element or group of elements. To create a useful and attractive user interface, you should carefully work with each of these properties.

Form

Form is the main sign of the essence of an object for a person. We recognize objects by their contours. If we see a blue pineapple in a picture, we will immediately recognize it because we remember its shape. And only then will we be surprised by the strange color. At the same time, distinguishing shapes requires more concentration than analyzing color or size. Therefore, shape is not the best property to create contrast if you want to attract the user's attention.

Size

Larger elements attract more attention, especially if they are significantly larger than surrounding elements. People automatically order objects by size and tend to judge them by size; if we have text in four sizes, the assumption is that the relative importance of the text increases with size and that bold text is more important than normal text. Thus, size is a useful property for denoting information hierarchies.

Color

Color differences quickly attract attention. In some professional fields, colors have specific meanings, and this can be used. So, for an accountant, red means negative results, and black means positive results.

Colors also acquire meaning thanks to the social contexts in which we grow up. For example, the color white in the West is associated with purity and peace, while in Asia and Arab countries it is associated with funerals and death. At the same time, color initially does not have the property of order and is not expressed quantitatively, therefore it is far from ideal for transmitting information of this kind. Also, don't make color the only way to convey information, since color blindness is quite common.

Use color wisely. To create an effective visual system that allows the user to identify similarities and differences between objects, use a limited set of colors - the rainbow effect overloads the user's perception and limits the ability to convey information to him.

Brightness

The concepts of dark and light take on meaning primarily in the context of background brightness. On a dark background, dark text is almost invisible, while on a light background it will stand out sharply. People perceive contrast easily and quickly, so the brightness value can be a good tool for drawing attention to those elements that need to be emphasized. The brightness value is also an ordered variable; for example, darker (lower brightness) colors on a map are easily interpreted as representing greater depths or greater values ​​of other parameters.

Direction

Direction is useful when you need to convey orientation information (up or down, forward or backward). Remember that the perception of direction can be difficult with some shapes and small objects, so it is better to use it as a secondary cue. So, if you want to show that the stock market has gone down, you can use a red downward arrow.

Texture

Of course, the elements depicted on the screen do not have real texture, but they can create the appearance of it. Texture is rarely useful for conveying difference or attracting attention because it requires a lot of concentration on detail. Still, texture can be an important clue. Serifs and bumps on UI elements usually indicate that the element can be dragged, while bevels or shadows on a button reinforce the feeling that it can be clicked.

Location

Arrangement is a variable that is ordered and quantifiable, and therefore useful for conveying hierarchy. Layout can also serve as a means of creating spatial relationships between objects on the screen and objects in the real world (for example, the sky in the top half, the ground in the bottom).

In web design, it is very important that the user does not feel uncomfortable - it is like looking at a sink full of dirty dishes. If your design is visually unbalanced, your site will look disorganized, which can make users feel uncomfortable. On the contrary, your design should be attractive and allow visitors to relax and look around, and the best way to achieve this effect is through visual balance. Visual balance is basically the balance of design elements, their placement is like juggling the elements of your design.

When we think of balance, the easiest way to compare it is with the concept of weight. Physical weight and the weight of design elements are actually very similar - a physical object can be small but very heavy, regardless of mass, just as a visual design element can be very small but very eye-catching. The heaviness of a physical object can be compared to the visual brightness of design elements, and each element interacts with other design elements in the same way as physical objects.

Why balanced websites look good

We subconsciously love balance. Love for sustainable structures is embedded in us on a subconscious level; imbalance, on the contrary, causes a feeling of rejection.
Thus, visual balance is the key to successful design. It's that extra spark that some sites have and others don't. As an added benefit, balanced design pairs well with functionality.

There are several different factors that go into working with design elements. How you balance two or more elements in relation to each other, and how you represent the visual properties of the elements is the type of balance and balance properties.

Balance types

There are several different methods for creating balance. You can use these different techniques to organize and sequence elements to create a well-balanced experience that makes users feel comfortable. Let's look at five main ways to achieve balance

Horizontal balance

Vertical Balance

Radial Balance

Symmetrical balance

Asymmetrical balance

A great way to visually organize elements is to balance them along an axis - horizontal or vertical. Horizontal balance - you place elements to the left and right of each other - like on a children's swing. Vertical balance - you hang items from top to bottom along a central axis.

Instead of balancing compositional elements along central axes, you can also balance elements around a center - radial balance. Basically, you can place elements around a central axis, or like sun rays.

Another type of balance, which is usually combined with horizontal, vertical and radial balance, is symmetrical and asymmetrical balance. Symmetrical balance - when both sides of the composition are mirror images of each other - is like folding a piece of paper in half. Symmetry is a very formal, strict balance that is easy on the eye, and is widely used in building design or layouts. It is also becoming increasingly popular because it is easier to reproduce in any size.

Asymmetry is probably the most common form of balance. Essentially, it is the opposite of symmetrical balance, in which the elements are balanced in relation to each other. Asymmetry is a much more interesting design than symmetry because symmetry tends to lack visual hierarchy, whereas asymmetrical layouts tend to have high visual hierarchy. Asymmetry does not mean, however, that there is no balance at all, it simply means that the elements are not positioned in relation to each other.

How do you know which type of balance would be right to use now? In general, symmetry is usually easier to perceive. That's why it's more common in design.

So if your goal is to convey stability and strong organizational structure to the company. On the other hand, if you want to convey the fragility of what is considered safe, try to enhance the effect with asymmetry. Asymmetry adds a spark to a visually safe design.

For symmetry, it is best to use content from approximately equal parts, dispersed throughout the layout

In asymmetry, it is best to draw attention to one specific point, unbalancing the viewer's gaze

Balance properties

Each object in any composition has its own characteristics, as well as the characteristics of interaction with other objects. The main features in balance are: size, color, shape, size and position. Each of these properties can be used individually to create symmetrical balance, and a combination of these properties is needed to create balance in an asymmetrical composition - changing one element will affect the others, etc.

A large, empty object has light visual weight and can therefore be balanced with a smaller, more saturated object. For example, a blog with a content area and a sidebar - the content area is typically larger than the sidebar. You could balance them out by adding more white space in the content area and filling the sidebar with something more visually weighty. If you want to achieve symmetrical balance in your design, then you need to make sure that the elements are the same size, regardless of visual weight.

The color of an object in a composition can change the visual weight of the elements. Darker colors are visually heavier than soft, light colors - red is visually heavier than yellow because it attracts more attention. If you're trying to balance a dark element with another or more light elements, you can try playing with other balance properties, or changing the background color of surrounding elements.

The shape of elements can dramatically change the balance of a composition. Wavy or jagged shapes are more visually interesting and therefore heavier than shapes with very simple, straight lines. Don't try to balance several elements with a complex shape, rather balance a complex and a simple object.

Contrast can be an extremely important factor in compositional balance. The higher the contrast of an object, the heavier it is, and vice versa. There are several ways to balance elements with different levels of contrast, one of them is to compensate for the element's low contrast with a sharp background or texture contrast. You can also add simple borders, gradients, and shadows to reduce the contrast of elements.

Location

This is an important factor, and this property can be used to balance other elements that differ in shape, color, weight and size. As we said earlier, a large object is heavier than a small one, but their weight also depends on how close they are to the center of the page. Objects closer to the center weigh more than objects further from it, so if you have, for example, a large red object close to the center, you can move it away from the center, or move other objects towards the center.

How to add balance to the site

So how do you make a page look balanced? As an example, let's take the simplest symmetrical balance. Empty content looks pretty dull, so let's add a menu. If you look at almost any good design, you will see that the menu is designed “heavier” than the text. This is where the most primitive balance is achieved - a small heavy element balances the voluminous but light text. Start developing your layout by sketching out the necessary elements. These rules will help you avoid making mistakes:

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Large objects are heavier than small ones

Dark objects are heavier than light ones

Saturated colors are heavier than faded ones

The thicker the border, the heavier it is

The more texture, the heavier the object with it

In addition to the horizontal type of balance, do not forget about the vertical and radial

Warm bright colors such as orange and red are heavier than cool colors (blue, green)

Rule of thirds

In visual arts there is such a concept, as a rule, the rule of thirds - this is when the workspace is mentally divided into 9 equal parts by 2 vertical and 2 horizontal lines. So, according to this rule, the main compositional centers should be located at the intersection of these lines.

So, how do you divide the layout into 9 equal parts?

1. Imagine that the entire workspace is an ordinary rectangle

2. Mentally divide its vertical part into 3 equal parts and draw 2 parallel lines for this.

3. The same for the horizontal component

Following the rule of thirds creates more interest in the content than with conventional centering.

Examples with explanations

On the MacAllan Ridge site you see an asymmetrical arrangement of blocks. However, the bulky block with the image is balanced by the heavy borders of the menu block. A fairly common balancing technique.

Creating the best chocolate brownies will require both UX and UI. I'm serious. To get started, you will need a recipe, ingredients, kitchen utensils and an oven. Then: mix, bake, cut, put on plates, serve and eat.

But which of this is UX and which is UI? The process of making is UX, and the process of plating and serving is UI.

What about eating? This is UX; except when it's not UX. Would the consumer have a different experience if the cakes were served straight from the pan or presented beautifully on a plate? I would say yes, the latter would be preferable.

In this article, I will share with you five differences between UX and UI design. Let's hope that by the end of it, you will have a better understanding of them. Let me say right away that although you will notice differences, some of them will be very similar to each other.

With that disclaimer, let's take a look at some of the differences between the two.

UX is not UI

UX design, or user experience design, is the process by which a need is identified. A rough prototype is then drawn, which is later validated (or not) through testing. When both the business model and value proposition are confirmed, the product is ready.

UI, or user interface design, can be thought of like this:

User Interface Design = Visual Design + Interaction Design.

Visual design is how a site looks, its personality, if you will; brand. Interaction design is how people interact with your website. When someone presses a button, does it change in a way that makes it clear that it has been pressed?

While both UX and UI designers create interactions, UX designers can be considered macro-interaction architects, and UI designers can be considered micro-interaction creators who deal with the details.

According to designer Nick Babich:

“The best products do two things well: function and detail. Features are what attract people to your product. The details are what hold them together.”

A UX designer would rather design user flows, the steps a user would take to, for example, sign up for a newsletter. What steps will they follow and how will they know they succeeded?

The project then goes to the UI designer. The UI designer will enhance these interactions by adding color and highlighting the original design, giving them hints, and showing direction to the newsletter.

UI makes interfaces beautiful

A useful product satisfies a need that the market has not yet encountered. A UX designer's research process involves competitive analysis, developing personas, and then creating a minimum viable product; a product that will be valuable to your target audience. This is confirmed through testing throughout the product life cycle.

Once the user flows and wireframes are prototyped and tested, the process moves on to the UI designer - his job is to make it all look good. This includes choosing a color scheme and design that is both beautiful and easy to use. However, color choices, design, and interactions are not based on the designer's personal preferences, but rather on clearly articulated persona-specific reasons developed by UX designers. With their help, UI designers implement a visual hierarchy that will serve as a guide for users, explaining to them what and when to do to achieve their goal.

A well-designed hierarchy will highlight one main goal on the page, letting users know where they are on the site and what they can do at any given time. The hierarchy handles this by using conventions and patterns that are already familiar to users. These patterns will give users direction.

UX helps users achieve their goals

UI creates emotional connections

People come to your site to do something. Perhaps someone is looking for a dog for a small apartment.

The UX side of things can look at people as dog lovers and try to understand what is important to them. What do they value or need when seeking help in choosing their furry friend? To understand this, they begin work. They ask questions, observe people, interview them, maybe do prototypes and some guerilla testing to see if they can help them.

Once you've got your basic usability in place, according to Aaron Walter, author of Design for Emotion, the loyalty of your users will depend on the personality of your interface. A vibrant design can attract people to your site, and they may even linger if there is something to do there. And once a personal connection is formed, they are hooked. Does your interface make them laugh? Does he grab them? How cocky is he? Aaron says, “People will forgive your shortcomings, follow you, and sing your praises if you reward them with positive emotions.” This is where the UI designer comes in.

First the UX design is created

Then (sometimes) the UI design is created

How do UX and UI designers work together throughout the design process?

Typically, UX design and research are the first steps when deciding to create a product or application. UX designers conduct much of the research that confirms or disproves a product's initial ideas and guides its development.

Once the prototype has been tested several times and is almost ready, the UI designer comes in and starts working on visual design and micro-interactions.

However, this path is not always linear and depends on many factors. For example:

• Who does UX and UI?
• The same person, or someone different, and a different team?

UX is used in all products, interfaces and services

UI refers only to interfaces

User experience design is a vast field and is becoming more popular every day. Nowadays, not only companies using the web, but many others developing products or providing services are beginning to grasp the value of understanding their users and validating hypotheses before the creation process begins.

User Interface Design is about user interfaces. This does not mean that it is limited to the graphical user interface of computers, tablets, and mobile devices. These days, interfaces can be found in many other products, such as watches, washing machines, car dashboards, vending machines, and much more.

I recently read about an iPhone app that will unlock your car door. It turns out that this set of interactions involves many more steps than simply using a key to open a door. Whether we're designing for the interface or the experience, we must ensure that our users remain at the heart of the process.

conclusions

It is almost impossible to separate UX from UI or UI from UX.

But if you try, you can conclude that:

• UX design helps users complete tasks across multiple platforms and services.
• UI design creates attractive and aesthetic interfaces that connect with people.

Translation of an article by Don Sklecht

“Visual Interface Design No matter how much effort you put into researching users and creating a model of product behavior that helps achieve their goals, that effort will be...”

-- [ Page 1 ] --

Visual interface design

No matter how much effort you put into user research and creating

developing a product behavior model that contributes to achieving their goals

lei, these forces will be wasted if you fail to properly

in a way to convey to users the principles of this behavior. In service

In interactive products, this is often done through visual means.

by you - by displaying objects on the display (although in some cases

In some cases, the behavior of the product must be conveyed through physical

properties, such as the shape of a hardware button or the tactile feel of it).

Visual interface design is a discipline that is often misunderstood due to its similarities to graphic design and the fine arts. It is often incorrectly defined as “skinning” an interface; we have even heard such wording as “decorating the product.”

Our experience has led us to the conclusion that visual interface design is a very necessary and unique discipline that should be used in combination with interaction design and industrial design. It can have a major impact on the effectiveness and appeal of a product, but to fully realize this potential, visual design must not be put off until later (otherwise you will end up trying to “paint the pig”), but rather make it one of the main tools for meeting the needs of users and business.

Developing visual interface design requires a number of related skills. The specific skill set is determined by the product being created. To create attractive and usable user interfaces, an interface designer must master basic visual skills—an understanding of color, typography, shape, and composition—and know how they can be used effectively to convey behavior and information, and to create mood or incentive. Visual design of interfaces for recording physiological reactions. The interface designer also requires a deep understanding of the interaction principles and interface idioms that define the behavior of the product.

In this chapter, we will discuss effective strategies for visual interface design. The third part of the book provides additional information about specific interactive and interface idioms and principles.

Fine art, visual interface design and other design disciplines Artists and visual designers work with the same visual media. Both must be skillful and experienced in everything that concerns these means, but their activities serve different purposes. The artist's goal is to create an object, the look of which evokes an aesthetic response. Thus, fine art is a way of self-expression by the artist on a topic that is of emotional or intellectual interest to him (and sometimes to society as a whole). The artist is not bound by almost any restrictions. The more unusual and original the product of his efforts, the higher it is valued.

Designers, on the other hand, create objects for other people. While contemporary artists are primarily concerned with self-expression, designers, as Kevin Mullet and Darrel Sano point out in their excellent book Designing Visual Interfaces, are “concerned with the search for the most appropriate representation to convey some specific information.” ”, that is, communication.

When it comes to visual interface designers, they are looking for the best representation that communicates the behavior of the program they are designing. Taking a goal-oriented approach, they should strive to present behavior and information in a clear and useful way that supports the organization's marketing goals and the emotional goals of the characters.

Let's be clear that the visual design of user interfaces does not exclude aesthetic considerations, but such considerations should not go beyond the functional framework. And although there is always subjectivity in visual communications, we strive to minimize the influence of taste. We've found that clearly expressing the user's emotional and business goals is invaluable, even when it comes to designing aspects of the visual interface that benefit the brand, user experience, and gut reactions. We wrote more about intuitive processing in Chapter 5.

Fine art, visual interface design and other graphic design disciplines Graphic design and user interfaces Graphic design is a discipline that was dominated by printing for many years (until about the second half of the 80s of the last century), since design was mainly limited to the creation of packaging, advertising, formatting documents and arranging the living environment.

Old-school graphic designers are uncomfortable with digital media because they are not used to creating graphics at the pixel level. The younger generation of graphic designers have been trained in the “new” format and are quite successful in applying the concepts of traditional graphic design to digital graphics.

Graphic designers tend to be very visual and less aware of the concepts behind how a software product behaves and interacts with it. Talented, digitally savvy graphic designers excel at creating the information-rich, aesthetically pleasing, impressive interfaces we see in Windows XP and Mac OS X, as well as the visually rich interfaces for computer games and consumer-facing applications. consume la. They are able to create a beautiful and adequate appearance of interfaces, and in addition, introduce a corporate style into the appearance and behavior of a software product. For such specialists, design or interface design is, first of all, tone, style, composition, which are attributes of the brand, secondly, transparency and understandability of information, and only then (if it comes to this at all) the transfer of information about behavior through the expected appointments (see Chapter 13).

Visual interface designers need some of the same skills as digital designers, but they must also have a deep understanding of the role of behavior. Their efforts focus heavily on the organizational aspects of design and how to communicate the product's behavior to the user using visual anchors and expected purposes.

Their focus is on the correspondence between the visual structure of the interface on the one hand and the logical structure of the user's mental model and program behavior on the other. They are also concerned with how to communicate program states to the user (say, how to make a "modifiable" state distinguishable from a "read-only" state) and what to do with the cognitive aspects of the user's perception of functions (the composition of elements). , visual hierarchy, figure-ground relationship, etc.).

334 Chapter 14 Visual Interface Design Visual Information Design Information designers work not on interactive features, but on the visualization of data, information, and navigation aids. In visual interface design, their skills are especially important, especially when it comes to data-intensive applications and some websites where content outweighs functionality. The information designer's efforts are aimed at presenting data in a form that facilitates correct interpretation. The result here is achieved through the control of visual hierarchy using such means as color, shape, location and scale.

Common objects of information design are all kinds of graphs, charts and other ways of displaying quantitative information. Edward Tufte has written several groundbreaking books covering this topic in detail, including The Visual Display of Quantitative Information.

Industrial Design Any discussion of industrial design is beyond the scope of this book, but the widespread use of interactive devices and portable devices has meant that the role of industrial design in the creation of interactive products is growing right before our eyes. As is the case with the differences in professional skills between graphic designers, interface designers and information designers, there is a division of industrial designers into two categories: some specialize in creating beautiful and useful forms, while others have talents in the field of logical and ergonomic Presenting physical controls in a way that matches user behavior and reflects device behavior.

As more and more devices are equipped with fully functional displays, it becomes increasingly important for interaction designers, interface designers and product designers to collaborate to create complete and effective solutions.

The Building Blocks of Visual Interface Design Essentially, interface design comes down to the question of how to design and arrange visual elements to clearly convey behavior and present information. Each element in a visual composition has a number of properties, such as shape and color, and the combination of these properties gives the element meaning. Each individual property in itself rarely has a natural meaning. Rather, we can say that the user gets the opportunity to figure it out

Building Blocks of Visual Interface Design

in the interface due to different ways of applying these properties to each of the interface elements. In cases where two objects share properties, the user will assume that the objects are related or similar. When users see that properties are different, they assume that the objects are not related. The most contrasting objects attract our attention more strongly.

Long before the child begins to understand speech and speak, he shows the ability to distinguish objects that contrast visually. The children's show Sesame Street relies on this human ability by asking children to choose an object that is different or out of a group. Visual interface design creates meaning in a similar way, which in practice gives a much better result than just words.

When creating a user interface, consider the following visual properties for each element or group of elements. To create a useful and attractive user interface, you should carefully work with each of these properties.

Shape What shape does the object have? Is it round, square, or amoeba-like? Form is the main sign of the essence of an object for a person. We recognize objects by their contours; the silhouette of a pineapple, textured with blue fur, still lets us know that it is a pineapple. At the same time, distinguishing shapes requires greater concentration of attention than analyzing color or size. Therefore, shape is not the best property to create contrast if you want to attract the user's attention.

The weakness of shape as a factor in object recognition becomes obvious when you look at dock1 of the Mac OS X operating system - here you can mistakenly call iTunes instead of iDVD or iWeb instead of iPhoto. The pictograms have different shapes, but have similar sizes, colors and textures.

Size How big or small is the object relative to other objects on the screen? Larger elements attract more attention, especially if they are significantly larger than the surrounding elements. Size is an ordered and quantifiable variable, that is, people automatically order objects by size and tend to judge them by size; if we have text in four sizes, it is assumed that the relative Special interface element of the Mac OS X operating system, which

–  –  –

The importance of text increases with size and that bold text is more important than normal text.

Thus, size is a useful property for indicating information hierarchies. A sufficient discrepancy in size usually quickly attracts a person's attention. Jacques Bertin, in his classic work The Semiology of Graphics, describes size as a dissociative property. This means that if an object is very small or very large, it becomes difficult to interpret other variables, such as shape.

Brightness How dark or light is the object? Of course, the concepts of dark and light make sense primarily in the context of background brightness. On a dark background, dark text is almost invisible, while on a light background it will stand out sharply. As with size, brightness value can be dissociative; say, if a photograph is too dark or too light, it becomes impossible to make out what is in it. People perceive contrast easily and quickly, so the brightness value can be a good tool for drawing attention to those elements that need to be emphasized. The value of brightness is also an ordered variable—say, darker (lower brightness) colors on a map are easy to interpret as representing greater depths or greater population densities.

Color Yellow, red or orange? Color differences quickly attract attention. In some professional fields, colors have specific meanings, and this can be used. So, for an accountant, red means negative results, and black means positive; For a securities trader, blue is a buy signal and red is a sell signal (at least in the US this is true). Colors also acquire meaning thanks to the social contexts in which we grow up. For a Westerner who grew up around traffic lights, red means “stop” and sometimes even “danger,” whereas in China red is the color of good luck. White color in the West is associated with purity and peace, and in Asia - with funerals and death. Moreover, unlike size or brightness, color initially does not have the property of order and is not expressed quantitatively, therefore it is far from ideal for transmitting information of this kind. In addition, you should not make color the only way to convey information, since color blindness is quite common.

Use color wisely. To create an effective visual system that allows the user to identify similarities and differences

objects, use a limited set of colors - the rainbow effect overloads the user’s perception and limits the ability to convey information to him. Additionally, when it comes to color, there may be conflicts between marketing needs and interface ideas, so you may need a talented visual designer (and diplomat) to navigate this situation.

Direction Is the object pointing up, down, or sideways? Direction is useful when you need to convey orientation information (up or down, forward or backward). Remember that the perception of direction can be difficult with some shapes and small objects, so it is better to use it as a secondary cue. So, if you want to show that the stock market has gone down, you can use a red downward arrow.

Texture Rough or smooth, uniform or uneven? Of course, the elements depicted on the screen do not have real texture, but they can create the appearance of it. Texture is rarely useful for conveying difference or attracting attention because it requires a lot of attention to detail. In addition, significant pixel costs are required to convey texture. Still, texture can be an important clue: when we see an area textured with rubber, we assume that we should grab the device by that area. Serifs and bumps on UI elements usually indicate that the element can be dragged, while bevels or shadows on a button reinforce the feeling that it can be clicked.

Positioning How is the element positioned relative to other elements? Like size, location is an ordered and quantifiable variable, and therefore useful for conveying hierarchy. By placing the most important or most requested elements at the top left, we use the order of perception of elements on the screen to the benefit of the product. Layout can also serve as a means of creating spatial relationships between objects on the screen and objects in the real world.

Principles of Visual Interface Design The human brain is a magnificent pattern recognition device. It extracts meaning from the dense streams of visual information that bombard us literally from everywhere. Our brains cope with this barrage of input by identifying visual patterns and creating a system of priorities for the objects we observe. Ultimately, this allows us to consciously perceive the visible world. It is the ability of the visual system of the human brain to assemble parts of the visual field into images based on visual anchors (cues) that allows us to process visual information so quickly and efficiently. Imagine if you suddenly had to manually calculate the trajectory of a baseball to predict where it would land. Our eyes and brain together do this in a fraction of a second, without requiring any conscious effort on our part. The process of creating a visual interface design should rely on our natural visual processing abilities to ensure that information is communicated to users and that the program's capabilities and functions are reflected.

One chapter is completely insufficient to fully cover the topic of visual interface design. However, there are a number of important principles that will help you create interfaces that are as easy to understand and pleasing to the eye as possible. As already mentioned, Kevin Mallett and Darrell Sano provide an excellent and detailed analysis of these basic principles; We'll just briefly discuss some of the most important principles of visual interface design.

When creating graphical interfaces you should:

Use visual properties to group elements and create a clear hierarchy;

Create a visual structure and lay out a logical route at each level of the organization;

Use images that are holistic, consistent and appropriate to the context;

Integrate visual style with functionality in a meaningful and consistent manner;

Avoid visual noise and clutter.

These principles, and some other general principles related to working with text and color in graphical user interfaces, are discussed in detail in the following sections.

Use Visual Properties to Group Elements and Create a Clear Hierarchy Typically, it makes sense to group logical sets of functional or informational elements using visual properties, such as color or spatial characteristics. By subsequently applying these visual properties to your interface, you can create patterns that your users will quickly learn to recognize. For example, in Windows XP, all the buttons are convex, with rounded corners, and the text fields are rectangular, slightly depressed, with a white background and blue border. Thanks to the systematic use of this image, it is impossible to confuse a button and an input field, despite some similarities.

–  –  –

When looking at any set of visual elements, the user unconsciously asks the question: “What is of interest here?” - and almost immediately: “What is the connection between these objects?” We should strive to ensure that the interface contains the answer to both questions.

Creating a hierarchy Based on the scenarios, determine which functional and informational elements should be immediately perceived by users, which are secondary, and which are needed only in exceptional situations. This ranking serves as the basis for the visual hierarchy.

Use color, saturation, contrast, size, and position to create visible differences between levels of hierarchy. The most important elements should be larger, brighter colors, more saturated and more contrasting. They should be placed above other elements or made protruding. It is best to paint the highlighted elements in rich colors. Less important elements should be less saturated, less contrasting, smaller or flatter. Neutral light colors take them into the background.

Of course, setting these properties should be done carefully. You should not make the most important element huge, red and bulging. Often it is enough to change only one of the properties. If you find that two elements of varying importance are competing for the user's attention, turning down the fuse on the less important one is a better solution than trying to light up the more important one. This will give you more space to focus on the most important elements. (Here's a good analogy: if all the words on a page are in bold red font, does any of the words stand out?) Creating a clear visual hierarchy is one of the most difficult tasks in visual interface design, and it requires skill and talent. Users practically do not notice a high-quality visual hierarchy, but its absence and the resulting confusion are immediately noticeable.

340 Chapter 14. Visual Interface Design Visualizing Relationships To convey the relationships of elements, again turn to scripts. It is necessary to identify not only elements with similar functions, but also elements that are most often used together. Elements that are shared should generally be grouped spatially to minimize mouse movement, while elements that may not be used together but have similar functionality can be visually grouped even if they are not grouped spatially.

Spatial grouping explains to users how certain tasks, data, and tools relate to others, and can provide hints about the correct sequence of actions. Good grouping by arrangement takes into account the order of tasks and subtasks and the movement of the eye across the screen: left to right for Western languages, and generally top to bottom. (We will discuss this point in more detail a little later.) Elements located next to each other are usually connected to each other. In many interfaces, such grouping is implemented too cumbersome: everywhere you look there are frames, and sometimes a frame contains only one or two elements. Often the same effect can be achieved more efficiently through distances. For example, on a toolbar, buttons can be separated from each other by four pixels. To isolate file commands (“open”, “new file”, “save”) into a separate group, it is enough to increase the distance between the file command buttons and the adjacent group of buttons to eight pixels.

Elements separated by large distances can be grouped together through common visual properties, creating a pattern that eventually becomes meaningful to users. Thus, using volume to create a sense of physical intended purpose is probably the most effective way to separate controls from data and background elements. (For more on expected purposes, see Chapter 13.) This strategy is often used in icon drawing. Mac OS X uses bright colors for application icons and dim colors for rarely used utility programs.

The green device start button may be accompanied by a similar animated green icon indicating that the device is functioning normally.

Once you have decided on the groups and the visual characteristics of these groups, begin to adjust the contrast between the groups - emphasizing or, conversely, shading the groups according to their importance in the current context. Emphasize differences between groups, but minimize differences between members of the same group.

Visual Interface Design Principles

The Squint Test A good way to ensure that a visual design effectively uses hierarchy and relationships is what designers call the squint test. Close one eye and look at the screen with your other eye squinted. Pay attention to which elements stick out too much, which ones have become fuzzy, and which ones have come together in groups. This procedure often reveals previously unnoticed problems in interface composition.

Create a visual structure and create a logical path at each level of the organization. Interfaces are conveniently thought of as consisting of visual and interactive elements that are grouped together using panels, which in turn can be grouped into screens, views, or pages. Such grouping, as mentioned above, can be done through spatial distribution or through common visual properties. A proprietary application may have multiple layers of these structures, so it is critical to maintain a transparent visual structure so that the user can easily navigate from one part of the interface to another to suit their workflow.

In the remainder of this section, we'll describe a number of important properties that help you define a clear visual structure.

Alignment and Grid Alignment of visual elements is one of the main techniques that allows a designer to present a product to users in a systematic and orderly manner. Grouped elements should be aligned both horizontally and vertically (Figure 14.1.) In general, each element on the screen should be aligned with as many other elements as possible. Refusal to align two elements or two groups of elements must be conscious: this is permissible only to achieve a specific separating effect. Among other things, designers should pay attention to:

Alignment of signatures. Labels for controls placed on top of each other must be aligned to a common border. If all your signatures are roughly the same length, you align them to the left to make them easier for users to read than if they were aligned to the right.

Alignment within a group of functional elements. A group of related checkboxes, selections, or text fields must follow the alignment of a standard grid.

342 Chapter 14. Visual interface design Fig. 14.1. Adobe Lightroom uses compositional grid alignment quite effectively. Text, functional elements, and groups of controls are very clearly aligned on a fixed-step grid. It should be noted that flipping controls and labels of group elements to the right may prevent them from being read quickly

Alignment of elements placed into groups and panels.

Groups of controls and other objects on the screen, wherever possible, should be snapped to the same grid.

The grid is one of the most powerful tools of the visual designer, rapidly gaining popularity in the years after World War II thanks to Swiss printers. The grid provides uniformity and consistency in the structure of the composition, which is especially important when designing an interface with several levels of visual or functional complexity. Once interaction designers have determined the overall infrastructure of an application and its user interface elements (see Chapter 7), interface designers must organize the composition into a grid-like structure that will appropriately highlight important elements and structures and leave living space for less important elements and lower level elements.

Typically, a grid divides the screen into several large horizontal and vertical areas (Fig. 14.2.) Well designed

Visual Interface Design Principles

Rice. 14.2. In this example, the compositional grid controls the size and position of different areas of the website screen. It ensures consistency between different screens, reducing both the designer's work in creating the composition and the effort the user must make to read and understand the content of the screen. A bathroom grid uses the concept of pitch, that is, the minimum distance between elements. For example, if the grid spacing is four pixels, all distances between elements and groups must be a multiple of four.

Ideally, the grid should also define the proportions of different areas of the screen. Such ratios are usually expressed as fractions. Common fractions include the famous "golden ratio" (denoted by the Greek letter "phi" and equal to approximately 1.62), which is often found in nature and is considered especially pleasing to the human eye; the reciprocal of the square root of two (approximately 1:1.41), which is the basis of the international standard for paper size (for example, A4 sheet); and the 4:3 ratio is the aspect ratio of most computer displays.

Of course, a balance should be sought between idealized geometric relationships and the specific spatial needs of the functions and information presented on the screen.

A perfect implementation of the golden ratio will do nothing to improve the readability of a screen on which objects are cluttered together.

A good compositional grid is modular, that is, it is flexible enough to accommodate all the necessary variations, while maintaining consistency of structure wherever possible. As with many other design issues, simplicity and consistency are important here. If two areas on the screen require approximately the same amount of space, assign them exactly the same size. If two areas require different space, make them significantly different in size. If the grid spacing is too small, the grid will become difficult to perceive due to its complexity. Small differences can make the user feel unsteady (although it is unlikely that he will be able to recognize the reason for this feeling) and ultimately destroy the enormous potential of the mesh application.

Decisions about composition must be, in a certain sense, uncompromising: “almost square” does not work for anything; “almost one in two” – too. If the composition on the screen is close to a simple fractional part of it - half, third or one-fifth - adjust the composition so that it occupies exactly half, one-third or one-fifth of the screen. Use precise, clear, clearly defined proportions.

Using a grid in visual interface design provides a number of benefits:

Ease of use. Because the grid creates a consistent layout of elements, users quickly become skilled at finding what they need in the interface. If the screen title is always in the same place, the user does not have to think or look around the screen to find it. Consistency in the arrangement of elements and the choice of distances between them facilitates the functioning of visual processing mechanisms in the human brain. A well-designed grid greatly simplifies the viewing experience of the screen.

Aesthetic appeal. By carefully using a grid and choosing appropriate relationships between different areas of the screen, a designer can create a sense of order that is comfortable for users and encourages them to interact with the product.

Efficiency. Standardizing composition reduces the effort involved in creating high-quality visual interfaces. We believe that creating a mesh and incorporating it into the process early in the design process reduces the number of iterations and refining steps required to fine-tune the interface. A good, clearly defined grid lays the foundation for an easily modified and extensible design, allowing designers to find good compositional solutions when changes need to be made.

Creating a Logical Path The composition should not only follow a grid exactly, but also structure an effective logical path through the interface for users, taking into account the fact that (in Western languages) the eye moves from top to bottom and left to right. (Fig. 14.3).

Good logical route Inconvenient logical route Eye movement and route Everything scattered across the screen in the interface coincides Fig. 14.3. The movement of the gaze across the interface should create a logical path that allows users to effectively and successfully solve problems and achieve goals. Symmetry and balance Symmetry is a useful means of organizing an interface from the point of view of achieving visual balance. Asymmetrical interfaces usually look like they're about to fall over on one side. Experienced designers can achieve asymmetrical balance by manipulating the visual weight of individual elements, much as a teeter-totter can be achieved by placing children of different weights on opposite ends. In the context of a user interface, asymmetrical design is difficult to achieve due to the high cost of screen space. The squinting test allows you to check the balance of the interface.

Two types of symmetry are most often used in interfaces: vertical axial symmetry (symmetry about a vertical line drawn through the center of a group of elements) and diagonal axial symmetry (symmetry about a diagonal). Most dialog boxes feature one of these types of symmetry, most often diagonal (Figure 14.4).

Monopoly applications typically lack symmetry at the top level (they achieve equilibrium through a good mesh), but well-designed interface elements in such applications are almost certainly symmetrical to some degree (Figure 14.5).

346 Chapter 14. Visual interface design Fig. 14.4. Diagonal symmetry inside the Bullets and Numbering dialog box in Microsoft Word. The axis of symmetry runs from the lower left corner to the upper right Fig. 14.5. Vertical Symmetry in the Macromedia Fireworks Tool Palette Visual Interface Design Principles Use images that are cohesive, consistent, and relevant to the context. The use of icons and other visual elements can help the user understand the interface or, conversely, cause irritation, confusion, or even offense if the icons are chosen poorly. It is very important that designers understand what message the program should convey to the user and what message he expects to receive. A good understanding of characters and their mental models usually provides a solid foundation for text and visual interface languages. Cultural aspects also play a role. Designers should be aware that color has different meanings in different cultures (red is not considered a warning color in China), as do gestures (a thumbs up is considered a highly offensive gesture in Turkey) and symbols ( the octagon prescribes a stop in the United States, but in few other countries). In addition, you should know the color codes adopted in different areas of human activity. For example, in hospitals, yellow represents radiation, while red is typically used in life-threatening situations. On the stock market terminal, red is a signal to sell. Before you get started, make sure you understand the visual language of your users' industry and culture.

Visual elements should be part of a global visual language that connects interface components. This means that logically similar elements should share common visual properties—such as position, size, line thickness, and overall style—with differences only in what emphasizes their meaning. The idea is to create a coherent system of elements. The interface that achieves this goal seems flawless: not a single element looks like it was added at the last minute.

In addition to their functional value, icons can play a significant role in communicating brand attributes. Bright, cartoonish icons may hit the spot if you're designing a website for children, while subtle, subdued icons will be more appropriate for a business application. Regardless of what style you choose, maintain continuity - if on some icons the lines are thick and black with rounded corners, and on others there are thin broken lines, the visual style will “fall apart”.

Design and drawing of pictograms is a completely independent field. Creating clear, low-resolution images requires considerable time and practice—a task best delegated to experienced designers. Pictograms are a complex topic to understand, so we'll just highlight a few important key points here. For those readers who want to learn more about useful icons, we strongly refer you to William Horton's book, The Icon Book. The examples in this book may seem outdated, but the basic principles are still relevant.

Functional Icons Designing icons that represent functions or operations performed on objects is challenging but fun.

The main difficulty lies in representing abstract concepts in pictographic, visual language. In such cases, it is better to rely on idioms than to find images that no one will understand and provide them with tooltips (see Chapter 23) or captions.

For obvious and specific functions, adhere to the following rules:

Place both a function and an object on the icon to make the icon easier for the user to understand. A verb combined with a noun is easier to understand than a verb on its own. For example, if you imagine the Cut command as a document with a cross through it, it will be clearer than the metaphorical image of scissors.

Beware of metaphors and ideas that may not have the intended meaning in the eyes of the target audience. For example, a thumbs up in Western culture means “ok” and may seem like an appropriate pictogram to indicate a positive response, but in the Middle East and other cultures the gesture is offensive—in any application intended for global communication. market, it should be avoided.

Visually group related functions, either spatially or, if this is not possible, using color and other visual aids.

Create simple icons; avoid unnecessary details.

Reuse elements wherever possible so that the user learns them once and for all.

Symbols as Reflections of Objects Creating unique symbols for different types of objects in an interface also helps the user understand the interface better. Such symbols may not always be figurative or metaphorical—which means they are often idiomatic (the power of idioms is discussed in detail in Chapter 13). Such visual markers allow the user to navigate among objects faster than just labels. To establish a connection between a symbol and an object, use the symbol whenever the object appears on the screen.

Visual Interface Design Principles

–  –  –

The interface designer must also ensure that the symbols representing different types of objects are visually distinct. Identifying a specific icon on a screen full of almost identical icons is as difficult as finding a specific word on a screen filled with text. It is very important to visually differentiate (contrast) objects with different behavior, including different options for controls such as buttons, sliders and checkboxes.

Visualizing Icons and Symbols As the graphical capabilities of color displays expand, so does the temptation to render icons and symbols in ever greater detail, achieving near-photorealism. However, this trend ultimately does not meet the user's goals, especially in business applications. Pictograms should remain simple and schematic, with a minimum of color and shading, and maintain their modest size. In Windows Vista and Mac OS X, steps have been taken to provide more detailed icon representation. Although such icons look impressive, they undeservedly attract attention to themselves, and when they are small, they are displayed poorly - that is, they either take up too much expensive screen space or are illegible. In addition, they force the designer to neglect the visual coherence of elements in the interface, since very few functions (mostly those related to hardware) can be adequately represented by specific photorealistic images. Photographic pictograms are like text in capital letters only; the differences between them are not clear and it is easy to get confused. The easiest way for users to distinguish icons is by their shape, but in the case of Mac OS X, the outlines of all icons are equally blurry. The Mac OS X interface is full of photorealism, which distracts users and does not work for their benefit (Figure 14.6).

Visualizing Behavior Instead of describing the results of functions in an interface solely in words (or, worse, not giving any descriptions), show the user what those results will be. Use visual elements for this purpose. This technique should not be confused with the use of icons on controls to represent expected assignments. In addition to text describing the parameter or state, include a picture or diagram describing the behavior. Although visualization, as a rule, 350 Chapter 14. Visual interface design Fig. 14.6. Photorealistic icons in Mac OS X. This level of detail only distracts attention from functional and informational elements. Moreover, if in some cases it is justifiable to detail objects familiar to the user, what is the point of detailed images of unfamiliar objects or abstract concepts (such as a computer network)? How many users have seen the bare hard drive (far right)? Ultimately, the user has to navigate through the labels to make sense of the icons they need. It doesn't often require extra screen space, but its ability to clearly convey meaning is worth the pixels spent on it. Microsoft made this discovery several years ago, and since then, dialog boxes (particularly in Microsoft Word) have been replete with visual elements to complement textual descriptions of controls. Photo shop and other graphics applications have long shown the results of operations to the user in the form of thumbnails.

Communicate function and behavior to users visually.

The Microsoft Word Preview dialog box (Figure 14.7) shows how the printed document will look based on the paper size and margin settings. Many users have a hard time understanding what a 1.2-inch left margin looks like, but Preview clearly shows them this. Microsoft could have gone even further and provided direct input in this dialog box. Users could then drag the edge of the left margin and see how the numeric value in the corresponding counter changes. The word input field associated with such a control remains important and cannot be completely replaced by a visual element. The input field shows the exact parameter values, and the visual element shows the final appearance of the page.

Integrate Visual Style with Functionality in a Meaningful and Consistent Way When interface designers decide to adopt a particular style for an interface, it should be done globally. Every aspect of the interface should be analyzed for style consistency; cannot be limited to just some visual

Visual Interface Design Principles

Rice. 14.7. The Preview feature in Microsoft Word provides a visual representation of the application's functionality. This feature doesn't require the user to try to imagine what a 1.2-inch margin would look like, but still makes it easy to understand what results each element's value produces. You don't want the interface to look like someone hastily covered it with a layer of paint? You need to make sure that the functional aspects of the program's graphical interface are in perfect harmony with the overall visual style of your product brand. Program behavior is part of the brand, and the user's experience with the product should reflect a balance of form, content and behavior.

Form and Function For many stakeholders (project owners), visual style is a very attractive area, but stylized interface elements should be kept under constant control - especially when designing exclusive applications. The driving force in developing a visual style should be basic shape, behavior, and intended purpose (see Chapter 13), while aesthetic considerations should not interfere with the communication of meaning in the interface and user interaction with the product.

352 Chapter 14. Visual Interface Design However, educational and entertainment applications (especially aimed at children) leave more opportunities for experimentation with style. In such cases, both the visual impression created by the interface and the content of the application influence the user's enjoyment of interacting with the application; this serves as a strong argument in favor of a closer connection between the design of control elements and the content. But here too, the intended purpose should be kept in mind, allowing users to quickly access information.

Brand, Customer Experience and User Experience Most successful companies invest heavily in building and maintaining their brands. A company that cultivates its own brand can dictate the prices of its products, while at the same time morally rewarding consumer loyalty. The brand is an indicator of the high quality of the product and assumes that the user will prefer it based on his taste.

In the simplest sense of the word, a brand is the sum of all interactions people have with a particular company. As interactions increasingly occur through technology-enabled channels, it is not surprising that firms' efforts to create “branded” interfaces are greater than ever. If the goal is consistent and positive interaction with the consumer, then the brand's verbal, visual and behavioral messages must be consistent and consistent. For example, if a consumer tries to find out prices for DSL service in his area and discovers that the telephone company's website does not have useful information (even after considerable effort to find it), he comes away confident that the company itself - The establishment is rude and unpleasant. No design in the world can save you from this. The same is true for other channels: if a person doesn't get the answers he wants, it doesn't matter if the computer's voice sounds friendly, the system accepts the voice input, and the customer service representative ends the conversation with best wishes.

While companies have known about brand experiences across traditional marketing and communications channels for quite some time, many are just beginning to think about brands in terms of user experience. To understand brand experience in the context of user experience, it's helpful to look at it from two perspectives: first impressions and long-term relationships.

Just like in human relationships, the first impression of a user interface is extremely important. The first five minutes of communication lay the foundation for a long-term relationship. To make this first five-minute communication successful, use

Visual Interface Design Principles

The body interface must clearly and quickly present the brand. Typically, visual design plays a critical role in creating the first impression—mainly through imagery and color. By choosing the right color palette and image style for your brand-focused interface, you'll be a step closer to using your brand to create a positive first impression.

Similar works:

“magic that has survived to this day! Magic is a science and art in which progress does not stand still. The book is an example of what ancient rituals look like so that they can be applied today. There is development, but the essence always remains! This is a multi-read book and an excellent reference that will be useful throughout your practice. Second..."

“Vladimir Petrovich Morozov The art and science of communication: nonverbal communication From the editor The book offered to readers is the second, revised and expanded edition of the author’s previously published monograph “Nonverbal communication in the system of speech communication. Psychophysiological and psychoacoustic foundations.” - M.: Publishing house. IPRAN, 1998. Author of the monograph, Professor V.P. Morozov is well known in the circles of speech researchers as an authoritative specialist in nonverbal and especially in...”

“Roman Ingarden RESEARCH ON AESTHETICS Translation from Polish by A. Ermilov and B. Fedorov Foreign Literature Publishing House, Moscow 1962 CONTENTS: Preface. 5 [missed during digitization] Two-dimensionality of the structure of a literary work. 2 Sketchiness of a literary work. 40 Literary work and its specification. 72 On different understandings of veracity (“truth”) in a work of art. 92 On the different cognition of a literary work. 114 Aesthetic experience..."

“Alexander Fedorov “Pros” and “Cons”: Cinema and School This popular science publication analyzes the practical experience of many years of work of the school film elective. This is an expanded version (with additions in 2002) of the book “For” and “Cons”, published by the Moscow Publishing House VBPK in 1987. The author is Doctor of Philosophy, Professor, President of the Association of Film Education and Media Pedagogy of Russia, full member of the Russian Academy of Cinematographic Arts and Sciences Alexander Viktorovich Fedorov. 1. Before...”

“ASTRAKHAN BULLETIN OF ECOLOGICAL EDUCATION No. 2 (32) 2015. p. 74-89 UDC 639.212.053.7:639.271.2 (262.81) THE IMPORTANCE OF NATURAL SPAWNING AND ARTIFICIAL STURCHETRY IN THE FORMATION OF STURGEON RESERVES OF THE CASPIAN SEA Raisa Pavlovna Khodorevskaya Federal State Budgetary Scientific Institution "Caspian Research Institute of Fisheries" » [email protected] Sturgeon hatcheries, spawning grounds, spawning migrations, beluga, Russian sturgeon, stellate sturgeon, the relationship between natural and..."

“Federal State Budgetary Educational Institution of Higher Professional Education “Chelyabinsk State Academy of Culture and Arts” MUSEUM BULLETIN Issue 18 Chelyabinsk UDC 069 BBK 79.1 M89 Editorial Board: Aleshko E. N., Grevtseva G. Ya., Lushnikova A. V., Ovchinnikova N. V., Perchik L. S., Terekhov A. N. Museum Bulletin / Chelyabinsk State Academy of Culture and Arts; comp. N.V. Ovchinnikova. – Chelyabinsk, 2015. – Issue. 18. – 184 pp., color. on...”

“CONTENTS INTRODUCTION......... 5 EXHALITION VALVE AS A FUNCTIONAL ELEMENT OF 1. ARTIFICIAL VENTILATION DEVICE. 11 Classification of ventilators 1.1....... 11 General diagram of the structure of ventilators 1.2...... 14 Analysis of the types of design of the exhalation valve 1.3.. 15 General requirements for the exhalation valve based on its analysis 1.4. functional purpose...... 19 Function of maintaining spontaneous respiratory activity 1.4.1. patient......... 19..."

"S. Garanina Sergei Mikhailovich Prokudin-Gorsky SERGEY MIKHAILOVICH SERGEI MIKHAILOVICH PROKUDIN-GORSKY PROKUDIN-GORSKY Svetlana Garanina Svetlana Garanina Professor, Department of Book Sciences Professor, Department of Book Sciences, Moscow State University of Culture and the Arts1 of Culture and the Arts S.M. Prokudin- Gorsky. S. M. Prokudin-Gorsky. Studio portrait. London. Studio portrait. London. 1910s or 1920s. From the family archive. 1910s or 1920s. From..."

“Contents 1. The divine soul has boundless freedom (introduction)...2 2. The singer’s crown, the crown of thorns (pages of life and creative path)...5 2.1. Through the eyes of contemporaries..9 2.2. Warrior poet..10 2.3. The bloody hour will come, and I will fall. (tragic duel).11 3. Consonance of the words of the living..12 3.1. Lyrics..14 3.1.1. "Borodino"..17 3.2. Poems..17 3.3. Prose..18 3.3.1. The novel “A Hero of Our Time.”19 4. Lermontov’s motifs in the works of writers.22 5. Lermontov’s evening (scripts, developments).23 6. Musical...”

“List of free content No. Free collections Access to the collection Geography Publishing house Lan EBS Publishing house Lan. Access to the collection of Art History Publishing House Lan EBS Publishing House Lan. Access to the Right collection. Legal sciences Lan Publishing House EBS Lan Publishing House. Access to the Psychology collection. Pedagogy Lan Publishing House EBS Lan Publishing House. Access to the collection of Social Sciences and Humanities Publishing House Lan EBS Publishing House Lan. Access to the collection of Linguistics and...”

"D. J. Schwartz The Art of Thinking Big The Magic of Thinking Big Publisher: Potpourri, 2007 Paperback, 304 pp. ISBN 978-985-15-0037-2, 0-671-64678 Circulation: 6000 copies. LdGray Format: 84x108/ From the publisher The book The Art of Thinking Big has helped millions of people make their lives better. Its author, David Schwartz, Ph.D., one of the most renowned experts in the field of motivation, will help you work better, lead better, earn more money and, most importantly, feel...

“Municipal institution of additional education “Children’s Art School No. 3” of the Lyubertsy district of the Moscow region SELF-EXAMINATION in the area of ​​activity for 2014 In accordance with the Federal Law “On Education in the Russian Federation” (as amended on July 23, 2013). Part 1 of Art. 29. Part 2 Art. 30, the procedure for conducting self-examination by an educational organization, approved by order of the Ministry of Education and Science of the Russian Federation dated June 14, 2013 No. 462, by order of the Ministry of Education and Science of the Russian Federation dated December 10, 2014. No. 1324, MU DO "Children's Art School..."

“PUBLIC REPORT MBDOU No. 79 Section I. General characteristics of the institution 1. Type, type, status: Municipal budgetary preschool educational institution, a kindergarten of a general developmental type with priority implementation of activities in one of the areas of child development No. 79 2. License for educational activities Series RO No. 042931 Registration number No. 2339 dated March 26, 2012 Validity period: indefinitely 3. Location, convenience of transport location Legal address: 426063 UR...”

“Abstract This graduation work is devoted to optimizing the coverage area of ​​digital television and radio broadcasting in Aktau. The final work covers the following topics: description of digital television standards (DVB, ATSC and ISDB), description of a single-frequency network and selection of equipment for building a television network. The following calculations were performed: calculation of field strength by the analytical method; calculation of field strength from propagation curves; Fresnel zone calculation; study of the radius of the coverage area;..."

"Ministry of Culture of the Russian Federation Federal State Budgetary Educational Institution of Higher Professional Education "Chelyabinsk State Academy of Culture and Arts" REPORT on self-examination of the Federal State Budgetary Educational Institution of Higher Professional Education "Chelyabinsk State Academy of Culture and Arts" (as of April 1, 2015) Chelyabinsk 2015 Contents 1. General information about educational...”

“Charles William Morris Foundations of the Theory of Signs Nemo autem vereri debet ne characterum contemplatio nos a rebus abducat, imo contra ad intima rerum ducet. Gottfried Leibniz (No one should fear that the observation of signs will lead us away from things: on the contrary, it leads us to the essence of things. - Gottfried Leibniz (lat.)) I. INTRODUCTION. SEMIOTICS AND SCIENCE Humans are the highest of living beings who use signs. Of course, not only people, but also animals react to certain things as signs of something...”

“ISSN 1997-4558 PEDAGOGY OF ART http://www.art-education.ru/AE-magazine No. 4, 2014 PERCEPTION OF WORKS OF FINE ARTS AND MUSIC IN THE SPIRITUAL DEVELOPMENT OF CHILDREN IN THE CONDITIONS OF THE MUSEUM OF CULTURAL DEVELOPMENT OF CHILDREN THR OUGH PERCEPTION OF PIECES OF FINE ARTS AND MUSIC IN CONDITIONS OF MUSEUM STOLYAROV BORIS ANDREEVICH STOLYAROV BORIS ANDREEVICH Doctor of Pedagogical Sciences, Professor, Head of the Department "Russian Center for Museum Pedagogy and Children's Creativity" Federal State Budgetary Institution "State..."

"Ministry of Education and Science of the Russian Federation Federal State Autonomous Educational Institution of Higher Education "Southern Federal University" Academy of Architecture and Arts Department of History of Architecture, Art and Architectural Restoration Nino Samvelovna Yesoyan ARCHITECTURE OF THE CITY MASTER'S THESIS in the direction of 04/07/01 (270100) Architecture Scientific supervisor - Assoc. Buchka Alexander Mikhailovich Reviewer – Assoc. k.arch. Karpova Maria Aleksandrovna Rostov-on-Don – 2015 The work was carried out on...”

““The future opens up the most tremendous prospects for us. For the hour has already struck for the beginning of the great cyclical return to mystical thinking. We are surrounded on all sides by the waters of the ocean of universal science - the science of eternal life, concealing within itself the forgotten sunken treasures of bygone generations.” E.P. Blavatskaya E.P. BLAVATSKY PRACTICUM OF OCCULT TRAINING _ Compiled by E. A. Logaeva Translation from English: V. S. Zueva, V. I. Myznikov, T. I. Perebailova, T. O. Sukhorukova, Yu. A. Khatuntsev, Notes: B.. ..”

“C O L L O Q U I A | | ISSN 1822-3737 EVGENY DOBRENKO Socialist realism and real socialism (Soviet aesthetics and criticism and the production of reality) Abstract: Soviet art is not the art of “truth” (as it positioned itself) or “lies” (as it was described in Sovietology, emigrant and dissident discourses). It is beyond verification and functions not as a “reflection of reality,” but as a derealization of life for its subsequent transformation and replacement. It..."

2016 www.site - “Free electronic library - Books, editions, publications”

The materials on this site are posted for informational purposes only, all rights belong to their authors.
If you do not agree that your material is posted on this site, please write to us, we will remove it within 1-2 business days.

In the end, I decided not to throw away the work done, since this article serves as a kind of checklist that you should go through before you start developing a new interface, and look at it directly during the process of designing user interfaces.

“Design is more than just layout, arrangement, or even editing. It is about adding value and meaning, enlightening, simplifying, clarifying, modification, ennoblement, exaggeration, persuasion or even entertainment" - Paul Rand, book "Design: Form and Chaos."

1. Interfaces are designed to enable interaction
   Interfaces exist to enable interaction between people and our world. They can help clarify, illuminate, include and show relationships, connect us, divide us, manage our expectations and provide access to services. The interface design process is not an art, and the interfaces themselves are not monuments. Interfaces do some work and their effectiveness can be measured. And yet they are not utilitarian. The best interfaces can inspire, awaken, mystify, and enhance our interactions with the world.
2. Challenge #1: Provide Clarity
   Clarity is both the first and most important task of an interface. To be effective using an interface you create, people must be able to recognize what it is, understand why they are using it, understand what the interface helps them interact with, predict what will happen when they use it, and then successfully interact with him. While there is room for some mystery and delayed benefits when getting to know an interface, there should be no room for confusion. Clarity inspires confidence and encourages future use. A hundred simple and clear screens are preferable to one confusing one.
3. Maintain attention at all costs
   We live in a world full of distractions. It is difficult to immerse yourself in reading even for a short time without something distracting us and drawing attention to ourselves. Attention is priceless. Don't distract the user with junk in the sidebar of your app, remember what the screen is for in the first place. If someone is reading, then let him finish before showing the ad (of course, if there is no way around it). Appreciate the attention and not only will your users be happier, but you will benefit from it too. When interaction is the primary goal, attention becomes a prerequisite. Keep him at all costs.
4. Put users in control
   People feel comfortable when they feel in control of themselves and their environment. Mindless software takes them away from comfort, involves them in unplanned interactions, confuses navigation and unforeseen results. Give users control: show system status, describe cause and effect (if you do this, get that), and let them know what to expect at every step. Don't worry about it being obvious to them, because it's almost always not obvious at all.
5. The best manipulations are direct
   The best interface is the one that doesn't exist. For example, when we directly control a physical object in our world. But since this is not always possible, and many objects are not physical, but informational, we make interfaces that help us interact with them. It's easy to slip up and add more than necessary to the interface: caramelized buttons, gradients and glitter, graphics, options, settings, windows, attachments, and other junk. As a result, we manipulate interface elements rather than what is actually important. Instead, strive for the idea of ​​direct control. The interface should be invisible and recognize the most common human gestures. Ideally, the interface should be so unobtrusive that the user has the impression that he is directly controlling the object in his focus.
   Added: see principle Interface is evil.
6. One main action per screen
   Each screen we design should be designed for only one important user action. This makes it easier for users to learn, use, and can be easily customized and maintained by developers when needed. Screens that contain two or more targeted actions quickly lead to confusion. Just like an article should contain one clear thesis, each screen should offer one action that fills it with meaning.
7. Leave secondary activities in the background
   Screens with one main target action can have many additional actions, but they must remain secondary! Your article does not exist to be shared on Twitter. It exists because people can read and understand it. Make the weight of secondary target actions visually lighter or show them after the main one is completed.
8. Make the next step natural
   Few actions are final, so for each action, carefully work out the next step. Anticipate what the next action will be and design it in advance. Just as in normal conversation, offer an opportunity for the next word. Don't leave a person hanging in oblivion just because they did what you wanted them to do. Let them take the next natural step that will help them further achieve their goal.
9. Appearance follows behavior (or "function determines form")
   People are most comfortable with objects that behave as they expect. Other people, animals, things, programs. When someone or something behaves in accordance with our expectations, we feel as if we have a good relationship with them. That's why designed elements should look like they behave. In practice, this means that someone must be able to predict how an interface element will behave simply by looking at it. If it looks like a button, then it should act like a button. Don't flirt with the basics of interaction. Leave your creativity for other level questions.
10. Consistency matters
    Following the previous principle, an element should not look similar to another unless their behavior is related. Elements with the same behavior should look the same. It is also important for different elements to appear different (and inconsistent). In an effort to be consistent, new designers often implicitly highlight important differences using the same visual treatments when the visual differences are appropriate.
11. Strong visual hierarchy works better
    A strong visual hierarchy is achieved when there is a clear order in the sequence of visual elements on the screen. That is, when users view similar blocks in the same order every time. A weak visual hierarchy provides few clues as to where the eye can rest and ends up looking cluttered and confusing. It's difficult to maintain a strong visual hierarchy because visual weight is relative: when everything is highlighted, nothing is highlighted. If you want to add one visually heavy element to the screen, you may need to de-emphasize all elements to maintain hierarchy. Most people don't notice it, but it's one of the easiest ways to enhance or weaken a design.
12. Smart organization reduces cognitive load
    As John Maeda said in his book Simplicity, clever organization of elements on the screen can make big things seem small. It helps people understand the interface easier and faster if you show the relationships of the content in the design. By grouping similar elements, you can show the relationship of elements using relative position and orientation. By cleverly organizing your content, you reduce the cognitive load on the user, who doesn't have to think about how things fit together because you've already done it for them. Don't make the user think. Instead, help him and show the connections on the screen through design.
13. Highlight, but don't indicate
    The color of physical objects changes when lighting changes. On a bright sunny day, we see a tree completely differently than at sunset. Just as in the physical world where color is relative, in an interface it should not strictly define anything. It can help highlight and be used for emphasis, but should not be the only difference between the elements. For long reading sessions, use light or muted colors, leaving bright colors for emphasis. Of course, you can use bright colors for background fills, just make sure it suits your audience.
14. Progressive disclosure
    On each screen, show only what is necessary. If people need to make a choice, show them enough information so they can make it, then drill them into the details on the next screen. Avoid the tendency to over-explain and dump everything at once. Whenever possible, defer decision making across multiple screens, sequentially revealing information as needed. This will provide a clearer interaction with the interface.
15. Help people along the way
    An ideal interface requires no assistance because the interface is easy to learn and easy to use. In real life, help is built-in and contextual. Available only in the right places when needed, and hidden from view the rest of the time. By suggesting that they go to the help section to find the answer to a question, you are placing the onus on users to know what they need to look for and how to phrase their query. Instead, build in help where it might be needed. Just make sure it doesn't get in the way of users who already know how to use the interface.
16. Decisive moment: zero state
    The first experience of using an interface is crucial, but it is often overlooked by designers. In order to help users get comfortable, it would be correct to design a zero state, that is, a state when nothing has happened yet. This state should not be a blank screen. It should provide direction and provide guidance to get started quickly. Most of the difficulties arise at the very first step. But once people understand the rules of the game, their chances of success increase.
17. Current problems are the most important
    People usually look for solutions to their current problems, rather than potential ones that will arise in the future. Thus, one must resist creating interfaces for hypothetical problems. It is necessary to study the current situation and design solutions to existing problems. It may not be as interesting as having your head in the clouds and building castles in the air, but if people actually use your interface, it will be more useful.
18. Great design is invisible
    The curious thing about great design is that it goes unnoticed by users. One reason for this is that if the design is successful, users can concentrate on their tasks rather than the interface. When they complete their tasks, they gain satisfaction rather than reflecting on the situation. For a designer, this can be a brutal discovery because it means he gets less credit when the design turns out to be really good. But good designers are content to see their designs actively used, and know that happy users tend to keep quiet.
19. Develop skills in other design disciplines
    Visual and graphic design, typography, copywriting, information architecture and visualization are all disciplines that are part of interface design. They can only be touched upon in passing, or they can be specialized in. Don't engage in debates or look down on other disciplines: take from all of them those aspects that will help you develop further in your work. Try taking something from seemingly unrelated disciplines: publishing, programming, book binding, skateboarding, firefighting, karate.
20. Interfaces exist to be used
    As with other areas of design, interface design is successful when people use the results of your work. Just like a beautiful chair that is impossible to sit on comfortably, interface design fails when people choose not to use it. Thus, interface design is both the creation of a product and an environment for its use. It’s not enough for the interface to please the designer’s ego—it has to be used!