Skip to main content

7 game-changing web design tools for 2018

Toggl screenshot says Track Budget Negotiations

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 (opens in new tab)

React Native logo

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 (opens in new tab)

"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 (opens in new tab)

Toggl screenshot says Track Budget Negotiations

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 (opens in new tab) 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 (opens in new tab)

Screenshot of browser with clear tabs

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 (opens in new tab). "I’m not entirely cured of ‘tab-itis’, but it’s definitely helping."

04. Wacom Cintiq 22HD interactive monitor (opens in new tab)

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 (opens in new tab) 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 (opens in new tab)

Tachyons is an open source functional CSS toolkit, and it had a massive impact on the web design process at Fore Design (opens in new tab) 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 (opens in new tab) 

Sketch logo

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 (opens in new tab).

"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

Person drawing with paper and sharpies

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 (opens in new tab) 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 (opens in new tab) or subscribe to net here (opens in new tab).

Read more: 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

net was a leading magazine for web designers and web developers, which was published between 1994 and 2020. It covered all areas of web development, including UX and UI design, frameworks, coding and much more. Much of its content lives on in Creative Bloq. View the net archive on Creative Bloq.