I'm sure there are a lot of people out there who could benefit from this information, so I decided to write a post about it.
These are the essential things you need to learn in order to become a good web designer:
- The principles of good graphic design and usability
- Using image editing software
- HTML/CSS coding
There are other skills that can improve your chances of getting hired, but without these 3 you can't even begin to call yourself a web designer. I'll write more about these skills in detail below.
Other skills a successful web designer needs are professionalism, good communication skills, curiosity, willingness to learn new technologies, creativity, lateral thinking, problem solving and a healthy dose of perfectionism. I'm sure I forgot plenty more, but this is what comes to mind right now. If you stumble into any bumps in your career path, check in with yourself how you're standing on these.
Bad news: You have a lot of work to do
Learning any new skill isn't easy. If it was easy, everyone would be doing it!
You might be a bit overwhelmed by all this at first. It's understandable, there are literally hundreds of books written about every single subject I've mentioned in this article and no, you're not expected to read them all. But if you are passionate about designing great web sites, you have everything you need in order to learn how to do it successfully. Don't do it just for the money, this is not a job that will make you rich overnight.
Great news: You can do it at almost no cost, all by yourself
A lot of us had to learn web design all by ourselves, because there were no schools that taught it at the time. And although university courses pertaining to web design, user interface design, interaction design etc. are taking their deserved spots in the curriculum, the web has still largely remained a do-it-yourself thing. The reason for this is that the technology is changing so fast, that universities find it difficult to keep up with it. While the principles of graphic design have remained pretty much the same since the beginnings of press industry (and some of them are as old as civilization itself), the technology changes every year.
A lot of great web designers I know (including myself) had no formal training. While university level design classes help, if you're unable to attend them because you don't have the money, or you have a day job that doesn't allow for that, you can get by with books and online resources alone. And let's not forget the online forums where design and development students and professionals meet and help each other solve problems — although you can learn it all by yourself, you don't have to.
Principles of good graphic design and usability
Knowledge of design and a sense of aesthetics is universal. There are differences in technology, but overall principles are the same, and most important topics you should explore in order to learn design are: composition, typography and color theory.
Of course this is just scratching the surface, and each of these topics is a very comprehensive one. I have linked plenty of free online resources below so you can get started right away.
Getting information quickly and easily is more important than pure aesthetics
Usability is the ease of use and learnability of a human-made object. — Wikipedia
It's more important for the content to be clear, and for the navigation to be understandable at a glance, than it is for the web site to "look fancy". While the user's first impression might be "Oh, that's so original!", after being unable to find the information he came to the website for, the enthusiasm melts and the user gets frustrated.
Better play safe and keep things simple, than "overdesign" things because you want to demonstrate your knowledge of all the Photoshop filters. Every element must have a very good reason for being where it is. If there is no good reason, get rid of that element.
If you've been into visual arts for a while you may think you don't need all this boring theory, but I assure you there's a reason why it's been around for centuries. If you know the rules, you will be free to break them when you have a good reason to do so to achieve a desired effect — you will not do it unconsciously, and achieve negative effects you couldn't predict.
Design inspiration, style and trends
As a creative professional, your job is to have a steady flow of inspiration available to you on a daily basis. Your main challenge is to consistently come up with original design solutions for your clients. Of course, this is something that you will get better and better at with experience, although some people are more inclined to this than others.
If you were focused on visual arts for the majority of your life, you will have a much easier time thinking visually and applying your original ideas. You will be more confident in using unconventional compositions, bold typographic solutions, bright colors and patterns, because experimenting is something you enjoy doing. You will pay attention to details, and won't be afraid to stand out.
If your background is mostly technically-oriented, this visual side may seem more difficult to grasp. You will likely focus on keeping things clean and minimalist, and stick to classic proven solutions, font combinations that you've seen used over the web, and conservative color schemes. If you use any fancy effects, you will probably mimic those you've seen used on popular web sites because you simply don't want to risk doing something "wrong".
An ideal web designer is a mix of both, but each of us a unique personality, and so we're all at different points in the visual-technical spectrum.
It will take some time before you develop your personal style fully, but the seeds of it will probably be obvious very soon. Especially if you've been into visual arts before, you will probably let this sense of aesthetic bleed into your work life as well. As a result you may attract a certain type of clients who will want to work with you because their business is a good match to your personal style. But this doesn't mean you should be a one-trick pony, and that you will only cater to one niche — such as travel, finance, or health & beauty. Sometimes you will be challenged to take on a client completely different from what you've done before, and this challenge is a good thing. Don't be afraid of it, we learn the most when we're out of our comfort zone.
Since developing a sense for aesthetics is something that is difficult to learn the way other skills are learned, you will have to learn by observing others. This means looking at "design inspiration" galleries and magazines on a regular basis to see what other people are doing. But the other part is learning why these people are doing it, and pure observation won't teach you that. This is something you will have to understand if you want to create your own visual solutions, and not just mimic other people's work.
Avoid making design galleries your only source of "inspiration". That's not real inspiration, that's influence. What often comes out of this influence are trends, and trends are passing — one year they're the "it thing" to do, the next year they look dated and démodé. If you want to make designs that pass the test of time, you should avoid following trends blindly. I'm not saying you should be oblivious to them, but don't rely your style on them too much.
Real inspiration comes from the inside. You are a unique human being, and what is going on in your brain is not the same thing that's going on in other people's brains. Use that to your advantage. Expose yourself to different mediums, and let various things influence you — the natural world, human and animal anatomy, man-made objects, books, movies, art and sculpture... And of course, the non-visual mediums as well. Can you imagine what the colors and textures of your favourite song would be? Try it!
- The Principles of Design
- Principles of Visual Design
- 45+ Free Lessons In Graphic Design Theory
- A 20 Minute Intro to Typography Basics
- The Elements of Typographic Style Applied to the Web
- Color Matters
- An Introduction to Graphic Design History
- Introduction to User-Centered Design
- Web Usability articles by Jakob Nielsen
- 8 Universal Web Design Principles You Should Know
Using image editing software
Image editing software is a matter of personal choice. While Adobe products are the industry standard, no one will think less of you if you prefer some other product.
In web design we usually use raster graphics software, because of their photo editing capabilities. Vector software is usually not needed, unless you really like using it. Some of the most popular raster graphics programs are Adobe Photoshop and The GIMP (open source).
There is another interesting option, Adobe Fireworks, which is no longer an image editing software as it used to be under Macromedia — now it's an application dedicated to web design, and you can even export CSS directly from it! Sound amazing, though I haven't had the chance to play with it yet.
To learn the software, you have to use the software. Personally, I think the best way to learn is through tutorials, where you follow the exact steps to achieve a certain result. Later when you've learned where all the important tools and features are, you will be able to create designs of your own.
HTML and CSS coding
There was some debate on whether designers who can't code can call themselves web designers. Various opinions and reasoning aside, if you're a newbie this really isn't a question at all. When you're a new designer, people aren't waiting in line to slice your amazing designs. You have to be an exceptional graphic designer in order to do just the graphic part of the job, and have someone else do the front-end development for you.
Now that we've got that out of the way, what should you do?
First of all, you do not need any fancy software, although it may help you with learning HTML at first. I started by using WYSIWYG (What You See Is What You Get) editors, and eventually I moved onto writing my own code. Now I use a text editor with syntax highlighting — there are plenty of those to choose from:
- Free HTML Editor
- Programmer's Notepad
- Netbeans - very bulky, but powerful, if that's what you like.
- HTML kit
- Sublime Text
If you prefer a WYSIWYG experience, you might want to look into one of these:
Web development is an industry in itself, and you shouldn't try to master both because that's quite impossible. But if you like wrapping your brain around abstract concepts, you might actually enjoy learning a bit of PHP, Ruby, ASP or some other web programming language just for fun. But this is something you should leave for later, when you're already very experienced in HTML and CSS.
CMS is required if you want to let your clients update their websites on their own. There are many open source options such as Wordpress, TextPattern, Joomla, Typo3 and many others, but setting them up might be challenging for a complete newbie.
There are also hosted (cloud) CMS solutions that you won't have to set up yourself — just register an account, and you're good to go. They range from free, cheap to expensive. We have our very own affordable solution Webiny CMS if you're interested.
But bon't concern yourself with this in the very beginning. At first you can work on static HTML pages, and as you gain knowledge and confidence, you can start researching various CMS options.
- HTML Dog
- SitePoint CSS reference and HTML reference
- CSS navigation techniques
- Essentials of CSS hacking for Internet Explorer — Unfortunately, you'll need it.
- Firebug — an indispensable debugging tool for Firefox, and a Lite version for other browsers
- When can I use...
- CSS3 generator
- 53 CSS-Techniques You Couldn’t Live Without
How to find your first paying client
Getting that first client is the most difficult thing — once you're past your first, getting others is easier!
But how exactly do you, as a newbie, find a client?
Step 1: Be your own client
Before you start offering services to other people, make a few projects on your own to sharpen your skills and prove that you are actually able to do this professionally. Make them something useful, not "just practice" sites that you will delete in a month.
Create a web site about a topic you're passionate about that might interest other people as well. The key here is to identify real life problems and solve them, just the way you would in a paid job.
Step 2: Offer pro bono work to local organizations
Pro bono means "for a good cause". When you're confident you can create a decent-looking web site for other people, look up some non-profit organizations in your surroundings — homeless or women's shelters, animal shelters, student associations, environmental or human rights groups, etc.
Some of them may have outdated ugly-looking web sites, others may not have them at all. Contact them and offer to help. Tell them you need more work experience, and that you're willing to donate your design services to them. If they say yes, ask them to prepare the materials that they want to publish on the web site — contact details, "about us", mission, and photos. You are not responsible for the content, so make sure they know that this web site is a team effort!
I would avoid doing free design for friends', relatives' or neighbours' companies, unless it's a really really good friend that you can be very open and honest with. The problem is these people often underestimate the value of the work you do, and will continue making demands on your time even after you've become a working professional. It can bring tension to your friendship, so it's best to avoid it alltogether.
Step 3: Prepare a portfolio
Once you have a couple of your own projects and pro bono web sites in your portfolio, prepare your portfolio website.
Your portfolio should feature:
- Projects: thumbnails, short descriptions, and links to live sites.
- Contact information: the very least is your e-mail and/or contact form, anything else is up to you.
- Information about you: your name, work experience, education (if relevant) and any other information you might want to share (just keep it short).
Buy your own domain and hosting — either yourname.com, or think of a "studio" name. Print out some business cards with your web site and e-mail address and go job hunting!
Step 4: Find local businesses that don't have a web site yet
Probably every local business has their own Facebook page, but not all of them have a web site. You will have to persuade them that they need a web site, because it's more professional, and they have complete control over the content and presentation. Facebook is good for engaging with clients, but bad for displaying your services.
Present yourself professionally, and don't undermine your credibility by saying things like "You know, you're my first real client" or "I've been only doing this for 6 months", even if it's true. If they ask, don't lie — but you're not obliged to disclose that you did all those projects in your portfolio for free.
How much should I charge?
This depends on different criteria, and one of them is the standard of the country you live in. What a professional designer with 3 years of experience in Croatia charges for a web site may be lunch money for a US American student.
My proposal is that you set an hourly rate that is, for an apprentice with some experience, twice the hourly rate of a worker in McDonald's, Starbucks or the equivalent in your country. These jobs have notoriously low pay and usually students do them. You're at a "student" level now so you can't really charge as much as professionals do, but since you're doing intellectual work that takes effort to learn, you should charge more than you'd earn as a waiter. Multiply this hourly rate by the number of hours it requires you to do a project, and you have your price.
But can you justify using an hourly rate if you work really slow? In the article I linked below a seasoned designer explains why this might not be a good idea. However it's a reference point on which you can base your project prices. As your experience grows, your hourly rate will grow, and so will the project prices.
How to properly apply for jobs
Whether you're applying for an in-house position or pitching for a project, same rules apply.
- Have an online portfolio set up. If your actual web site isn't done, make a temporary one-pager.
- Link project screenshots to real web sites. If the site is not live yet, put the HTML templates on your own site — screenshots alone are not enough, web is an interactive and flexible medium.
- Don't make a PDF portfolio and attach it in the e-mail.
- In case of a job application make a honest resume outlining your work experience, education and skills in a list form, not an essay form. PDF or DOC formats are acceptable. Avoid ODT for now because of old MS Word versions. You don't have to design a fancy colorful CV, I'd suggest going with the classic grayscale text on white paper that can be easily printed if needed, but definitely use your knowledge of typography and composition to your advantage.
- "Cover letter" in this day and age means an e-mail message — don't attach it as a document. Keep it short. Say why you think you'd be great for the job. Include a link to your portfolio and, if applicable, links to web sites you designed that are similar to the project you're pitching for.
- Don't sound desperate and needy.
- Use a spelling checker! A survey among the employers has shown that people tend to disqualify potential employees based on spelling alone, because employers believe that a sloppy resume means the applicant will do a sloppy job.
Here's an example of an e-mail application:
Dear Sir or Madam, (NOTE: if you know precisely who the recruiter is, use their name)
I am writing to apply for a (web designer job position at Company Name) / (web design project). I think I would be great for this position/project because I have experience in creating well designed and usable web sites and possess the skills, creativity and professionalism required to perform this job successfully.
My skills include graphic design for web in Adobe Photoshop, HTML and CSS coding, and use of jQuery libraries. You can read more about my skills and education in the resume attached.
These are some of the web sites I designed, that demonstrate my skills and (are similar to your project)/(relevant for the job position):
You can view more of my work on my portfolio http://yourname.com
I'm looking forward to your reply,
If you don't get the job, don't be disheartened, but don't be spiteful either. Even if you think your portfolio is more awesome than that of the person who got the job, there are many factors why the employer might have thought they were better for the job. Maybe they had more reputable clients, communicated better or offered extra services (graphic design or web development) that were useful for the employer. Or maybe your definition of "awesome" is skewed — it's common for junior designers to think "more effects" means better design, and to look down on clean, corporate design that is most sought for in the professional world.
Beware of design contests and spec work
There are certain web sites out there that are a platform for crowdsourcing cheap design services. I have never participated in such contests in my life, and wouldn't advise you to do it either, but it's your decision to make.
Inexperienced designers will often rather take the opportunity of a possible job and risk not getting paid for their work, than "do nothing". However, even if you do get paid, you will often get only a fraction of what would be a fair payment. But let's say you're a student and $100 for a website template is good enough for you. Your chances of winning are very low because you will be competing against dozens, sometimes hundreds of designers, and the "experience" you get in these kind of situations is not a "real world" working experience. It doesn't teach you anything useful about the client-designer relationship, actually it teaches you wrong things about our industry.
It teaches you that clients have the upper hand in the process, and that you should be happy to recieve any work, no matter how low it pays or how unreasonable the demands are. That design is like a competitive sport in which the "best" solution wins, and everyone else is a loser — when in reality designers collaborate and come up with brilliant ideas together. That your input in the project is strictly to make things pretty, and your role as an advisor is unwanted — after all, clients know what they want, they only need to see it done, right? Wrong.
Relationship between the client and designer should be a cooperation, and you are not just an interface between the client's brief and the computer. You are a person with knowledge and experience that is valuable in identifying and solving problems that the client isn't even aware of (because that's not his job). As a newbie these things won't be so evident, but after you have a lot of projects under your belt, you'll realize that you can anticipate the clients' needs even when they themselves don't know they have them.
I would recommend that if you have free time on your hands, you invest that time in learning a new useful skill, or work on your personal or pro bono project that is interesting, exciting and could bring you new opportunities. Spec work and contests rarely do that.
- "How much does a web site cost?" and other pricing questions
- Are You Making the Most Common Pricing Mistake?
- Getting to your minimum hourly rate
- Hourly billing
- What is Spec Work?
Here are more resources that didn't fit above. If you have any other suggestions to add to this list, let me know in the comments!