• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

DesignEyeForTheItGuy

Page history last edited by PBworks 13 years, 2 months ago

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

 

 

Layout

 

  • Five 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

 

 

Color

 

 

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