Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer - Easily create striped images.

Tartan Maker - Create a tartan background image.

Texture Generator - Creates textured images that you can use as a background.

All Free Backgrounds - Choose the background you want.

COLORS

The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete - Popular web 2.o colors.

Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers - More samples of color combinations.

Website Color Picker - Test color combinations quickly.

I Like Your Colors - Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator - Easily create attractive CSS menus.

Listamatic - Collection of CSS menus.

List-O-Matic - Create your own CSS menus.

List-U-Like - Another tool to create your own navigation bars.

Tabs Generator - Create tabbed images for navigation.

Flash Buttons - Create navigation menus with flash buttons

CSS Play - An extensive collection of CSS menus.

Exploding Boy - Tabbed CSS navigation menus.

CSS Navigation Menu Generator - A tool to help you create your own menu.

FAVICONS

Favicon Generator - Create your own favicon from an image on your computer.

Favicon from Pics - Create a favicon from a photo.

Favicon Editor - Upload a photo, create a favicon.

Favicon.cc - Another option for favicons.

Photoshop Tutorial - Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts - Create attractive charts.

amCharts - Flash charts.

OTHER

Avatar Maker - Create and edit an avatar.

Shrink Pictures - Create an avatar from your photo.

ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic - Converts bitmap images to vector art.

Templatr - Create a layout.

PsycHo - Blog template generator.

Web 2.0 Generator - Creates layouts.

Typetester - Compare fonts on-screen.

BlogPoll - Create a free poll for your blog.

RSSxl - Convert an HTML page to RSS.

Meta Tag Generator - Easily create meta tags for your pages.

URL Rewrite - Create search engine-friendly URLs for dynamic pages.

.htacces generator - Quickly create an .htaccess file.

Thumbnail Generator - Create thumbnails for a large amount of images.

Reflection.js - Adds reflections to your photos.

Drop Shadow - Improve your images with a drop shadow.

CSS Sprite Generator - From Website Performance.

Vecteezy - Stupid name. Cool vectors.

Brusheezy - Photoshop brushes.

PSBrushes.net - More Photoshop brushes.

deviantART - Photoshop brushes at deviantART

Favorite design resources : inspiration or ideas

There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. Here is a list of 50 design resources that can be helpful to any designer or marketer.

CSS Galleries

Sometimes it can be hard to come up with design inspiration. CSS galleries are a great place to get design inspiration and they can also be leveraged as a great source of traffic. If you can get your design on these galleries it can drive thousands of visitors to your website.

Unmatchedstyle

cssBeauty

cssvault

Stylegala

CSS Drive

css thesis

Styleboost

CSSElite

CSS Import

Web Creme

CSS Mania

DesignShack

Web Standards

Designing with web standards is a great way to keep your code clean and search engine friendly. Why design a site with a 1000 lines of code when it can be done in 100 lines of code.

Developing With Web Standards - This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible.

Roadmap to Standards

Web Standards Project - The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

Web Standards Checklist

Importance of Web Standards

Validators

Now that you know all about web standards, here are some tools that can help check if your site is compliant. These tools will also help you find errors in your code.

HTML & XHTML Validator

CSS Validator

Usability

Usability is probably the most important factor in a website design. Making your website usable can help improve the experience for your visitors as well as help improve your conversion rate.

What is usability

Usability First - An approach to web design which emphasizes usability.

Weblog Usability: The Top Ten Design Mistakes - Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Web Design & Usability Guidelines - An 18 part online book that goes over usability and design guidelines.

Web usability - the basics

The Culture of Usability - How to spend less and get more from your usability-testing program.

90% of All Usability Testing is Useless

Ten deadly sins of web design - A list of ten huge mistakes no web designer or developer should be caught making.

Information architecture resources

Usability Views - Usability with a twist.

Blogs/Resources

Blogs are a great resource for up-to-date information on design and usability. Here is a list of blogs that you may want to subscribe to or read on a regular basis.

Stopdesign

Signal vs. Noise Blog - A design and usability blog by 37signals.

Digital Web Magazine - Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects. The magazine consists primarily of work contributed by web authors, as well as by others who occasionally delve into the web realm. We put emphasis on and provide recognition for contributed work. The Magazine is recognized by nearly all of the major web design agencies in the industry.

A List Apart - A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

456 Berea Street - This is a site by Roger Johansson who writes articles on web standards, accessibility, or usability in one way or another.

mezzoblue - A semi-daily expository and exploratory on all things web, design, and typographic. It is also a personal portfolio site with works in any creative discipline the owner feels fit to publicize.

Adaptive Path

Jesse James Garrett - The blog of the founder of Adaptive Path.

Jeffrey Veen

Your Total Site - YourTotalSite touchs on a wide range of subjects that include usability, accessibility, visual design, online marketing, (X)HTML & CSS, JavaScript, Information Architecture, and more.

IxDG Resource Library - A repository of information about interaction design.

Apples to Oranges - A blog by Ryan Nichols.

Demystifying Usability - A blog by Frank Spillers, a usability consultant.

Color Resources

