Visual user interface design: smart tricks for smart developers

Posted on July 28, 2015

Visual user interface design: smart tricks for smart developers

Can you imagine for a moment a place you`d like to be right now? Is it the place of outstanding natural beauty, gorgeous mountain range, an island of your dream or sweet home with your nearest and dearest? That`s amazing how our imagination works. It captures information and creates colorful pictures in the brain. So, why not to use such features in creative visualization of your product material.

 

Look at the next graphic. It shows that we perceive 10 millions of bits of information with our eyes on a sub-conscious level and 40 bits on conscious. In both cases, we remember 80% of what we see, 20% of what we read and only 10% of what we hear. 

 

 

The balance of colors, location of images and buttons, slides, bars, layout planning are components of a harmonious interface for users. All these design details have an exceptional impact upon us and can tell even more than the word of mouth.

 

Not one time tried developers to crack a nutshell of customers` heart, trying to strike the right balance between all elements for the most successful UI. Our experts consider preparing quick and smart tricks for your inspiration. 

 

What do we know about the color?

 

 

Each color creates an entire pallet of emotions, associations, feelings and is reach for its own properties. People pay attention more to colorful texts. 93% of surveyed look at visual content first and 73% pointed out that color improve comprehension first.

 

Fun Fact: When people stay in harmonious colorful atmosphere, their working capacity increases, mood improves, and the main – communication with others confidently moves in the right way.

 

 

Useful tricks: Use different colors to reflect emotions. For example, warm shades can immerse the viewer in cozy and creative atmosphere and cold ones – dive deep into the world of calmness and understanding.

 

Highlight important information with brighter shades to outline necessary points or areas, but try not to overuse it. There should be no strain in reading information.

 

 

Cool shades also give a sense of professionalism. You only need to choose the best colors that will express your idea, from thousands of different tones and undertones – the easiest, but  a complex task at once. 

To succeed in it, let`s see the main points of psychological studies of Thomas Sanocki and Noah Sulman. They proved that perception of information highly depends on set of colors combined together. Colors have significant implications on our visual perception. 

 

Tips from their researches:

- people remember color pattern better when the color palette is harmonious;

- people remember the patterns with lesser colors (2-color palettes) better than patterns with more colors (4-color palettes);

- the contrast of surrounding color influenced how well we remember the color pattern. In other words, this implies that color differences between the context and the background may enhance our ability to focus our attention on context;

- we can remember high number of patterns at one time.

 

How you can play with colors, shades and combine them to the rules of color coordination, while working with the user interface design.

 

 

Underline the style with effective buttons.

 

There are numerous options for your button design. It`s important all buttons match context, color pallet and have the right shape, contrast, texture to fit graphical or logo style.

 

The brand new trend of 2015 year – so-called “ghost buttons” or “naked”, “empty”, “hollow” buttons. The name of them almost represent their characteristics: transparent, blended into the composition, easy to find on the background and at the same time do not distract the viewer`s attention from information at the same time. 

 

 

Useful tricks: Ghost buttons are perfectly recognizable only over large background images. They look very elegant and bring subtlety to the UI. You can also add soft color transition effect for their beauty.

 

Glossy buttons are another stylish option for the interface.

 

 

Find here 12 supernatural examples of ghost buttons in eComerce!

 

Your own illustration recipe.

 

Pictures remain for long in our heads and slowly fade away. Developers and designers have learned how to use such feature in content visualization. One of the most popular UI design trend: combination “text + image”. If to use this method wisely, the results will be astonishing.

 

Tips to remember:

 

Add contrast to the text. The color of the text should be enough noticeable over the background. If your image is in dark colors, use light colors for text information and vice versa.

 

 

A good design solution – text as part of an image.

 

 

 

Follow the visual gaze direction. Place the text in logically correct corners and enjoy the result.

 

 

Add new text color.

 

 

Put the text on a colorful figure. Usually, designers use it when the background image has many details.

 

 

 

Useful tricks: Images with people are more inviting. Use only high quality, contrast images.

 

Harmony in layout planning

 

People, usually, scan information in an F-shaped or Z-shaped pattern. They begin to perceive from the top left corner to the bottom right corner. Place most relevant information first. It`s better leave the fourth terminal area for a call to action button.

 

 

People read first words from subheads and concentrate most on the first paragraphs. You need to add some “breathing room”, space between the lines of the text, paragraphs, images and buttons, it will bring more proportion and legibility to your interface.

 

 

Visual content, as a tool of non-verbal communication, undoubtedly, create good customer engagement and connection. The viewers remember information better when the key-message is supported visually in an appropriate way. The only thing remains – to find this balance between all elements in order to optimize them for your own business ideas and finally hit the mark.

 

Sources:

http://blog.usabilla.com/10-things-to-know-about-images-in-web-design/

http://www.webpagefx.com/blog/web-design/psychology-of-color-infographic/

https://blog.kissmetrics.com/art-of-color-coordination/?wide=1

https://ilite.wordpress.com/2015/05/21/color-psychology-use-cool-colors-to-set-just-the-right-mood-for-learning/

http://info.shiftelearning.com/blog/color-psychology-elearning-part1

http://piktochart.com/5-psychology-studies-that-tell-us-how-people-perceive-visual-information/

http://www.instantshift.com/2013/09/02/importance-of-effective-website-design-infographic/

http://webdesign.tutsplus.com/articles/principles-for-successful-button-design--webdesign-6094

http://conversionxl.com/10-useful-findings-about-how-people-view-websites/

http://codingtips.kanishkkunal.in/ghost-buttons-background-image/

http://www.dejurka.ru/articless/10tips-type-on-photo/

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda