Design Principles Overview: The Big 4 and Beyond
Explore key design principles including Contrast, Alignment, Proximity, and Balance, with additional insights on elements like Harmony and Proportion for effective visual communication. Learn how these concepts shape design composition and enhance user experience.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Design Principles And therefore design elements DART 230 Dr. Beatty
The Big 4 Credited to Robin Williams of the non-designers book series Easy to remember as CRAP (or PARC) C = ??? Contrast. Think of it as contrast in each of the design elements. Elements are the lower-level components you have to work with. My list is color, line, shape, texture, ground, form, type, size/scale, value R = ??? (could be two answers) Rhythm or Repetition. I think of rhythm as within a page/screen and repetition as between pages (so, consistency). Here s one way to see rhythm ( listen to it 1, 2, 3. 1, 2, 3 etc.
The Big 4 cont. Credited to Robin Williams (not that Robin Williams) A = ??? Alignment. We know this from word processing. Here it can be horizontal (clothesline) Hello Hello Hello Hello Or vertical (flagpole) P = ??? Proximity. Closeness. Group related items. Use lots of white space, but try not to trap or surround it. For poor proximity see the link on February 25 page. Always be able to answer this question: Why is that there?
Others, sort of in order Balance Think of visual weight on the page. Large items with more value (darker) are heavier. Mainly look at left-right balance since pages/screens scroll, but consider top-bottom on first view ( above the fold ). Three possibilities: Unbalanced Symmetrical balance Asymmetrical balance
Final onesthese tend to overlap Proportion. This could also be good Contrast of Size. Think Large, Medium, Small (first, second, third reads ). Have a CVI (Center of Visual Impact). Make those differences clear, e.g. type that is 20px, 12px, 6px, not 20px, 18px, 16px. Don t be a wimp. This extends to the Fibonacci sequence and the Golden Mean or Golden Ratio. What are the Fibonacci numbers? 1:1:2:3 (what s next? what s the rule? why are there two ones?) 1:1:2:3:5:8:13:21 etc. This converges in the limit to the Golden Mean, about 1.61. So your proportions should be close to that in line (think 3 X 5 or 5 X 8 pictures) or in area (e.g. divide the screen into a 2:3 ratio of areas) 30px 40% 60% 20px
Movement or Direction. Look for flow of the eye. Try for vertical, horizontal. Avoid cropping to a square (also a violation of Proportion principle). Watch leading lines that go off a page (or out of an image). Screen/web page flow might be 1 2 3
Your list may vary Harmony or Unity. Everything works together. Enough Contrast but not too much. Typically limit to two typefaces, and use variations within those Two basic colors, or color groups, etc. Lots of examples on February 25 page. Here s a list that is similar to mine.
