7 game-changing web design tools for 2018

[Rss Bot 1]

With plenty of new web design tools coming onto the market each day, it's difficult to know what's worth your time. As a result, it's tempting for studios and freelancers to just keep using the same tools and processes, rather than exploring something new. 

However, pick the right tool and it could totally revolutionise your workflow. In this post, seven top web professionals share the tools that changed their working lives in 2017. Why not give them a go this year?

01. React Native

It's not just a web view wrapper

React Native is a framework for building native apps using React. It's in active development, with Facebook pushing a new release each month. Its use of modern tooling (such as the latest version of JavaScript), as well as features such as hot reloading, made it a standout tool for Shane Osbourne, lead frontend developer at JH. 

"90 per cent of the code is shared across the iOS and Android platform – there are just a handful of situations in which platform-specific components are needed," he explains. "And it’s not just a web view wrapper: React Native gives higher performance and tighter integration with the host platform than other tools."

02. Toggl

Time-tracking apps can have all kinds of hidden benefits

While time-tracking apps, such as Toggl, are handy for monitoring time worked in order to figure out client fees, they really come into their own when you use them to monitor your own working patterns.

"I’ve used time-tracking tools inconsistently in the past, [but] never as a tool to monitor my own time, which looking back now seems like a rookie mistake," explains BudAffect co-founder Jamie Murphy. "Using Toggl properly in 2017 has been by far the biggest benefit for me. Thanks to tracking everything I do, I’m much more aware of how long admin tasks such as accounts, invoices and so on take and am able to better plan around them."

This approach also has the benefit of helping you see the balance of profits made versus time taken, so you can identify the most time-consuming, unprofitable forms of income, and re-evaluate their role in your business.

03. Toby

Tidy browser; tidy mind

Are you looking at hundreds of tiny distracting tabs at the top of your browser? Then this is a useful tool for you. "As a habitual over-user of tabs, this year I discovered the Chrome extension Toby, which is a way to create collections of links, as an alternative to individual bookmarks," says digital transformation consultant Sally Lait. "I’m not entirely cured of ‘tab-itis’, but it’s definitely helping."

04. Wacom Cintiq 22HD interactive monitor

Shortcut keys on the Wacom Cintiq 22HD save a lot of time, says Flow creative director Karl Doran

Let's not forget about hardware. Last year saw some great new creative gadgetry entering the market (take a look at our roundup of the top new tech for designers to see for yourself). The right kit can transform your workflow, as the Flow team found when it got its hands on the Wacom Cintiq 22HD interactive monitor.

"The interactive screen allows you to draw straight onto the screen, making it feel much more intuitive than regular graphics tablets, the programmable shortcut keys are great and the zoom pad is dead easy to use," says creative director Karl Doran.

The team now uses it in all of its products for tasks ranging from hand-drawn animation to rotoscoping, masking and motion tracking in After Effects, or even just creating artwork in Photoshop or Illustrator.

See The best drawing tablet: our pick of the best graphics tablets and check out The best Wacom tablet deals to bag yourself a new Wacom tablet at the best price.

05. Tachyons

Tachyons is an open source functional CSS toolkit, and it had a massive impact on the web design process at Fore Design this year. "It's built on a scale that allows us to design in the browser in a way that feels fast and fluid," says co-founder Dan Perrera. 

"It’s made it possible to move our process completely into code so, instead of creating comps, we’re able to spend that time refining our work. We’re able to take Tachyons from project to project and the time we’ve invested in it has really paid off."

06. Sketch 

There's a reason everyone's still talking about Sketch 

Sketch has been gradually cementing its position as a top design tool over the past few years, and is still steadily poaching seasoned Adobe users, including web designer and developer Andrew Couldwell.

"I’ve used Adobe Photoshop exclusively for over 10 years – I even designed an Adobe product using Photoshop! But this past year I’ve transitioned to Sketch, and I’m amazed how transformative it has been. The power of symbols and nested symbols are a game-changer for system and product design.

Read How to get started with Sketch for app design, as well as Sketch vs Photoshop: which design tool should you use? plus 10 Sketch plugins you need to know about to get even more from the tool this year.

07. Paper

Sometimes the best tools are the simplest ones

While there are plenty of snazzy new tools vying for our attention, there's still space for traditional methods. BuzzFeed product designer Lindsey Maratta is careful not to be seduced by every latest thing: "I try not to feel confined to digital tools for other parts of the design process."

Maratta says her most successful prototype and UX spec of 2017 was made using paper and dot stickers, explained via a narrated video. "Between that and its role in several collaborative sprint-style ideation sessions we’ve held lately, good old paper remains one of the most useful tools for my team this year," she adds.

"My work this year has largely been about empowering teams of designers at a large company to work consistently and efficiently, with the aid of design systems," she continues. "Sketch has been a powerful aid to this. I must admit that I do miss paint brushes and image editing in Photoshop though, for the more creative web design projects."

This article appeared in issue 302 of net, the magazine for professional web designers and developers – offering the latest new web trends, technologies and techniques. Pick up a copy today or subscribe to net here.

Read more: 

• The 5 biggest UX design trends for 2018
• How to manage CSS classes with JavaScript
• Should you be worried about Meltdown and Spectre?

View the full article