A bunch of wonderful web professionals share their work methodologies, organisational strategies and philosophical approaches to help you boost your productivity.
Productivity isn’t one of those topics that lets you serve up a selection of objective tips and tricks that will work for everyone. And the tools you use are just one part of a much bigger picture that includes work philosophies, personal ethics and fine-tuned daily routines. Working in a way that preserves both your mental and physical integrity is ever more challenging in an industry that seems to spin on itself faster and faster, requiring more and more focus and efficiency from its developers and generating an endless stream of choices and options to help you achieve your goals.
Being productive isn’t just about mastering a series of tools. It’s about what your philosophy toward them is and what you want to achieve with them. Your bigger goal. What follows is a range of tips and web design inspiration from leading designers and developers on how they achieve productivity.
01. Start with a skeleton build
Sarah Drasner keeps a skeleton build of her favourite frameworks, including the likes of HTML Boilerplate and Babel, in a private repo to kickstart her new projects
"I maintain a private repository with a skeleton build of my favourite tooling, components and reusable code," says Sarah Drasner, speaker and consultant. "These sources include (but are not limited to) pieces of HTML5 Boilerplate, gulp, 18F Web Standards, Foundation, Bootstrap, Babel, Lodash, GreenSock, Waypoints and Flickity. If the project requires it, I have a React fork with its own modifications as well."
02. Give positive feedback
"To avoid burning out your team, remember that energy needs to flow both ways," advises Carl Smith, community builder at Bureau of Digital. "When people put their all into a project, they need positive feedback from the stakeholders. Otherwise they get depleted and wonder why they’re putting everything into a project when nobody seems to care. Even a simple ‘Thanks for your hard work’ at the end of the day can have a tremendous impact on the health and energy of a team member. It has the added impact of making you feel good as well."
03. Keep a worklog
"I have a repository where I log every activity," says Aurelia Moser, web-cartographer and coder. "Everything I do that takes more than five minutes of my day qualifies as an entry in my worklog. In the browser, I use a to-do list extension that overrides tabs. It helps me think productively about my day. I also have an implementation of Taskwarrior in my terminal, where I log and check off tasks. For meetings, I just use Google calendar as a way to keep me on schedule."
04. Don't reinvent the wheel
"It may sound obvious, but productivity is about getting stuff done," advises developer Charlotte Spencer. "An important part of that is knowing when not to reinvent the wheel. When writing a feature, find out if it has been done before – maybe there is an npm module, a ruby gem or a snippet that can help you. Code is shared for a reason. Always try to spend less time reinventing and more time providing an awesome experience to your users."
05. Make the best of Sketch symbols
This is a powerful feature that allows designers to reuse elements easily across Artboards and Pages
"I find using a combination of Sketch symbols and InVision’s Craft plugin really useful when working on design systems and style guides," says Inayaili de León Persson, lead web designer at Canonical.
"Sketch symbols help you to design more quickly and consistently on their own, but the plugin lets you do things like use real API data in your designs, create quick prototypes, and share symbols across the rest of the team, which can be very handy."
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
06. Reduce the time between save and update
"Reduce the time from change, to refresh," explains Remy Sharp, founder of Leftlogic. "If you build for the web, cmd+S, cmd+tab, cmd+R is muscle memory. Invest in reducing the time between save and refresh. Time waiting is time lost, and your time is precious! If you have build systems, reduce their workload. Aggressively look to defer to CI systems (I use Travis for tests and deploys). Hunt down slow tests. Chrome DevTools Workspaces is my tool of choice. The goal is zero time waiting before refreshing."
07. Don't get lost in your tabs
"I use ShiftIt for Mac to speed up tabbing between windows and moving windows around," suggests coder Aurelia Moser. "My travel machine is a Macbook Air, and being able to move between windows easily is important if I want stay sane when working on a small screen. In Firefox, I make use of our lab extensions (I work at the Mozilla Science Lab), which include ways for semantically sorting and saving tabs (Chrome has an extension called Spaces to do that). It’s a great way to cluster your thoughts simply and save workspaces."
08. Keep some perspective
"Productivity measures activity, not success," says digital product designer, Cennydd Bowles. "It asks whether the amputation went well, not whether it was the right limb. The way techies and economists too often canonise it – a thirst to be more productive than the other guy – is itself counterproductive and wasteful."
09. Master your text editor
Harry Roberts on Vim: How do you spot a Vim user at a meetup? Oh, don’t worry, they’ll tell you
"For me, productivity is about automation of the repetitive: we’d much rather spend time on fun things than on the mundane," argues consultant frontend architect Harry Roberts. "One of my favourite ways to save time is using Vim’s humble yet incredibly powerful . command, which simply repeats the last thing you did. This makes it possible to work with repetitive chunks of code with minimal effort. In fact, mastering your text editor – Vim or otherwise – is a productivity boost every developer should be aiming for."
10. Track your mood
Meg Lewis uses Moodnotes to help her track her mood and use energetic periods to her advantage
"I find myself most productive when I keep track of my mood (via Moodnotes) and listen to my body," says Meg Lewis, founder of . "If I’m feeling productive that day, I make note of it and utilise my productivity. If I’m feeling unproductive or crummy, I use the app to jot it down and take the day to treat myself and recharge. Moodnotes allows me to see the data and better understand my mood versus my environment."
11. Use hotkeys and shortcuts
This award-winning app uses hotkeys to help users move faster between apps. It also boost efficiency with keywords, text expansion and more
"As a pianist, I put a lot of trust in my muscle memory," explains Helen Hou-Sndi, lead developer at WordPress. "As a technical person, I use Alfred constantly. Where those meet is using global hotkeys to go to an app – no more getting lost in cmd+tab. Need to flip between browser and editor? ctrl+alt+cmd+J and crtl+alt+cmd+K. Slack is popping off? ctrl+cmd+shift+S. And get to know those Slack keyboard shortcuts, too."
Next page: 11 more ways to boost your productivity...
Thank you for reading 5 articles this month* Join now for unlimited access
Tottenham Hotspur FC's nostalgic rebrand was a "labour of love"
