Title: Is Your Website Design “CRAP?” Author: Travis McAshan Published: May 19, 2010 Last modified: July 24, 2024 --- # Is Your Website Design “CRAP?” Web Design & Development Graphic design contains underlying principles that govern the most important aspects of great design. These principles create the acronym C.R.A.P. which stands for contrast,... ![Profile Image](https://www.glidedesign.com/wp-content/uploads/Travis-1.png) Travis McAshan Published May 2010 ![featured image](https://www.glidedesign.com/wp-content/uploads/is-your-website- design-crap.svg) Share on Social Media * [Fb](http://www.facebook.com/sharer.php?u=https://www.glidedesign.com/blog/website-design-crap/&t=Is Your Website Design “CRAP?”) * [Li](http://www.linkedin.com/shareArticle?mini=true&title=Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) * [Tw](http://twitter.com/intent/tweet?text=Currently reading Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) Table of contents ![optimize-your-brand-ai-driven-search-ebook-cover](https://www.glidedesign.com/ wp-content/uploads/optimize-your-brand-ai-driven-search-ebook-cover-300x388.png) Future-Proof Your SEO with GEO Strategies Discover the key insights on how AI-driven search is reshaping digital visibility. [Download Ebook](https://www.glidedesign.com/blog/website-design-crap/?output_format=md#geted-post-form-popup) ## In a Nutshell… Graphic design contains underlying principles that govern the most important aspects of great design. These principles create the acronym C.R.A.P. which stands for ** contrast, repetition, alignment, and proximity**. The well-balanced combination of these principles tends to create design which most people would consider visually pleasing. ## The Best Acronym Ever… C.R.A.P. If you’re like the vast majority of people, you’ll immediately think an acronym like CRAP would be negative in connotation. However, to say a design is CRAP is quite the compliment (we suggest not trying this with your designer). The original term was coined by writer Robin Williams in his book **“The Non-Designers Design Book”** written in 1994. All in all, the principles involved are easy to understand and we’ll show some examples for each below. ### 1. **C**ontrast Contrast is defined as **_“the difference in visual properties that makes an object distinguishable from other objects and the background”_** (source: **[wiki](http://en.wikipedia.org/wiki/Contrast_%28vision%29)**). We like to say it means to make some things stand out more than others. Just like a roller coaster needs some ups and downs, a website needs to have some variation and contrast. ![](https://www.glidedesign.com/wp-content/uploads/crap-design-principle-contrast- web-design.jpg "crap-design-principle-contrast-web-design") In this example, you see the background has a subtle yet powerful image. However, the foreground or informational panels almost jump off the page and catch your attention. This is a great example of **contrast**. #### Things to Consider: * Group things that are the same together * Make things that are different stand out * Don’t be “slightly different” (choose same or very different) * Strong contrast helps visually separate content * Good contrast makes a design more visually appealing * Contrast is great for “calls to action” and “next steps” ### 2. **R**epetition Repetition is defined as to **_“repeat styles down the page for a cohesive feel”_**( source: thinkvitamin). We like to say that the more you use similar styles and elements the more comfortable the user feels understanding and interacting with your design. By using repeating styles you create usability, trust, and ultimately action. ![](https://www.glidedesign.com/wp-content/uploads/crap-design-principle-repetition- web-design.jpg "crap-design-principle-repetition-web-design") In this example of **[www.yeticoolers.com](http://www.yeticoolers.com)**, you see that the informational panels all have the same style. The typography (text), buttons, and side-view photo of the coolers all share a similar style. By repeating the panels a user can easily choose based on the content alone without distracting design differences between each product options. This is a great example of **repetition**. #### Things to Consider: * Repeat design elements to create consistent “feel” * If specific elements contain a certain style – use it elsewhere * Repetition creates visual connections between content * Repeating styles make a website more user-friendly * Repeating styles reinforce their meaning to the user ### 3. **A**lignment Alignment is defined as **_“lining up the top, bottom, sides, or middle of text or graphic elements on a page”_** (source: [about.com](http://desktoppub.about.com/od/designprinciples/g/alignment.htm)). We like to say it’s a “rhyme or reason” to things being where they are. This quality is the single most important principle in great design and typically is the difference between professional design, and how can we say this… “unprofessional design”. ![](https://www.glidedesign.com/wp-content/uploads/crap-design-principle-alignment- web-design.jpg "crap-design-principle-alignment-web-design") In this example of [**www.manegain.com**](http://www.manegain.com), you see how the various elements of the page, while appearing in the header, the body and in the bottom of the page all align in the same invisible grid. While most people will not realize this aspect of great design, it is quite literally CRITICAL in creating beautiful designs. The more you start looking you will see an underlying grid to nearly all great design. #### Things to Consider: * Quality alignment is CRITICAL to great design * All page elements should be visually connected to something else * Alignment of important content items creates attractive design * Underlying grids help make a design flow more naturally to users * Choose left align, center align or right align (don’t mix) * Make sure to match spacing/padding when you align items ### 4. **P**roximity Proximity is defined as **_“the property of being close together”_** (source: [thefreedictionary.com](http://www.thefreedictionary.com/proximity)). We like to say it’s grouping things that act, look, and feel alike, close together and separating different elements to create more user-friendly websites. Proximity is used to connect like items and separate site content into digestible chunks. By creating a less proximity (less closeness) you can “set apart” or highlight specific items in a design. ![](https://www.glidedesign.com/wp-content/uploads/crap-design-principle-proximity- web-design.jpg "crap-design-principle-proximity-web-design") In this example of **www.tbic.com**, you see how there is a very large amount of“ white space” (low proximity) around the major service offering, “A Texas based Workers Compensation Insurance Carrier.” While there is an image in the background, the lack of other visually complicated items has been purposely eliminated to create a strong compelling urge to read the sentence and act on the “Know More”. This is a great example of **proximity** (or lack thereof). #### Things to Consider: * Proximity creates meaning * Elements that are alike should be grouped * Items that are different should be kept apart * The more spacing elements the clearer the difference * More spacing means LESS connection in elements * Clear separation makes navigating a website easier ## What have we learned? Creating a great design is more science that one might think. There are quite a few fundamental principles behind the scenes guiding and directing a designer to achieve great results. By simply following the four basic principles of CRAP (** contrast, repetition, alignment, proximity**) you’ll be well on your way to [aesthetically pleasing design](https://www.glidedesign.com/services/design/). Glide Design is an [Austin Texas Web Design agency](https://www.glidedesign.com/) specialized in extraordinary websites. Share on Social Media * [Fb](http://www.facebook.com/sharer.php?u=https://www.glidedesign.com/blog/website-design-crap/&t=Is Your Website Design “CRAP?”) * [Li](http://www.linkedin.com/shareArticle?mini=true&title=Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) * [Tw](http://twitter.com/intent/tweet?text=Currently reading Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) What topics would you like to see us write about next? Suggest a topic Share on Social Media * [Fb](http://www.facebook.com/sharer.php?u=https://www.glidedesign.com/blog/website-design-crap/&t=Is Your Website Design “CRAP?”) * [Li](http://www.linkedin.com/shareArticle?mini=true&title=Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) * [Tw](http://twitter.com/intent/tweet?text=Currently reading Is Your Website Design “CRAP?”&url=https://www.glidedesign.com/blog/website-design-crap/) Table of contents ![optimize-your-brand-ai-driven-search-ebook-cover](https://www.glidedesign.com/ wp-content/uploads/optimize-your-brand-ai-driven-search-ebook-cover-300x388.png) Future-Proof Your SEO with GEO Strategies Discover the key insights on how AI-driven search is reshaping digital visibility. [Download Ebook](https://www.glidedesign.com/blog/website-design-crap/?output_format=md#geted-post-form-popup) ![optimize-your-brand-ai-driven-search-ebook-cover](https://www.glidedesign.com/ wp-content/uploads/optimize-your-brand-ai-driven-search-ebook-cover-300x388.png) Future-Proof Your SEO with GEO Strategies Discover the key insights on how AI-driven search is reshaping digital visibility. Download PDF ## Marketing tips delivered to your inbox. ## Don’t miss [ Industry Insights ](https://www.glidedesign.com/category/industry-insights/) [ 7 Ways to Celebrate the Earth ](https://www.glidedesign.com/blog/7-ways-celebrate-earth/) Earth Day (April 22) is one of my favorite days to celebrate because I think the earth is a beautiful place that needs [Read more](https://www.glidedesign.com/blog/7-ways-celebrate-earth/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/7-ways-celebrate-earth/) [ Web Design & Development ](https://www.glidedesign.com/category/web-design-development/) [ Choosing the best domain… (25 easy tips) ](https://www.glidedesign.com/blog/25-tips-for-domain-selection-purchase/) It's obvious that selecting the right domain name is important and definitely better to get right the first time. But [Read more](https://www.glidedesign.com/blog/25-tips-for-domain-selection-purchase/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/25-tips-for-domain-selection-purchase/) [ Company ](https://www.glidedesign.com/category/company/) [ Top 10 Reasons Clients Choose GLIDE ](https://www.glidedesign.com/blog/top-10-reasons-clients-choose-glide/) [Read more](https://www.glidedesign.com/blog/top-10-reasons-clients-choose-glide/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/top-10-reasons-clients-choose-glide/) [ Industry Insights ](https://www.glidedesign.com/category/industry-insights/) [ Do you have “passion” for your Clients? ](https://www.glidedesign.com/blog/passion-clients/) [Read more](https://www.glidedesign.com/blog/passion-clients/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/passion-clients/) [ Web Design & Development ](https://www.glidedesign.com/category/web-design-development/) [ Best WordPress Image Optimizer in 2023 (Tested and Compared) ](https://www.glidedesign.com/blog/best-wordpress-image-optimizer/) Is your website loading slowly? Poorly optimized images may be the culprit. Here are the best WordPress Image Optimizer [Read more](https://www.glidedesign.com/blog/best-wordpress-image-optimizer/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/best-wordpress-image-optimizer/) [ Industry Insights ](https://www.glidedesign.com/category/industry-insights/) [ 5 WordPress Plugins for Real Estate Listings (IDX/MLS) ](https://www.glidedesign.com/blog/7-wordpress-plugins-real-estate-listings-idxmls/) [Read more](https://www.glidedesign.com/blog/7-wordpress-plugins-real-estate-listings-idxmls/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/7-wordpress-plugins-real-estate-listings-idxmls/) [ Web Design & Development ](https://www.glidedesign.com/category/web-design-development/) [ What questions help create a mission statement? ](https://www.glidedesign.com/blog/what-questions-help-create-a-mission-statement/) [Read more](https://www.glidedesign.com/blog/what-questions-help-create-a-mission-statement/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/what-questions-help-create-a-mission-statement/) [ Company ](https://www.glidedesign.com/category/company/) [ 12 Examples of Persistence Paying Off ](https://www.glidedesign.com/blog/12-examples-of-persistence-paying-off/) [Read more](https://www.glidedesign.com/blog/12-examples-of-persistence-paying-off/) [ ⌊featured image⌉ ](https://www.glidedesign.com/blog/12-examples-of-persistence-paying-off/)