In the design world, the generally accepted rule is that a design is successful to the extent in which people are using it. For instance, if a sofa looks beautiful, but it’s not comfortable to sit at, it will not become people’s favorite item.
A perfect design should fulfill a long list of requirements-rather than creating a masterpiece for a particular market group; designers should work on items that cannot be substituted in day-to-day life.
Designing through optical illusions – a game of lights and shadows
Image source: Anton Chandra
In the artistic world, light is a tool for modifying depth perception. Shades create an illusion of distance that can turn design into an interesting experiment. The lighter the shadow is the closer an object will appear to us and vice versa. This is not an exact definition of how light functions in reality, but it is perfectly enough for the limited options of computer displays.
Take a button as an example. Buttons are designed to look darker when you push them. The purpose is fairly simple-they are supposed to behave as 3D objects. These objects seem to move away when we press them, but ‘come closer’ once we release them. If you observe it carefully, the device seems to be “opening” and the regulator is the light source.
Image source: Nicholas
We could use this specific connection between 3D objects and depth and build an UI metaphor based on this idea. Firstly, we would need to color those things we want to appear lighter. Secondly, we should color the ones which are chiseled inwardly so that they would appear darker.
This is not a general rule for each aesthetic style, but it is perfectly applicable for OS interfaces (mostly for reproducing real life objects, such as switches or buttons).
Achieving this effect is very simple. In order to indicate that the button’s position is higher than the window, we need to make it look lighter compared to the window background. On the other hand, it should be darker when pushed down, appearing to stand far away from us. Have in mind that the procedure will be more complicated if you decide to use colors instead of a simple black and white combination.
Image source: Carl Hauser
For instance, imagine two tinted cubes positioned inside a couple of larger squares. There is no light variation on the image, but the saturation and the hue seem to differ. How are the cubes positioned? Which ones seem further from us and which are closer?
It is very easy to estimate in the case of the right hand square. The yellow cube floating inside seems to be brought closer to us. On the other hand, the red cube dominates the green one and it manages to push it away from us. What is the reason for this?
Colors
Image source: Michael Sambora
The answer can be found within the traditional color division. Warmer colors (yellow and red in our case) appear lighter and energetic, and are therefore likely to bring objects forward, to increase and to expand them. On the other hand, blue, green and other cool colors seem to push objects back.
People who like to expand their palette with more than black and white should always apply this rule and check whether they achieved their goal to bring objects forward. As an example, a ‘Join Now’ button will be more effective if colored in red because this color will make it appear more prominent.
Heat to attract attention
Image source: Ibnu Mas’ud
Every color has an inherent meaning. Behind it, there is always a different story based on the specifications of the environment and the culture within which it is being applied. Subconsciously, such meanings will dominate visitor’s perception of your app. Basically, the success of the brand identity you’re trying to establish will depend almost entirely on colors.
The importance of colors is not simply traditional. It has a lot to do with contemporary trends and the need of creating catchy and attractive designs. With the development of tastes and preferences, it is no longer enough to choose between white or colored backgrounds.
Instead, we should be aware of the importance of colors for creating exquisite palettes. As experienced designers, we should know how to apply them in a calculated manner and create delightful print designs.
An overview on the color theory
To start with, we should all familiarize with the details of the color theory. We should focus on the interaction between various hues and shades and explore the different impact they could have on our perfect palette. Most often, it is the failure to comply with basic rules that digs the biggest gap between failing and succeeding. Therefore, we should consider a few fundamental guidelines for using color in user interface design.
Analogous
Image source: Osetrov Artem
If you are looking to send a message of uniformity and consistency, analogous palettes are a great choice. These palettes pick closely related colors from the spectrum. They are relatively easy to use, since the focus is on shade variations rather than the low hue differentiation. Designers use them to ensure there will be no distraction from the content.
The effects are quite clear on the above analogous palette, which contains only cool colors. The lighter green attracts attention without necessarily distracting a viewer from the softer blue shade. The same principle is applied in most of the three-colored palettes. In this one, tints and shades are being added in order to show an ampler, more progressive variation.
Complementary
Unlike analogues palettes, complementary ones apply colors located opposite each other on the color wheel. The rationale is to achieve balance, expanded by adding tints and shades. Complementary palettes are recommended when trying to avoid eye strains caused by the harsh contrast in user interface design of opposing colors standing next to each other.
Triadic
The triadic method was developed for thoughtful designers who like experimenting. There are only three leading colors and a large amount of opposing hues. Still, the designs look as if they had more than those three colors because they are modified with tints and extra shades of the present hues. It is the ideal process for tone neutralization and outweigh of vivid colors.
Using stronger contrast to attract attention
Image source: Piotr Czyżewski
High contrast attracts attention. It causes items to emerge from diversity and fall within your visitor’s consideration. Check out our example page filled with some text and a single button. In order to attract and maintain visitor’s attention, we use both: brightness graduation and contrast.
Image source: Anandu Sivan
Contrast can be the perfect tool to attract visitor’s attention. It is not absolutely necessary that you make the buttons lighter, but you still need to make sure they will be catchy enough to avoid overlooking. You can also use contrast to reduce the importance of UI areas that have a secondary position on your app.
Ending thoughts
Image source: Nitesh Chandora
User Interface design (UI) is important because of many reasons. Firstly, intuitiveness eases the usage of interface and reduces training expenses. With an improved interface, visitors will have no trouble to use your app (which will also spare you few bucks on support). Since good news spread in no time, the number of users will increase parallel to their satisfaction.
User interface is artistic and scientific at the same time. You apply logical methods to create it, but you end up investing your artistic talent in order to build an attractive and recognizable style.
To conclude, the usage of fundamental elements and principles of UI design (colors, light and contrast) can help you create the perfect interface, one that can be enjoyed by you and your customers.
Source: http://ift.tt/1Nnvx8E
No comments:
Post a Comment