How to Amaze Users With Memorable UI Images

I know this almost seems like an impossible task, but don’t worry – we have a solution. Actually, our ancestors have developed a secret weapon to catch users' attention, and they did it 40 000 years ago. It’s called images.

Even they knew a thing or two about the smart use of visual assets.

Amazing visuals can distinguish a digital product from its competitors, and when it comes to first impressions, UI images are the ones that truly make the difference. Since humans respond faster to visual data rather than to any other type of data, nothing will evoke our emotions quite like a great image. Think of National Geographic, for instance. Their photographers are successfully using images to tell stories and attract attention for more than 130 years!

So why wouldn’t we do the same? Continue reading and discover how to find UI images for creating beautiful interfaces. 

Set the stage for imagery in your early UX design process

The research and conception phase of the product design is the time when you should start thinking about organizing and presenting information in a smart and likable way. 

The look and feel of a website or app have everything to do with a product's visual expression and identity. Since visual identity and user experience go hand in hand, it’s important to think about the layout of images on the screen and their context early in your design process – when sketching or wireframing.

Wireframing will set the stage for future graphics, while first giving focus on the usability of your experience. Later in the process, you’ll want to see the full expression and impact of selected images on the users.

Don’t forget to think of different screen sizes – your images need to fit and adapt. Your image layout and selection has to look good both on big and smaller screens. Also, always mind the context – use images to guide users or support the story you’re trying to tell.

Make your images relevant

Why do we even use images? Besides showcasing a product, and displaying a specific scenario, you can also create a wow factor and trigger a strong emotional response. In this process, it’s important to consider context, find relevant images, and provide value to the targeted audience.
Because of that, when choosing UI images, please consider the following questions:

• Who's your target audience?
• What device are they most likely to use, and in which conditions will they use your product?
• How should you align the visual elements you use with the guidelines of the brand they represent?

Let’s assume you’re designing an app for a construction company. This app should help workers use and control machines on a construction site. How would you answer the questions above? Your user is a construction worker, as we have just defined. He needs an app that’s easy to access and use at any time, and he must be able to use it anywhere on the construction site.

All this information should give us an idea about the user's device. Since a mobile phone is the only device that fits all the criteria stated above, you'll need to design a mobile app. This app will be used both indoors and outdoors, so we need to consider choosing UI images that will be well visible in different light conditions. They should have enough contrast with the background and not be too small. Also, consider using bigger buttons to make our usually ‘big thumbed’ construction workers life easier.

In this case, you should choose niche-related and product-related UI images combined with the brand colors and typography. Images should always support the screen instructions and clarify the product we’re showcasing.

If you choose images with a deeper understanding of your user and human psychology, the product will be more useful in real life and receive higher user acceptance. You can give your design a more genuine sense by using niche-related photos; Irrelevant or random images will not help you in creating clarity.

Make your images stand out

Surely you already know there are some great sources of quality images, vectors, and illustrations online. Even some Figma plugins can help you create good looking user interfaces. But as designers, we should all strive to add some magic to our UI elements to make them more memorable. 
‍
There are several techniques for manipulating UI images and different ways to add some personality and professionalism to our designs. If you manage to do just that, I’m sure the user's relationship with your brand will be stronger, and your products will become more memorable.

Technique one: Add dynamic to the gallery layout

Instead of using the same size photos, vary the size when designing a photo gallery preview. It will add dynamic to the gallery layout and look so much better.

Technique two: Tightly place high quality images together

High-quality photos placed next to each other can look awesome too. But, keep in mind that the quality, style, and colors should match and be compatible. Also, try to leave out any margins, it will instantly look a lot better.

Technique three: Use image elements in the background

Actually, it’s really fun to use this technique. Scan your UI image for interesting details or shapes, and then extract them and use them as emphasized elements of the background.

Technique four: Use color overlay or light effects on the image

A color overlay is a great tool when you’re trying to align the look of the UI photos with the brand they represent. Also, you can use some light effects to make photos look more professional and interesting.

