Recommended
More Related Content
What's hot
What's hot (20)
Similar to Rules of Design Composition
Similar to Rules of Design Composition (20)
More from ManamiIshimura
More from ManamiIshimura (20)
Recently uploaded
Recently uploaded (20)
Rules of Design Composition
- 1. Rules of Design Digital Skills Manami Ishimura
- 2. Design • Prerequisites of Design • Elements of Design • Gestalt Principles • Digital Design Composition
- 3. Prerequisites of Design 1. Format 2. Orientation 3. Grid System 4. Composition 5. Eye Movement 6. Theme
- 4. Format • Format is the canvas size and its usage. Portrait (vertical) and Landscape (horizontal) are very popular. Especially, in Web designing, you must imagine a format for each page.
- 5. Orientation Camera Angle (Perspective) and Scale in the frame (Zoom in & out) create different impressions. Dynamic, Stable, etc,
- 6. Grid System Grids help unifying a lot of information in a design. Hierarchy of information must follow those grids. Grids may change by format.
- 7. Composition • Third Grids • Symmetry • Approximate Symmetry • Asymmetry
- 8. The rule of Thirds Examples
- 9. Symmetry
- 11. Asymmetry
- 12. Eye Movement • All content needs to be arranged by eye movement. For instance, people read newspapers moving their eyes like a Z line although Websites are more F line and smartphones are I line. • Scale/Visual Hierarchy • Leading Line • Figure Line
- 13. Scale & Visual Hierarchy
- 14. Student Example
- 15. Leading Line
- 16. Figure Line
- 17. Example
- 18. Failed Example
- 19. Theme • Subject and concept; what do you want to visualize? Inform?
- 20. Gestalt Principles Proximity Similarity Closure Common Fate Figure Ground. Relationship Good Continuation
- 21. Proximity Elements next each other are more relative than further elements. Our perception groups those elements. If people sit next each other, we think they are together, either a couple or friends
- 22. Similarity Our perception groups similar elements such as shape, color, scale.
- 23. Closure Our perception complements shapes that miss some elements although they associate a sequence.
- 24. Common Fate Elements that are moving to the same direction are recognized more than still groups. Elements in the same movement are stronger than similarity or proximity
- 25. Figure Ground. Relationship Our perception recognizes an interest as a figure and others as a background. Smaller shapes or enclosed shapes are apt to be recognized as a figure.
- 26. Good Continuation A sequence is apt to be recognized as a group. Also, smooth curves suggest further continuance.
- 27. Digital Design Strategies Focus & Line Space & Body / Scale & Figure Color & Unity / Color & Saturation ( Color Theory) Color & Texture Alignment Repetition / Space Pixel vs. Path
- 28. Focus & Line
- 29. Example
- 30. Failed Example
- 31. Space & Body Copy
- 32. Scale & Figure
- 33. Example
- 34. Color & Unity
- 35. Failed Example
- 36. Color/ Contrast
- 37. Example
- 38. Color/Texture
- 39. Color/Saturation
- 41. Failed Example
- 42. Alignment
- 43. Example
- 44. Repetition
- 45. Repetition
- 46. Space
- 47. Pixel vs Path (Raster vs Vector)
- 48. Failed Example
Editor's Notes
- Noe only arrangement of objects but also color. The design is asymmentric but the dark color of center circle generates the center of gravity in the design on the center so still make a balance.
- Scaling is also important to organize information. For example, News paper, Headline catch an eye and give an second to read a short information about the subject matter. Then, give more information below.
- Line effects in design is not only emphasizing impression of an object but also lead an eye to information. Arrow is the typical example. the radial lines on the right design is not to expend the scale but also to lead reader’s eye to the information
- The effects is not only the illustrated lines but figure as well. The figure in the design catch an eye and the eye follows the arm. The arm lead an eye to the logo design. So the logo design is not so big but still get an attention.
- Focal Point is the most common strategy of design composition. Main image of these designs are the figures. The yellow circle and big letter suggest an eye to go to her face first and the thin line direct an eye to go to the bottom where secondary information is. The elderly person wears dark color clothing to create contrast the illustration and the figure and the radial line around the illustration directs an eye to go to him.
- Space and the rule of thirds
- If you need to multiple images in an design, you have to unify those images adjusting color balance.
- Saturation and brightness
- Color Contrast is another option to create a balance.
- Unity of color Aligment
- Space in a design lead to imagine the lingering sensation. Also the space create a balance between different textures of object, font, and images as well.
- Photos are made up of pixels Illustration made by path uses mathematical formulas so they are scalable and can be enlarge with no loss of quality. The surface are always clean and sharp compare to pixel based image such as photos. When you combine those, you have to carefully merge them.