Searching for “web design software” may seem exciting (or daunting) at first, potentially presenting a wealth of choices.
Truth be told, the vast majority of these web design programs are aimed at individual consumers or small-business owners. When software companies tout their “free design templates” or brag that “you don’t have to be a professional to create your own website,” the web design program probably isn’t for you.
Using tools that fit your specific design needs is essential to producing your best (and most efficient) web design product. We’ve compiled a short list of the top web design software programs appropriate for creative professionals, including paid products, as well as some freebies from the open-source community:
Adobe Creative Cloud by Adobe Systems, at $49.95/month
In case you missed the news, the latest versions of Adobe’s creative tools, including Dreamweaver, Photoshop and Illustrator, are now branded “CC” and are available only as part of the company’s $49.95-per-month Creative Cloud membership. For the purposes of this article, I’m counting them as a single product, and they should be the core of any web designer’s toolbox.
In addition to Dreamweaver CC, you get all of Adobe’s other programs for creative pros. These include the Edge family of applications, which let you create rich-media content that can run on mobile devices without the need for plug-ins. Also in the package is Adobe Muse CC, for print designers seeking an easier, less code-driven path to web development. The new CC versions of Photoshop and Illustrator can automatically generate CSS code when you’re working on web graphics.
Adobe’s decision to eliminate perpetual software licensing for these products has been controversial, but we definitely see that the benefits outweigh the costs. It’s a newer, progressive business model, for sure, but it’s hard to compete with Adobe–whether you work in print or interactive design.
Adobe Dreamweaver CS6 by Adobe Systems, $399
If you just aren’t ready to take the Creative Cloud route, Adobe still offers Dreamweaver CS6 and other Creative Suite applications under a traditional software license. Though it’s an earlier version, it’s still better than the alternatives. I’ve seen no other program that does a better job of integrating visual design tools with a coding environment. The CS6 version introduced some notable enhancements, such as the Fluid Grid Layout feature to facilitate development of responsive web designs that work across multiple devices.
Keep in mind that you won’t have an upgrade path. Adobe says it will continue to offer bug fixes and other maintenance updates, but you won’t have access to new features. And there’s no guarantee that the software will work on future releases of Windows or the Mac OS.
BlueGriffon by Disruptive Innovations SAS
This is likely the best open-source alternative to Dreamweaver. Like Adobe’s Dreamweaver, Blue Griffon integrates visual design and coding tools, and it supports HTML5 and CSS3. It uses the Gecko rendering engine from Mozilla, so the WYSIWYG mode shows pages as they would appear in Firefox. It’s no match for Dreamweaver’s comprehensive feature set, and the interface is a bit clunky, but it’s a pro-level tool and you can’t beat the price.
Some additional features are available as plug-ins that you have to pay for. For example, CSS Pro Editor (about $15) builds on the basic CSS editing features in the free program. You can buy all of the plug-ins as a package for about $95. (The vendor shows prices only in Euros, so you’ll have to use a Euro-to-dollar translator for current U.S. pricing.)
As with most open-source programs, you should expect some trade-offs. You won’t have the benefit of Dreamweaver’s large user community and the corresponding ecosystem of books, training and other resources. Chances are that you won’t be as productive as you would be in Dreamweaver. So I’d look at this program only if you’re an occasional web designer, or if you’re taking issue with Adobe regarding the Creative Cloud and willing to jettison the entire Adobe product line.
Another well-known open-source alternative is KompoZer, but it hasn’t been updated since 2010. And that version (0.8b3) is still in beta. The latest stable release (0.7.10) is from 2007.
Coda by Panic, Inc., $99 ($75 limited-time offer)
As the name suggests, this Mac-only program is all about coding. It doesn’t have visual-design features like you’ll find in Dreamweaver or BlueGriffon, but it provides a top-notch coding environment for HTML and CSS, including code-hinting, validation and debugging features. You also get a built-in file browser, FTP client and MySQL editor. The latter provides an interface for MySQL databases, which are used in many content-management systems.
The program is available from the App Store, but you can download a fully functional seven-day demo version from the Panic website. List price is $99, but the company is offering a $75 limited-time offer.
Windows user seeking a similar tool? Check out CoffeeCup’s $49.95 HTML Editor, though I don’t think it’s quite in the same class as Coda. The best open-source option is probably Aptana Studio, which includes coding tools for HTML, CSS, JavaScript, PHP and other languages. It’s available in versions for Windows, Mac and Linux.
Firebug
This free add-on for Firefox is indispensable for anyone who frequently designs websites. It provides a set of tools for inspecting and debugging HTML and CSS elements on any web page viewed in the browser. For example, when you hover over an HTML tag, it shows which page elements are defined by that tag and how the border, margin and padding settings affect positioning.
Another must-have browser add-on is Chris Pederick’s Web Developer. Some features overlap with Firebug, but it also provides unique tools of its own. It’s available in versions for Chrome and Firefox.
TIP! Google Chrome comes with its own built-in developer tools similar to Firebug. Click on the “hot dog” menu in the upper right, then Tools > Developer Tools.
Balsamiq Mockups by Balsamiq, $79 or $12/month
Balsamiq is one of many programs that provide the digital equivalent of a designer’s sketchpad, letting you create wireframe mockups of websites, mobile apps and desktop applications. It has an extensive, customizable palette of UI elements that you can drag and drop to the workspace. The program benefits from a large community of users who have contributed downloadable templates and UI components. Mockups can be exported as PDF or PNG files, or to other formats via third-party plug-ins.
It’s available as a $79 desktop application in Windows, Mac and Linux versions. Or you can opt for myBalsamiq, a web app priced at $12 to $249 per month depending on the number of active projects. It’s free for classrooms, non-profits and large open-source projects.
Other tools in this category include Mockingbird (web app, $9-$85 per month); MockFlow (desktop and web app; free basic version or $69 per year for premium version); and Solidify (web app; $19 to $49 per month).
For more of the latest and greatest in web design software, visit MyDesignShop.
Want to grow your interactive design career but don’t know where to start? Check out HOW Design University for courses in web design software and more.
The post Web Design Software: Finding the Right Fit for You appeared first on HOW Design.