When you are configuring a website layout, it is important to apply Composition and Layout principles. Composition and Layout create an initial structure for your work, and can also provide simpler navigation for your clients or viewers. These principles can be applied anywhere on your web page, from the margins on the sides, to the content in between. In this article we will explore the subjects of Proximity, Whitespace and Alignment, which are all part of the premise of Layout and Composition.


Proximity is all about using visual space to show relationships in your content. In practice, it’s pretty simple: All you have to do is make sure related items are grouped together. For example, blocks of text or elements in a graphic. Groups that are not related to each other should be separated to visually emphasize their lack of a relationship. This makes your work easier to understand at a glance, whether it’s purely text or something more visual.


Whitespace is an important part of every composition. Whitespace means negative space, like the spaces between your content between lines, and even the outer margins. Whitespace helps you define and separate different sections. It gives your content room to breathe. if your work ever starts to feel cluttered or uncomfortable, a little whitespace might be just what the doctor ordered.


Alignment is something you deal with all the time, even if you don’t realize it. Whenever you type an email, or create a document, the text is aligned automatically when aligning objects by yourself(for instance, images or separate text boxes), getting it right can be tricky. The most important thing is to be consistent. It might help to imagine your content arranged inside of a grid. On this grid, there’s an invisible line centering each image to the text. Each grouping is also evenly spaced and aligned, with equal sized margins. Without consistent alignment, your work could start to feel disorganized.