If you’ve spent time surfing the web over the past five years (and we know you have), you’ve probably taken notice of the rise of sophisticated, yet simple to navigate websites.
You may have also noticed those sites have become more vibrant, better to look at and offer the end user a more enjoyable overall experience.
Ever wish you could do that?
For many years, the thought of designing a website was akin to sorcery or dark magic. Something better left to those who toiled in the darkness, conjuring up endless globs of graphics that came together in a workable mass to make your spectacular cat gifs shine.
Okay, maybe not the best description, but let’s just say that designing a website was not always the most straightforward task to complete.
Forward to today, and we live in the time of lollipops and rainbows, where cat gifs are still very much a thing, but so too is easy-to-use web design software.
All kidding aside, the leap forward in do-it-yourself web design has been tremendous. Plenty of tools exist that cater to all skill sets and levels of expertise.
A business can now take their web design in-house and own it themselves without having to task (and pay) multiple firms to do it for them. Or individuals who once wondered why they couldn’t create their own presence on the web, can now do so with ease.
Are We Talking Web Design or Web Development?
Before we get into the numerous programs available to help with your web design, let’s first clarify what exactly is web design. It often gets confused with another, equally important part of website building called web development. While the two work in service to each other, they are very different.
Web design directly relates to the front end or user-facing portion of a website.
The central focus of a web designer is to make sure that a website looks good. But their tasks are not strictly limited to appearance. A designer also focuses on how a site navigates or how users interact with it and whether that’s a positive experience.
The web development role deals with both the front and back end of a website and works specifically to build out its structure and functionality. In other words, the developer takes the designer’s plans and creates a functional site using code.
It’s easy to confuse the two very different roles, but it’s essential to make the distinction. Although most specialize in one specific area, the best designers will have a basic understanding of the building of a website. It enhances their designs and ensures they are creating an excellent experience for the end user.
Conversely, genuinely great developers have an eye for design, and even if it’s just a simple appreciation, it will better inform their coding for a given website.
With a better understanding of who a web designer is, what about the different elements that help you create that perfect website.
Software, Services, and Website Builders
We are breaking down our list into three distinct sections to hopefully make it easier for you to discern what’s what, as there can be some overlap.
When talking about website design, people are usually referring to one of three things: software, services, or all in one website building platforms. Collectively these are typically referred to as web design tools. Individually they carry some distinctions.
Design software is a specific program you can download or use online to create a website design. If you’ve ever heard of Adobe Photoshop, then you know what we’re referring to here.
Web design services offer different elements that can help enhance your design without you having to create that specific item or detail. You can typically source things like backgrounds, icons, or different effects with these services.
Finally, website building platforms are an all in one solution that provides you a choice of design templates from which you manipulate certain elements to flesh out your website. These have become incredibly widespread in recent years leading to a boom in site building.
With that clarity in hand, let’s explore what software and services are out there, both free and paid, so you can finally get to work on that website you’ve always wanted to make.
Web Design Software
We will start things off with the top choices for web design software, both free and paid. There’s a lot variation in services, with some being incredibly broad and able to handle almost any project and others that are much more narrow.
The critical thing to focus on when choosing the right solution is the type of commitment you want to make. If your aim is to create stripped down website mockups, free software will most likely work best. The Adobe products, while great to have, may be far more than you need, both operationally and from a budgeting standpoint.
Conversely, if you’re building a design business or in an organization with a diverse set of design needs, then the more powerful paid solutions certainly make sense.
One last note, unless otherwise specified, all programs work with both Mac and PCs.
Adobe Photoshop ($20.99 /mo)
If you’ve heard of nothing else on this list, we’re going to bet you’ve at least heard or know of Adobe Photoshop. This software is the big behemoth of design and one of the most widely used resources for all manner of projects.
From graphic design to image editing, if you were to own only one piece of design software, Photoshop is it. The best feature about it is that you could theoretically design pretty much whatever you want for almost any type of project.
Seriously, we’ve been using Photoshop for several years, and probably still haven’t scratched the surface of its ultimate capabilities.
For web design, it is an incredibly flexible tool that gives you plenty of room to stretch your creativity.
If there’s a drawback to Photoshop, it’s the learning curve required to reach its full potential. It’s a real blank canvas program, where you are indeed creating something from nothing. It helps knowing a few things about design and not being afraid to get in the weeds during the creative process.
Regardless, its time well spent to learn Photoshop, and if you’re creative, it should be a must have software to ensure you generate the best web designs possible.
Adobe Dreamweaver ($20.99 /mo)
Dreamweaver is Adobe’s dedicated web designer, helping you sort through all the particulars including coding, design, and publishing. Where Photoshop is considered the best overall design program, Dreamweaver is the top recommendation if you’re only seeking something strictly for websites.
Its explicitly tailored to the task with features including an easy to use coding interface, a live view, support for HTML, CSS, and JavaScipt, and the ability to download and upload files to and from servers easily.
If you’re looking for the best software tool to design websites, regardless of skill level, Dreamweaver should always be part of the conversation.
Adobe XD ($9.99 /mo; also a free option)
If you’re at the front end of UI (User Interface) or UX (User Experience) design, Adobe XD is a reliable solution for both websites and mobile apps.
XD offers a particularly strong set of features if you are an app designer, providing everything you need to create, edit, and preview your work on iOS or Android devices.
You can also download kits that include templates for building a positive UI experience for the end user. Included are kits for mobile apps, wearable tech and customizable web features like dashboards.
Adobe Illustrator ($20.99 /mo)
This typically would be found under design services but with Illustrator an integral part of Adobe’s Creative Cloud suite of products it fits here as well.
Illustrator is a vector graphics app that allows you to develop and edit all manner of images and illustrations for your web pages. You can also utilize the software to build site mockups or to create icons, logos, and typography.
While it’s not the most comprehensive resource on our list, it’s definitely an excellent addition to your web design toolkit to help breathe additional life into any project.
Note: The Adobe Creative Cloud is a monthly subscription service that gives you full access to Adobe’s suite of design programs, including everything mentioned above. While you can subscribe to or buy individual components, the full Creative Cloud subscription costs $52.99 per month.
Though it provides several incredibly powerful tools and all the design functionality you would ever need, professional designers or design firms or large corporations would stand to reap the most benefit from that package.
Sketch ($99 for initial one year license, Mac only)
If you’re a Mac user, Sketch provides a nifty solution for pure web design. Somewhat similar to Photoshop though far easier to use, Sketch has a great interface that is comfortable and easy to learn for novices.
Experienced designers will also appreciate the feature-rich simplicity with tools that include vector editing, prototyping, and a healthy selection of plugins that extend Sketch’s capabilities. Also, you can instantly preview your work on mobile devices to determine its optimization for any smartphone or tablet.
Though the program runs for a license fee of $99 (renewals cost up to $69 per year), there is a 30-day free trial period to test out the service before any commitment.
WebFlow ($35 /mo; also has a free option)
Another option that works well for any skill level is WebFlow. An attractive, easy to learn interface coupled with a powerful tool makes your design process a breeze.
Perhaps the best attribute of WebFlow is that it serves as an all in one solution for your projects. You can design your site, use the program as a CMS (content management system), and also have it host your completed website.
We will get into somewhat similar solutions a bit later, but if you want an all in one service that caters to ground up design, WebFlow is a great option.
Marvel ($14 or $56 /mo based on package; also has a free option)
If you’re interested in something that is specific to creating website mockups without code, then Marvel is a well-designed response to that need. As a browser-based program, it also means no downloads are necessary.
There’s a lot of features to like with Marvel, but two of our favorites are the focus on trading ideas and working efficiently with collaborators (it integrates with the team messaging tool Slack) and the insanely large media library.
Marvel is a clean, elegant solution if you only want a straightforward design. There is a free option that allows you to complete two projects before committing to one of their subscription packages.
If you’re looking for something free, and let’s be honest, free is always good, GIMP is an excellent place to start. It’s perhaps most similar to Photoshop, and while it understandably does not have the depth of features of that program, it won’t disappoint with the essential elements.
GIMP is open source meaning you can alter the code and distribute as you see fit. There is also a substantial list of 3rd party plugins available to extend the software even further.
Again, it may not have every design bell and whistle that Photoshop does, but it certainly comes a lot closer than many options. And again, it’s free.
If you’re looking for pure simplicity, you should download Macaw just to have something completely uncomplicated available to use. Similar to Marvel, Macaw operates without the need for you to worry about coding.
The functionality is crisp and super easy to learn with plenty of features and a real-time viewer that makes the design process as simple as it can get.
Google Web Designer (part of the Google suite of apps)
If your requirements include HTML5, then the often overlooked Google Web Designer may be what you’ve been seeking.
As with most things Google, the web designer is a solid, well thought out piece of software that will help you develop a responsive web design. Just don’t forget it’s there.
We’re putting this one under the free section because CoffeeCup’s no cost HTML option is a great editor. While it doesn’t have the full functionality of their paid version, you can test out those features for 30 days.
The free version is no slouch though with templates you can edit, the ability to customize your CSS style sheets and an automatic coding tool. An extra feature aimed at novices is a Help function that guides you through the process of designing your website.
Web Design Services
When it comes to creating a website design from nothing, the majority of software will only take you so far. Whether its a limitation on fonts or colors or you want to seek out a wider variety of templates or design elements these services can help fill in the gaps.
Not to mention, as you become more prolific with your work, many of these services are great to have in your toolbox to increase both the sophistication and functionality of your designs.
Balsamiq (price varies)
Somewhere between your initial idea for a website and the website itself a blueprint or wireframe should be developed to help map out the framework of the site. A lot of us skip that step since in most cases the software addresses that for us.
But if you work in a collaborative, or perhaps an organization where the details from start to stop must be clearly outlined, Balsamiq can meet that need. It helps you flesh out a framework for your potential site and provides seamless collaboration between multiple parties.
The pricing for Balsamiq varies based on the number of projects you need its services for, but there is a 30-day free trial to try it out.
Color Wheel and Pictaculous (both free)
If you’re a fan of color and color schemes, you’ll love these two free services.
Adobe’s Color Wheel (what don’t they do?) service lets you manipulate its bold, bright color wheel to find palettes that work together. You can enter a base color to see other shades that complement it and select different scheme options to broaden the choices.
Where Color Wheel helps you find a scheme, Pictaculous assists you in matching one. You upload an image in PNG, GIF, or JPG formats, click the Get My Palette button, and you’ll receive a set of hues that fit closely with your uploaded image. This is helpful if you want to build pages around specific images with a palette that services the overall design.
If you need an excellent screenshot application for your laptop or computer, Lightshot is the one to have. Aside from being quite flexible with its screenshot functions (area selection, editing, and sharing), it ties in directly with your PC or Mac screenshot function.
Sublime Text 3 (free, until it’s not)
Even if you only handle a moderate amount of code a good coding editor is a helpful tool to have. The recently released Sublime Text 3 gets our vote as it is extremely functional and easy to use. As for the price, you get an undisclosed evaluation period (which the website ominously declares as not enforced) after which they require a license purchase of $80.
WAMP / MAMP (free)
Once you near the final stages of a project your thoughts usually begin questioning if all the elements you’ve stitched together actually work. It would be quite helpful to test everything out on a server, before actually putting it on a server.
WAMP (for Windows) and MAMP (for Mac) do just that, allowing you to test out your design on a mimicked server downloaded to your computer, which also includes a database engine as well as PHP processing. WordPress users will find this particularly helpful.
Chrome DevTools (part of Google’s suite of apps)
Another item from Google’s fantastic, but again overlooked toolkit, the DevTools app lets you look directly into your design and pinpoint any problems before you go live with your site.
The DevTools only works from the Chrome browser but does so on both Windows and Mac.
Canva is a great little design service that allows you to create all types of digital content such as logos, social media posts (like a tumblr graphic or Instagram post), headers, and infographics.
GuideGuide ($7 /mo)
If you’ve struggled with creating guides in Photoshop, Illustrator, or Sketch you’re not alone. The GuideGuide extension aims to eliminate the issues by creating easy to use grids and guides in your preferred design software. There is a two-week free trial.
Textures.com (pricing varies)
If the name isn’t already a dead giveaway, then we’re not sure what else to say other than Textures.com is about textures.
Popular in the game development community, the site has a treasure trove of background images, graphic designs and stunning visual pieces (seriously, the category and subcategory lists are insanely long).
The site offers up to 15 free small image downloads per day, or credit packs or a subscription.
What The Font? (free)
Of course, the best play on words on our list comes from the font service. What The Font helps identify (or will closely match) unknown fonts via an uploaded screenshot.
Thunderbolt Displays (free)
Previewing your work is crucial to making sure you’ve captured the right details in your final mockup. Having screens to display that final draft is a good way verify you did your job.
Thunderbolt Displays is a free download for overlaying your work on a Thunderbolt Display or MacBook Pro.
Graphic Burger (free)
Aside from making us hungry, Graphic Burger is a useful site for downloading different design elements like templates, vectors, UI kits, and textures.
Website Building Platforms
With website builders, you need not be a rock star designer. In fact, all you need is just a general idea of what you want to achieve with your site, and the web builders will guide you through the processes involved.
Website building platforms use themes or templates, where you select a predetermined design that already has front and back end structure. After selecting your preferred template, you edit the site as you see fit.
The customization that you perform is usually limited to things such as color schemes, graphics or pictures, and of course the content you choose to include on the site.
Below we list top website building platforms.
WordPress, Joomla, and Drupal are the three most widely used open source web design platforms available today with WordPress being the clear leader. All three are true CMSs and utilize themes and templates for the visual side of the web design and plugins and extensions to help extend functionality.
Although each service is free to download, you will have to source your own web hosting. Ultimately, there’s not a lot to separate these three, but they do have differences which may sway which software a designer may use.
As the most widely used website design and building platform the advantage of using WordPress is that so many others use it too. They have more of everything – more themes and templates, more plugins, and a much larger community.
That last point is vital, as there is no centralized support system for any of these platforms, it’s up to the user community to develop a robust support apparatus should issues arise. WordPress’s is huge.
There’s not a lot to separate Joomla from WordPress as the two closely mirror one another. And while there is a very supportive community that helps power the software, it, unfortunately, doesn’t have the size and in turn the volume of template and plugins that WordPress does.
Don’t let that fool you though as there are features galore and the platform has an easy flexibility that makes it more accessible to learn than WordPress or Drupal.
Of the three open source platforms, Drupal has the highest learning curve. While both WordPress and Joomla are excellent options for beginning and novice designers, Drupal caters to those with a development side.
This helps fuel the fervent community surrounding the platform and helps to solidify the deep level of support you find when encountering issues. With Drupal, you can design a far more impressive website than in either WordPress or Joomla, but you will need coding knowledge to do it.
Drag and Drop Editors
Drag and drop building platforms offer an effortless web design experience unmatched against anything else on our list. While two of the three, Weebly and Squarespace, allow some tweaking of their code, all of the platforms are made to appeal to those with very limited to no website design expertise.
All three utilize a drag and drop, WYSISYG (what you see is what you get) editor where you drag the design elements you want added into the site’s preview pane.
These services are further separated from all other design platforms thanks to the inclusion of website hosting as part of your access. No need to source a host for your website, since the platforms provide that for you.
Wix (multiple pricing tiers)
By far the most popular of the drag and drop editors, Wix’s main appeal, aside from its simplicity and free-form editing, is the number of templates it offers its users. With over 500 different themes to choose from, there is a starting point for pretty much any web designer.
From there you do have the freedom to place elements as you see fit within your specific template including images and galleries, and media such as videos or music players.
As with all of the drag and drop services the Wix support is incredibly stout and should you run into a problem it’s not long before you have a solution.
One more feature from Wix that may or may change web design in the future is their Wix ADI (Artificial Design Intelligence) tool. After answering questions about the type and style of website you want, Wix’s ADI produces a site tailor-made to your specifications. Though it has its limits (editing is minimal after the fact) it may very well be a significant step forward in web design and development.
Weebly (multiple pricing tiers)
The Weebly platform is not to the level of Wix or Squarespace in terms of volume of templates (Wix) or the level of design (Squarespace, more on that in a minute), but they make up for it with how easy their platform is to use.
In fact, of all the software, services, and platforms we list in this article, Weebly may be the easiest one to use. It indeed is a beginners platform, with an extremely easy to learn, but very rigid interface (that rigidity is partially what makes it so uncomplicated).
Although we don’t consider Weebly a prime service for achieving the best website design, it opens up its HTML and CSS code for template customization. This does lend itself to novice designers having an outlet to perfect necessary coding skills.
Squarespace (multiple pricing tiers)
Our final entry to our web design software list is the Squarespace platform. It’s an appropriate service to end on too, as it combines many elements from everything we’ve covered. As a whole, Squarespace gears itself towards well-designed and highly functional websites.
The themes offered, from an aesthetic standpoint, are the best of any provider. The interface and editing functions, while a bit more challenging to master than some other programs, are geared towards making your site look as good as possible without sacrificing functionality.
While it’s not a build from scratch program, or even the top overall platform in this segment (that goes to WordPress and Wix), from a web design standpoint, it has no peers.
From software to all in one building platforms to the helpful design services that fall somewhere in between, there are options for every project and every scenario.
Finding the right one is all about figuring out what your specific needs are and choosing the right option to fit those requirements. There is no wrong tool to use, but there is most certainly going to be one or two that are a better fit for your project.
The great thing about all of these options from software to the help services to the builders is that everyone allows your creative side to shine. No matter which one or which ones end up being the right solution for you, rest assured you can trust your creative instincts and design an amazing website.