Web Interface  |  Typography

Images

This section is about how to work with images in website and app design.

01Lead images

A lead image creates good structure, hierarchy, and allows you to show the main thing. It always makes the design more cohesive and visually attractive.

Faceless, boring, no accent.
There is an accent and a clear visual hierarchy.

The lead image is always a good technique, whether it's the display of cards, text, or any other element on the page.

Faceless, boring, no accent.
There is an accent and a clear visual hierarchy.

02Relationship with the headings

It's not good when the image separates the heading from the text. So it becomes not quite clear what the heading refers to. It is good if the image comes first, and only after that the title and text.

The image is below the heading and separates the text.
The heading is under the image.

The same thing happens when the heading combines two columns: the image on the left and the text on the right. In this case the heading also becomes detached from the text and it looks strange.

The image separates the text from the heading.
Attention turns to the text.

If you arrange the top edge of the image to the same level as the header, the text will read well, regardless of where the image: left or right.

Good.
Also good.

03Caption

An image without a caption makes no sense and it is not clear what it illustrates. A caption gives people an understanding of what is shown in the image and why it relates to the text. Also, a caption always works well for accessibility.

An image without a caption makes no sense.
The image with the caption makes sense.

Showing a gallery with equal sizes of images and equal columns is always boring and uniform. It is better to vary the layout by changing the size of images, width and number of columns in the gallery.

Boring.
Varied and interesting.

05Outside the layout

It's a good idea to pull the image outside the edges of the layout. This often creates a more cohesive layout and looks interesting. This works well in many cases, such as when it is a text or card cover.

The image goes outside the layout.
It works well as a cover.

06Vertical image

A horizontal image next to a column of text can look strange. In that case, it's best to use vertical images.

A horizontal image next to the text column.
The vertical image creates balance.

07Text wrapping

It's always weird to make an image float in text, especially on websites and in app design. It implies small images, which in itself is not such a good thing. Larger images in text are better. It also creates some other problems, like jagged margins from the image, and generally makes the text worse to read.

A floating image is not the best idea.
A big picture without floating is always a good thing.

Instead of floating images, it's always a good idea to separate text and images into columns. It reads better and looks great.

Text wraps around the image.
Image and text in columns.

If, for some reason, you still need to wrap text around the image, it's better to place it to the right of the text. It's better to put the image to the right of the text. In this case it will be much more ethereal and readable. Especially if the text has a heading.

The image floating to the left causes disharmony.
The floating image on the right looks balanced.

08Vertical image blocks

Vertical blocks with an image mix with each other even if there is a good distance between them. Therefore, it is better to separate such blocks with a line or alternating backgrounds.

The blocks with the image are mixed with each other.
The line separates each block well.