Principles of Layout Four important design principles to

  • Slides: 19
Download presentation
Principles of Layout Four important design principles to improve your work

Principles of Layout Four important design principles to improve your work

Four principles of layout • Contrast ﺍﻟﺘﺒﺎﻳﻦ • Repetition ﺍﻟﺘﻜﺮﺍﺭ • Alignment ﺍﻟﻤﻮﺍﺋﻤﺔ •

Four principles of layout • Contrast ﺍﻟﺘﺒﺎﻳﻦ • Repetition ﺍﻟﺘﻜﺮﺍﺭ • Alignment ﺍﻟﻤﻮﺍﺋﻤﺔ • Proximity ﺍﻟﻤﻘﺎﺭﺑﺔ Apply these principles to improve web pages, posters, slides, magazines, books, advertisements, packaging, business cards, labels …

Contrast ﺍﻟﺘﺒﺎﻳﻦ ﺃﻮ ﺍﻟﺘﻀﺎﺩ Avoid making elements just similar, make them very different Contrast

Contrast ﺍﻟﺘﺒﺎﻳﻦ ﺃﻮ ﺍﻟﺘﻀﺎﺩ Avoid making elements just similar, make them very different Contrast is an effective way to add visual interest to your work. To be effective it must be strong. Do not make things slightly different, make them really different.

Contrast ﺍﻟﺘﺒﺎﻳﻦ Contrast can be achieved by creating differences in: ● Color — complimentary

Contrast ﺍﻟﺘﺒﺎﻳﻦ Contrast can be achieved by creating differences in: ● Color — complimentary colors on the color wheel, i. e. red vs. green, blue vs. orange, yellow vs. violet ● ﺍﻷﻠﻮﺍﻥ ● Hue — saturated vs. muted colors ● ﺍﻟﺪﺭﺟﺔ ﺍﻟﻠﻮﻧﻴﺔ ● Movement — fast vs. slow ● ﺍﻟﺤﺮﻛﺔ ● Shape — organic vs. geometric shapes ● ﺍﻟﺸﻜﻞ ● Size — large vs. small shapes ● ( ﺍﻟﺤﺠﻢ )ﻛﺒﻴﺮﻭ ﺻﻐﻴﺮ ● Space — positive vs. negative ● ﺍﻟﻔﺮﺍﻍ ● Temperature — warm vs. cool ● ( ﺍﻟﺪﺭﺟﺔ ﺍﻟﻠﻮﻧﻴﺔ )ﺣﺎﺭ ﻭﺑﺎﺭﺩ ● Texture — rough vs. smooth ● ( ﺍﻟﻤﻠﻤﺲ )ﺧﺸﻦ ﻭﻧﺎﻋﻢ ● Value — light vs. dark ● ( ﺍﻟﻘﻴﻤﺔ ﺍﻟﻠﻮﻧﻴﺔ )ﻏﺎﻣﻖ ﻭﻓﺎﺗﺢ ● Font – serif vs sans serif ● ﺍﻟﺨﻂ

Contrast ﺍﻟﺘﺒﺎﻳﻦ • Color — complimentary colors on the color wheel, i. e. red

Contrast ﺍﻟﺘﺒﺎﻳﻦ • Color — complimentary colors on the color wheel, i. e. red vs. green, blue vs. orange, yellow vs. violet High contrast ﺗﺒﺎﻳﻦ ﻗﻮﻱ Low contrast ﺗﺒﺎﻳﻦ ﺿﻌﻴﻒ http: //www. ezl. com/~limegr/images/words/color_wheel. pdf

Repetition ﺍﻟﺘﻜﺮﺍﺭ Repetition simply means the reusing of the same or similar elements throughout

Repetition ﺍﻟﺘﻜﺮﺍﺭ Repetition simply means the reusing of the same or similar elements throughout your design. Repetition of certain design elements in a design will bring a clear sense of unity and consistency. Repetition of visual elements can bring together otherwise separate parts. Repeat some aspects of your design throughout the entire work – be consistent. This is useful on a single page document but critical on multi-page documents.

Repetition using color ﺍﻟﺘﻜﺮﺍﺭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻠﻮﻥ http: //inspirationhut. net/inspiration/36 -stunning-magazine-and-publication-layouts-for-your-inspiration/

Repetition using color ﺍﻟﺘﻜﺮﺍﺭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻠﻮﻥ http: //inspirationhut. net/inspiration/36 -stunning-magazine-and-publication-layouts-for-your-inspiration/

Repetition using color and text ﺍﻟﺘﻜﺮﺍﺭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻠﻮﻥ ﻭﺍﻟﻨﺺ http: //inspirationhut. net/inspiration/36 -stunning-magazine-and-publication-layouts-for-your-inspiration/

Repetition using color and text ﺍﻟﺘﻜﺮﺍﺭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻠﻮﻥ ﻭﺍﻟﻨﺺ http: //inspirationhut. net/inspiration/36 -stunning-magazine-and-publication-layouts-for-your-inspiration/

Alignment ﺍﻟﻤﻮﺍﺋﻤﺔ Every element on a page should be placed to have a visual

Alignment ﺍﻟﻤﻮﺍﺋﻤﺔ Every element on a page should be placed to have a visual connection with something else. Imagine invisible lines that connect objects. Common alignments are left, right and centered.

Proximity ﺍﻟﺘﻘﺎﺭﺏ Items that relate to each other should be grouped together. Items that

Proximity ﺍﻟﺘﻘﺎﺭﺏ Items that relate to each other should be grouped together. Items that are not connected should be clearly separated. This gives a viewer immediate visual clues to the organization of information.

Proximity ﺍﻟﺘﻘﺎﺭﺏ Title and Subtitle are together Other information is separated

Proximity ﺍﻟﺘﻘﺎﺭﺏ Title and Subtitle are together Other information is separated

Identify the layout principles used in these designs. .

Identify the layout principles used in these designs. .

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity