As I’ve mentioned in a previous post, I am a self-taught web designer and I often get messages from people who want to change careers or just want to get started web design industry don’t know how exactly how to do that or what sort of knowledge is required from a web designer today.

There are so many great resources available on the internet that it seems to be quite a daunting task telling apart the good from the bad and what’s the proper place and order to get started. I hope this guide will help with that.

So, let’s get going! Here’s what you need to learn:

  1. design theory
  2. SEO (search engine optimization)
  3. marketing
  4. coding basics
  5. design tools

design basics

Before we start, a word of caution: there are a lot of Photoshop tutorials on how to design a website layout so it might be tempting to get started with those, but one of their biggest disadvantages is that they don’t explain WHY, they only show you HOW. If you want to really learn how to be a good web designer, you need to start with the basics.

Color theory

Simply put, color sets the mood of a website. I think color is one of the most important tools you’ll have as a designer. The science behind certain color combinations is fascinating stuff, read on in the articles below.

Working  with photos

You will be working with photos quite a lot as a web designer and you need to be able to easily wade through thousands of stock photos and choose the ones with the best copyspace, color scheme, composition and that best match the rest of your design.

Tip:When using people photos in your designs, be aware that typical corporate stock photos (men and women in business suits shaking hands, the happy secretary,  the happy people working at callcenters, the happy multiracial team and so on) have become a bit of a joke – because of overuse everyone knows they’re fake and most look terribly posed. The general trend is to go with more “social” and “real” images, like real portraits of people working at a company instead of some terrible corporate stock. So avoid corporate stock if you can.

Typography

With the current drive towards a more minimalistic and simple designs, good use of typography has become a very important asset for a web designer. In fact, there are lots of great websites with almost no graphics at all, only carefully chosen, beautiful fonts.

Every font has it’s own voice and choosing the right one to deliver your content is essential. There are serifs (generally considered more uptight and serious), sans-serifs, handwritten fonts and more. Here are a few resources to get you started in the world of fonts:

Tip: I use a browser extension called WhatFont for Chrome to check out the name of the fonts I see and like on different sites I visit. There’s probably one for your browser as well.

Composition,  grids, whitespace and design principles

Now we’re getting serious! These concepts are part of the art of guiding a viewer’s attention where you want it to be.They’ve been used for centuries in paintings (golden ration), photography (rule of thirds), print and now web design.

Tip: It’s a good idea to use a tool or a service to take screenshots of websites or other works you like and inspire you. I use a program called LittleSnapper for that and my collection has over 1400 entries so far, everything from buttons, breadcrumbs, inspiring navigations, typography and more. You can also use services like Pinterest, Evernote and others.

Usability

Users shouldn’t be frustrated when trying to use your designs. Problems like unreadable text (small font size, low contrast), confusing navigation, hidden links all go in this section. Frustrated users move on and will take a lot of revenue with them so this is a crucial subject all web designers should be familiar with.

search engine optimization

Search Engine Optimization (or SEO for short) is a bit of a controversial topic in the web design world, but if you read the best practices and stay away from the nasty stuff, you’ll find that, like usability, SEO has a lot to do with common sense (use descriptive titles, make your site easy to navigate, use heading tags and so on).

Tip: Things change pretty fast in the SEO world so make sure the stuff you’re reading is up to date. For example, Google doesn’t care about keyword meta tags anymore, but most older articles put a lot of emphasis on them.

marketing

Every website sells something, an idea, a product, a concept. Good design is not just decoration, good design is about problem solving.

“Design should never say, ‘Look at me.’ It should always say, ‘Look at this.’ ”— David Craib

To become a great web designer, you’ll need to learn to think like a potential client. You need to be able to look at your work from an outside perspective and and ask yourself questions like… if I were a client, would I buy this? Does the header need to be bigger, the call to action button more obvious? Is the copy readable, should I increase the font size, contrast, or change the font?

Understand who will be looking at your designs and try to get into their mindset. Who are they? What do they want to do on this website? What information would they find most useful?

How did I learn this? Well, to be honest I don’t quite remember. I guess it just builds up over the years, with experience. You just need to train yourself to think like that and trust your instincts and when you’re wrong you try to figure out why and how to fix it. This kind of critical thinking is very important as a designer.

coding basics

The good news is that in this section there are lots of free good resources and tutorials available, I’ve listed a few below each section.

Learn HTML

Learn CSS

Learn basic JavaScript

Learn basic PHP

There are also some paid resources that will help you learn web design in an interactive environment, more similar to a classroom, if that’s your thing:

Tips: At this stage it doesn’t really matter what code editor you use. What is important is to learn how to code by hand and understand what you’re doing and why, so don’t rely on programs like Dreamweaver, Fireworks and others to write or generate even part of the code for you.

design tools

I use Adobe Fireworks for all my designs, but a lot of other designers use Photoshop or Illustrator, even Pixelmator. I personally think Fireworks has an easier learning curve and is more optimized for web design work than Photoshop, but it’s a good idea to learn more than one design app as each has it’s strengths and weaknesses and a lot of concepts like layers, objects, type tools, pen tools, color wheels and more are interchangeable so you won’t have to start from scratch.

Learn Fireworks:

Learn Photoshop:

Tips: A good way to learn is to try to replicate some of the websites you like.

Download as many Photoshop and Fireworks source files of tutorials, templates, free resources and peak inside to see how they were made – what filters, tools, blending modes, masking techniques, grids and so on were used, and also how it’s all organized in layers.

I think going trough all the menus and tool bars and doing the “what does this button do” thing is a very effective way of learning a new app, even more so than a doing a lot of tutorials.

You should also take a look at what other software I use regularly in my web design work.

So, that about wraps it up!

Let me know in the comments if you found this article useful or if you have any resources you’d like to add to the lists. And good luck in your new web design career!

Share this article