Post Single Page

Layout and Composition


In Article Posted

Composition is All About Grids!

Welcome to a simple introduction to layout and compostion as it pertains to graphic design, visual identity and UX design functionality. Layout and Composition in graphic design is crucial and will give the simple effect of structure and professionalism. You can do everything wrong, but if your grid is perfect you can still have a decent design project by the end. Read through these steps to help you in your design work for your clients in the future.


Remember when designing that your end goal is for your work to be readable and quickly viewed for the user. Keeping like things placed close together visually gives them order when viewed on a page. Giving more space two different groups will allow the viewer to understand the difference between them without having to work at it.

White Space

White Space is not relating to an actual white box placed near an element on your page,
however it is referring to the negative space on a page. Giving your work space to breath away from the margins on a page will allow the viewer to pause at each section. When you write an article you use periods to make the reader pause and start a new subject. In the same vein you want your viewer to have visual breaks when looking at your design. Make sure to always look at the negative space before finishing a project.


When aligning on a website design or printed piece of work make sure to always start with a grid. In website design they have many grid systems such as foundation or bootstrap. These both use 12 column grids to make sure that you can align all your elements properly and do not have to deal with images hanging past a paragraph or header. There are many reasons for a grid, but the main purpose is to keep everything properly grouped. When writing a paper you always use a lined journal becuase trying to read notes from a blank page which you have written on in a thousand different angles is difficult to read. Remember as a designer your number one goal is for the end user to easy attain the information at a quick and efficient pace.


We have talked about this subject in a few posts, but it never wrong to revisit something as important as this. Creating contrast can happen in various ways such as having larger images, increasing the font weight, or contrasting style of text. Hierarchy is another way to add contrast by creating a visual effect that tells the viewer what to read first to last. Make sure you create a path for how the reader will read the design. I always have someone with fresh eyes view my work for under 30 seconds. If the viewer could not pick out the key items in that timeframe then I need to readjust.


When designing a project you want to create a mini guideline of fonts for headers, paragraphs, color scheme and a few elements that will be used throughout the project. If you are creating a larger project this will need to be a bit more in depth. You always want to be using the same elements throughout any design to give consistency and give your design a nice flow from one section to the next.

In the End

The purpose of bran design is to create simple compositions that your user can experience with little stress allowing them to focus on the content. Designers not willing to study and go in-depth into layout and composition will never be able to grab those big design projects. User experience is 70%
of the design process. If you can navigate a design simply and easily it will trump flashy concepts everyday.


Leave a Comment