- read

UI Images Best Practices

Buninux 32

UI/UX Tips

This article is brought to you by Buninux.com.
Visit our digital asset store to level up your design inventory.

Make images stand out

With multiple images on a screen, make some to lead the pack.

Use images to articulate the importance of your layout elements. Attract users to certain areas or CTA by employing bolder/bigger images.

Make UI images stand out

Add dynamic to the layout

When designing a large gallery, especially on mobile screens. Employ multiple columns and image sizes to make scrolling more fun and interactive.

Add dynamic to the layout

Use text wrapping smartly

Avoid nesting images into paragraphs.

When an image interrupts the text, it causes the reader to make unnecessary eye jumps from side to side of your page. Avoid interrupting the reading flow. Align images inside a paragraph to the top or right.

Use text wrapping smartly

Separate text and images into columns

Instead of wrapping text, sometimes it’s a good idea to split the view into separate columns. Also, this duo column layout is a good way to demo vertical photos.

Separate text and images into columns

Put images outside the layout

Put images and multi-image galleries outside the grid.

Use this trick to employ a more immersive feel for your page or article. Placing full-size photos also make a clear visual pause for your readers.

Put images outside the layout

Use captions for standalone images

When an image is placed without a proper caption, it makes no sense, and the overall UI accessibility suffers.

Always provide <alt> tags and a proper description of images. Google ranks such behavior higher.

Use captions for standalone images

Separate visually heavy blocks

Heavy vertical blocks can blend. Consider adding a separator <hr> tag between such elements.

Separate visually heavy blocks

Use pagination to showcase multiple images

Consider employing mobile-friendly horizontal pagination to let users see your product or service with a swipe gesture. People love to swipe. Right?

Use pagination to showcase multiple images

Thanks for the read 🙌

This material was originally posted on my blog.

If you want to back the release of new articles, visit my digital asset store to support your local design dealer. :)

Visit buninux.com — Digital Resources for Creatives

Buninux — World-class UI/UX assets for designers and developers.

Empower your workflow with thoughtful design tools — make better designs with less hustle. Get access to powerful…

buninux.com