Thursday, November 15, 2012

Tone and Color in User Interface


This user interface was designed by F. Hugh and uploaded to deviantart.com. The designer has made good use of both tone and color in this rendering of a user interface for an android phone.

How tone is operating

In this design the background and menu bars are heavily depending on the different tones of a black and grey gradient. The use of tone helps to create a clean and undisturbed surface that makes for a harmonious backdrop, free from distractions. It also creates a dynamic and almost three dimensional effect that gives the screen depth as well as texture. The tonal use in the menu bars further enhances this feeling.

How tone is interacting with the dot

In this rendering of the background the tone is integrated in a mesh pattern made up of small dots. This creates an interesting texture that resembles a metallic surface perforated by tiny dots. The dot is also used as a navigation tool to orient the user as to which page of the interface is active, as well as how many pages there are.

How color is operating

Color in this design is used to highlight the different icons on the screen. By using color these icons are differentiated from each other which effectively guides the eye to the desired application. As the background is so devoid of color the use of color becomes very obvious and makes the applications stand out.

How color is interacting with shape

The interaction between color and shape is very successful in structuring and differentiating the different icons in the display. The primary shape for this being the square that effectively creates a symmetrical grid in which color serves to orient the user. Other shapes that interact with color is the rectangular battery symbol that with its green color communicates the battery level in a intuitive way.





No comments:

Post a Comment