Design Tools That Are Changing the Game in 2015

[ad_1]

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:

Birth

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.

Awakening

Javascript and Flash started opening up new worlds of possibilities in the mid-90s. The widespread arrival of CSS in 1998 finally started giving designers some options to get their teeth into.

Revolution

The arrival of Web 2.0 brought design even more to the forefront with JavaScript exploding in popularity and power as truly interactive content emerged in the form of social platforms and multimedia apps.

The Present

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.

  • Macaw

    Macaw

    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.

  • Adobe Edge Animate CC

    adobe-animate

    Adobe Edge Animate CC enables web designers to create interactive HTML animations for the web, rich media advertising, and digital publishing environments. Originally pitched as a Flash alternative, the software gives you an intuitive set of design tools to create responsive content for all devices, while taking care of the necessary CSS, HTML and JavaScript under the hood.

    Adobe Edge Animate CC
    Adobe Edge Animate CC.

    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

    project-comet

    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 implementation of Sketch.
    Sketch in action with Google teams.

    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

    HackingUIs implementation of Sketch's artboard.
    HackingUI using Sketch’s artboard feature.

    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

    Apple's Sketch implementation.
    The Sketch to App Store app.

    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.

    A propos de L'auteur

    Nassim Maalej

    Je suis un"Geek"avant tout ! Au départ, c'est pour réaliser des projets personnels que je me suis intéressé aux langages de programmation et aux usages d'Internet après 3 ans d’expérience derrière moi consacrée à des clients très différents. Je suis à même de développer des applications Web complexes et optimisées. J'ai travaillé principalement sous WordPress, ma spécialité depuis 2011, et développe moi-même de nombreux plugins, thèmes ou API en PHP . J'ai un expérience en management projet web l'analyse les besoins , rédaction le cahier des charges en accord avec le client , coordonnassions le travail de l’équipe – graphistes, développeurs, rédacteurs, spécialistes e-commerce, etc...

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *