In designing a successful website interface there are tips and tricks that can save you time and make projects go much smoother.

1. Information Harvesting

Sir Francis Bacon said “Knowledge is Power” and indeed it is.

The singe best thing you can do for yourself before designing the interface is start asking your client basic questions.

Ask questions like:

• What does your company do? Or How does your service help people?
• What do you expect this website to do for you?
• How would you like to present your Product \ Service \ Idea?

Find out if they will need a CMS a Shopping Cart or a Blog.

Until you know exactly what the customer wants, it’s not time to open your photo editor

Make a work flow checklist and write down common questions so you’ll be better prepared before you go and talk with your client.

Ask questions and you will save yourself time in the long run.

2. Color

Color either can inspire you to take your graphic project to the next level or it can discourage you and slow you down.

The difference between a great color pallet and one that throws off a website interface can sometimes be very minor.

Now having said that color doesn’t have to be something that evokes thoughts of dread and terror.
Selecting color is like anything else, practice makes perfect.

There are many places to enjoy tasteful color selections like: business signs, business cards, flipping through menus at restaurants and the great outdoors. One of my favorites happens to be compiling pallets from paint swatches at local hardware stores.

Some times it’s helpful to focus on one color you like and select other colors that blend or pop based one that selection.
When looking for your base color, if you already have a logo for the design your working on, this is a great place to start.

Here are some excellent color swatch resources that can take a lot of time out of selecting color themes.
Take a look at other designers popular pallets to get a taste for what works well, Then make some yourself.

Adobe Kuler

Colour Lovers

3. Style

It’s key to spend a little time working out what design style would suit your client best.
Web 2.0 is leaving it’s mark on the design landscape and it’s not leaving anytime soon.

Now there will always be room to discuss the pros and cons of Web 2.0 but I believe that we all can see that many positive things have come to the light because of the huge popularity of Web 2.0.

Better emphasis on Typography, Use of Whitespace, Use of H1-6 headers, Uses of Cascading Style Sheets and better W3 Accessibility. These are all great things.

Now improper use of reflections, slapping beta tags on every new website and using flower badges are what I believe to be the cheeping of an art form with some exceptions.

While Web 2.0 has elements that if properly used can enhance any style design; Web 2.0 is not for everybody or every application. For instance a rock band would probably want a grunge style, a country rancher might want an old west theme, a tree service might want an interface and looks like a forest. Etc…

Modern design has a huge application base and examples of that like PureVolume and gallery sites like CSSRemix are viewed widely and often imitated.

Web 2.0 or New media design is great and often a wonderful choice. Just make sure before you add that big O’ glassy Web 2.0 badge that this is what is the best for your clients style.

4. Content

If your going to be using stock, don’t settle for anything but the best! Stock photography can either make or break a design so make sure it doesn’t do the latter to your project.

Lay out all your needed:

• Buttons
• Logos
• Header Text
• Photo Content
• Text Blocks

Import into your photo editor all the content you will need to incorporate in your interface design.

This helps prevents mishaps like designing a interface that is too small for a needed element and gets it all on the canvas to start those creative ideas flowing.

You may find it nice to do a quick interface mock up on paper, to see how it lays out first.
A quick sketch on paper sure is faster to revise than an hr spent in your photo editor creating a mock up.

I have found paper sketches save me a lot of time, especially on logo designs.

Each part of your interface should be Organized both by Location and Size.

The Size and Location should depend on the Purpose and Priority of the element.

Organize By:

• Location
• Size

Location and Size should be based on

• Purpose
• Priority

5. The Polish

Now this part of the interface design is where it gets down the the nitty gritty.

I like to add: Minimal Icons, 1 Pixel Highlights, Make Gradient Adjustments, And align everything to the pixel at this stage. I also check what I like to call the Pop Effect of the interface design.

Do my vivid colors pop of that dark background?

Or, is my gray text, dark enough to be actually read by humans on my white background?

Finely, I adjust these factors so I get the balance I want from the interface.

If you enjoyed this post, please feel free to leave a comment or click the float button to vote for this post.

Thanks,

John MacMenamin

Ever-Real Design Studios