Layout

Our layout follows a consistent grid system and utilize frames and arrangements to ensure that our brand's visual identity remains consistent.

Illustration for the layout section of the BrandBook framer template

Layout

Our layout follows a consistent grid system and utilize frames and arrangements to ensure that our brand's visual identity remains consistent.

Illustration for the layout section of the BrandBook framer template

Layout

Our layout follows a consistent grid system and utilize frames and arrangements to ensure that our brand's visual identity remains consistent.

Illustration for the layout section of the BrandBook framer template

Grid

Begin your design by using a twelve-column grid. Set margins to 8% of the width or shortest side and column gutters to 2% of the width. For small formats, like digital ads or business cards, use a 6 or 4-column grid where necessary. If it starts feeling too complicated, keep it simple and focus on giving elements enough space and alignment.

Cover illustration representing the 12 columns grid system used by BrandBook framer template


Frames

Our logo shapes have always symbolized personalities and people, and framing photos with shapes continues this story. By using shapes to connect abstract concepts to real people, we enhance the representation of our products. This technique works particularly well for brand images featuring our customers, employees, and still life photography.

Cover illustration representing the frames system used by BrandBook framer template

Cropping

Not all shapes are created equal. Some photos look great cropped, while others should be left alone in their original rectangle. It’s helpful to know what frame you’re aiming for before you direct photography.

Cropping guidelines at BrandBook


Arrangement

Create layouts that are both straightforward and inventive. To infuse your designs with personality and warmth, explore different ways to utilize the grid, such as layering, rotating, and incorporating white space. However, it's important to strike a balance and not let the design overpower the content.

Arrangement guidelines for layouts at BrandBook

Logo position

We prefer to keep our logo placement simple and consistent. The logo should be on the bottom right corner of the grid and should always include the full BrandBook logo. For portrait formats, the logo should be 2-3 columns wide, and for landscape formats, it should be 1-2 columns wide. There is no need for any complicated positioning or resizing of the logo.

Grid

Begin your design by using a twelve-column grid. Set margins to 8% of the width or shortest side and column gutters to 2% of the width. For small formats, like digital ads or business cards, use a 6 or 4-column grid where necessary. If it starts feeling too complicated, keep it simple and focus on giving elements enough space and alignment.

Cover illustration representing the 12 columns grid system used by BrandBook framer template


Frames

Our logo shapes have always symbolized personalities and people, and framing photos with shapes continues this story. By using shapes to connect abstract concepts to real people, we enhance the representation of our products. This technique works particularly well for brand images featuring our customers, employees, and still life photography.

Cover illustration representing the frames system used by BrandBook framer template

Cropping

Not all shapes are created equal. Some photos look great cropped, while others should be left alone in their original rectangle. It’s helpful to know what frame you’re aiming for before you direct photography.

Cropping guidelines at BrandBook


Arrangement

Create layouts that are both straightforward and inventive. To infuse your designs with personality and warmth, explore different ways to utilize the grid, such as layering, rotating, and incorporating white space. However, it's important to strike a balance and not let the design overpower the content.

Arrangement guidelines for layouts at BrandBook

Logo position

We prefer to keep our logo placement simple and consistent. The logo should be on the bottom right corner of the grid and should always include the full BrandBook logo. For portrait formats, the logo should be 2-3 columns wide, and for landscape formats, it should be 1-2 columns wide. There is no need for any complicated positioning or resizing of the logo.

Grid

Begin your design by using a twelve-column grid. Set margins to 8% of the width or shortest side and column gutters to 2% of the width. For small formats, like digital ads or business cards, use a 6 or 4-column grid where necessary. If it starts feeling too complicated, keep it simple and focus on giving elements enough space and alignment.

Cover illustration representing the 12 columns grid system used by BrandBook framer template


Frames

Our logo shapes have always symbolized personalities and people, and framing photos with shapes continues this story. By using shapes to connect abstract concepts to real people, we enhance the representation of our products. This technique works particularly well for brand images featuring our customers, employees, and still life photography.

Cover illustration representing the frames system used by BrandBook framer template

Cropping

Not all shapes are created equal. Some photos look great cropped, while others should be left alone in their original rectangle. It’s helpful to know what frame you’re aiming for before you direct photography.

Cropping guidelines at BrandBook


Arrangement

Create layouts that are both straightforward and inventive. To infuse your designs with personality and warmth, explore different ways to utilize the grid, such as layering, rotating, and incorporating white space. However, it's important to strike a balance and not let the design overpower the content.

Arrangement guidelines for layouts at BrandBook

Logo position

We prefer to keep our logo placement simple and consistent. The logo should be on the bottom right corner of the grid and should always include the full BrandBook logo. For portrait formats, the logo should be 2-3 columns wide, and for landscape formats, it should be 1-2 columns wide. There is no need for any complicated positioning or resizing of the logo.

Highlights

  1. Use a 12-column grid with 8% margins and 2% column gutters, adjust for small formats.

  2. Frame photos with shapes to enhance representation of products and people.

  3. Create balanced layouts by exploring different ways to utilize the grid.

Highlights

  1. Use a 12-column grid with 8% margins and 2% column gutters, adjust for small formats.

  2. Frame photos with shapes to enhance representation of products and people.

  3. Create balanced layouts by exploring different ways to utilize the grid.

Video overview

In this video, we will cover everything you need to know about designing with the 12 column grid system. You'll learn how to use frames and cropping to achieve the desired composition and arrangement in your designs. By the end of this video, you'll have a solid understanding of these key design elements and how to implement them in your own projects.