Pixel Perfect, Code Perfect, Graphic Perfect

A good web designer obsesses over every pixel.

Symmetry is everything in design, any kind of design. The way an interior decorator places furniture in a room whilst keeping a clean buffer zone for walking, shelves, and other practical housing functions and decor is very similar to the design of a page on a website. The way a room can be too stuffy or overcrowded is no different than that of a web page. Good color contrast, padding, borders, and margins are the key foundation to any good design.

Aesthetics are subjective, sure, but there are constants in the human mind of space and symmetry. Everything needs its place and everything needs space. Here’s an interesting read from Princeton on the human perception of symmetry.

I think everyone understands good symmetry and space. So really, there are no bad designers, just lazy ones.

A good web designer obsesses over every line of code.

Clean, valid, standards-compliant, and cross-browser-compatible code. Unfortunately, many designers don’t care about this aspect. They simply slap together a design and as long as it looks good on the front-end, they feel their job is done.

Ignoring code is like sweeping a big mess under the carpet. It might be hidden, but it’ll keep building up until someone trips over it. I mostly blame the sole use of programs like Dreamweaver. Coding is a very hands-on duty not to be left to the guess work of a program. What do you use for coding? Vote here.

Out-dated code frightens me. Also, there’s no reason I can think of not to be using the HTML5 doctype <!DOCTYPE html>. Of course, you should still be using safe code techniques and checking your work with code validity checkers for both HTML and CSS.

A designer should care about the accuracy of the code, how fast it loads, if it’s SEO-friendly, and how cross-browser-friendly it is.

A good web designer obsesses over every graphic.

The key to good graphics is subtlety. Really flashy graphics, tons of color, blinking or animated GIFs, blurry or jagged graphics, I hope, are a thing of the past (circa the 1990s). I’m sure it didn’t look good then either, but we were probably just so excited about mainstream internet and websites that we just went nuts.

When I’m designing graphics, I’ll sometimes use gradients, glows, and shadows, but I pull it way back so there’s just a subtle hint of it. I never just add a stock Illustrator or Photoshop style and call it good. The default bevel and emboss for Photoshop, for example, creates some of the cheesiest, dated looking graphics.

Another thing is consistency. More times than I’d like to remember, I’ve seen people butcher up some graphics of menu tabs where the color, font, symmetry of each weren’t consistent or some of them were even stretched or skewed looking because perhaps they made a mistake and instead of redoing all the menu tabs just cropped the one.

The framework of the code and graphics need to play perfectly together. Here’s a quick trick: let’s say the design is going to be 1000px wide and we want 8 main menu tabs. Dividing 1000 by 8, we get 125 (you can use Google as a calculator — much faster than your desktop calculator). So, our stock menu tab will be 125px wide. Now, what’s the wording of the menu links? Take the longest word and cater to that one first, choosing color, font, font size, and build the tab design around that one word. Now we’ll know that the rest will fit comfortably following the exact same template.

Looking at design, I’ll for sure notice if the menu is just one pixel off from the main content area. I have an eye for it. However, with the basic psychology of people being keen to symmetry and pattern-seekers, anyone could notice that something was off with a design, even if they couldn’t explain why. They might not think of it the way you or I do, relating it to the quality of the work of the specific designer responsible. What they might do is equate it to the professionalism of the company’s website they’re on itself.

I’m not perfect.

I learn every single day and better my skills and there will always be more to learn. As far as how good you are at anything, there are two different kinds of people:

  • Group A. People that don’t care (think they’re the best already or don’t care about others, like their clients, and they just want to take the money and run)
  • Group B. People that seek to better themselves everyday (because they’re not deluded and actually respect truth, quality, and others around them)

In conclusion.

Even if you don’t care about the quality of your own work and the happiness and success of your clients and it’s all about money and slapping it together as quickly as possible, think of it this way, providing quality work will lead to word-of-mouth referrals, ongoing clients, and as you better your skills, you better your portfolio, your reputation, and ultimately, you can ask for more money for people to even retain your services.

In other words, whether you actually care or not, just pretend that you do and you’ll probably make more money. But, I hope you do care; I hope you want to do something for a living that you enjoy. I love web design.