🧑🎨 Design - Graphical
Graphical design plans usage of visual elements and the elements themselves. Images are used to deliver messages. It is related to design in general, user interface design, colors, typography, logos and data visualization.
Graphical design is essential in catching attention. Images are the second thing people focus on when landing to a web page or opening a newspaper. Right after dominant colors.
Prefer your eyes over mathematics and theories. Separate what is right and what looks right. Theories just give you a starting point.
Style Guide
Visual design work usually requires designer to specify where and how provided design elements are used. This is called a style guide.
Use centralized style guide and design system to keep visuals consistent. It's also good to encourage designers to share their work inside the company e.g., with Wake.
Style guide should:
- Briefly explain what is a style guide.
- State that this document is a style guide for the brand X.
- Define main and optional secondary font and show basic usage with heading, subheading, body and annotation text.
- Show important design elements.
- Explain why these design elements should be used.
- Explain how these design elements should be used.
- Explain when these design elements should be used.
- Explain where these design elements should be used.
- Provide an example with each element if necessary.
The most style guides fail to explain the context: why, when and where. They should contain plain English and pictures, not code snippets.
Visual Hierarchy
Strong visual hierarchy helps to direct user around the design. Use position, size, order and nesting.
Normally people scan in an F-shaped pattern. You can manipulate this by changing the visual hierarchy.
Web magazines should have as flat visual hierarchy as possible. This places emphasis on the content itself.
Items that are bigger seem more important and are scanned first.
+-------------------+ | | | | | | | 2 | 1 | | | | | | | +-------------------+ +----+----+----+----+ | 4 | 4 | 3 | | | | | +----+----+----+----+
Items that are different shape seem special and are scanned first.
+-------+ +-------+ ^ +-------+ | | | | / \ | | | 2 | | 2 | / 1 \ | 2 | | | | | / \ | | +-------+ +-------+ <-------> +-------+
Items that are brighter seem more important and are scanned first.
+-------+ +-------+ +-------+ +-------+ | | | | || | | | 2 | | 1 | |1| | 1 | | | | | || | | +-------+ +-------+ +-------+ +-------+
Items that are close together appear grouped and are scanned together.
Rows Columns * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Similar looking items appear grouped and are scanned together.
- * * * * * - * - * * * - * * * - * - * * * * * - * * *
Items moving together are grouped and are scanned together.
^ ^ ^ ^ | | | | * * * * * * * | | | v v v
Visual Form
Keep in mind the visual form. All photographs, paintings and images consist of dots. Human mind will group these dots to form lines and other basic shapes. These shapes are made even from the most chaotic images.
Use visual forms to communicate the right tone. Consider what are the subtle messages those shapes express. Those subtle messages as important when creating a painting as it is when you are selecting a stock photo for your new advertisement banner.
- All lines can be used to divide content, but they have other subtle meanings:
- Horizontal lines express balance and peace.
- Vertical lines express height, severity and falling down.
- Diagonal lines express dynamicity and movement.
- Curved lines express tension.
- Symmetric and rounded zigzag lines express peacefulness.
- Asymmetric and shart zigzag lines express anger and loss of control.
- Directions have a meaning even in the two dimentional space:
- Shape or line that seems to go to the left expresses the past.
- Shape or line that seems to go to the right expresses the future.
- Sometimes subtle messages depend on the shape that is used:
- Airplane icon that points upwards means flight departure.
- Airplane icon that points downwards means flight arrival.
Having high tension in the visual form doesn't mean it's bad. Symmetry creates trust but asymmetry graps attention.
Popular ways to increase tension in an image: - Shapes that contrast in size. Show bigger only partially? - Shapes that have irregular distances. - Shapes that have totally different form. - Shapes that change angles e.g. human from front and from side. - Shapes that change brightness. - Shapes that are grouped in smaller or bigger groups.
Using Images
Use rule of thirds. Divide picture to nine equal areas by drawing two horizontal and two vertical lines. Main items inside the image should follow these lines.
Example: move image so that the thing of focus is between 1 and 2, or 3 and 4. Place related text on top of 5. 1 +----------+----------+----------+ | | | | | | | | | | | |
3+----------|----------|----------+4 | | | | | | | | | | | | +----------|----------5----------+ | | | | | | | | | | | | +----------+----------+----------+ 2
Use directional cues. Placing and manipulating images to redirect the sight of the user to the wanted direction. This is done by glances, motions and perspectives on the used images.
Image with a woman looking left -> headline or content should be left, redirect by glance
Image with a woman looking straight at you -> headline or content should be bottom, redirect by glance
Image with a helicopter moving right -> headline or content should be right, redirect by motion
Image with a house wall on left, free space on right -> headline or content should be right, redirect by perspective
If there are multiple subjects in the same image, the biggest, clearest and nearest is dominant.
You can also break this effect but then you must know what you are doing, or it will look unprofessional.