Download - composition
![Page 1: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/1.jpg)
COMPOSITIONArrangement of shapes, colors, elements
![Page 2: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/2.jpg)
What makes an effective design? We know:
typography colors graphic elements
Sometimes we don’t pay the right attention to the composition and harmony “rules”. The composition is frequently based on what we feel is right, but there are some tricks to make it more precise. We are going to study the design and composition elements and its arrangements.
![Page 3: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/3.jpg)
WHAT IS COMPOSITION, AFTER ALL?
A good composition is basically an aesthetically pleasing arrangement of shapes, colors and images arranged in a manner to guide the viewers eye.
![Page 4: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/4.jpg)
Color is a strong element that can create harmony, contrast, define spaces and much more. Besides that, colors can express feelings and sensations, so be careful when choosing them.
![Page 5: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/5.jpg)
![Page 6: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/6.jpg)
![Page 7: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/7.jpg)
This element is important to indicate movement and make the layout flow. Being straight, curved, horizontal, vertical or diagonal can mean different things. The important thing is know how to use it, being explicit or not. Take a look at the images and see how the lines create a nice flow in different designs.
![Page 8: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/8.jpg)
![Page 9: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/9.jpg)
![Page 10: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/10.jpg)
Shapes are closed lines and like these ones, shapes can indicate movement, as well as balance the composition and distribute weight. The primary shapes are basic geometric figures and the organic ones can make great compositions, due to its infinity of forms.
![Page 11: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/11.jpg)
![Page 12: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/12.jpg)
![Page 13: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/13.jpg)
![Page 14: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/14.jpg)
The texture refers to the feeling you have about a surface, like rough, smooth, etc. It’s also related to repeated pattern on a surface. Using a nice texture can make your work much more rich and interesting. The images show texture as a surface and as the whole image.
![Page 15: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/15.jpg)
![Page 16: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/16.jpg)
![Page 17: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/17.jpg)
Tone is about light and dark and how they give volume to the image, giving a three-dimensional quality. It doesn’t mean that it’s only referred to black and white, but also for colors.
![Page 18: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/18.jpg)
![Page 19: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/19.jpg)
We call proportion the relation of size/weight of elements in a layout. That’s what keeps the balance. Talking about proportion and composition, we must remember the “Rule of the thirds” and the “Golden ratio”.
![Page 20: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/20.jpg)
Rule of the thirds
This rule is pretty well known, especially by photographers (nowadays many digital cameras display the rule of thirds’ grid). The image is divided into two horizontal and two vertical invisible lines. The intersection of the lines is where the important elements of the design should be.
![Page 21: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/21.jpg)
![Page 22: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/22.jpg)
![Page 23: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/23.jpg)
Golden Ratio
The Golden Ratio is a term ( Golden Section and Golden Mean) used to describe aesthetically pleasing proportioning within a piece. However, it is not merely a term -- it is an actual ratio. The golden ratio is a mathematical constant approximately to 1.618, represented by the greek letter phi (Φ or φ).
![Page 24: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/24.jpg)
![Page 25: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/25.jpg)
![Page 26: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/26.jpg)
![Page 27: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/27.jpg)
Studies indicate that we are programmed to see this proportion as comfortable and pleasant. There are also speculations about some Da Vince’s paintings, saying that they are based on these proportions. Just for curiosity, the pentagram is based on this proportion.
![Page 28: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/28.jpg)
![Page 29: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/29.jpg)
The unity is the characteristic that makes all components of a layout work as a single piece, talking the same language, keeping a pattern or style, the unity of colors, or the unity of elements.
![Page 30: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/30.jpg)
Keeping a pattern
![Page 31: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/31.jpg)
Unity of Color
![Page 32: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/32.jpg)
Unity of Elements
![Page 33: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/33.jpg)
Balance
The balance is a property of distributing weighs in the space. Being symmetrical or asymmetrical is not the point, it depends on your whole composition. But you need to know that if you want to keep the balance, you must place carefully “lighter” and “heavier” elements. and a horizontal symmetrical distribution of elements (3).
![Page 34: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/34.jpg)
many elements around the main shape
![Page 35: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/35.jpg)
dividing the weigh with the logo and element
![Page 36: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/36.jpg)
horizontal symmetrical distribution of elements
![Page 37: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/37.jpg)
The positive space is where the shapes and elements are. All the “empty” space around it is the negative space. Don’t ever think that the negative space isn’t important, because it’s an element as any other – that’s why designers always talk about “white space”.
![Page 38: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/38.jpg)
![Page 39: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/39.jpg)
![Page 40: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/40.jpg)
![Page 41: composition](https://reader036.vdocuments.us/reader036/viewer/2022062501/5681610d550346895dd0629d/html5/thumbnails/41.jpg)
Conclusion
The balance of all these elements are supposed to make a good composition, but most important than any rule is using your own perception. As designers, we know that each project has its particularities. Experiment, provoke, try something new for every project.