In previous post Gestalt Principles in UX Design, you’ve learned about design principles like emphasis, hierarchy, and proportion, it’s time to consider some additional design elements. As you continue to develop high-fidelity designs, you will focus more on visuals, aesthetics, and functionality. This reading will explore how to use visual elements like value, saturation, and orientation to enhance the user experience.

Value

Hue refers to color families (like red, green, or blue), Value is a color’s lightness or darkness. The lightest value of any color is white and the darkest is black (as in the graphic above). Many programs have value settings, like a sliding scale that lets you add white or black to a selected color. Value is key to creating contrast in your designs. For example, a color with a lighter value stands out against a dark background, which can make a design easier to see.

Saturation

Saturation refers to the intensity and richness of color. Think of the highest saturation as the purest form of a color. Think of the highest saturation as the purest form of a color. For example, red, at its most saturated, is bold and bright. You can soften pure red by lowering the saturation and making it appear more muted. Lowering the saturation all the way would leave you with shades of grey, like a black and white film.

The saturation you choose depends on how bold you want the colors in your design to be. Highly saturated colors are great for grabbing a user’s attention. Think of neon signs, highlighters, and sirens – all of which use intense saturation to emphasize their importance.

Orientation

Orientation refers to the layout of your design. Orientation often corresponds with the platform or device you are designing for. Desktop computers end to have horizontal (or landscape) orientations, whereas mobile phones and tablets let users alternate between vertical (or portrait) and horizontal orientations.

Smartwatches aren’t oriented horizontally or vertically since they are usually square. This might affects your overall designs in this case. The bottom line is that you can think of orientation as a grid that helps you plan your designs to fit within different shapes.

Intrisic interest

Intrinsic interest refers to how eye-catching a visual element is to users. Certain design elements, like logos or animations, are meant to grab a user’s attention. For example, in the textbook, the chapter title is normally big and bold, while the chapter text is smaller and more readable.

The image above has the eye catching on the left that uses variations in color, scale, and composition. It stands out more than the chapter title. You might have notice that this kind of design usually use in magazine and newspaper to grab your attention.

You can use intrinsic interest in your designs by making sure the most important elements stand out – and that the least important blend in. For instance, using serif fonts for titles and sans serif fonts for body text. Serifs add flair to the titles that distinguish them from the rest of the content.

Perceived physical weight

Perceived physical weight is the illustion of weight and volume that each visual element conveys. When creating elements that simulate objects with physical weight, you’ll want each element’s dimensions to proportionately relate to thte others.

The illustration above depicts each containers to hold a different volume of liquid, from a measuring cup to a milk jug. The relative sizes of the containers range from small and light to big and heavy.

Enrich the user’s journey

choosing different visual elements allows you to create more interesting appealing, and usable designs. Remember that each element can enrich the user’s experience and interactions with your products. Take the time to map out your visual choices and your reasons for choosing them.

Thirst for more:

• Design Principles from Interaction Design Foundation.

• 16 Important UX Design Principles for Newcomers by Springboard.

• The 4 Golden Rules of UI Design from Adobe.

• User Interface Design Basics by usability.gov