Here Are My 5 Favorite Web Design Applications
The top 5 design tools and apps that I use on a daily basis as a freelance web designer and developer.
“Only a poor man blames the tools.”
It’s a common refrain among practitioners of all disciplines. And to be honest, there’s a great deal to be said about that.
A poor piano player, for example, won’t see a significant improvement in her skills just by playing on a Steinway baby grand.
And a mediocre web designer will still be mediocre regardless of how many new apps he downloads.
But even still — and with regard to web design in particular — the right tools can help significantly by streamlining your workflow and allowing you to work smarter, and more efficiently.
Professional designers should invest most of their time and energy creating beautiful, functional products for their clients — not on dull and repetitive tasks like wireframing or exporting design assets.
So without further ado, here are the top five tools that I use for my own personal projects and client work.
Some of these you might already know, while others may be brand new. But all have the potential to save you significant time and energy in your own creative endeavors.
Figma
Let’s start with the most obvious. If you’ve spent any amount of time in the wild world of web design, you’ve probably come across this application at least once before — as well as the perennial Figma vs. Sketch debate. (No guessing where I stand on that issue.)
But for those of you poor souls out there who might not yet be in the know: Figma is a browser-based collaborative design tool built for web designers, product designers, and graphic designers.
It’s got all of the bells and whistles that you’d expect from a full-featured design tool, i.e. version control, real-time collaboration, CSS export, and shared design libraries.
As a designer, I spend about 90% of my time working in Figma. I regularly use both the desktop and web interfaces to design wireframes, landing page mock-ups, and even quick .SVG icons.
One of my favorite features (and the one that has probably saved me the most headache) is the ability to send out prototypes as links.
This allows me to quickly solicit feedback on a design mock-up and allows my clients to easily interact with prototypes in their browsers, without having to download any .PDF or .PSD documents that may or may not actually reflect the final product.
Oh, and the best part? It’s completely free for individual users. Take that, Sketch ($99)!
Affinity Designer
Ever since Adobe moved its industry-leading Creative Cloud suite to an extortionary subscription-based model, I’ve been on a fervent quasi-holy war against the company, searching high and low for alternatives to its (admittedly fantastic) software.
That search has led me to discover Affinity, a UK-based software development company that has, in its relatively short lifespan, released some of the most impressive design software in recent memory.
To wit: The company’s first product, Affinity Designer, was released in 2014 and has already been dubbed the “Photoshop killer” by many within the design space.
It is a Mac-only vector-based graphics editor that forms one-third of the so-called “Affinity trinity” of design software — alongside Affinity Photo (released in July 2015) and the forthcoming Affinity Publisher (currently in public beta).
Affinity Designer comes with a clean, intuitive interface that’ll be familiar to anyone who’s used either Photoshop or Illustrator. It also supports a wide range of file formats, including vector standards like .PDF and .SVG as well as proprietary Photoshop and Illustrator file types.
For all of these reasons, and more, Affinity Designer has become my go-to application for any complex illustration or photo manipulation work that I can’t (or simply choose not to) do in Figma.
And unlike Adobe, the company won’t lock you into an interminable subscription. At just $49 for a lifetime license, Affinity Designer is an absolute steal.
Visual Studio Code (Updated)
With so many text editors currently on the market, the once-simple task of choosing just one has quickly become overwhelming.
I used Sublime Text and Atom for quite a while. But after trying out Microsoft’s Visual Studio Code (or VS Code) in Colt Steele’s “The Web Developer Bootcamp” online course, I became instantly hooked on the new tool.
Out of the box, VS Code boasts significantly better performance than Atom while offering a host of powerful features like native Git integration, terminal access, and a debugging console.
It can also be greatly extended in terms of functionality. Some of my favorite VS Code extensions include: Bracket Pair Colorizer to keep track of matching brackets, Prettier to format my code, and Live Server for live browser reloading.
To learn more about VS Code extensions, check out Elad Ossadon’s awesome article here:
All in all, I couldn’t be happier with the switch. As much as I liked working with Atom, Microsoft has probably created the most stable, powerful, and performant code editor currently on the market. It has done wonders for my development workflow.
Invision
Invision is, among other things, a prototyping tool that allows designers to collaborate with clients by presenting them with clickable mockups and a platform for providing feedback.
It also comes equipped with a robust design tool (Invision Studio), a shared design library (Design System Manager), and the ability to create shared inspiration or brand boards (Invision Boards).
Personally, I find the most value out of Invision Boards. They are incredibly simple to use, and they take the headache out of what used to be endless back-and-forth file sharing between my clients and me.
With just one simple board, I can quickly:
· Create a design presentation,
· Collaborate on a mood board,
· Share brand assets with a client,
· Gather inspirational content,
· And more!
In addition, Invision Boards support a wide variety of file types as well as HEX color swatches, font files, audio files, and even HTML, CSS, and JavaScript files!
They are a much more robust alternative to the shared Pinterest boards that seem so popular among many brand strategists and designers nowadays.
Interested? Get started with Invision today on their “free forever” plan, which costs (you guessed it) absolutely nothing.
Webflow
A (relative) newcomer to the world of professional web design software, Webflow was launched in 2013 in order to help designers create stunning websites without needing to code.
Yet unlike most other WYSIWYG (“what you see is what you get”) no-code page-builders on the market, Webflow is based on a distinct “code-first” philosophy. It is in essence not a page-builder in the mold of WordPress plug-ins like Elementor or Thrive Architect, but rather an intuitive graphical interface for writing semantic HTML, CSS, and JavaScript.
Even experienced web developers will likely find value in Webflow, as the platform allows its users to easily export and modify a project’s site code while also adding custom API and webhook integrations within a site’s Project Settings.
Those in search of a more full-featured selection might also look to Webflow’s CMS and hosting features, which allow for dynamic content, free SSL certificates, and a lightning-fast CDN powered by Fastly and Amazon Cloudfront.
Most of my client work nowadays is done in Webflow. I can’t even begin to quantify just how much the platform has saved me in terms of time, money, and frustration.
What’s more: Webflow even comes pre-packaged with a stripped-down “Editor” mode that allows clients to easily make changes to their site content without needing to contact me or edit their site’s HTML file.
And for that I’m eternally grateful.
Webflow’s free plan allows you to get started on two projects which can be hosted on the platform’s webflow.io subdomain. Additional features are available on upgraded designer plans, which begin at $16 per month.
So, there you have it. These are the top five design tools that have made the biggest impact upon my day-to-day work as a web designer.
What do you think? Have you tried any of these tools yourself? Do you have others in mind that you think I should try out?
Let me know in the comments section below.
