Design is S+CRAP
•
1 like•550 views
This document discusses the principles of design known as CRAP (Contrast, Repetition, Alignment, Proximity) and adds an additional principle of "Show". It provides examples of using the D3.js library to manipulate and style elements on a web page to demonstrate these design principles. The document selects and styles elements to change the background color, text color, margins, padding, and letter spacing to illustrate how CRAP and showing elements improves visual design.
More Related Content
More from David Kim
Recently uploaded
Recently uploaded (20)
Design is S+CRAP
- 1. Design is SCRAP with D3.js play & learn - david kim (http://goo.gl/lpVrK7) x
- 2. S + CRAP … Principles of Design ● It's not what you are thinking … ● CRAP comes from a book called The Non-Designer's Design Book, ironically by a guy named Robin Williams! ● C – Contrast ● R – Repetition ● A – Alignment ● P – Proximity ● To that bedrock of CRAP, I add S – Show ● And it was just a way to learn some basic D3.js
- 3. Setup: use Chrome browser + let's use d3js.org ● Bring up console: Mac (Cmd-Option-J) or PC (F12).
- 4. Basic d3: selectors ● Inspect element shows the selector for h1 and images.
- 5. S – Show is better than no show > Inspect elements to see that the images are “div#examples” then remove them in console: d3.select(“div#examples”).remove();
- 6. C - Contrast But it's so cool you can change it directly and see it! d3.select("body").style("background-color", "black"); d3.select("h1").style("color","white"); It's a matter of taste what you like better ...
- 7. R - Repetition It's more powerful, and stable-feeling to have repeat d3.select("div#examples a.example").remove();
- 8. A - Alignment Do you see what changed? d3.select("div#body header").select("a").style("margin", "4em"); d3.select("h1").style("letter-spacing", "4px"); d3.select("div#examples").style("padding", "25px");
- 9. P - Proximity The letter spacing – hard to see, but try it on your browser d3.selectAll("p").style("letter-spacing","4px");