The State of Web Design Tools in 2014

Disclaimer: I am not a web designer, though I spent a few years trying to be one, and several more working closely with other web designers. I myself only do web design occasionally. I’m a programmer.

The web is at times a challenging platform to develop applications for. Updating your app server-side and having all your users have instant access to it is awesome of course, but when it comes to the front-end, developers are still trying to use application paradigms on what is essentially a legacy framework for delivering interactive documents. It can be tedious and fragile at times. This is why there is an overwhelming number of tools available now to make up for HTML’s deficiencies and make the process of building client-side apps less painful (Angular, Ember, Backbone, Sass, Web Components). When it comes to web design however, the situation up until now was even worse. The web is a fluid and dynamic platform to design for, but I still see too many designers using Photoshop to build out UIs. It’s hard to really blame them though, as there have been no decent alternatives until very recently. Like client-side development, a slew of new tools have arrived to help designers in the relatively-young discipline of web design be more productive.

I’ve long been an advocate of using Illustrator for designing for the web instead of Photoshop. Sure bitmaps have their place, but the nature of vector graphics and their ease of resizing and reshaping should be the bedrock of a design. Moving a design from mobile-first to desktop becomes much easier with Illustrator. Re-usable styles are a big plus. If anything is to be gotten out of this post, is that Illustrator should be used in favor of Photoshop. Don’t know Illustrator? Learn it, you’ll thank yourself later.

There’s a line of thinking that web design shouldn’t be done in any kind of graphics program to begin with. Static comps wont accurately represent the final product in HTML and CSS. They don’t respond to user input. Worse off, work is duplicated; once you create a design in Photoshop or Illustrator, it must be recreated in the browser. The alternative is to design in the browser. There are a number of front-end frameworks that help build out live prototypes or layouts quickly. I’m a big fan of Foundation and Animate.css. Stylie is neat for crafting CSS animations. Even with these frameworks, the designer needs to be comfortable writing code. There has been a debate as to whether designers should be able to code their own designs, and I’m of the opinion that they should have at least a base understanding of HTML and CSS. Like industrial designers, web designers should be familiar with the ‘materials’ that they are working with. They should know how to shape and mold them; understand what they can and cannot do. Reducing the time between an initial design concept and implementing it in the browser is essential. If anything, it will allow collaboration between the designer and developer to have a little less friction. That being said, it wouldn’t hurt more developers to take the time to understand some foundational design principles and appreciate the often unacknowledged effort that a competent web designer will put forth.

Most exciting to me are the new WYSIWYG applications for web design. These apps are still in their infancy, but they are already miles ahead of the sloppy code produced by drag-n-drop tools in Dreamweaver and Frontpage. Adobe’s Muse shows promise. Webflow looks nice too. Pinegrow lets you bang out Foundation and Bootstrap layouts with ease. Recently I purchased Macaw, probably the most-talked about of these new types of tools, and I’m really enjoying it. The code it produces is fairly clean, though you might have to fix some things once you start to build for production, and you will still need to manually write some CSS for more advanced effects. Even with these caveats however, as a developer I’d much rather be handed some somewhat sloppy HTML and CSS to start with rather than a PSD or AI file. Again, tight deadlines demand a quick turn around from design conception to working prototype. Plus you save yourself from the tedium of creating a complex UI from scratch. Regardless of which of these tools you choose, one of them should have at least some part in your web design workflow whether it be for prototyping or for producing a final design.

Designing for an interactive medium is tough, but I hope that more designers will embrace these new tools and developers will be more willing to collaborate closely with creatives. It’s 2014, we now have some impressive options  that help us break away from flat, static comps. There is no reason not to try them.