Introduction to imagery :

Such a wonderful picture! She does take really good pictures. Hold on to that thought and think of including it with the relatable context for an interface. Sounds like a complete package. Such is the power of imagery. The imagery brings life to an otherwise lifeless text-based approach to design and breaks away the monotony. It adds meaning to the design.

Imagery is an art or technique of creating. Choosing, and designing visuals to enhance visual design using images. It’s both critical and crucial to our interfaces. It can either make or break the design. it’s way more than selecting the beautiful images of a landscape or the morning dew. The major challenge is how and where to use them with all the text being displayed.

Let’s learn about its importance. Why do you think the ongoing trend of memes is so popular? Is it just because of the content? Obviously no. the relatable image is the essence of the entire setup. It guides the eye through the written content. Images are pretty good at seeking attention. Hence, higher conversation rates. People do prefer images over texts.

A clickable image, with layover text, is pretty much enough to guide the user and help relate them to the real world. For an e-commerce interface, a clear and relatable product image is all you need.

It is easier to remember the image we see than the text we read. In the world of UI design, everything has to be used very judiciously and effectively; such is the case for images.

Best practices :   

• The idea of how and when the images can be used for any interface should be very clear. Let’s discuss some of the best practices for implementing imagery.
• An image should match the context in which it is being used. The missing connection can create confusion.
• The image’s size, composition, exposure, contrast should be in harmony with the other element present on the interface.
• Try avoiding stock photos, focus on building more human connection instead.
• Avoid crowd shots and try keeping the focus on the main subjects unless absolutely necessary.
• Cropping an image to the correct size avoids leaving too much negative space and ensuring that the user’s focus is not impacted.
• Ensure that the overlying text on an image should have good contrast with the background image.
• Ensure that the images are well optimized on the web, which can save the image’s loading time on the screen and preventing the user’s from getting irritated by a laggy interface.
• The message sent should be right and apt for the interface user.

The Rule of Thirds :

The rule of thirds comes from the field of photography, dictating how an image should be placed and captured to draw more attention to a part of the picture. This makes sure that the final results are aesthetically more pleasing and meaningful.

This is the power of design, whereby applying various technique from different fields ensures techniques from different fields ensures every other element, when placed, should have a rhythm and can together work in harmony.

In its simplest form, it comprises a 3X3 grid that is created on the top of an image. It’s like a tic tac board with no specific size blocks, just they are equally shaped. The eye tends to follow the pattern F or Z from top to bottom, making the top left corner an important section to gather attention. The logos are placed on the top left; can you relate this to other design areas?

The most eye—Catching points are where the grid lines intersect. It’s all about proportion and composition, an essential element for design while creating a balance. Various widgets like buttons are placed on the points of intersection. This rule somehow forces the designer to better crop and scale image.

The above image’s minion is placed along the right vertical line, making correct usage of the right focal points. When combined with some other content, the minion still remains the point of focus, as it aligns with the Rule of Thirds.

Few things that you should be careful about where the various object of each image falls and the sense of feeling it creates.

• Put the part of the image you want to bring in to focus forward and near one to the primary intersection point.
• Place the overlaying text according to the relevant importance it holds.