I find with "design" my limitation is in actually making design elements like a logo, rounded corners, a gradient background, choosing a good (matching) color scheme, or finding and using the right images.
Knowing this, I look at design from a front-end information architecture perspective, anticipating that at some point in the future I will be able to find on the Web, or have someone create, the design elements I will need to complete the look-and-feel. In the meantime I do my best and this is my basic process in doing that:
People understand and remember stories.
For me Information Architecture (IA) is the "where" and "how" blocks of related information are grouped and then placed to tell the *story* of the site:
Before you define blocks of information you have to have a story.
For example, the story might be: "I’m a great Web site for finding a job...a job that is perfect for you, you should join me, if you do you will have access to tons of perfect jobs and your life will change for the better forever!"
In this short story I see 3 blocks of information: 1) what is the site in 10 words or less, 2) how do I join - a sign-up section, 3) and an area that describes the benefits of the site - maybe user testimonials.
Aside from the main story, also consider the basic information blocks that most Web sites require:
This is obvious but worth spending time on. After I define blocks of information, I start to think about where they will be placed. I want to call attention to different parts of the story depending on its relevance and importance in the story.
Basically I think like a newspaper layout editor. I also "borrow from the best" to get ideas about my layout by seeing what’s out there on the Web.
I highly recommend the book:
"Don’t Make Me Think" by Steve Krug - sensible.com
It’s a good read and everything he says is so darn obvious, and all there in one great reference.
** grid **
At the very basic level using a grid system for layout helps me place information blocks, and move them around to test what works or doesn’t.
Using a base CSS framework is a good place to start. This also helps in cross browser compatibility and design, especially if you master one of them:
(there are more)
** partials **
This might not work for everyone, but I like to organize my blocks of information into partials. I tend to have a lot of partials in my apps. In the job board example above, I might place each block of information I defined into a partial within a "splash" view: 1) _pitch.html.erb, 2) _sign_up.html.erb, and 3) _benefits.html.erb.
As partials, it’s easy to shuffle them around my grid and also to beautify each individually.
** css and html **
Basic CSS and HTML provide semantic structure, hierarchy, and hooks for later design. A great book to inspire and teach design via CSS is:
"The Zen of CSS Design: Visual Enlightenment for the Web" - csszengarden.com
For best practices this is an invaluable resource:
For example, if I want my sign-up form element to look nice I might start be referring to this article:
This is also a great resource:
There is a lot out there that you can use as inspiration or to borrow from. Here is a great starting point:
For example, for footer ideas I might look at an article like this:
Here are some more:
** libraries **
jQuery widgets like:
...are great and give you lots of nice design elements.
** generators **
There are some good generators that help in design. In my job board example above I might decide, after finding inspiration in Zen Garden or Smashing Magazine, that my site description or _pitch.html.erb partial, needs a rounded corner box to really emphasize it, but I have no idea how to work Photoshop or Illustrator to do that.
The good news is that pretty much everything, from buttons to forms, has a generator, or you can at least find a free snippet of code or instruction on how to do it somewhere on the Internet.
Here are the generators I will need for my rounded corners:
btw this is a nice tool...
** colors **
These are also good for choosing colors:
** images **
Free:
Fee:
** backgrounds **
** icons **
** fonts **
There’s a lot of free fonts out there:
...but this is worth taking a look at:
** copy **
It’s best to use actual copy (text) rather than "Lorem Ipsum, but this is not always possible so here is a resource to generate Lorem Ipsum text:
One very important thing to practice when designing interfaces is do nothing in isolation, and consider everything you think as intuitive to be wrong! (until proven otherwise)
You have to get feedback from your end users and refine. If you can’t get to them, then ask your neighbor, a friend, or try something like:
Iterating is key.
Finally when architecting remember that less is more and KISS (Keep It Simple Stupid).
Anyway, hope that helps.