Graphic Design and Layout
Back in the steam age (around 1998) layout and graphic design were done with tables, font tags and other horrors that made your website unusable and unmaintainable. Here in the wonderful world of the future, graphic design and layout are done with cascading style sheets, CSS for short.
So we've got some some links to really good examples of styles for inspiration. Along the way we learned that people who go to art school are taught some deep, dark secrets in a class called "Design". We've uncovered some of those secrets, and they're here too.
We've got another page, Learning CSS that can get you started with (what else?) learning how to style with CSS.
And finally, this is like a peek at the answers in the back of the book, but it's the way we learned how to build web pages many years ago, and it's probably the way you learned too: stealing. We stole designs from sites we liked, extracted the good parts, and threw the rest away. You can do the same thing with styles, and we've got a whole section for it: Style Templates.
- Web Page Design for Designers
- Excellent articles. They've been around since 1996. Don't miss the article on palettes which talks about extracting palettes from photographs and using them for color schemes.
- Lazycat Postcards
- Postcards by Mike Robinson, each with a little nugget of design advice, that you can send to yourself or, if you've brave, to a website that looks like they need the advice.
- The CSS Vault Gallery
- The gallery is a collection of outstanding web pages and sites developed using simple HTML and CSS. Plenty here to spark your own design.
- The CSS Zen Garden
- Perhaps the most spectacular use of styles ever done. Click on the style names in the right-hand column and you'll see the page rendered in dozens of beautiful ways, all with the same page content. The only thing that changes is the style sheet.
- If it's possible for styles to be a little too stylish, this site by Ivan Bueno at San Francisco State University is the place. But there are jillions of good ideas to steal once you turn down the temperature a little. Or does this mean we're too old?
- Design Dojo
- By Sam Royama. Articles on design, plus some links. This site just started up at this writing, so we'll have to see how it goes.
- Color, Contrast and Dimension In News Design
- From the Poynter Institute, a Flash-based tutorial on using color in design.
- Superfluous Banter
- A weblog by Dan Rubin and Didier Hilhorst. It focuses on design, but it covers the waterfront. Their "Weekend Reading" lists, in particular, are worth digging down into. [RSS Feed]
- Thoughts about design in German and English.
- Designing Better Posts
- Kaye Trammell's short piece on designing in the small (her example is a single post on a weblog). Bet you don't know all the tricks she tells here.
- Fake Is The New Real
- We're including this not so much because of the content, but because this is a radical example of style sheets used for high style. Too high? You decide.
- Design Institute
- At the University of Minnesota. Good show and tell of student projects.
- Articles on Visualization
- From SAP Design Guild.
- Design Tidbits
- From SAP Design Guild.
- Web Standards Awards
- Very pleasant site: they recognize sites that use standards in good looking, stylish ways. You're bound to get some good ideas here.
- Web Design References: Typography
- Another of the University of Minnesota Duluth's magnificent meta-lists. A few clicks will tell you everything you need to know about typography on the Web.
- StyleGala Gallery
- More excellent standards-based designs.
- The CSS Zen Garden (1995 Version)
- This is brilliant: some wag has styled the normally immaculate CSS Zen Garden with blinking, throbbing colors and more animated GIFs than you can shake a stick at.