Color is an important factor in design. Color can separate your site from your competition and it can also convey a specific message to your visitors. If you provide a personalized service you may want to choose colors that are soft and personal or if you want a corporate look and feel you may want to pick hard colors. Here are several resources that I use to help me make color decisions.

Color Schemer - Online color scheme generator.

Color Meaning - An article that explains the symbolism and meaning of different color types.

The Meaning of Color in Web Design - How colors influence audiences when marketing products through the Internet.

Symbolism of Color

Color Matters - Explore how color affects emotions, appetite, vision, sexuality, design, and art.

Typography

There are many different types of fonts and they can greatly affect how readable your site is, so choose wisely.

1001 Free Fonts - A large selection of true type fonts for Windows and Macintosh.

The Anatomy of Web Fonts

Typetester - Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier.

30 Exceptional CSS Techniques and Examples

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

2. Advanced CSS Menu

A creative and complex navigation scheme.

3. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

4. Lightbox Slides

Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.

5. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".

6. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

7. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

8. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

9. Sticky Footer

A static footer with very little XHTML required.

10. whatever: hover

A navigation menu that mimics Window’s Start menu.

11. CSS-Only Accordion Effect

An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

12. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

13. Pushbutton Links

links that are styled to look like buttons without using images.

14. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

15. Content Overlay with CSS

When you hover over the image, the container div is shown with more text.

16. A CSS styled table version 2

A beautifully styled, table with semantic mark-up - uses a background image.

17. PNG Overlay

Another way to add flare to images (rounds the corners and adds a border and drop shadow).

18. Showing Hyperlink Cues with CSS

Simple tutorial on adding icons to different types of links.

19. Simple Rounded Corner CSS Boxes

Uses only one image and very few lines of code and mark-up.

20. Sitemap Celebration

Tree-like navigation using nested lists, great for sitemap pages.

21. Easy cross-browser transparency

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

22. Curved corners 2

Fluid width and height divs with rounded corners.

23. Creating a graph using percentage background images

List items

styled into bar graphs.

24. CSS Bar Graphs: Examples

3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.

25. Animated Rollover Arrow

The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

26. A CSS-based Form Template

Showcases an accessible web form.

27. CSS Image Text Wrap

Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

28. Before your very eyes - a fade-in image

A demo using opacity and a single image that gradually fades in to cover the text.

29. Pure CSS Pop-ups

A pop-up technique that works even in IE 5 Mac.

30. CSS Gradient Text Effect

Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.

CSS tips and tricks

I’ve been writing CSS for about 2 years now and I still feel like
every time I open up a blank file and begin writing CSS for a new
design I learn something new.

For those of you that are new to CSS or experts always looking for a
new trick, here are some of things I do on a regular basis to keep my
code organized (kind of).

1. Size text without using pixels

If you’re wondering how some designers get font sizes to work using
em as a unit rather than px, it’s easy. There is a trick that was
written about a while ago (maybe on ALA) that resets the font sizes for
the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }

Simply throw the font-size: 62.5% bit into your body styling and
you’re done. Now you can use ems to sizes your fonts rather than
pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

You might be wondering why it matters how you size fonts? Bulletproof design.
Any major site needs to be able to withstand a user enlarging text (old
people use the web too!), and setting absolute sizes is not good
practice.

2. Make your code easy to read

When I was looking at some of the CSS coded by Rundle I noticed that he separated his heading tags nicely. It looked something like this:

h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; }

Quickly scanning the CSS for the different heading tags is a breeze
if you use this technique. It is also helpful if you’re sharing code or
working on a large site where you are using the same heading tags (say,
h2) in multiple places since you’ll be able to style each one
independently and not worry about child classes inheriting attributes
from the parent class.

I also use similar techniques for paragraph tags, anchor tags, and
any other tag that requires multiple classes to look correct in every
instance.

3. Separate code into blocks

This might be common sense to some of you but sometimes I look at
CSS and it’s not broken down into “sections.” It’s easy to do an it
makes working with code weeks, months, or years later much easier.
You’ll have an easier time finding classes and elements that you need
to change.

This is how I usuall break down my site:

/* Structure */

This is where I’d put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple - all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements
that didn’t fit into the rest of the section. If I have an unordered
list for the navigation I might setup a new section for navigation and
setup all the styles for the navigation, including the list and link
styles, in this section - it makes editing the navigation much easier.

4. Stop using so many divs!

This has been echoed by a lot of coders and standards nuts, and
while I don’t think there is anything wrong with using a lot of block
level elements, I laugh a little when I see someone style their article
headlines using a div rather than a heading tag. Some people even style
their bylines using a div! Try using the small tag or the a span for
goodness sake.

5. Style everything at once

I noticed that I was typing “margin: 0; padding: 0;” in just about
every element. I remembered seeing someone use “*” to style everything
on a page at once. I decided it didn’t make much sense to define margin
and padding over and over when I always gave them the same parameters.

It’s easy to do:

* { margin: 0; padding: 0; }

Now you only have to define margin and padding on elements where you actually want some.

Know of any other tips or tricks? Let me know :)

99 Resources for Web 2.0 Design

BADGES

BUTTONS

ROUNDED CORNERS

LOGOS

ICONS

GRADIENT IMAGES

SPEECH BUBBLES

BACKGROUND IMAGES