Meaningful design in 2021

Written by Chânelle Sharp - December 14, 2020

As a Digital Designer here at Wholegrain Digital, it’s paramount that I keep up to date with latest developments in technology and design. At this time of year, I like to do a Google search to see what web design trends UX/UI designers were anticipating to be relevant over the coming year. This year, I was pleasantly surprised when I looked back, to discover an article from Webflow highlighting an alternative to the usual trend lists. 

This particular list looked past the obvious visual aesthetics that we tend to focus on in design, (white space is still important) but instead focused their attention on talking about some of the things that really matter when designing for the web, and that is what I want to reflect on in this blog post.

Just for the time being, let’s ignore the usual visual trends that us designers often daydream about incorporating into our projects and delve a little deeper to focus on the bigger picture.

So, what meaningful web design trends am I talking about and why are they particularly important this year and in the future of web design? Today, I’m talking about the importance of accessibility and inclusivity in design.

Accessibility

Last year, Alex wrote a great blog post highlighting what he’d learnt about accessibility in design and how he is incorporating his new found knowledge into his design work here at Wholegrain. When I read his post a few months ago I knew that as the new designer on the team, I needed to seriously ‘up my game’ and educate myself further to ensure that any websites I design in the future comply with, at the very least, AA accessibility standards. 

Accessible design is defined as:

A design process in which the needs of people with disabilities are specifically considered. Accessibility sometimes refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities.

Washington University

How is this relevant to how we design websites?

If you think of accessibility as the foundation for your online presence, you can only start building upon this once you have a solid structure in place. Like the proverbial house built on sand, without this solid base, everything built on top will eventually fall down. 

Only once you have laid the foundations, can you then start the process of designing and building, knowing that although your project might have some small surface cracks, ultimately it’s not going to collapse.

Why should your website be accessible?

Aside from the risk of potentially being landed with a large legal battle somewhere down the road if it’s not, having an accessible website that can be enjoyed by all is, how do I put this simply..? Nice, lovely, welcoming, inclusive… I could go on. 

Companies are becoming increasingly aware that their websites need to be compliant with ADA requirements (Americans with Disabilities Act), and failure to do so can result in severe legal issues such as the Domino’s lawsuit case that was widely broadcast in the media last year. To put it simply, we should try our absolute best to design a website that can be accessed and used by all. 

If I asked you, ‘why would you not want a website that can be used by everyone?’ I’m pretty sure you’d find it hard to come up with any reasoning to not do so. Which leads me on to…

How do I make it accessible?

Thankfully there are plenty of resources available online that are helpful for all members of the team when it comes to ensuring accessibility compliance across a website design and build.

From a designer’s perspective, a great starting point is gaining a solid understanding of Web Accessibility Principles from W3.org. This covers guidance and resources for all team members and you can even take the free online course to get yourself up to speed. There’s also a specific section on guidance for designers, that you can go through and crosscheck your design against, before presenting it to the client. 

David, one of our Project Managers, recently shared this resource from Voxmedia with the team. It’s a handy checklist for all team members to go through, to help contribute towards building accessible websites. 

And here are a few useful tools that I use daily, to help me make good decisions when it comes ensuring my designs are accessible to all.

Resources:

WebAim – An online colour contrast checker
Stark – A tool that works with Sketch, Adobe XD and Figma to check colour contrast
Contrast – A macOS app for quick access to WCAG color contrast ratios
Accessibility Assistant – A Sketch plugin that can help you identify areas in your design that aren’t accessible or compliant with WCAG 2.01
TinyJPG – An image compression tool which reduces the file size whilst maintaining quality. This is important to do as it’ll decrease the loading time of a website which is helpful to those on slower or expensive connections.
Vecta – This works on the same principle as TinyJPG. It will compress SVGs by up to 80% to save on file size.

It’s not only how we design or build websites, we also need to think carefully about how the content itself is presented to our audience. The National Disability Authority in Ireland explains clearly and concisely how there are other factors to consider, such as:

  • Have you provided a suitable text equivalent for everything that’s not text?
  • Can customers get all the important information from your videos and audio, even if they can’t see them? Can customers get all the important information from your videos and audio, even if they can’t hear them?
  • Did you structure your information, so that your customer’s technology can understand its structure?
  • Can your customers use your website with only a keyboard?

I’ve only chosen to highlight just a few examples from their website above. There are many more points to consider, so I would definitely recommend reading the full article to gain further insight. 

Designing for accessibility isn’t difficult, it just takes time and a little effort to to learn about, and gain some understanding of the issues that some of our visitors face on a daily basis. The more we learn about these issues, and how we can successfully tackle them, allows us to set a positive example in an industry that’s only just started waking up to the impending realisation that actually, accessibility matters and it matters the most.

Inclusivity

To be inclusive is to create a space that is welcoming regardless of race, ethnicity, age, education, profession and including but not limited to, people with disabilities. It exists alongside accessibility, and is something we should consider just as important when we are thinking about how to design solutions. 

We want to create products that all of our audience can enjoy, and are able to use exactly as they require. Being flexible with our approach and demonstrating a comprehensive understanding that each of our visitors are unique, and therefore will require different outputs, means we have to consider all of this at the beginning of any design process.

So how do we make this work when in design?

Exclusion happens when we solve problems using our own biases.

Microsoft

Bearing in mind the above notion, the first thing you can do to avoid unconscious bias, is start by getting the whole team on board! Working collaboratively with your team means you’ll gain an abundance of insights from different perspectives – after all, we all don’t think the same way! By pushing yourself out of your comfort zone and starting a conversation, you’ll gather knowledge from others’ perspectives and have the chance to challenge any assumptions or raise any issues before the design makes its way to your client. 

Incorporating others’ perspectives from the get-go means we are already starting off with the best intentions and can only strengthen our work as we move on through the design process.

As part of the process, you could consider using this useful toolkit from Microsoft. This has been created to help you to work through various stages of the design process and helps you explore every possible avenue, to validate your decision making and essentially create the best product for all. 

The diagram below shows at a glance how there are different constraints to consider that can apply to your audience depending on their permanent, temporary and situational disabilities. These are all things we should consider as standard when designing inclusively.  

Image of cartoon people, showing examples of permanent, temporary and situational disabilities

The Persona Spectrum, by Microsoft

As well as focusing on the content and how we talk to our visitors by using a tone of voice that is simple, clear and concise to understand, we also need to be mindful that a percentage of our visitors might have a slow internet connection. By ensuring that we design websites with efficiency in mind, keeping them light with content or even having a site that accommodates to how good your connection is (like this clever site from Branch),  you can provide visitors with the same experience, no matter where in the world they are.  

Having a clear understanding of your visitors and their current barriers allows you to take positive steps to build and design a solution that decreases the mismatch between them and the functionality of your site. 

Here at Wholegrain, we are constantly improving our efforts to ensure that we are designing integral solutions that are modern, functional, accessible and inclusive to all. Ensuring that all visitors who access the websites we create can have an enjoyable user experience is all part of our mission of having a positive impact on the world, by being part of the shift towards an internet that’s good for people (all people!) and the planet (and includes plenty of white space!).

If you’d like our help in making sure your online presence is more accessible and inclusive (and of course sustainable!), we’d love to have a chat about how we can create something together.