What do you need to be a web designer?
To become a web designer you’ll need the right toolkit as you build up your education, experience, and portfolio. Whether you are pursuing a life of freelance or dream of eventually landing a full-time position, it’s a good idea to become familiar with the relevant tools.
Understanding which tools are crucial to learn was hard enough when this article was first written in the mid 2000s – notably, before the rise of web apps like Canva. Now the options seem infinite... and infinitely expensive. So, where should you begin?
In an ideal world, you’d have the time and money to invest in learning them all, but that is simply not realistic.
All this considered, I have updated this article to the best of my knowledge and understanding of this rapidly expanding industry to offer insight and perspective on where to begin building your freelance designer toolbox. While my focus is on full-stack development these days, I continue to do a fair bit of design so I think I can still weigh in on the topic.
Your Role as a Web Designer
“Web designer” is often thrown around with little regard to what it actually means. There are many stages to building a website, and where the web designer comes in entirely depends on the structure of the project.
Strictly speaking, a web designer’s focus is on the aesthetic design with a focus on real-world application so that those designs can come to life in a user-friendly way. However, especially nowadays, a web designer may play a role in many parts of the website creation process.
- Information & Planning: Why is this website being built? What pages, content, and features does it need to meet that goal? Who will be using the website, and on which devices?
- Aesthetic Design: Applying branding to the user experience defined in Stage 1 to establish the visual elements the developer will need to build, creating detailed mockups of unique pages and style guides for dynamically rendered pages where content may be slightly different every time.
- Content Creation: Filling the website with real content and ensuring there are all the right text and visual elements prepared as defined in the design stage. This may include photo-shoots, filming and editing video, and copywriting.
- Making it Functional: The web developer, often the same person as the web designer, then takes the design and content to build the website to its full functionality.
- Testing and Launch: Finally, the website gets tested as rigorously as possible before going live.
It is important to establish exactly what roles you will be filling before agreeing to become a web designer. Some people think the web designer does all five steps in full!
Others are looking for a niche designer who focuses on being extremely good at one or two steps of the process. For example, user experience (UX) design is different than user interface (UI) design.
Because of all this, it is important to choose what skills you want to focus on developing and be very clear in what that skill set is when offering your services or accepting a new job role.
All of this is complicated by the introduction of “no code” website building options, which is an entirely new skill meshing the design and functionality phase together using special hybrid services. If you are interested in taking that direction, this article is not for you.
The following recommended tools and software are my core recommendations to start with no matter which skills you’d like to excel at as a web designer.
1. Design and Image Editing: Affinity
No matter what direction you take in your designer career, you will need to use some kind of design software! That is, software where you can create and manipulate graphics and layouts.
Official Software Recommendation: Affinity by Serif
What, not Photoshop?? It is true Photoshop still seems to run the world of design and yes, it is likely that you will be expected to use it at some point in your career.
That being said, Adobe is extraordinarily expensive, locks you into its subscription ecosystem, and you do not actually need it to develop world-class design skills. This is particularly true if you plan to focus on freelancing, where nobody can dictate which exact tools you use.
Affinity by Serif is my enthusiastic go-to for all things design ever since I finally untangled myself from Adobe at the end of 2022. They sealed the deal for me as a customer when they released their Universal License. For under $200, you can pay once for a lifetime license for their entire suite and use it across Mac, Windows, and iPad.
Compared to Photoshop’s subscription fees, it paid for itself in half a year. That’s math I like to do.
Affinity has some workflows which differ from Photoshop but it is extremely powerful and professional software, and the skills you learn on it will easily transfer over if you ever decide that Photoshop is worth the ever-increasing subscription prices. (But in this economy? I’ll never go back if I can help it!)
Get started with Affinity → 1-Time Payment | Windows, Mac, iPad
Runner-Ups
If you are serious about a career in design, I highly encourage you to spring for Affinity. However, if that is not in the cards for you, here are a few alternatives.
Canva
Canva is becoming a go-to for many casual designers and is a good place to begin if you have no other options and need to create visuals quickly. It originally began as a web-app but now has options for desktop, tablet, and mobile.
If you are interested in occasional design, you’ll find this an excellent starting point complete with many free resources and templates.
Get started with Canva → Free Starter Plan | Web, Windows, Mac, Android, iPhone, iPad
Gimp
This open source software is a nice, powerful alternative if you can't afford Affinity or Photoshop.
Get started with GIMP → Free | Windows, Mac
2. Source Code Editor: VS Code
Even if you never get into heavy coding as a designer, there is a good chance you’ll need to at least learn basic building blocks like HTML, CSS, and simple JavaScript. That means you’ll be editing source code. For this, you’ll want a solid source-code editor.
Official Software Recommendation: Visual Studio Code
Alas, all my favorite independent open-source source code editors have come and gone like the passing winds. Visual Studio Code, also called VS Code, is owned and managed by Microsoft and I had to pick it up for a new job a few years ago.
It is powerful, comes with excellent extensions, and integrates with nearly every library I’ve needed to use in my projects as a developer.
Get started with VS Code → Free | Windows, Mac
3. FTP Client: FileZilla
File Transfer Protocol (FTP) is something you will likely have to use at some point to upload and download files from the server where your website projects are being hosted. While it will not be relevant on every project, it is important you have the tools on hand and know how to use them for when it comes up.
Official Software Recommendation: FileZilla
Side note: If you are getting serious about building websites and considering moving more into a developer role, you will also want to learn the basics of SSH and git.
If you use Mac and are willing to invest, Transmit is a dream to use. Meanwhile FileZilla is a solid free option for all platforms!
4. Domains: NameCheap
Even if you are just buying a domain for your online portfolio, chances are good you by a domain at some point in your designer career.
Official Registrar Recommendation: NameCheap
Typically, you buy domains for a year or more at a time and owning a domain gives you sole precedence to renew ownership when that time period is over. Once you allow it to lapse, others can register and own it instead. These ownership subscriptions are run through domain registrars.
Choosing a trustworthy registrar is important. The cheap guys often turn out to have shady business practices, which the sneak into their contracts when you buy the domain, and you may wind up without a domain at all.
My favorite thing about NameCheap is their lenience on allowing you to grab back a domain that you accidentally let expire.
5. Hosting: It varies!
When choosing a hosting service for a website, there are so many things to consider, particularly whether or not it is a static website.
Static/Serverless Sites: GitHub Pages, Netlify, Vercel
If you are using a static site generator like Jekyll or Gatsby to build websites yourself, there are a lot of free or inexpensive ways to host them:
For example, the dorko.dev blog now runs on Gatsby and GitHub pages using a customized deployment workflow.
You can learn more about getting started with manual deployment here and how to then set up a workflow to deploy automatically here.
WordPress Websites: SiteGround
After nearly 10 years as a dedicated HostGator customer, I found that their packages and services weren't for me anymore. I switched all my own hosting over to Virtual Private Servers (A Small Orange, then DigitalOcean), but still needed options for my clients who ran small websites on shared hosting.
For that, I turned to SiteGround. It is relatively affordable, usually has good new customer offers, and has offered reliable service over the years.
Other: DigitalOcean
As I mentioned above, I eventually turned to Virtual Private Servers to run my own projects. These days I use a DigitalOcean droplet and DigitalOcean apps to run all my various personal websites that don’t make sense to host on one of the above options.
I find it is the most affordable bang for my buck with maximum flexibility, but it does take a lot more technical knowledge because you’ll need to additionally learn server management and invest the time maintaining your server.
Get started with DigitalOcean → Start with a $25 credit to try it out!
Note: This one is a referral link, as I use and love this service.
Wrapping Up
These are the resources I've found work best for me over the last decade and a half in my career as a web designer, developer, and online marketer.
Have you tried any of these so far? Which are your favorites?