After spending many years working as a web designer, I learned some hard lessons. In this article I want to share some of those lessons with you and save you some time.
Web design isn’t some magical process, it involves being very organized and doing things with intention. It also involves having a strong backbone for things like feedback and comments from other designers.
Because design is subjective to things like appearance and personal preference, it’s not uncommon to run into clients or work that does not mix with your set of standards. Most web designers have a higher set of standards than clients do.
So if you are brand new to web design but you want to know what web design is all about this article will dive in and cover it for you.
Your organizational method
Before we talk things like coding, Photoshop or anything that involves web design, you need a strong background in organization. Websites are houses for clutter and it’s your job to make sure that clutter is as organized as possible.
This is something that most people can’t just learn overtime. It takes several trials and errors before you learn that the more you systematize your process the better off you will be. Keeping things organized is essential for anything that involves web design.
Are you using things like a planner? If so, great you are more of an analog person who focuses on writing things down. I am both analog and digital which we will discuss but I prefer to write things down. Seeing a list is often useful for me to make sure I am staying on task with everything I need to get done for the day.
Do you use software? If so, this great. Most software now comes in the form of apps which means you can use them with your cellphone. Depending on the application you might do everything from your phone which is a great benefit to someone trying to plan something.
Do you use a whiteboard? Some people like visually seeing a giant board with the days markings on it. It helps them better understand what they need to get completed. They may be more visual than written which can help.
The point of all this is to keep you organized which can be one of the most important parts of doing any web design work. If you are not organized then you won’t survive running your own web design business. It’s a core attribute of web design.
Understanding Color Theory
Most people who start in web design will have a basic understanding of color. While this might not seem like a skill you need to learn, studying color will help you.
When I went to school for graphic design, we spent several hours just learning things like color theory and what works well with one another. If you struggle with this, there are several websites that can help you solve this problem.
Coolors.co: This website allows you to generate a color scheme fast. You can generate the colors randomly for inspiration or you can browse other colors that people have put together.
Colormind.io: This website picks colors based upon deep learning from popular photographs and pictures.
Paletton.com: Is a website that is much harder to use than the ones above but offers a different look. You move the dots around to see the different color combinations.
It’s important to note that these are just a few of the color generators you can use for your website or project. There are plenty of more that allow colors from things like pictures or even other websites.
Learning about colors can not be understated. You should spend a decent amount of time studying it to learn what looks good and why that color looks good.
How to use web fonts
Unlike a standard traditional PC or MAC, there is a few safe web fonts that designers have at their disposal. A long time ago this list was short but today, the list has grown but is still limited.
Every font that works on a PC or MAC doesn’t work on the web. One of the best places to find a list of the more common web fonts is on Google Fonts. This website contains a list of fonts you can use for your projects that are all open and ready to be used for the web.
There is about 915 fonts are on the list but on PC/MAC there are probably hundreds of thousands. While there are workarounds for using special fonts on the web, the process can be drawn out for most people. Choosing a font that is listed on Google’s list is often a better solution than trying to use a special font.
When you are working fonts, it’s important that you understand things like font sizes and how to code these sizes. Font size can be a headache but keeping a list of sizes you commonly use can save you time.
As you work on more and more projects, you will want to make sure you have a baseline of font sizes to fit the project rather than picking sizes out of a hat.
Your website platform
It’s true I am biased to WordPress as my platform of choice but there are plenty of designers who use other things. I would recommend that the regardless of the platform you choose, you learn it and master it. Each platform is going to have its own process and problems depending on what it involved in the project.
Some customers will want help with things like Wix or Squarespace and be the one to help them out. Others will want help with things like Drupal or just plain HTML sites.
There are millions of ways to create a website and not one signal option that exist is the right one for every single website. Each project will have different demands and should be looked at differently. If you want to learn a technology such as Wix or Squarespace then I recommend you do.
Never let other designers tell you what you should learn. Make your choices and stick to your guns regardless of what is popular or right. I work with WordPress and not Drupal because I do not have the time to learn it.
Software that builds websites
Depending on your process and the websites you are building for clients you will often find yourself needing software. This software can come in the forms of things like WordPress which is open-source or it might be products like Adobe Photoshop to sketch the design of pages.
Each project like above is different and will require different tools to complete your projects. Before you pay a bunch of money for a certain software, I would recommend that you try with free or trial software first. Some of the best software on the market is not useful for every single project which can cost you.
You need to find software that allows you to work faster and more efficient. Most people forget about this and get shiny object sydrome. There is no hard and fast rules, sometimes you will need things but I would say try without first and see if you can’t find a free alternative.
Nothing worse than wasting money on something that you did not need to waste money on. If you will waste money, let me recommend a few products that are likely to be in demand for web design.
Adoboe Photoshop: A program that covers many avenues of design and allows you to visually build out your pages. You will still need to know how to code them to make sure that the pages look like they do in Photoshop. But most would argue this is a must have for web design.
Sketch: Sketch is a popular program that only runs on the MAC. It is superb at what it does and seems to be an in-between of Photoshop and Illustrator. I have no experience using Sketch but I know it is great.
Affinity Photo: This is a cheaper Photoshop alternative with a much lower price. While the program doesn’t have all the bells and whistles of Photoshop, it covers most of the bases. I used this constantly and love it.
While this list is not exhaustive or even complete, it should give you a start into the world of web design and give you at least somewhere to start.
Technologies you should learn about
Below are a list of web technologies you should dive into and study before trying web design out on your own. I could list several websites that will teach you these technologies but it’s safe to say you can Google that.
WordPress: If you are new to web design I would suggest learning this. Not just because this website is about WordPress but because WordPress powers over 30% of websites on the web. If you want to learn web design you have to at least have a basic knowledge of WordPress.
Wix/Sqaurespace: many can hate Wix and Squarespace but there are several users that use these easy to build websites. I would love to say you don’t have to focus on these, but the marketing for these companies are not going away. That means that as time goes on, they will slowly chip away at the total number of websites made by them. Don’t expect either of these solutions to disappear anytime soon.
Drupal: Drupal is another popular website manager in it’s own right. It’s often used by people who really never cared for WordPress or wanted something different. I would highly recommend that you are at least aware of it.
Hand-Coding: Hand Coding is something that is a bit of a fundemental thing for most designers. If you haven’t hand coded a website then many designers would argue that you are not a web designer. Knowing how to hand code something comes with a lot of struggle but the benefits are very important.
Once again these technologies are not all of them and I couldn’t take the time to list every single website because there are just so many. But once you start with these you will find others that you will need to learn.
Building Your Web Design Process
If you have ever asked on a web form such as Facebook groups or just searched forums you will find that the web design process is often a very secretive. Most designers do not want to give up their process.
This is because many believe by telling you how they do something that they are giving up secrets. In truth this couldn’t be further from what is really taking place.
My web design process is very simple and I keep it that way intentionally. I haven’t found a reason to switch and I’ll let you know what I do in phases. This is how I perfer to structure my web design projects because it keeps everything orderly.
Phase One: Discovery
I sit down with my clients usually over the phone or at a small coffee shop and ask them a list of questions. Sometimes these questions are scripted and other times I try to be friendly. I allow them to talk while I listen and take notes of some type. This could be digital notes or I could record the whole conversation to play back later.
Every bullet point that the customer hits on, I will make sure to break down and make them tell me why they want that. Often asking the simple question why will let you dive deeper into the project and find their concerns. After I have figured out as much information as I need we part ways so that I can usually give them an estimate of some type.
Phase two: Planning
During the plan phase I will submit my estimate to my clients for review to determine if we need to tweak anything with their project. Price is always a factor with everyones projects so it’s not about you going down in price. It’s about adjust the project to meet the pricing of the customer.
If someone want to pay less they certainly can, but that also means they get less work out of me. I don’t waver on my pricing structure. Everyone has different needs and demands, a customer can easily find another designer as I can easily find another customer. Not all customers and designers are fit for each other, learn this now.
During the planning phase I will often go over the details of the first meeting and start planning the website on paper. I will create a sitemap or structure of the site. Once the customer has agreed to the terms of the contract and given a deposit then work will begin on wireframing.
For those who are new wire framing is a way of creating a very basic structure and layout of a website. Graphics and colors will often be wrong but the purpose is to get a basic idea what each page will look like.
Phase three: Designing
Once the customer has approved the wire frame and we are in agreement over the project we will move to fully designing the site using whatever techology they want the site done in.
This is often the longer phase as there is a bunch of different ways to handle this. You can either let the customer see pages as they are complete or show them the whole thing once it’s done. Over eager customers will want to see some know of progress to make sure the project is going smoothly.
While I don‘t typical show customers page by page I will ask them if I have a question and give them a preview.
During the design phase you will also run into revisions. Customers of all shapes and sizes will have revisions no matter what the project is. This can be expected and is often broken into rounds of revisions. You will batch these to save on time.
Phase Four: Launch
In this phase we will take the approved final website and clean up any existing issues. We will also move the website from a local server or demo site to the live website. This will require you to have backups of everything in case something breaks or goes wrong.
Always make backups, it can be the most important part of this process and it will only take one screw up to make you wish you did.
During the launch, I will also make a video for the customer showing them how their website works and going over small details. Normally this is about 30 minutes to an hour depending on the size of the site.
I like videos because they can go back and rewatch these over and over again which saves on time.
Phase Five: Follow-up
Many of my website projects come with limited amount of support to make sure that I follow up with the customer. I help resolve simple issues that the website might have and walk them through any questions.
After the first month I typically charge for on-going support which comes at a monthly rate with no long term contracts. Customers are allowed to pay for one-off type projects but these come at a higher costs than the monthly rate which is much more discounted to encourage month to month billing.
Payments for website design
Getting paid is one of the corner stone of doing any project. The reason why you are doing what you are doing is because you want to get paid. Web design leads itself to be something that someone can do on the side.
The difference between someone who is an amature to a professional is the payment system. Amatures will often be late billing or have troubles excepting payments.
There are hundreds of differenet ways to take payments from clients but below are some of the most common:
Paypal: While some people will not enjoy paypal due to certain country restrictions it is the most universal way to accept payment from someone. It allows invoicing as well as very easy payment processing.
Square: This is another very popular payment processor. I have never used them but I know their credit card reader was once a hit among people starting businesses.
QuickBooks: Quickbooks is an industry leader in taking payment and also issuing payment and taxes. Theres a reason it is king that industry, it’s one of the best pieces of software when you are running a business.
Freshbooks: This is an established company that has taken on Quickbooks and really put a dent into their market share. Freshbooks is completely online based but it features many of the same things that Quickbooks has.
Figuring out the details
Handling things like contracts, freelancing rate and other are subjects that could be their own blog posts. If you are interested we could dive into these topics in the future if enough people wanted to know about them. I would recommend for now trying something like the library or just Googling it.
Expect to read lots and lots of opinions about these subjects because there is no shortage of information.
Conclusion
I hope this article has helped you get started on the road to becoming a web designer. While we didn’t talk about things like HTML or CSS. I think it’s a bigger issues to get the basics down of things like ogranization and process. You can always learn the rest as you are working on projects but the other things listed above need to happen before.
I would highly recommend that you use resources like Linda or Udemy to learn the basics of web design and then get out there and find clients. Start advertising that your interested in taking on work.
Nothing will help you grow faster than real projects. If you want to learn more about website design we focus on that on our blog while also talking about WordPress.
