Some things web design can learn from my toaster

I’ve recently bought a new toaster and, while some critics have called it an ugly lump of industrial-looking metal, let me tell you I absolutely love it. I’m hoping that doesn’t sound too strange… it’s pretty normal to be excited about a new purchase, right? I’m sure you’ve also felt a rush of excitement when operating a new gadget the first few times. Perhaps it was a new record player with a particularly great sound, or a new car with powerful fans that effortlessly de-misted your fogged-up windscreen on a cold UK winter morning?

Some say it’s an ugly lump of industrial-looking metal, but there’s beauty in that there toaster

Inevitably though, over time this little hit of new-purchase-triggered endorphins wears off and you easily forget how that new pair of Bluetooth earbuds made your life bearable again for a bit 🤣 But despite having had my unassuming kitchen appliance for a month or two, every time I drop a slice of wholemeal in the slot I know I’m shortly due for a first-class toasted bread experience. This toaster just keeps on giving. The reason? Great design of course.

Powdered Toast Man knows good design when he sees it

Whilst crunching some freshly buttered toast the other morning I got to thinking how there are so many parallels between the great design of my new machine and the principles that should be applied to great web design. Tenuous? Sure it is, but I really wanted to find a way to talk about my new toaster, so please humour me and let’s dive into some thoughts around Modern design, Truth to materials, Replaceable components, Adaptability and Accessibility.

Modern design

That’s ‘Modern’, with a capital ‘M’. Modernist design follows the notion that form should follow function, along with a rejection of ornament. The materials used in a product should not be hidden or covered by unnecessary decorative finishes. They should be proudly on display, whether ‘conventionally’ pretty or not — their beauty coming instead from their efficiency and suitability to the task at hand. The design of this toaster definitely fits that description. Decoration is at a minimum on this bad boy; the screws that hold it together are proudly visible; the durable plastic controls look like durable plastic; there’s a big but beautifully functional lever sticking out of the front of it.

Simplicity is key

So how does this relate to web design? I’m a big believer in stripping out superfluous ornamentation in design. I care more about finding the switches quickly than admiring the toaster’s wordmark, just as I want to see your site navigation prioritised over an excessively large logo.

I avoided using superfluous design elements in this clean and simple design for Spike Island’s website

Just like the plastic dials on my toaster, make the components of your website look how a user would expect them to look. Why meddle with a tried and tested design for a button or a form when it has been proven to work? Furthermore, don’t put a ton of unwarranted functionality in your designs. I don’t need a defrost setting, just as I don’t need a chatbot popping up every 5 seconds when I’ve minimised it once already.

Compare the two hamburger menu icons above. Which one is more likely to be found and recognised by your user?

Providing a clean and simple interface for the user helps them to navigate your online platform without unnecessary distraction, allowing them to complete the task they came to do and have an all-round great experience.

Truth to materials

Just because you’re being ‘clean’ with the design, doesn’t mean you have to be boring. I propose that the idea of Truth to Materials in this case relates to pixels, which can be lovely, bold, vibrant little things full of rich colour and eye-popping saturation.

The RGB version of Bristol ideas’ colour palette is allowed to shine brightly in this design I recently completed

Other materials we designers have at our disposal include dynamic layouts and modern technical functionality which can create surprising and delightful experiences for users. Use your materials to their full potential, but ask yourself, “Is this helpful?” or “Does this help to create an enjoyable experience?”

Google’s Material Design system provides some great guidance on creating designs that achieve beauty through simplicity and I recommend you check it out if you’re interested in clean, modern designs for apps and the web.

Google’s Material Design system

Replaceable components

Just as you know the feel-good vibes of a new purchase, I’m sure you know the dissatisfaction and guilt at having to take a broken appliance to the recycling centre, destined for disassembly — or worse — landfill, because it can’t be repaired. Such is the way of the modern world. Thankfully, my toaster is not entirely of the modern world, having been in production pretty much unchanged since the Sixties. If something breaks on this gizmo, it’s easy to replace or repair.

Wouldn’t it be great if replaceable components were an option for both websites and electrical appliances?

If any of my lovely clients are reading this, I hate to disappoint you by telling you that nothing is ‘future-proof’ in the world of website design and that your website is not going to be looking great in 5 years if you do not maintain it (unlike, ahem, my toaster). Do not despair though: your design and development team can at least build in such a way that components which are no longer fit-for-purpose can be switched out or upgraded. Taking a modular-based approach to design is key in not having to throw the whole thing away when you need to make a change.

A component-based approach to web design helps you to strip out, update and add to your website in the simplest way — removing the need to throw away the whole site.

A modular design system breaks down the various functions you need and provides a suite of individual tools that can be used anywhere across the site. Rather than have a uniquely designed form for your contact page, ask your designer to create a generic set of form components (input fields, check boxes, radio buttons, submit button) that can be rearranged in any order and used on any page. This modular approach should extend to as many areas as possible on your site (expandable colour palette, reusable calls-to-action, updatable image galleries, etc.) so that as your requirements for the site evolve, your site can evolve with them.

With a modular system in place, it should be easy for a new designer or developer to pick up the kit of parts next month, in a year or in 5 years’ time and create new components and solutions to replace old or broken ones, meaning you’re not tied to one agency or freelancer.

Giving a customisable experience

If I’m making only one slice in a 4-slice toaster, why should I heat three empty slots? My toaster has a control for activating the hot bit (that’s a technical term) in only the slots you want to use, which is not only genius, but also customisable to my preferences. (It also saves energy and I could write a whole new article on saving energy in website design!).

Give your site visitors an option to customise their experience too. On my website for example, there’s a high contrast switching mode which — while it may appear to be just a bit of fun – can help users with their enjoyment and understanding of your site.

My website incorporates a switch which enables users to customise their experience by pausing animations and selecting a colour theme with a greater contrast ratio

Think about how users with different needs will navigate your content. Have you provided a way for them to use assistive technologies such as screen readers? Or perhaps your autoplaying video could be better implemented with play/pause controls for those who find it annoying or just want to save their data? W3C have some great guidance on accessibility considerations if you’re just getting started in designing customisable, adaptive experiences for your site’s users.

Summary

Thanks for sticking out this rather daft sermon on my new toaster. I hope however, it has provided some toast-shaped food-for-thought on how you could approach your next project whether you’re a designer or a site owner. These are just a few starting points too — don’t forget to look around you for good design everywhere you go. Perhaps you recently used a ticket machine that was a joy to navigate? Or an app that helped to bring a little moment of delight to your day? If so, see if you can take inspiration from the universal principles that shape all great design experiences.