01. Design for the brain first
To learn proper design, design history must be studied. The great artists and designers in history all followed simple design rules, and whether they followed, bent or broke those rules, it was the basics that allowed them to become of such high regard.
The brain, in multiple studies, follows a pattern of registering information by a trained hierarchy of what is being presented. Bold colours, bold type, contrasts and placement is always what shows up on thermal eye tracking tests, mostly because that is how we are trained.
02. Learn the rules and when to break them
There are several popular "rules" of design thought. All have valid points and, naturally, all can be successfully "broken"!
For the purpose of showing how these design rules work, below are some grouped images. One is simple, stock photos. The other is one work from each of four highly respected designers,Piet Zwart, Josef Müller-Brockmann, Paul Rand and Saul Bass. With a few specific websites thrown in, let’s see how these images hold up to different design rules.
03. Using the golden rectangle
Also known as the Golden Ratio, this sea shell-shaped mathematical nightmare has been used through centuries as the source of discovering the sweet spot, the area of maximum attention on a page and the areas that will lead the eye right to it.
04. Applying the rule of thirds
Also known as "design to the nine," the Rule of Thirds" (Ro3) is the most common layout pattern used by websites. The sectioning of the design area gives the designer definite areas of importance. The areas can be divided into top, middle and bottom sections, left, middle and right or just one-third as a separate area, such as a sidebar.
05. Mastering the grid
In design, a grid is a structure made up of a series of intersecting straight or curved guide lines used to structure content. The grid serves as a guide on which a designer can organize graphic elements in a rational, easy to absorb manner for the eye and brain.
As shown below from the useful prototyping tool UXPin, a grid helps organize graphic elements accordingly:
- In relation to a page
- In relation to other graphic elements on the page
- In relation to other parts of the same graphic element in relation to a page, to other graphic elements on the page, or to other parts of the same graphic element.
