Colors are important in so many places, and not just the creative world. However, the tools listen on ColorMatch are primary with focus on Web- and Graphics Design. And since I often get asked about my favorite web design tool, I thought I would also make a quick list of the tools that I use.
Before I start this list of my favorite web design tools, I want to mention that this list is not to be seen as the absolute best tools - it's just the tools I use on a daily basis. Also, I think I should describe my journey into web design to put my web design tools into perspective. Your choices and the perfect tools for you might be different depending on your story and the work you do.
Click here if you want to skip to my tools list.
I created my first website in 1996 and it became quite popular. Mostly because there weren't many Danish sites around at that time. The design was really terrible, but so was most websites back then.
Originally I was working as a Windows Developer, but as my hobby website became increasingly popular I had to put Ads on the site to support it financially. Overnight I started to earn more from my Website than from my regular job, so I had to start a company in 2006 for tax reasons.
I started to learn how Design and User Experience impacted the popularity of my website, and I became more and more interested in designing webpages. So I started to create Websites for other companies, and as my skills increased so did the demand for my work.
Today I run a Danish Web Agency with a focus on optimized web design and digital strategy.
As a former Windows developer, I was of course completely into Windows and Microsoft. And in my opinion, Apple was crap, I even made fun of the iPhone when it was released, because my Qtek smartphone ran Windows and could do so much more. However when the first iPad was released I bought one and really liked it, so I also bought a Mac and soon I liked the operating system more than Windows. The funny thing is that today I am completely in the Apple ecosystem, and this of course affects the tools I use for web design.
I also want to mention that I used to be a heavy user of Adobe. I started to use what was then Macromedia Dreamweaver and Fireworks, and continued to use the software when Adobe bought it. And then I started to use other Adobe tools such as Photoshop and Illustrator. I had just upgraded to CS 6 when Adobe announced that they were moving to their subscriptions based Creative Cloud. I was not a fan of that move, so I started to look elsewhere just in protest. And today I am completely out of Adobe products, even though I still think their products are great - that's why Adobe is not on this list.
Sketch is probably one of the most used platforms for web design prototyping. Sketch is built especially for creating UI design for Web and Apps.
I primarily use Sketch for prototyping and discussing designs with clients before doing the actual coding of a website. I often create small vector graphics directly in Sketch because I might as well do it directly there while prototyping.
Adobe has come a long way with their Adobe XD, but for now, I am sticking With Sketch.
Affinity Designer is my go-to tool when working with vector art. For the price, this is a really good value, and I think most people coming from Adobe's offerings will find it easy to switch.
The is also a version for iPad, however I don't use that at the time of writing this.
While Affinity Designer is good for vector graphics, Affinity Photo is great for working with photos. It's actually a decent alternative for Photoshop. The great thing about Affinity's products is that they work so well together while being focused at what each app does best.
Pixelmator was one of the first apps I used when switching to Mac. Today I have the newer Pro version.
While I have primarily moved to Affinity Designer and Affinity Photo, I still use Pixelmator since there are some things it does better, or alt least some things I do better in Pixelmator since I am so used to it.
I am not very good at sketching, so I often use Balsamiq to do quick wireframing. I often do this while sitting with my client. It doesn't look like much, but it's a great tool to quickly plan an interface and make sure that the client and I are on the same page.
When working as a Windows developer I used Visual Studio all the time. So When Microsoft released Visual Studio Code for Mac, it became my favorite editor.
I have tried different editors over the years. I really liked Panic's Coda, but then they just stopped developing it, so now I just use Visual Studio for almost everything.
I sometimes use Pinegrow Theme Converter when I have a static website that needs to be converted into a WordPress theme. This app makes it so easy and less timeconsuming to create great WordPress themes.
I am not a fan of WordPress theme builders, as they tend to rely on plugins and often impact the overall performance of the website in a negative way.
When I have to do file transfer I use Transmit from Panic. Not much to say about it, it just works and takes care of all my SFTP needs and also works well with cloud services such as OneDRive, Dropbox and Google Drive.
ImageOptim is a small app that is great to reduce image file sizes so they load faster while still preserving quality. Its also great to remove image junk such as EXIF data, comments and unnecessary color profiles.
Flowmap is great for creating sitemaps and user flow graphs. Its very usefull when thinking about and discussing the user-journey with clients
I use Markup for feedback and collaboration when designing a new website. Its easy to use for clients and help me deliver a better product faster.
As a web designer, a browser is probably one of the tools I use the most and my browser of choice is Safari.
Naturally, I have also installed most other browsers such as Firefox, Edge, Chrome etc.
I used to be a Windows developer as I mentioned earlier. And a have created a few Windows applications that help my web design workflow and automates some of my work. I never got around to learning how to code Mac apps, so I just use Parallels Desktop to run a version off Windows 10.
With Parallels I can easily use my own Windows applications side by side with my Mac apps. And I have quite a few Windows apps that I have made for specific uses and they play a very important role when I do web design.
Sometimes I collaborate with inhouse web designers from the companies I work with. And then we often use a tool like Figma. It does kind of the same as Sketch but stands out when you have multiple stakeholders in a project.
I have been playing around with Webflow a little. Its a visual website builder, but it works in a way that produces clean code. So you can easily create a quick landing page or even build a complete website, and then download the code for further development in your favorite code editor.
I dont use their CMS or Shop integration eventhough it sounds compeeling. The reason is that it can not be selvhosted and I don't like the idea that a website can only be hosted one single place.
While not really a web design tool, I use Ahrefs during web design when I update an existing website. This is helpful with website structure, content research and competitive analysis and more. I believe it's important to think about how a new design can impact placements in search engines positively right from the start.
It's an old favorite tool to create responsive designs. But I use a lot of other popular frameworks depending on each specific project. I think they belong on a different list just as I have a separate list for color schemes tools, but just to mention one, I think it will be Bootstrap.
There is also a lot of online services I use, they are also not included on this list.
