The web design world has been dominated by Photoshop for years. Photoshop is a great tool, but it’s too much for web design. New tools have emerged in the last few years that focus on design for the web. Let’s take a look at a few of these tools.
Sketch
Sketch is a powerful vector graphics app with a beautiful interface. Yes, your designs are infinitely scalable. You can copy CSS attributes from your elements. You can use artboards to create different design versions or different views of a responsive design.
Designing for mobile? The makers of Sketch put out an app called Mirror that let’s you preview designs on your devices.
Designing with Twitter Bootstrap? Download the Bootstrap Vector UI Kit. It includes a Sketch file.
Resources:
Macaw
Macaw is a newly released app that let’s you draw in code. You get a full-featured design tool that writes semantic HTML and CSS for you.
As a developer, I’ve always been skeptical of WYSIWYG (What You See Is What You Get) tools, but the code Macaw puts out is nice. Check out the how-to videos.
Note: This is a brand new tool with bugs that should get increasingly better with each release.
Both tools offer free trials. Try them out and inspire your web design workflow.
