Not long ago, I browsed a book on design, The Non-designers Design Book. The author offers a memorable mnemonic for principles of good typographic design. CRAP. That's right. Good design is CRAP!
S - Show is better (I added this one)
+
C - Contrast
R - Repetition
A - Alignment
P - Proximity
And get this. The author of the book is someone named Robin Williams. Go figure.
For me, design kindles thoughts about visualization. While back, I had heard about a JavaScript library called D3.js. Well, I just had to try CRAP with D3.js ... mainly because it was funny and I kept saying it in my head. So, the following is what I have learned, tinkering with style element of D3, on the D3 website. And I added S, for show. I guess the important point is that you can have a lot of fun learning when you mash things up, and that fun will help reinforce your learning.
Setup & Basics:
The nice thing about something like D3 and JavaScript is that it's built into your modern browser. I prefer Chrome. And on Windows, just hit F12 key, and you bring up bunch over developer tools, including a console where you can type in JS code directly. I will show illustrate a few examples and then include a link to the slides.
Full-slide here for details:
http://www.slideshare.net/kimdkim/design-is-scrap
S - Showing is better
C - Contrast
To change the color scheme as above:
> d3.select("body").style("background-color", "black");
> d3.select("h1").style("color","white");
Neat, huh?
S - Show is better (I added this one)
+
C - Contrast
R - Repetition
A - Alignment
P - Proximity
And get this. The author of the book is someone named Robin Williams. Go figure.
For me, design kindles thoughts about visualization. While back, I had heard about a JavaScript library called D3.js. Well, I just had to try CRAP with D3.js ... mainly because it was funny and I kept saying it in my head. So, the following is what I have learned, tinkering with style element of D3, on the D3 website. And I added S, for show. I guess the important point is that you can have a lot of fun learning when you mash things up, and that fun will help reinforce your learning.
Setup & Basics:
The nice thing about something like D3 and JavaScript is that it's built into your modern browser. I prefer Chrome. And on Windows, just hit F12 key, and you bring up bunch over developer tools, including a console where you can type in JS code directly. I will show illustrate a few examples and then include a link to the slides.
Full-slide here for details:
http://www.slideshare.net/kimdkim/design-is-scrap
S - Showing is better
Having pictures is clearly better than not having pictures - want proof? See the next picture! |
Type this into the console > d3.select(“div#examples”).remove(); |
C - Contrast
The original with dark text and white background - let's say you want to try a different contrast |
Isn't this cool? |
> d3.select("body").style("background-color", "black");
> d3.select("h1").style("color","white");
No comments:
Post a Comment