Composition
In this brand the composition serves as a crucial rezognizable element, possessing the same level of importance as any other aspect of the brand, thus needing the same attention.
Text composition
Placing text
The text composition is inspired in the natural movement of the weaves. That is why all text composition must follow a zigzag pattern.
It is important to compose the text correctly within the designated space. The zigzag composition is a distinctive element of Isea's brand, and the designer must be mindful of its placement.
On this example, the composition was designed distributing the elements using all the area available (from top to bottom).
Things to consider while composing elements:
- The reading order of the elements must be clear
- All elements must follow a zigzag pattern
- All elements must have the same margins if applicable
- The spacing must follow the brand's rules
For more specific information about the typography composition go to the "Typography" section.
Another example of composition using the same grid but aligning all the text at the bottom and another zigzg pattern. Take a look at the following:
- Text alignment (left or right)
- Text position on the X axis
- Spacing
This is how we created the previous composition
- We created a grid that suited the area available
- We placed all elements at the bottom
- We followed the zigzag pattern
Elements composition
Layered composition
Elements must be composed as if they were layers, different waves going on top of each other. Each elements, the text, the illustration or photo and the background, act as a single layer each one and we must combine them.
A simple example of layered composition
- Follow the zigzag pattern
- Ensure layers touch at least one side of the limits
These are the layers in this composition:
- (1) Text box
- (2) Illustration
- (3) Background
Zigzag composition: The easiest way to make a layered composition is to follow the zigzag pattern, same as for text elements. In this case, the illustration is placed on the top right and the text box on the bottom left.
Layers placement: To ensure a visually balanced composition, the text box should have at least one side touching the limits of the composition area. For optimal results, it's recommended that two sides of the text box should touch the limits.
Examples
Text box touching two sides
Illustration touching two sides
Neutral color as background
Text box touching one side but aligned with illustration
Illustration touching two sides
Neutral color as background
Text box not touching any sides
Illustration touching only one side
Not a layered composition
Uneven margins between illustration and limits of composition
Text box aligned on one side only
Illustration only touching one side
Not a layered composition
Spacing left between illustration and margins too tight
Space between illustration and margins too tight
Primary color used as background
Because the illustrations are based on organic real seaweed they need cleaning depending on how they are used. Clean the "left overs" of the illustration.
Composition examples
Visual examples
Visual examples on how to compose text and elements in a composition.
Visual example 1 out of 2
These are the all elements that we can work with to design:
- Text layer
- IIllustration or photos layer*
- Background layer
*As a general rule, use illustrations or photographs. An exception can be made for interactive applications like a website.
Visual example 2 out of 2
An example on how we use different colors in a composition. Each application uses one primary color and the neutral background. The composition follows the "wave" pattern and elements are "layered".
