My interaction design tools, version 3

This blog post explores the tools that I use for interaction design. It's an update on a post that I wrote in 2018 and 2013.

Check out my uses page for an up-to-date list of hardware and software that I use for interaction design.

Devices

I prefer to work on Apple devices, I'm currently using a 14 inch 2021 Macbook Pro and an iPhone 8. It's useful to have access to other devices (like a Windows laptop or an Android phone) so you can test your designs on different technology.

Pen and paper

Pen and paper is always useful, but since lockdown and remote working, I don't tend to use sticky notes or worry too much about what kind of notebook I have on me.

A while ago, I asked people on Twitter to recommend their favorite pens. So, I've started using Paper Mate Flairs, when I can be bothered to order some.

I also think Pental Sign Pens are great. But my kids steal them, so I often end up with bog standard ball point pens.

Google Drive

Google Drive and the Docs, Slides and Sheets tools have had some nice improvements recently! A few things seem to be "inspired" by Notion, like the ability to insert chips. Chips are special links that refer to things in your Google Workplace, like other documents, meetings or people.

It also allows you to write in Markdown now which I really like, although I would prefer it if it allowed me to export in Markdown too.

It's still so far ahead of alternatives like Office 365 and Sharepoint, in terms of usability and allowing people to edit the same document at the same time.

Visual Studio Code

Visual Studio Code is a code editor from Microsoft.

Since the last time I blogged about this (back in 2018) I've switched from Atom to Visual Studio Code for writing code. Visual Studio Code feels very similar to Atom, but it also has a nice built-in Terminal and GitHub integrations.

Eleventy

I use Eleventy as a base for my personal projects. It’s a static site generator (SSG), that's similar in many ways, to the GOV.UK prototyping kit.

I find that using both tools (Eleventy for personal stuff, and the GOV.UK prototyping kit for work) helps me get better at understanding the technical processes and models behind building quick prototypes and basic websites.

Netlify

For personal projects, and this blog, I prefer to use Netlify for hosting (it's similar to Heroku). It watches my GitHub repo, and automatically rebuilds my site when I merge things.

It has some great features, like being able to see a web preview of any changes I deploy, before they are merged into the main branch. The free plan is also good enough for my needs.

Google Chrome and Developer Tools

Chrome is an essential tool for inspecting and iterating on designs in the browser. I like to install other browsers like Safari and Firefox too. Installing and testing designs across different browsers is good practice.

Here are a few useful plugins too:

GitHub Desktop

I feel slightly guilty for using this tool (instead of using Terminal).

But, features are being added are more quickly than my Terminal knowledge improves, so even though it has a reputation for being less powerful than using GitHub via the Terminal (which is true) it still does everything I need, and more.

Terminal

Even though I don't often use Terminal for GitHub, I do use it to run Eleventy and the GOV.UK prototyping kit locally. This lets me build and test things on my local devices. Visual Studio Code has a great Terminal built into it.

Trello

Trello is my tool of choice for managing sprints and kanban processes. It's especially handy if you learn the keyboard shortcuts and Markdown formatting.

iA Writer

iA Writer is a great stripped back text editor. I use it less these days, as Google Drive has become my starting point for most documents. But I still love iA Writer's speed and simplicity. It uses Markdown formatting, which is a nice gateway to learning HTML.

Figma and Sketch

Tools like Figma and Sketch allow for the creation of lo and hi-fidelity designs, prototypes and assets. Despite being hugely powerful and flexible, often I still prefer to design and prototype in code, especially once designs reach a certain level of maturity.

Miro

Miro (and similar tools) have filled the whiteboard gap left by the pandemic, and allowed for groups to colloborate remotely using visual notes and diagrams. It's perfect for creating user journey maps and group affinity sorting.

It's also possible to do fairly complex design layouts (like Figma and Sketch), but Miro isn't designed to fit into a production workflow, so it's difficult to export assets ready for the web.

CodePen

CodePen gives me a sandbox for quick code projects. It makes it really easy to start writing HTML and CSS and getting a live preview in the browser. When I want to do a quick code experiment, this is a really good option.