Apps for web designers: will there ever be one tool to rule them all?
04/03/2014, By Chris Plowman
Web designers have been a hard-up and put-upon bunch for many years. While developers have many coding solutions to choose from, web designers lack a one-stop-shop tool able to deal with all the facets of designing a modern website. Historically we’ve used a combination of tools, each with their own strengths, but none of which quite do it all on their own.
The release of Macaw looks like it could be a promising step towards solving the issues many designers are facing as the web evolves.
After a successful Kickstarter campaign, the app has just been released in a test build to backers, but it promises big things for the future. The app hopes to help bridge the gap between designer and developer by making elements like responsive breakpoints, asset generation and front end coding firmly a part of the design process from the outset, rather than needing to be discussed at an interim stage in the design and development process.
You can see a sneak peak of what Macaw can do in this video.
Whether a coincidence, or as a direct reaction, Adobe has begun to shift some focus toward web design since it’s release of Creative Cloud in 2013. Adobe has retired Fireworks, the app it had previously pitched at web designers (it’s still available for download but not in active development), and integrated some of its features into other applications. It’s also released a number of stand-alone applications and services that solve common problems for designers.
Photoshop has taken on the mantle of the sole graphics editor in the Creative Cloud Suite and has seen some welcome updates for web designers.
Real time asset generation allows designers to simply name a layer within their design document with the correct file ending (.jpg, .png, .gif) and Photoshop will export the layer into an assets folder ready to be used in a live website build.
CSS support allows designers to export CSS code for any buttons, text or any other element with a simple right click of their mouse.
Linked Smart Objects have improved workflow for many design projects. One of the keys to a good design is consistency, and using smart objects can help achieving this goal much easier. Smart objects are elements within the design that can be reused multiple times throughout a design but edited globally from a single point. For example, if a designer has designed a blue button that appears in multiple places and it’s decided that the button should be green, then one instance of the button can be edited and every other instance will change across the whole design. Linked Smart Objects take this to the next level by allowing the designer to have smart objects that sit outside of the document and be used across multiple Photoshop files, rather than being restricted to an individual file.
allows designers to create responsive layouts and generate CSS code from their designs directly through the app or by importing Photoshop files. Here at Crafted, we’ve been experimenting with Edge as part of our responsive wireframing progress and have been impressed with the apps capabilities so far.
is a service that offers a wide and varied selection of fonts for use on the web. This has now been integrated with Adobe Creative Cloud making using these fonts within the Creative Cloud suite of apps much simpler.
All these updates and applications are finally giving designers the toolset they need to tackle a modern web design project. We may never have one app to rule them all, and that may be for the best, as the battle between apps will always push things forward quicker. Regardless of the eventual outcome, every update and every new application makes the design process more efficient, meaning designers are able to focus on the design process rather than the tools used, which can only be of benefit to both designers and the end client.