A whole new breed of next-generation tools are taking prototyping, collaboration and digital design in new directions – and making it easier for WordPress developers to create beautiful websites.
The web has been evolving for more than two decades, but the tools we use to design for it haven’t always kept pace with the medium itself. As design trends continue to rapidly evolve – with motion design, responsiveness and the heavy use of images taking center stage – the need for a new generation of truly multi-purpose design tools has never been greater.
So in today’s post, we’ll run the rule over the latest crop of contenders for your design dollar with an introductory look at tools such as Sketch, Macaw, Adobe Edge Animate CC and the soon to be released Project Comet. We’ll also look at how Sketch has been used for high-profile projects.
Web Design Past and Present
We’ve come a long way since Tim Berners-Lee got things going back in 1991 with the world’s first website – a purely text page with a dozen links. Web design has gone through monumental changes since then (mostly for the better), and can be divided into four broad eras leading up to today:
As every 90s kid knows, there was no such thing as “high-speed” internet back in the day. This was a time when web pages consisted primarily of text with only the occasional image thrown in. Hyperlinks, paragraphs and headers ruled the roost, and any fancy styling had to be hacked together with tables and endless GIFs.
In late 2015 we are well and truly into the era of the mobile web. Responsive design is a must and devices of all shapes and sizes can reliably handle modern trends such as motion design, heavy use of video and strong typography.
Up until recently, the tools involved in creating for all of these design stages remained remarkably consistent over time: text editors for code and markup, Photoshop and Fireworks for images, and Flash for animation, video and interactivity.
But spurred on by the mobile revolution, the last few years have finally seen a new breed of design tools emerge to potentially usurp the old guard and rise to the challenge of a multi-device, app-driven world.
Let’s move on now to our list of the main next generation design solutions.
We looked at Sketch in-depth last week, but it’s so good we’ll cover it briefly here, too.
Bohemian Coding’s Sketch gives designers power, flexibility and speed in one lightweight, easy-to-use, vector-based package. Compared to firing up a monster like Illustrator, blasting through design rounds in Sketch is a delight. The one potential downside is that it’s developed exclusively for the Mac, so PC users are somewhat left out in the cold on this one.
Why Use Sketch?
Sketch was developed for the modern graphic designer from the ground up. It offers support for multiple pages and artboards and integrates powerful features like symbols and shared styles to make it easier to reuse elements.
The promise of Sketch for users is neatly summed up on the product homepage: “Finally you can focus on what you do best: Design.”
It’s a big claim to make, but the fully vector-based workflow the software enables goes a long way towards delivering on it and is a perfect fit in terms of designing for both desktop and mobile.
Here’s a quick list of just some of the possibilities Sketch brings to the table:
- Scalable vector shapes that adapt to changing sizes, styles and layouts.
- Easily editable complex vector shapes.
- The ability to round shapes and layers to the nearest pixel.
- A slick pixel zoom feature for toggling between views.
- Native text rendering that accurately displays how text will actually appear.
- The ability to easily create multiple reusable graphic elements.
- Easy options for exporting, slicing and resizing assets.
- The ability to preview designs on iOS devices.
At just $99 for a license, Sketch is arguably massively under-priced for the value it provides. Bohemian Coding also provides excellent support should you run into any difficulties and a number of lively communities to engage with.
All things considered, it’s not hard to see why Sketch has soared to the top of the list of most commonly used modern design tools. It’s simply a must-have.
Macaw’s tagline of “Stop writing code, start drawing it” aptly sums up what this next-generation design tool is all about. It provides designers with the toolset they’re familiar with, but also outputs HTML and CSS on the backend. Think of it like having your own personal programmer beavering away behind the scenes while you design.
The secret sauce behind Macaw is Stream, a real-time layout engine which enables users to smoothly manipulate on-screen elements in a Photoshop-like manner, while magically taking care of the necessary maths in the background.
The actual heavy lifting in terms of converting all this into HTML and CSS is performed by the aptly named design-to-code engine Alchemy. The markup Macaw outputs is geared for responsiveness, and is semantically correct and remarkably tight for something that’s not hand-rolled.
For anyone who’s lost countless precious hours battling with layout once designs move past the mockup stage in the past, this combination is an absolute godsend.
Global styles and reusable components are simple to use and the overall slickness of the package has won plaudits from prominent designers such as Mike Finch:
“I dunno what sorcery they’re using to make the code, but it’s amazing and beautiful.” – Mike Finch, Product Designer at Facebook.
Here’s a quick list of just some of Macaw’s standout features:
- Breakpoints for multiple devices can be easily set.
- Responsive, flexible grids come as standard.
- Sophisticated typography controls let you pull in web fonts in a jiffy.
- Easy visual access to the full range of modern CSS features.
- Ability to use components to store reusable library elements.
- Pixel perfect spacing and positioning controls.
You can see a full range of videos exploring specific aspects of Macaw’s functionality in depth on their site.
Macaw is available for both Mac and PC and is an absolute steal at just $79. With the ability to generate eminently usable markup by automatically, you’ll make up that amount in terms of time saved within a couple of hours of use.
Regular Adobe users will have no trouble getting to grips with the overall interface and there is a world of useful resources to explore further at the Adobe site including tutorials, user manuals and best practices for graphics.
Here’s a quick list of some key features Adobe Edge offers:
- No dependency on third-party libraries.
- A trimmed down list of project output files to manage.
- Custom folders for saving your media, images and scripts.
- Integrated support for HTML5 video.
- Copy-paste functionality to easily move SVG artwork over from Adobe Illustrator.
- An intuitive timeline for keyframing animated sequences.
Adobe Edge is available as part of the Creative Cloud suite as either a single app or part of a package with pricing varying by territory.
It’s by no means an all-purpose design app but is a very useful option for quickly putting together animated content – a task that can be hellish if you’re trying to do it by hand.
Project Comet hasn’t hit the streets yet, but it’s Adobe’s newest attempt to provide a genuinely all-in-one design tool that merges visual design, wire-framing, prototyping and previewing in one slick package.
Project Comet was recently announced at the annual Adobe Max conference but isn’t expected to ship until early 2016 so the jury is very much out on this one so far.
Khoi Vin has an insider scoop on what to expect with the eventual release, and an interview with Adobe’s Director of Product Marketing Jane Brady suggests that the application was designed at least partially in response to Sketch’s growing popularity:
“Comet really started with looking at our customer base and noticing that there were some customers moving away from Photoshop – they were using Sketch in some cases – and there seems to be two different areas to that. The first was people who were doing heavy app design, because it’s so repetitive creating all those different buttons and elements for different devices and sizes, and they were finding that Photoshop wasn’t performing enough and there was too much in it that they didn’t need – Sketch was so much more focused.” Jane Brady – Adobe Director of Product Marketing.
Only time will tell whether Adobe can claw back some of the lead it’s let slip with this 2016 release, but it’s definitely one worth keeping an eye on.
How Real-World Projects Use Sketch
Now that we’ve covered some of the next-generation design tools at designers’ disposal, let’s finish up with some real-world examples of Sketch in use.
Sketch topped the polls of a recent designer tools survey and has found favor with some very high-profile design teams indeed.
Sketch at Google
Google’s Sebastian Gabriel is using Sketch to work on the mobile interaction application Pixate.
He likes “the ease with which you can export a ton of assets, its flexibility and the simplicity of its UI. Also, the fact that the application itself is lightweight (along with the files it creates) is a big plus.”
Sketch at HackingUI
Sagi Shrieber, the co-founder of HackingUI, uses Sketch for his everyday work at SimilarWeb.
Sketch’s multiple artboards feature is incredibly handy when it comes to creating featured images for HackingUI and he also uses the app to quickly iterate through design rounds.
Using Sketch to Streamline App Store Uploads
Brendan Mulligan of Launchkit used Sketch to create a tool for helping generate App Store images across all iPhone sizes.
The Sketch to App Store app uses Sketch symbols and text styles to easily create screenshots so it’s not “a huge pain to create screenshots for iTunes Connect.”
Choosing the Right Design Tool for You
Digital design is a fast-moving field, but the new generation of design tools we’ve introduced above all help you confidently create masterpieces for multiple devices quickly and easily.
Let’s briefly recap our selections:
- Sketch: Sketch has captured the heart of designers worldwide in the last few years with its beautifully simple vector-based workflow.
- Macaw: If you’re tired of flailing around with custom markup, Macaw will let you get on with creating while the software takes care of the grunt work in terms of code.
- Adobe Edge Animate CC: Putting together compelling animations to display on every device is a doddle with Adobe Edge.
- Project Comet: One for the future. It will be fascinating to see if Adobe can regain its design crown in 2016.
Are you already on board with any of these next generation design tools? Share your thoughts and experiences with them in the comments below.