6 Web Design Tips to Live By

Keywords: Web Design

During a job interview way back in the day, my interviewer pulled out a personal website that he had built for his film production hobby and asked me to tell him what was wrong with it -- I just took one look at it and said the first thing that came to my mind -- "It doesn't make music to my eyes". Whether or not I got the job after that comment is a different story, but for the most part, that is how I rate the design of most sites that I encounter. If it embodies visual harmony then it's a site that I like, else I'm not really feelin' it. I've put together a few design guidelines that I have sub-consciously abided by over the years. As you read on, bear in mind that to the gifted artists out there, these and other rules governing design are made to be broken, and experimentation outside the scope of convention is not only possible, but encouraged.

1. I aint too proud to sketch.

Sketching out a design on paper is no different than writing down a todo list. Yeah, it's all in your head, but wouldn't it be better for you to just store it somewhere so you don't have to shuffle your memory around every time you want to remember where you're going to put your banner or how you're going to arrange your footer etc? Also as your ideas manifest themselves visually, you can begin to discover what works and what needs to be tweaked a little. I always make it a point to draw a framework of a website before I crack open photoshop or fireworks and start to do the actual design.

2. Design with Symmetry in Mind

Symmetry is the underlying principle behind quite a bit of design that we see in the real world. A segment I was watching on the Discovery Channel the other day mentioned that the Roman Empire was somewhat obsessed with symmetry in their architecture. In web design Symmetry prevents the imbalance and distortion usually associated with amateur-level design and tequila shots. If you ever had the feeling that there was something missing from a design outside the obvious, check for a lack of symmetry in your layout. Do horizontally aligned design elements on the top of your layout match some other kind of elements on the footer? Does your vertically aligned menu on the left flush with your text and images in the body of you design same as on the right? Symmetry abounds in the screenshot from Supremetitle.com below.

  Everything flushes perfectly on the left, and on the right of the design. If the body text for instance, overlapped your imaginary vertical line either on the left or on the right of this layout, it would immediately lead to a visual dissonance, not unlike skipping a beat in music.

3. Narrow down your palette

So you obeyed all the symmetry rules and yet somehow your design still falls short of impressing anyone except your momz. Maybe that blue on green polka dotted background with the yellow verdana font might have something to do with it. Always try to make your design work with as few colors as possible to start with. Use variations of colors rather than a completely different color for everything. You can create elegant designs with just three colors, if you use them wisely. Kaeef.org is one of the best examples of maintaining similar color tonation in a web design.



 Font, banners and backgrounds all seem like slightly lighter or darker versions of each other, and this usually ends up being easy on the eyes.

4. Choose clear and eye-catching banner images

I don't know if this has ever happened to you, but have you ever found yourself looking at a design and saying to yourself, "I don't get it, it's so simple, yet so compelling". Well, a lot of times, one well placed image on a website is all you need to pick up your freelance check and deliver a design masterpiece at the same time.

I'm sure most people would agree that the screenshot above shows a pretty good site design. But picture it without the images for a second. Not a lot left is there? A lot of times when I design, finding the correct images for my site actually take a longer time than designing the rest of the layout.

5. Know your tools

I've heard many a heated debate amongst developers about which web development or design tool is the 'King of the Hill'. My favorite is the one that often rages between developers who have sworn allegiance to Dreamweaver and the few users who self-consciously still use Microsoft FrontPage. The truth is, in the hands of a master, notepad is probably the best web development tool. A good piece of software is only as powerful as the person using it. You have to explore the options available to you in a particular software as a developer in order to make optimum use of whatever tool you find yourself using.

6. Don't be afraid of a little adventure

If you've been using the internet for at least 3 years, then chances are you've probably bumped into a site at some point that seemed to conform to none of the guidelines above and yet somehow was still highly compelling and visually appealing.



Some web designers are bonafide artists within or without the digital medium, and if you fall in that category, then by all means, have a little fun with your work -- go crazy.