Over the last ten years I’ve worked with a dozen or so web designers or people calling themselves one. Usually I can tell a lot about the designer just by looking at the designs. I’ve seen the old-timers who still don’t get it (or just don’t care), as well as those new to the craft, but infinitely curious about everything.

I’m a web developer myself with focus on front-end. I’ll be the first to admit I could never be a designer of any kind, but I’ve been fortunate enough to work with few really talented ones and over the years I’ve learned a lot from them. Ideally design should solve problems, but unfortunately I’ve been in a position where I’ve been forced to create more problems for the users simply because the designer did not understand their craft or responsibility.

This is not a how-to article into the secrets of web design. Consider this a developer’s checklist of things I’ve noticed many designers to overlook.

Web as a medium

Design is not easy to begin with and trust me when I say that web is not the easiest medium to work with. There are many uncertainties, difficulties and limitations. As a designer you can either ignore or embrace them. Essentially this is the difference between someone who does web design and someone who is a web designer.

As a web designer, you’re not designing for yourself or your client. You’re designing for the users. Your job is to make their lives easier. A good designer solves problems and paired with a good developer builds a truly great user experience.

Web != print

You can’t treat a website like you would a brochure or a catalog. They just aren’t the same thing. For example in print you know the exact size of the page, whereas a website should work on a smartphone and a 27″ iMac. Think about that for a second. That’s the tip of the iceberg.

I’m not saying designing for print is easy, but I am saying being a great graphic designer doesn’t automatically make you a great web designer, or even qualify you for web the least bit.

Content is king…

Never rule with your design, always design for real content, real goals and real users. If contact information is important and your design doesn’t have room for it, your design sucks. I’m sorry, it really does.

I wish I knew who originally wrote If Architects Had to Work Like Web Designers so I could treat them to lunch. Designing without content means you’re merely guessing and if guessing is as good as you can do, you’re not being very professional.

And the amount of content changes

You can create a seemingly balanced design in Photoshop. Perfectly aligned columns, just the right amount of lorem ipsum, a main navigation that fits like a glove and oh’ how the date, title and excerpt of the latest news fits your design perfectly. It’s just that this is not how things will work with real content.

Even if you have the final content while designing, at some point it will change. Trust me on this. Will your design scale when the amount of content is cut in half, doubled or tripled? What if the user makes the text bigger? If building a multilingual site, keep in mind that word length varies from language to language.

The easy way out is to tell your client every page has to be 10-15 lines in length, all headings have to fit on one line, news articles should be summarized perfectly in 125 characters, they should shorten some foreign words and that annoying customer should get new glasses or just go to a competitor’s site. Right?

Design choices

Make sure there’s a reason for everything you do. Ask yourself what are you trying to achieve. You were hired to solve problems. What’s the reasoning behind that gradient background on that box with rounded corners, and why does the navigation have that specific font and the text shadow it does?

There’s nothing wrong in making things pretty, but beauty is in the eye of the beholder. Your client’s babysitter might not agree on the shade of green you’ve chosen, but if you can justify every decision you’ve made, then maybe you don’t have to change everything whenever someone new takes a look at your design.

Design reusable styles and elements

Whatever you design, aim for reusable styles and elements. Every single page doesn’t have to be the same, but usually there’s no reason to change navigation, typography or columns for every page either. You’re designing a site, not a collection of random pages.

Grid is your friend

This shouldn’t be a new concept if you’re a graphic designer and it’s equally important online. I don’t care what grid system you use as long as you use one. It can be as simple or complex as you want. The least you can do is design using a 10 pixel grid.

Not only do grids help you to create consistency between pages and elements throughout the site, they also take the guessing out of the process. “Is this column really 628 pixels wide on this page, when it was 619 on the front page, and is this 631 pixel wide image really supposed to fit in?”

What is navigation anyway?

Navigation is a user interface for accessing content on the site just like a door knob one is for opening a door. They both should be no-brainers. The last thing you want is to have your users looking for the navigation and trying to figure out how it works. Be sure to also tell your users which page they’re currently viewing at all times.

As with other content, make sure your navigations scale. As a designer it is your job to understand the difficulties of a horizontal navigation on a multilingual site with users opting for a bigger text size. When it comes to vertical navigations, keep in mind that unlike in your design, a single item might span two or even three lines with actual content And yes, news archives and product listings are navigations.

Finally, if you’re one of those designers who think they can save an average design with a clever trick, please stay away from designing user interfaces.

Are forms ugly and does it really matter?

You might think forms are ugly, but you know what? They’re usable and they work. People know how to use them because they’re always the same. Don’t try to reinvent the wheel, spend your time solving more important problems. You can design a pretty drop-down all you want, but if the users don’t know what it is, they won’t use it.

Browsers and CSS specification also set limitations when it comes to styling form elements. Focus on what matters. Solve problems, don’t create them.

Typography

Even though we have web fonts today, you should know your history. It’s called web safe fonts. While implementing the typography you chose is the developers job, being a good web designer also means you understand the consequences of your decisions, whether it’s loading times, legacy browsers or different platforms. If you have a good developer, I’m sure they’re happy to educate you on this.

A good typography goes a long way, but typography alone doesn’t make a good web experience.

Required pages and elements

It’s relatively easy to make a mind-blowing front page, but try to keep it up throughout the whole site. Design every important page and keep the experience consistent. The amount of designs depends on the content and scope of the site.

Much like designing the front page, styling the main heading and paragraph is only the beginning. Most sites use many elements, styles and even states, but here is the bare minimum you should design.

• At least two levels of heading, most likely more
• Normal text style and lists
• Links with normal, visited and hover stages
• Navigations with normal, visited, hover and current stages (all navigation levels)
• Depending on the actual content: form labels, fields, buttons and error/success messages, dates and other meta data for news, image captions, quotes, listings and archives, tables, breadcrumbs, prices, addresses…

What makes a good web designer

There’s an ongoing debate about whether web designers should know how to code. I believe that a web designer who understands what goes on in development – markup, CSS, templates and the basics of JavaScript – has a great advantage over one who doesn’t.

Web design is not just a beautiful layout. It’s every decision you make from the beginning to the end about every single detail, whether it’s usability, marketing, typography or content. Design is how it works.