DesignEyeForTheItGuy
From BarCampGR
Listed below are the online resources that informed, inspired, and in some cases plagiarized by Kyle's BarCampGrandRapids2 presentation on demystifying web design for the left-brainers. "Good artists borrow, great artists steal."
Note: All of the bookmarks below are also in my del.icio.us account, tagged with barcampgrandrapids2.
Quick Start
Not enough time to pour through all the resources below? Start with these two essentials, both presentations from the SxSW conference:
Tools
- Blueprint CSS - a set of CSS files that make it MUCH easier to put into practice the design principles I covered. A grid layout, vertical rhythm in the typography... it's all in there. I'd recommend starting here when creating your next masterpiece.
- Inkscape - the vector illustration program that I used to sketch out the basic grid for Dave's site. It's nowhere as good as Illustrator right now, but it's adequate and free, which counts for quite a bit.
- Gridding the 960 - the 960 pixel image I used in the background to help layout my initial grid and units.
- 18px vertical rhythm background image - this image is actually pretty easy to make on your own. Just create an image (using Inkscape, Gimp, or the image tool of your choice) the height of your vertical rhythm (e.g. 12px base font * 1.5 line height = 18px vertical rhythm) and put a 1px light gray line along the bottom. Set as the background image on the document body to get a visual guide for setting up your vertical layout.
- YUI - If you're looking for Blueprint CSS' big brother, something strong enough for one of the biggest sites in the world, Yahoo's got you covered. The Reset, Font, and Grid CSS files are big helps in building a solid foundation for your site.
- YUI CSS Grid Builder - A wizard that lets you visually create a grid based on YUI's Grid CSS. Once the grid is created, it will spit out the corresponding HTML.
- Eric Meyer's Color Blender - An excellent tool for generating shades (blend to black) and tints (blend to white) for use in your design.
- Flickr Colr Pickr - slick tool for finding
Theory
- Web Style Guide - Kind of like ALA rules for web design.
Layout
- Simple Steps to Designing Grid Systems - Mark Boulton has a whole series of "Five Simple Steps" articles, so be sure to explore his other related content. This treasure trove of information has also been pulled together in a soon-to-be-released booklet called Five Simple Steps: Designing for the Web.
- Oh Yeeaahh! - A case study of how Khoi Vinh, one of the most hardcore grid designers, goes about laying out a site. This blog entry links to his SxSW presentation "Grids Are Good", which was the primary inspiration for my presentation.
Typography
- Elements of Typographic Style Applied to the Web - An adaptation to the web of the print typography bible, The Elements of Typographic Style
- Five Simple Steps to Better Typography - Another Mark Boulton contribution.
- Web Typography Sucks - A presentation from SxSW that, along with "Grids Are Good", covers about 90% of the material I presented.
- Setting Type on the Web to a Baseline Grid - a good summary of the various grid and typography related techniques that exploded onto the web design scene over the last year.
Color
- Five Simple Steps to Designing with Color - yup, you guessed it. Mark Boulton strikes again.
- COLOURLovers - a site for color geeks, it features a wide range of palettes including my personal favorite, Chewbacca. Sometimes I find it hard to actually apply a palette to a design, but it's a good site for inspiration.
- Color Rules of Thumb - A quick introduction to the world of color theory.
The Big Picture
- Adam Polselli's Get The Look - Ready made sets of fonts, colors, techniques, and layout elements based around a particular look: Corporate, Ultra Hip, Chic Simplicity, etc. A bit old, but a good way to get rolling if you're having trouble putting all the pieces (layout, typography, color) together into a cohesive design.
"Without mathematics there is no art." -Luca Pacioli