The first (left) photo below is a default photo. The middle one shows the default photo overlaid with a purple linear color gradient. Finally, the photo on the right shows the default photo with color overlay and light effect applied (ellipse filled with a multi-color linear gradient with different opacities):

Technique five: Clip image to shape – collage technique

I like to call this technique the collage technique. It’s great for designing stunning hero photos or banners. And how should you use it? 

Well, first, you'll need to create several shapes, fill them with photos, apply the same fancy color overlay, and maybe add some noise layers to make the photos perfectly blend. Place clipped and styled image layers on the background that matches and blends well with their color – and voilà! You've just made a beautiful collage hero photo.

Always use high quality images

Quality design requires using high-quality assets – especially UI images. It doesn't matter if you found the amazing font and aligned elements on-screen pixel perfectly, it can all be ruined with a bad photo or photo background. 

Remember – people are drawn to a crisp, high-resolution image. They're easy on the eyes and can be completely mesmerizing. Also, keep in mind that the text should always be readable and legible.

Where to find high-quality images?

There are a lot of different options for finding or producing high-quality images. If it's possible, keep it authentic. So when a client has the budget – hire a photographer. You can even participate in photo sessions and direct the photographer to produce the photos exactly how you and your client want them to look and feel.

Another great source of quality images is online resources and tools. Be careful not to use cliche stock photos everyone's using, dig a bit deeper. Find quality images, and don’t forget to use the design techniques listed above to make them adhere to your design guidelines.

Here is a list of my favorite online resources:

• Unsplash plugin for Figma – quickly inserts great-looking royalty-free images into your designs‍
• Content Reel plugin for Figma – quickly finds and inserts images, text, and icons into your designs‍
• Photos plugin for Figma – search and insert photos and gifs from Unsplash, Google, Flickr, Pixabay, Pexels, Giphy, and Tenor‍
• Freepik - it's a large source of free stock photos, vectors, and .psd files
• ‍Shutterstock Premier – it's paid source of high-quality images that allows free demo download of photos before buying a license

Optimize images

After you've found desired images, please mind their size and don’t forget to optimize them. This means you should prepare UI images – export them in the right format, resolution, and dimension while ensuring that the final image size is not too big. This is especially important for improving web page load time and, therefore, the overall SEO score.

It's recommended not to use images bigger than what you need, so export assets in the same size your design requires. If your website requires banner image of 1200x600 px dimensions, export it as a 1200x600 px sized image. If you're working with an original image of higher resolution (ex. 300 PPI), make sure to optimize its resolution to 72 PPI and color mode to sRGB. If you expect your users to predominantly use devices with retina screens – double the image size (2x).

Depending on their purpose, you need to save images in one of the following formats – .jpg, .gif, or .png. The most common image format for your website will be .jpg, as they're the lightest in size. And that’s it. Congratulations! You've now successfully exported your image and optimized it for the web. 

Or did you? There's one more, final step that will help you drastically reduce image file size while maintaining its quality. You should optimize exported images using online compression tools.

Some of my favorite ones are:

• TinyJPG – it's a WebP, JPEG, and PNG compression tool.
• Image Optim (Mac) – compresses and replaces non-optimized images on your Mac with compressed ones.
• Shortpixel – JPG, PNG, and GIF compression tool.

These optimization apps will help you optimize images even better, and your site will be faster. Believe me, users will appreciate it.

To conclude

Okay, let's go through the key points one more time. First of all, if you want to make an amazing first impression, think about image layout and context early in the design process. Why so early, you might ask. Well, because this phase sets the stage for any future graphics while focusing on user experience. It’s all about presenting information in a clear, smart, and likable way.

Secondly, you want to make your images as relevant as it gets. To do that, choose images that your target audience will find useful and appealing. Try out some of the above-mentioned image sources to get inspired.

And last but not least, utilize UI images wisely to create amazing-looking user interfaces and add some personality and professionalism to your designs.

I hope my tips will help you create more memorable UI images and bring even more value to your product. If not from me, take it from our ancestors and always keep in mind the impact of visual data.