Front-end Design Primer for the Non-Designer

by Chris Maxwell - taken from an e-mail written to be Boston Ruby group on 12/13/09

I find with “design” my limitations are found 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 architects 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:

STORY TELLING

People understand and remember stories.

For me Information Architecture (IA) is the "where" and "how" blocks of related information are grouped together and then placed on a website to tell the *story* of the site:


But before you can 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!”

BLOCKS OF INFORMATION

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:


PLACEMENT

This may seem obvious but worth spending some time on. After I define blocks of information, I start to think about where they will be placed. I think in terms of calling 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 I would never have thought of it, and it’s all there in one great reference.

FRONT END CODE


** 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 frameworks grid system and also to beautify each individually.


** css and html **

Basic CSS and HTML provides 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:


BORROW FROM THE BEST

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:


FREE RESOURCES


** libraries **

jQuery widgets like:


...are great and give you lots of nice design elements.


** generators **

There are some good generators out there 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 somewhere on the Internet, or you can at least find a free snippet of code or instruction on how to build it.


Here are the generators I will need for my rounded corners:


btw this is a nice tool...



** colors **

These are 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:


FEEDBACK

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).

Hope this helps.