LAYOUT

Hierarchy

Design is successful when the viewer is guided through a composition via hierarchy. Proper hierarchy creates visual entry points to a design and guides the eye from one element to another in order of significance. Without it, one is forced to discern importance among equally-weighted elements, which leads to a flat design and poor experience. Used effectively, hierarchy can make a complex message simple. When creating a design system, you can also use color and visual elements (boxes, lines, shapes) to create a sense of hierarchy 

Hierarchy is used to:

• Add structure and help the student navigate and digest information more easily

• Create visual organization

• Create direction and allow the student to clearly navigate around the content 

• Can use elements to bring attention/add emphasis to other items/content – great for call outs / sidebars 

Balance & Alignment

• “Balance is used to add stability, add structure, create emphasis and to create dynamics.”

• Make sure that the design system you are creating (within the typography & visual elements) that there is a purpose to illustrate the content better.

• For the most part, we use symmetrical balance in order to create structure and a sense of organization. (Symmetrical balance is when you draw a line down the middle of the design and it’s equal in weight with type, color, shape, and scale).

• Paragraphs should be left aligned

• Headers can be centered depending upon the content, use consistency throughout the course/cert.

Left Alignment

Flush left creates alignments for the eye to follow, aiding readability, organization, and is the most effective in information design and legibility. 

Center Alignment

Only used in special cases. In these examples below, both of these tools were for a specific type of use. The title structure being centered aligned creates a strong emphasis on the title, and fills up space in a dynamic way.

Proximity

Proximity means the connection between visual elements. It allows viewers to understand the context of your design and know which is related to one another. Relevant elements should be placed close together (and vice versa) to allow the student to understand relationships between the elements.

White Space

Let it breathe.
White space creates a visual pause between elements where the eye can rest. White space makes a layout feel clean and approachable while maintaining content-rich design.

• Allows for structure, organization, readability

• Active white space allows for the eye to move around

• Space between elements

  • This needs to be controlled using guides

  • Make sure the space around your elements have purpose and reason as to why this element is placed there.

Column Structure