I'm a beginner at UX and have a question which may seem a bit dumb or silly. The situation is:

A website which I am designing has a lot of text and images and I asked myself if it is smart to align the image on the same (top)line as the text or just put it in the middle? And why is that better for the user experience?

Image center align

Image top align

  • 1
    Could post an image to clarify? – Alvaro Nov 14 '16 at 9:03
  • Is it only 1 image in the page or there could be multiple images? Also, how long is the text? Is it just 3-4 paragraphs, as depicted in the images, or there could be much more text? – Kristiyan Lukanov Nov 14 '16 at 11:52

Your question is not strictly about UX, but more about visual design. There is some overlap.

The answer to your question is something called the grid system in visual design. Using a grid ensures that elements on a screen or page relate to each other, providing for grouping and separation of elements as necessary to achieve a comprehensible design.

In the case you are asking about, I assume the text and image are related. So the grid system would also top-align them to help the user understand this visually.

White space also has meaning on a grid, so by putting white space above the image, when the typical grid approach would be to top-align them, would be to assign some meaning to the white space. Perhaps it would be intended to indicate the image is not related to the text. The white space above could remain if the relationship between the text block and the image were expressed in another way, such as indenting the image into the right of the text.

To better show the relationship between the text block and the image, they should be closer. The space between them is called a gutter, and typically a gutter is not that large. For example, a common grid used in web/application design is a 12-column grid based on multiples of 8 pixels. The gutter width would typically be one or two increments of the smallest unit of measurement on the grid: 8 or 16 pixels.

Applying a grid to your page for layout will help solve this problem and others. Here's a good exploration of the grid in visual design.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.