Visual Organization

Rule of Thirds

The rule of thirds works by splitting an image into thirds, so you end up with 9 equal sections, then simply place your main subject where the lines intersect.

The rule of thirds grid can be applied to any size design—the grid itself doesn’t have to be any particular dimensions. It just has to be evenly divided into three vertical and three horizontal section. That doesn’t necessarily mean you’ll end up with nine equally-sized squares. If your design isn’t a perfect square, you’ll probably be splitting it into nine rectangles.

Think of your grid as a sort of map—the spots where the lines intersect indicate the prime focal areas within your design. Bringing an element closer to one of these intersections will allow it to stand out more, while objects that are further away will receive less attention.

When designers work against the rule of thirds, they’re still using that grid in some way or another.

Rule of Thirds

 

The Golden Ratio

The golden ratio has been used throughout history to create design elements that have an ideal visual appeal. Because the shape is rooted in nature and mathematics, it’s the perfect combination of balance and harmony. The Golden Ratio exists when a line is divided into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618. But don’t let all the math get you down. In design, the Golden Ratio boils down to aesthetics— creating and appreciating a sense of beauty through harmony and proportion. When applied to design, the Golden Ratio provides a sense of artistry, and it’s a awesome tool to have up your sleeve as a designer.

 

Fibonacci_spiral_34.svg.png

 

When it comes to applying the golden ratio there are different schools of thought:

A. Set up the design using a grid based on the ratio to create harmony

B. Do nothing because it applies whether you do it intentionally or not

The best solution might be somewhere in the middle. In all likelihood, your eye is probably trained to create and lean toward designs that include this theory, but it can never hurt to see if you are actually applying it well.

The goal is to create parts within the design that fit this ideal shape. Consider it for a logo or photo crop. Use it to create a header or a certain piece of a design. Use the concepts to create a base grid or hierarchical scale for typography.

golden ratio in use.jpg

 

What is Layout Design?

The secret to any good design lies in the way its visual elements are organized and positioned in relation to each other. This is exactly what layout design is all about.

Layout gives meaning to your design and makes it look visually appealing. It helps maintain balance from page to page or, slide to slide.

An important component of layout design are grids. Grids are the backbone of all layouts, infographics and presentations. 

Layout Design.jpg

 

What is a Layout Grid?

Layout grids are used for design projects that have as little as one page or as many as hundreds. These are the kind of grids that organize elements inside a space. Word documents, for example, have a grid, they just aren’t always visible. Layout grids help designers position text and images in a way that looks coherent and easy to follow.

layoutgrid.jpg

 

What is Wireframing?

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Wireframe.jpg