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
, 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.
finally started giving designers some options to get their teeth into.
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.
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.
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.
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.
“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.
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.”