Composition presentetion


Published on

Published in: Technology, Spiritual
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Composition presentetion

  1. 1. i make this for my user. why? composition in web designing
  2. 2. What is Composition?
  3. 3. <ul><li>Composition is the pleasant arrangement of elements within a frame which give the most powerful ability to attract the eye, and to keep it exploring within the frame for as long as possible. </li></ul>
  5. 5. <ul><li>1) Unity </li></ul><ul><li>Unity is how the human brain organizes visual information into categories, or groups. </li></ul><ul><li>It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. </li></ul>
  6. 6. <ul><li>What is Unity in Design: </li></ul><ul><li>Unity in design is also called proxmity. It is what pulls the elements together. </li></ul><ul><li>Using the design principle of unity, you can assign your content into logical groups that make it easier for your readers to navigate through your designs. </li></ul>
  7. 7. <ul><li>Use of Unity in Design: </li></ul><ul><li>Unity in design is achieved primarily through placement in your layout. But it can also be achieved through margin and padding changes to the elements. </li></ul><ul><li>Another way to use unity in web design is to separate your text into groups using headline. The headline adds some visual contrast, and by grouping it with the text below it, it is clearly related to that content. </li></ul>
  8. 8. <ul><li>How to Include Unity in Web Designs: </li></ul><ul><li>Adjust the layout of elements to place them close or far away. </li></ul><ul><li>Change the spacing around text. </li></ul><ul><li>Play with the box properties to affect margins and padding. </li></ul>
  9. 9. <ul><li>2 ) Balance </li></ul><ul><li>Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure. </li></ul><ul><li>It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. </li></ul>
  10. 10. <ul><li>What is Balance in Design: </li></ul><ul><li>Balance in design is the distribution of elements across the design. </li></ul><ul><li>Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller elements appear to be lighter. </li></ul><ul><li>Balance usually comes in two forms: symmetrical and asymmetrical. </li></ul>
  11. 11. <ul><li>1) Symmetrical </li></ul><ul><li>Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis.  </li></ul><ul><li>Horizontal </li></ul><ul><li>symmetry  </li></ul>
  12. 12. <ul><li>When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. </li></ul><ul><li>Approximate horizontal symmetry </li></ul>
  13. 13. <ul><li>In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. </li></ul><ul><li>Radial symmetry </li></ul>
  14. 14. <ul><li>2) Asymmetrical </li></ul><ul><li>Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. </li></ul><ul><li>It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. </li></ul><ul><li>Asymmetry </li></ul><ul><li>In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance. </li></ul>
  15. 15. <ul><li>How to Include Balance in Web Designs: </li></ul><ul><li>The most common way to incorporate balance into Web designs is in the layout. </li></ul><ul><li>A very common way to balance a layout symmetrically is to center the text or </li></ul><ul><li>other elements on the page. </li></ul><ul><li>Most Web pages are built on a grid system, and this creates a form of balance for the page right away. </li></ul><ul><li>Customers can see the grid, even if there aren't any visible lines. And Web pages are well suited to grid designs because of the square nature of Web shapes. </li></ul>
  16. 16. <ul><li>Rhythm </li></ul><ul><li>Rhythm is the repetition or alternation of elements, often with defined intervals between them. </li></ul><ul><li>There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it. </li></ul><ul><li>Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length. </li></ul><ul><li>  </li></ul><ul><li>Regular </li></ul><ul><li>rhythm </li></ul>
  17. 17. <ul><li>Flowing: </li></ul><ul><li>A flowing rhythm gives a sense of movement, and is often more organic in nature. </li></ul><ul><li>Flowing </li></ul><ul><li>rhythm </li></ul>
  18. 18. <ul><li>Progressive: A progressive rhythm shows a sequence of forms through a progression of steps. </li></ul><ul><li>Progressive </li></ul><ul><li>rhythm </li></ul>
  19. 19. <ul><li>Proportion </li></ul><ul><li>Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. </li></ul><ul><li>In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front. </li></ul>
  20. 20. <ul><li>3) Alignment </li></ul><ul><li>Keeping things lined up is as important in Web design as it is in print design. </li></ul><ul><li>That’s not to say that everything  should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. </li></ul><ul><li>Aligning makes your design more ordered and digestible, as well as making it seem more polished. </li></ul>
  21. 21. <ul><li>4) Spacing </li></ul><ul><li>Spacing makes things clearer. In Web design there are three aspects of space that you should be considering: </li></ul><ul><li>Line Spacing </li></ul><ul><li>When you lay text out, the space between the lines directly affects how readable it appears. </li></ul><ul><li>Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. </li></ul>
  22. 22. <ul><li>Padding </li></ul><ul><li>Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables. </li></ul><ul><li>Padding is the space between elements and text. </li></ul>
  23. 23. <ul><li>White Space </li></ul><ul><li>First of all, white space doesn’t need to be white. </li></ul><ul><li>The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. </li></ul><ul><li>A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expencive architect site, you’ll almost always see a lot of space. </li></ul>
  24. 24. <ul><li>THANK YOU </li></ul>