Web design tools to help you work smarter in 2019

cisco blog
Cisco Drives Intent-Based Networking Forward with Multi-Level Segmentation
May 14, 2019
islamic finance blog
Islamic Finance – a Potential Opportunity for Pakistan to turn into a Hub
June 25, 2019
Show all

Web design tools to help you work smarter in 2019

webdesign1


In most professions, the more time you spend in your job, the more set in your ways you become. But for web designers and developers, resistance to change simply isn't an option. 
As clients demand bigger and better websites and apps that work across an increasingly complex ecosystem of devices, from VR to voice, working with new tech and techniques isn';t an option; it's a necessity.
Thankfully, there are plenty of web design tools being released all the time to help you tackle new challenges. The only problem is finding the time to keep up with them all.
So if you don't have a spare hour every day to scour Product Hunt, check out our selection of the best web design tools available now, which will all help you become more streamlined, inventive and creative in your work. You'll find everything from UI and prototyping tools to dedicated creative software and everything in between. And if that's not enough, don't miss our round ups of the best web hosting services and the best website builders for 2019.
  Some of the tools listed below will be very familiar, others may be new to you. But each has the potential to save you time, energy and budget in your web design work.
01. Sketch
We’ll start with the most obvious. Yes, we know everyone’s heard of Sketch – Bohemian Coding’s vector UI design tool – but anecdotally it seems there are still a lot of web designers relying on Photoshop for UI design (and that';s despite the release of Adobe XD, Adobe's prototyping and wireframing tool – one of the newer additions to Creative Cloud). 
Rory Berry, creative director at  Superrb , made the switch to Sketch in 2017, and highly recommends it. “Having been a user of Photoshop for over 10 years, it was hard to change and learn something new,” he says. “But literally after the first day of using Sketch, there was no looking back. I’m a total convert.”
He offers a number of reasons why. “Compared to Photoshop, sorting all your documents that you have and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.”
And that’s not all. “The built-in grid system in Sketch is great and makes interface design much easier. I think the overall UI and minimal feel makes it much cleaner to design in and user friendly. Photoshop seems very complicated in comparison.”
The Sketch community offers hundreds of plugins to make a designers work flow easier and smoother, he adds. “There’s basically a plugin for everything if you can find it. Photoshop/Lightroom is still our go- to for photo editing, but Sketch is all round winner for web design.”
If you tried Sketch a long time ago and didn't like it, you may want to try out the latest iteration of Sketch, version 52, which includes a totally redesigned interface, new features for designing with data, and a new Dark Mode for macOS Mojave.
Don't miss our top tips for using Sketch.
02. Adobe XD
Adobe's vector design and wireframing tool, Adobe XD, keeps getting better, with the announcement at Adobe MAX last year that it will now include voice prototyping. 
XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.
Andrei Robu, design director at Robu Studio in Barcelona, is among its fans. “For quick mock ups it's great,” he says. “It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away. I also love that I can copy and paste stuff from other Adobe apps.”
Crucially, Adobe XD integrates with the rest of Creative Cloud. Ellis Rogers, graphic designer at  Receptional Ltd  also recommends it. “Sketch is brilliant for designing for a web developer, because you are working in values in a software built exactly for designing websites and apps,” he says. “But the biggest limitation for me was it only being available on Mac, making it difficult to share Sketch files for web developers/designers not using OS X. Sharing Sketch files for development meant additional software/conversions, or working from flat JPGs – something that caused too many boundaries.
Being a user of Photoshop and Illustrator, the UI for Adobe XD felt familiar, he adds, so there wasn’t a real learning curve for using it. “So now after a few weeks of trialling, it’s the only tool I now use for all web design, app design, prototyping or wireframes.” 
Rogers also praises the ability XD offers to use Adobe libraries to quickly import any asset from Photoshop or Illustrator, as this makes collaboration projects run more quickly. 
“Working with UI/UX designers and illustrators makes this process simple,” he says. “When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link. The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions; an absolute joy to work with.”
03. Figma
Figma is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.
Here are some of its outstanding features:
“Figma has a similar USP as Sketch with the exception of being cross platform,” explains front end designer Benjamin Read. “When I used it to create a couple of icons for an article on our website I found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.“
“I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds. “In comparison I’ve found many tools for other platforms fall short.”
Freelance content writer and artworker David Eastwood, also has good things to say about Figma. “It's also been a really useful tool when we needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet and mobile.”
04. Affinity Designer
Affinity Designer is as powerful on iPad as it in on desktop
Advertisement
Serifs Affinity Designer has been dubbed the & Photoshop killer by some, and its easy to see why,says product designer Dan Edwards. "My first impressions are that the app is incredibly well-designed and feels like it’s been made to be a dedicated web and graphic design tool.
"There were a few features I really enjoyed, including adjustable, nondestructive layers. This essentially means you can adjust images or vectors without damaging them.
The 1,000,000 per cent zoom was just bliss; its 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!
When it comes to designing, the UI feels familiar. When moving from Photoshop, everyone seems to want to start over, which can pose a real challenge. What Affinity has done is to keep the layout familiar, while tightening everything up and hiding distractions. I was easily able to jump straight in and get designing.
Affinity Designer is now also available for the iPad. And note that this is not the scaled-down mobile app version you might expect: it's the same full version you get on the desktop.
Don't miss our guides to using the Pixel persona, the Export persona and the Pen tool in Affinity Designer. Also note that Affinity make a Photoshop alternative, Affinity Photo and an InDesign alternative, Affinity Publisher; all of which play together nicely.
05. Flare
Flare is a browser-based tool from 2Dimensions that helps you design and animate vector art. Aimed at both web designers and game designers, it lets you work directly, in real time, with assets that run in your final product, eliminating the need to redo that work in code. So it should simplify your process enormously and save you a bucketload of time. 
Best of all, it’s free to download as part of the Open Design movement. You can see how Ahmed Tarek used it to create an app animation in this tutorial.
06. Vaunt 
Want to match your website’s colour scheme to a particular image? Then you may well find Vaunt handy. Its a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design. 
You drag and drop your image into the app and the dominant colours appear in a panel. You can then click on any of the colours to add them to your clipboard.
07. Squoosh 
Launched last November, Squoosh is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.
The app works both online and offline, and overall it’s a win-win: web designers save time, and Google gets a faster web that still looks good. 
08. Linksplit 
The most effective way to make your website better is through A/B testing: splitting traffic between two or more different versions and seeing which performs better. And this tool makes it a lot easier to set up. It’s free for the first 10,000 clicks, and you don’t even have to sign up to get started. 
Head to the site, enter your destination URLs and you’re given a single, short test URL to share with your audience. If you like, too, you can set up rules. For example, if you want people in the UK who are using Chrome on iOS to end up in a different place to people in the US, that’s pretty easy to set up.
09. Anime
Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.
Here’s an example to demonstrate the super-simple API:
var myAnimation = anime({
targets: [.box1&box2],
translateX:5rem
rotate: 180,
duration: 3000,
loop: true
});
This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.
The author, Julian Garnier, has provided a CodePen collection that demonstrates what the library can do, as well as thorough documentation on GitHub.
10. Avocode
Avocode makes it extremely easy for frontend developers 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. 
You can also click elements in the design, and copy and paste the code into a text editor of your choice. 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.
We're not sure any app can ever replicate a developer. But we know of many hard pressed designers who happily use this to turn PSDs and Sketch files into interactive designs, which can then form the foundations for the website build. It costs from $14 per month.

Leave a Reply

Your email address will not be published. Required fields are marked *

WhatsApp chat