Many new design tools entered in the market This year. internet-makers are fighting back with a plethora of
tools that aim to make your life as a designer that little bit better.
Static mockups are becoming less useful and the lines between
designer and developer are becoming increasingly blurred. As we work
more collaboratively with one another the tools we use are having to
change.
Our experts have picked out some top tools that are changing the way we think
about design, and are key to helping us establish these new processes...
1. Pixate
Pixate is an app that has been created for making intuitive,
interactive prototypes for iOS and Android. What sets Pixate apart from
other tools I've used is its drag-and-drop animation and interaction
panel.
To make an element interactive, all you need to do is simply select
the interaction you'd like to use, be that double-tap, drag, tap or one
of the other native interactions it provides.
Drag this onto your element, set some variables, and voilà – using
the Pixate iOS or Android app gives you a real-time working prototype on
your device.
2. Affinity
Affinity app is
incredibly well designed and it feels like it’s been made to be a
dedicated web and graphic design tool. There were a few features that we really enjoyed, including adjustable
nondestructive layers – which essentially means you can adjust images
or vectors without damaging them.
The 1,000,000 percent zoom was just bliss (very often Photoshop's
32,000 feels like it's just not enough). This is especially useful when
working with vector art, as you can really get in close. The undo and
history features are also really handy – Affinity allows you to go back
over 8,000 steps!
What Affinity has done is kept the layout familiar while tightening
everything up and hiding distractions. I was easily able to jump
straight in and get designing.
Overall, Affinity feels like it could be a real competitor to
Photoshop, Illustrator and Sketch, and at just £34.99 it's a real
bargain!
3. Avocode
Avocode makes it extremely easy for a frontend developer to code
websites or apps from Photoshop or Sketch designs. It's built by the
same team that brought us CSS Hat and PNG Hat, so it's not surprising
they've taken the exporting process one step further here.
Although previous apps have allowed you to export assets, what makes
Avocode really special is that you can use its Photoshop plugin to sync
your PSD into Avocode with just one click.
Avocode quickly and automatically analyses your PSD or Sketch file
and brings everything into a beautifully designed UI. You then have full
control over how you export assets, including SVG exporting as
standard.
"It gives users everything they need for coding – a preview of the
design, and access to all layers and export assets," says Avocode
co-founder Vu Hoang Anh. "The best thing is that developers won't need
Photoshop or Sketch at all. The current workflow really sucks and that's
why we created Avocode."
4. Antetype
Antetype is a new tool for creating responsive UIs for apps and
websites. It create high-fidelity prototypes, but not production files. This is
actually a good thing – the team is focused on exactly what it is
creating, and it's not trying to make an app that replaces developers.
Tim Klauck, UX Director at Antetype said :
"Frustrated using photo editing tools for UX design, we wanted a tool
designed for UX design with a better understanding of content and
layout,"
"Auto-layout and
widgets allow us to rapidly iterate our designs while maintaining
consistency."
On download you're given a fairly basic widget library, which you can
use to quickly create prototypes and start designing. Antetype provides
a library of devices and OS designs including iOS, Android and Windows
to start with. There is also an active community section on the site,
where you can download UI kits from other Antetype users.
The thing that sets Antetype apart from other prototyping tools is you can actually create responsive prototypes and add some
neat interactions – ideal for presenting ideas to a client.
5. Sketch
Sketch has gained a massive following since it launched in 2009. The latest version includes great new features such as
improved exporting, symbols and simplified vector modes.
Pieter Omvlee, founder of Bohemian Coding said :
"When we set out to build Sketch, we envisioned an app for the modern
digital designer,"
"We have tried to do that with key improvements to basic functionality and radical new features. We've been humbled by the enthusiasm with which people have started using Sketch and the amazing work they have created already."
I also really like how Sketch has incorporated CSS logic into the
app. This makes converting your designs into CSS much easier, as you
have to use CSS logic when applying styles. Another feature which is
really handy for speeding up the design/development crossover is
Automatic Slicing.
Without having to manually add slices, Sketch can create assets using
one-click export, which will be exported at 0.5x, 1x, 2x and 3x and in
various formats such as PNG, JPG and TIFF. I'm looking forward to seeing
what Sketch does next.
6. Form
Form is not a
typical design tool in that there's no tools or layers palette. Using
the app feels like a mix of design and code.
While you can't actually create graphics in the app, you can insert
them and use what Form calls 'patches' to add gestures and interactions.
The Mac app requires you to also use the iOS app so you can view your
prototype in real time and interact with it.
"Form is an app design and prototyping tool with the goal of
producing designs that are closer to what you get in production,"
explains Relative Wave creative coder Max Weisel. "We want designers to
work directly on the production side of an app, and at the same time
free up engineers to focus on more complex problems."
There are some great tutorials on how to use Form, but the process is
rather complex if, you are used to creating visuals in
Photoshop. Moving an image to the centre of your device, for example, is
achieved using Superview variables and Match Patches.
Once in place you use maths to divide the width and height and
connect them to the X and Y positions in Image View. Group those
together, rename the variables and adjust the X and Y anchor points. This process is fairly complex.
However, once you get your head around the processes, you can create
stunning prototypes. Having access to the device's camera and other
sensors means the prototypes you create are just as powerful as the
coded app would be.
.jpg "M2Software Solutions Pvt. Ltd."){kind=logo}
