Graphic Elements

Tags
Downloads & Templates
Photo, Video & Graphic Elements

3x Grid

Our grid builds from a flexible 3-column base, allowing a range of 3x grid multiples (3/6/12) to be utilized.

The grid is built around a consistent document margin that either is 5% or 10% of the document width, depending on the application. Some layouts may require more breathing room, and would use the 10% margin rule.

When incorporating columns, gutters are proportional and account for 3% document width in 3-column configuration, or 1.2% when using a 6-column configuration.

A square image with a photo of the University of Minnesota campus and text that says "#7 best public undergraduate business schools, Poets&Quants." The image is divided into 9 equal size squares to indicate the Carlson grid layout.
A square image with three icons and a headline that reads "Career Resources" with a couple of sentences of body text. The image is divided into 9 equal size squares to indicate the Carlson grid layout.
A sample document layout with 3 columns. The left and right margins are 10% of the document and the 2 gutters are 3% of the document. The 3 columns are the remaining 74% in equal widths.

Isometric Grid

The angular lines and shapes of our visual system are based on an isometric grid. In tandem with our 3x grid, an isometric grid can be overlayed to inform placement for these angled elements. The intention is for this grid to flex in size to accommodate the layout, aligning the verticals of the isometric and 3x grids when possible.

A grid layout with many small triangles is placed over a photo to indicate how the color blocks and white line follow the angle of the grid system.
A grid layout with many small triangles is placed over a photo to indicate how the color blocks and blur effect follow the angle of the grid system.

Modular System

A visual system comprised of imagery and blocks of color is used to represent multiple perspectives and individuals coming together. These shapes should be created based on the grid and feature only maroon, gold, ivory and light blue from the color palette.

Angled Lines & Shapes

Inspired by the angles used in the block M logo, angular elements are an important piece of the visual system helping to create movement and allude to forward momentum. All lines should align to an isometric grid. This angle can be achieved by rotating a vertical line 60° or rotating a horizontal line 30°. Lines must always be in white, and can interact with the shapes in the modular system or exist on their own.

Notch Detail

Using the same angle, clip the corner of a shape or image to create a “notch” detail. This element can be incorporated as another way to utilize the angle in a more subtle way.

Negative Space

An important element in the Minnesota Carlson brand is negative space, often in the form of a large flood of color. This gives the eye an area to rest and the other graphic elements space to breathe. We never want a layout to feel overly designed or busy. Incorporating these open moments also helps the brand feel more polished and confident.

Block M

The block M can be incorporated as a visual detail to add interest to a layout. It should never be exaggerated or cropped, but instead act more as an anchoring element.

Overlay Treatment

An overlay treatment can be applied when an angled shape layers over a photograph, creating an illusion of depth. Never use the overlay on top of an important element in the image. It should have the effect of a white transparency with blur and subtle grain texture applied.

Exact levels for blur, noise and opacity of the white overlay will depend on the image size and brightness. Use your judgment to visually match the treatment as close as possible to the example on the right.

There are multiple ways to achieve this overlay treatment across different design programs. However, these reference details are specific to Photoshop:

A person in a gold shirt carries a backpack, holds notebook and has headphones around their neck. The image is the "original image" at 2121 x 1414px and 72ppi.

Original Image

2121 x 1414px, 72ppi

A person in a gold shirt carries a backpack, holds notebook and has headphones around their neck. The image has the "blur effect" under Filter > Blur > Gaussian Blur: 9.7 pixel radius.

Blur Effect

Filter > Blur > Gaussian Blur: 9.7 pixel radius

A person in a gold shirt carries a backpack, holds notebook and has headphones around their neck. The image has the "blur effect" under Filter > Blur > Gaussian Blur: 9.7 pixel radius.

Noise Effect

Filter > Noise > Add Noise: 6% (Uniform, Monochromatic)

A person in a gold shirt carries a backpack, holds notebook and has headphones around their neck. The image has the "white overlay" with a White layer (#FFFFFF) set to 30% opacity.

White Overlay

White layer (#FFFFFF) set to 30% opacity

Examples Designs With Graphic Elements

These examples demonstrate how to use the graphic elements above. Each graphic element that is represented is listed below the image.

An image that includes maroon and gold color blocks on the right. It also has the white angled line.
  • Isometric Grid
  • Modular System
  • Angled Lines & Shapes
This image includes maroon and ivory color blocks on the right. It also has a blurred angled wide line.
  • Isometric Grid
  • Angled Lines & Shapes
  • Block M
  • Overlay Treatment
A graphic with ivory background, a graduation cap icon, and a headline that reads, "What do you aspire to do?" The upper right corner of the ivory color background is notched.
  • Notch Detail
  • Negative Space

Related Resources