We’ve rounded up the top tools for designing a website, whether you’re an expert user or a complete novice.
As with any great endeavor, web design is about both inspiration and perseverance. Back in the day, creating web pages was the sole province of hardcore coders, but that’s not the case anymore given that there are numerous tools to simplify the process. Some of these even have a visual interface, allowing you to drag and drop links, text and images as if you were designing a poster or presentation.
Other web design tools are geared towards programmers, acting as advanced text editors, and allowing for building a website line-by-line. However, most web design tools exist somewhere between these two extremes.
In this guide we have focused on five of the very best tools currently available. When weighing up which to include, we have focused on ease of use, supported web languages, cost, and how easy the tools make it to upload the finished project once you are done.
If this is your first time building a website we recommend using a free tool such as Bluefish before spending any money. All premium tools covered in this guide offer a trial version, in any case, so you can get an idea of what they’re about before you commit.
Dreamweaver is one of the best-known web design tools on the market and has been around in various forms since the turn of the century. The latest iteration of Dreamweaver is available as part of Adobe’s Creative Cloud suite for a fixed monthly fee of €24.59 (£21.60, $28.80).
The tool has a broad appeal to both novice and advanced users. When you first launch Dreamweaver, you’ll be asked to choose between ‘beginner’, ‘intermediate’ and ‘advanced’ skill levels. These help to determine the number of features shown to you, and whether you’ll be given options to perform more complex tasks like building a site from code.
Aside from a refreshingly designed and powerful interface, Dreamweaver supports virtually any type of web code from basic HTML to CSS, PHP and JavaScript to name just a few. If you are not quite ready to edit raw code, Dreamweaver supports WordPress and Drupal templates.
Other advanced features include a ‘live view’ for previewing websites as well as support for certificates and a dedicated workspace for developers. If you’re making your first venture into programming sites, Dreamweaver also offers tips for improving your code.
The general consensus from user reviews is that while this web design tool is amazingly flexible, the arsenal of features can be truly overwhelming. Fortunately Dreamweaver offers a free trial, so take some time to experiment and see if it’s right for you.
Bluefish is amongst the smallest web design tools available today. The tiny installer weighs in at just under 53MB and setup takes only a few moments. While the interface is text-only, it’s clearly designed with novices in mind as it employs clear-cut toolbars, user customizable menus and syntax highlighting.
While the main focus is on HTML, Bluefish supports a huge range of other languages including PHP, Java, JavaScript, SQL, XML and CSS. Unlike visual WYSIWYG web design tools, the text interface makes for much cleaner code.
Bluefish has an excellent search function, allowing you to find text across multiple projects. The tool also has no trouble juggling hundreds of documents at the same time. Although Bluefish supports working with remote files, the varied and useful dialogs and wizards don’t currently support direct upload of web pages via FTP.
Despite the best efforts of the developers, Bluefish may take some time to get used to. The tool is available free of charge, however, so you have nothing to lose by giving it a try. During our test on a Windows 10 PC we found we had to install GTK+ 2.24.8 in order to run Bluefish. A download link for GTK is available via the Bluefish website.
Described by its developer as a « hackable text editor for the 21st Century », the free and open source Atom comes to us from the team at GitHub.
Atom is a dedicated desktop app and supports a variety of programming languages such as HTML, JavaScript, Java, PHP, CSS and XML. The text editor automatically recognizes the language you are using and will color-code and arrange it accordingly. Atom also has a useful autocomplete feature for writing code. You can manage multiple files at once via the excellent ‘minimap’ in the left-hand pane.
As the interface is text-only Atom is geared towards more advanced users. However, there are a number of freely downloadable extensions, such as ‘packages’, which can make this text editor a joy to use. Available packages include Emmet, which allows you to write HTML and CSS using abbreviated code. Another is Pigment which scans your script for color codes and displays these automatically in the background color.
Atom is truly cross-platform as it is available for Windows, Linux and macOS. This makes it ideal for working on copyrighted material. And because it’s open source the development community can quickly respond to any bugs or security flaws which are discovered.
Google Web Designer is primarily for creating interactive content in HTML5, JavaScript and CSS. In plain English, this means its primary function is to build ads.
The good news is that this is done via an extremely simple to use GUI which incorporates point-and-click design tools covering text, basic shapes, 3D animations and much more. Any 3D features are shown on a timeline at the bottom of the window. The panels on the right-hand side of the interface allow you to fine-tune further options such as colors.
Google Web Designer also incorporates a handy library of extra components such as images, videos and other advertising tools.
Advanced users can toggle between the default ‘design’ view and ‘code’ view, which is why the tool can support creation of more advanced features besides ads – provided you have the knowledge and patience to program these yourself.
Google Web Designer is still in beta testing, so lacks certain features such as being able to open HTML files created outside the tool. Nevertheless, it does include a handy web preview option which will open your current project in your default browser. You can also automatically publish content. This Google offering is available free of charge for Windows, macOS and Linux.
Webflow is a cloud-based service which has been created specifically to allow people with no coding knowledge to get started with web design.
Aside from being truly cross-platform, as it’s web-based, Webflow emphasizes the concept of ‘smart codelessness’.
