resources-for-learning-about-inclusive-design-and-accessible-design

At Center Centre, the UX design school where I’m a faculty member, I get to review many resources on inclusivity and accessible design.

I collect the best resources I find and review them with my team. Then, the team and I apply what we learn from those resources to our curriculum. Over time, our curriculum grows stronger because it contains more competencies around inclusive design and accessibility.

“Over time, our curriculum grows stronger because it contains more competencies around inclusive design and accessibility.”

Wall graffiti that says “For All.” Photo by Jon Tyson on Unsplash.

Inclusive Design vs. Accessibility: What’s the Difference?

It took me a while to understand the difference between inclusive design and accessibility. After researching these terms, I now see them as two sides of the same coin:

  • Inclusive Design is the principle of designing for people who have a diversity of needs, experiences, and backgrounds.
  • Accessibility is the measurable implementation of inclusive design.

You apply inclusive design during each stage of the design process. For example, while writing content for a project, you and your team will raise questions like, “Could someone with a cognitive impairment understand this content?”

You implement accessible content through the use of specific design techniques. For example, to make sure someone with a cognitive impairment can understand your content, you’ll write content using plain language. Then you’ll conduct usability tests on that content with users who have cognitive limitations. If these users don’t understand the content, you’ll refine the content, then test it again.

“Accessibility is the measurable implementation of inclusive design.”

My Favorite Resources


Below are some of my favourite resources on inclusivity and accessibility. These resources have been invaluable to us at Center Centre as we weave inclusivity and accessibility throughout our courses. I’m confident you’ll find these resources useful for your design practice, too.

Books

“Accessibility for Everyone” by Laura Kalbag

Laura Kalbag’s book is one of my favourite accessibility resources. Throughout the book, Laura gives you a thorough overview of accessible design, and she explains how to create accessible designs during each stage of a design project. As her book explains, accessibility is not something we consider once during a project, then move on. It needs to be a consistent part of the design process.

“Accessibility is not something we consider once during a project, then move on. It needs to be a consistent part of the design process.”

“A Web for Everyone” by Sarah Horton and Whitney Quesenbery

Sarah Horton and Whitney Quesenbery’s book is another excellent read about inclusive design and accessibility. The book covers a broad range of accessibility — everything from cognitive limitations to visual impairments and beyond. The book provides tools you can either use as-is or customize to fit your team’s needs.

“Design for Real Life” by Eric Meyer and Sara Wachter-Boettcher

In this book, Eric Meyer and Sara Wachter-Boettcher explain how our users are not always in a relaxed and happy state. Eric and Sara show you how to design for stress cases — situations where users are in a heightened state of stress or panic. The authors also challenge you to consider the outcomes of design decisions that seem harmless but can have a detrimental effect on users — even something as simple as asking users to indicate their gender on a form.

“Just Ask: Integrating Accessibility Throughout Design” by Shawn Lawton Henry

Shawn Lawton Henry generously published this book for free online. You can read it as a series of web pages. While the book was published over ten years ago, the principles are still relevant to how we design today. This book was one of the first resources I came across that encouraged UX designers to include people with disabilities in user research.

“Accessibilities benefits people without disabilities, and organisations that develop accessible products.” – Just Ask

Articles

Designing for Accessibility is Not That Hard

In this article, Pablo Stanley gives an excellent overview of why accessible design is critical and how to infuse it into your process. As Pablo says in the article, “Designing a product from scratch that meets the requirements for accessibility doesn’t add extra features or content; therefore there shouldn’t be additional cost and effort.”

Designing for Accessibility and Inclusion

Steven Lambert’s article takes a deep dive into the breadth of designing for inclusivity and accessibility. The author uses the approach of lenses to explain how you can design for a diversity of needs throughout a design project.

Usability Testing with People on the Autism Spectrum: What to Expect

A great way to determine if your design is appropriate for someone on the autism spectrum is to conduct user research with people who have autism. Yet very few UX researchers include people with autism in their research. In this article, Zsombor Varnagy-Toth explains how to conduct usability tests with people on the spectrum and what to expect in the process.

The Audience You Didn’t Know You Had

Angela Colter explains how to write simple content that’s easy to read and understand. While simple, plain language helps users with cognitive limitations and users who are not are fluent in English, it also helps everyone. Even “advanced readers” appreciate the content they can understand quickly. And as Angela explains in the article, writing in plain language is not dumbing down your content.

Think Like an Accessible UX Researcher Part 3: Five Common Mistakes in Usability Testing and How to Avoid Them

In this article, David Sloan explains how conducting user research with people with disabilities is a great way to learn from a historically neglected audience. While David’s article focuses on usability testing with people who use screen readers, you can apply these concepts to conducting research with people who have a range of impairments.

Colour Accessibility: Tools and Resources to Help You Design Inclusive Products

Colour in our designs can affect users in many ways. A Stephanie Walter explains in this article, some users may be colour blind, some may be visually impaired, and some may be using our designs in environments we didn’t consider. Stephanie explains how we can apply colour in inclusive ways that help users rather than hinder them.

How to Advocate For Accessible and Inclusive Tech Events

It’s important to make our designs inclusive and accessible. We also need our design events to be inclusive and accessible to attendees. In this article, Mikey Ilagan explains how to organize design and technology events that are accessible. In the article, he addresses the question, “Would the same people we’re hoping to serve with our technology feel welcome and included at our events?”

Podcast

A11y Rules

A11y Rules is a fantastic podcast. It’s one of the few podcasts out there that focuses on inclusivity and accessible design. The host, Nicolas Steenhout, is an accessibility consultant who helps companies make their products better for everyone. I learn something new from every interview he conducts on the podcast.

Email List

A11y Weekly

After signing up for this email list, you’ll receive a fantastic email once a week. Curated by David A. Kennedy, each email provides links to articles, books, podcasts, and other resources about accessibility. This is one email list you don’t want to miss. I’ve discovered many good resources through this list. David graciously does the hard work for you by scouring the web for fresh content about accessibility, then sharing it each week.

Other Resources

Inclusive: A Microsoft Toolkit — Manual (PDF)

Microsoft has done great work around inclusive design, and they share much of their knowledge in this manual. As this resource explains, by designing for someone with a permanent disability, someone with a situational limitation can also benefit. One of my favorite parts of the manual is the Persona Spectrum. I find it essential for understanding the nuances of disabilities and limitations.

Inclusive: A Microsoft Toolkit — Activities (PDF)

Also from Microsoft, this resource provides a list of activities you can use at your organization to infuse inclusivity into your design process. Like the manual above, this resource also includes the Persona Spectrum. The spectrum displays the senses touch, see, hear, and speak against an axis of permanent, temporary, and situational disabilities. It’s a great tool for understanding the array of user needs when it comes to accessibility.

You can find more resources from Microsoft on their inclusive design website.

Go Forth and Be Inclusive

I hope you find these resources as useful as I have at Center Centre. This list includes just a handful of the books, articles, podcasts, and other resources I’ve used.

Thanks to Mikey Ilagan for his input on this article.

Originally posted on Jessica Ivins’ Medium.

the-9-best-interactive-design-of-the-year

We live in the future. Cars drive themselves. Computers beat humans at Go. Voice assistants aren’t just here; they’re 50% off on Amazon. We can put digital holograms into meat space and our fleshy bodies into software. We can even bring the late ’80s Michael J. Fox into the modern era. That’s real life time travel!

More and more, computation feels boundless. Ultimately, though, it’s the ways we interact with computers that ensure we can enjoy those technological advancements. It’s also design’s role to mitigate, or provoke, the ensuing risks. The best interactive projects of 2019 include ergonomic breakthroughs in VR, artificial intelligence that serves as a check on data-guzzling corporations, and one very hilarious website to buy a purse.

Q genderless AI

[Image: Virtue]

Ask a room full of designers why voice assistants are women by default, and you’ll get some nervous giggles that bury hard truths. (I know because I’ve done it!) But as society has come to recognize gender as a spectrum, it’s absurd to talk about male or female assistants at all. Q is the world’s first genderless AI, sampled from the speech of many nonbinary people, averaged together into one voice. And Q just makes a whole lot of design sense, too, given that computers have no conception of gender in the first place, so why should we ascribe it? [Link]

Virtual reality for everyone

[Photo: Oculus]

Facebook may have cost us our democracy, but at least it brought us the first, truly usable, self-contained virtual reality system that requires no wires or external cameras. The Oculus Quest, which launched this year for $400, is the iPod of VR. That’s because it solves not one but half a dozen huge shortcomings with virtual reality’s core interface—and most practically, how you can blindfold someone with a VR headset but ensure they don’t punch through a wall. [Link]

A privacy assistant for your voice assistant

[Image: courtesy Alias]

Our voice assistants, like Google Home and Amazon’s Echo, are always listening. Technically, they’re supposed to only perk up and begin to eavesdrop with a “wake word,” but to hear that word, they have to be listening all the time! Project Alias is an open source piece of hardware/software that can literally stick onto a voice assistant and deafen it with white noise. Only when you tell it the wake word (and since Alias never connects to the cloud itself, it’s never sharing anything private you say) does it allow Google or Amazon to hear you. Alias could be a precursor to a whole new UX layer that’s built to protect us from big corporations. [Link]

Gleeful shopping

[Screenshot: courtesy Man Repeller]

Online shopping tends to be about the goods rather than the experience. But Repeller, an experimental store by the fashion blog Man Repeller, is quite the experience. It’s an unpredictably zany, fun, and net-artsy take on buying apparel and accessories. Put it this way: When is the last time Amazon created a custom Mad Libs? Repeller teases a wave of ecommerce that could be about the journey of shopping rather than the destination. [Link]

A phone with flesh

[Photo: courtesy Marc Teyssier]

Stroke. Tickle. Pinch. These are the gestures of Skin-On Interfaces, an experimental take on smartphone UI that imagines your phone is not a slab of aluminum but a chunk of flesh. On one hand, it’s incredibly creepy. On the other, Skin-On Interfaces effectively demonstrates just how far we are from interacting with gadgets with the full, gestural language of humanity. [Link]

Humans born from a button press

[Image: generated by thispersondoesnotexist.com]

I hit F5. I just created life. I hit F5 again. A new soul hits my screen. This is the power of This Person Does Not Exist, which combines a cutting-edge generative AI, which can produce convincing human faces from thin air, and a stupid-simple interface for doing so. In the era of Deepfakes, we’re entering a war on what’s real. This Person Does Not Exist articulates how Photoshop was only the beginning. Faking identity no longer requires skill when clever AI meets barebones UX. [Link]

Robot feeding

[Photo: courtesy University of Washington]

A million people in the U.S. cannot feed themselves, but a University of Washington research project is building a robot arm that’s capable of seeing food, poking it appropriately, and angling it at the perfect trajectory for one’s mouth. Perhaps that sounds simple. It is not. This is deep, automated ergonomics work (imagine forking a squishy banana versus a cherry tomato). And while in its early days, it’s a humbling demonstration of the soft skills robots will need to learn if they’re ever to care for us. [Link]

UI lit by room

Phones of today automatically turn up and down their brightness to match the brightness of the room. It’s a handy feature that saves your eyes from burning out of their sockets in a dark space. But Apple alum Bob Burrough imagined where this technology could go next. He developed a screen system that could actually respond to lamps, and other direct sources of light, to illuminate more like a book than a smartphone. It’s a wild effect the first time you see it. And then? It just looks normal. We should be making digital phones work more like normal analog objects. [Link]

Mind-blowing cabinets

These wooden cabinets by Sebastian ErraZuriz shapeshift, with panels that fan out and drawers that nest like matryoshka dolls. It’s enough to make you never want to see the minimalist design of Ikea again. Hello maximalist UX. Let’s make living our lives not as easy as possible but as fun as possible. [Link]

6-design-factors-behind-a-truly-successful-website

Are you building a new website but don’t know
where to start? There are over 1.5 billion live websites online and the number
grows by the second. Standing out from your competitors can be challenging, but
with well-thought-out web design and some SEO, it’s a no-brainer.

Here are 6 website design factors you should
follow to create a stunning business website your customers will love.

1. Simple, Functional Design

Internet users have short attention spans and
will immediately leave a website with flashing images, walls of text, and too
many graphics. A successful website design should be simple, functional, clean,
and user-friendly. You can use free or paid website themes and templates or
hire a web designer to create a custom website for your business and customers.

2. Easy Navigation and User Experience

While developing a website, your first
priority should be user experience. This includes fast loading, easy
navigation, no error pages, and accessible information.

For example, if you’re a lawyer and need
law firm website design, keep the content simple and clean. Add calls
to action and a contact page so people can call or email you.

3. Clear Calls to Action

When visitors land on your website, they want
to know what action to take after they’re done browsing. Invite them to leave
their email address, fill out a form, click a button, buy a product, or share
your content on social media. Make sure there are buttons for each CTA and add
them to every page of your website.

4. Mobile Responsiveness

Mobile responsiveness is a search optimization
ranking factor, with over
50% of all website traffic
 coming
from mobile devices. If your website is hard to access or navigate on mobile
devices and tablets, your traffic will plummet and your bounce rate will soar.

For search engines, this means users aren’t
happy with their experience and aren’t finding what they were looking for.
As a result, your website will rank lower on search result pages.

5. SEO Optimization

Designing a good website goes hand in hand with
search engine optimization. Everything from the ease of navigation to content
and images should follow the latest rules of the search engines.

The time users spend on your website, how
quickly they leave, which links they click, and how quickly the website loads
are all important SEO factors.

6. Quality Content

A business blog is an entirely different
section of the website, but equally important nevertheless. This is where you
publish articles, blog posts, news, videos, and other content that you can share
on social media.

Before you create a blog, consider your buyer
personas and their demographics. What is the purpose of visiting your
website? Then you can tweak and adjust the content to meet their needs.

Follow These Design Factors to Create a Successful
Business Website!

Having a successful website that attracts
customers is hard work, but well worth your time and money. From mobile
responsiveness to simple, clean layout, following these design factors will
help you stand out from the crowd.

Need more web design tips? Check out some of
the other articles on our website where we share the latest industry news and
trends.

four-ways-design-systems-can-promote-accessibility

Design systems help us to make our products consistent, and to make sure we’re creating them in the most efficient way possible. They also help us to ensure our products are designed and built to a high quality; that they’re not only consistent in appearance, and efficiently-built, but that they are good. And good design means accessible design.

1 in 5 people in the UK have a long term illness, impairment or disability – and many more have a temporary disability. Designing accessible services is incredibly important from an ethical, reputational and commercial standpoint. For EU government websites and apps, accessibility is also a legal requirement.

With that in mind, I’ll explain the four main ways I think we can use design systems to promote accessible design within an organisation, and what design systems can’t do.

1. Bake it in

Design systems typically provide guidance and examples to aid the design process, showing what best practice looks like. Many design systems also encompass code that teams can use to take these elements into production. This gives us an opportunity to build good design into the foundations of our products, not just in terms of how they look, but also how they work. For everyone.

Let me give an example.

The GOV.UK Design System contains a component called the Summary list. It’s used in a few different contexts on GOV.UK, to summarise information. It’s often used at the end of a long or complex form, to let users check their answers before they send them, like this:

A table with contact information in it.

Users can review the information and, if they’ve entered something incorrectly, they can go back and edit their answer by clicking the “Change” link on the right-hand side. This works well if you can see the change link, because you can see which information it corresponds to.

In the top row, for example, I can see that the link is giving me the option to change the name I’ve entered because I can see the name label, and the name I put in is next to it.

However, if you’re using a screen reader, this link – and all the others – will just say “change”, and it becomes harder to tell what you’re selecting. So to help with this, the GOV.UK Design System team added some visually-hidden text to the code in the example, to make the link more descriptive.

A screenshot of the table form component with the HTML beneath it. The span element is highlighted, and it has the classname of govuk-visually-hidden.

Sighted users won’t see this text, but when a screen reader reads out the link, it’ll say “change name”. This makes the component more accessible, and helps it to satisfy a Web Content Accessibility Guidelines (WCAG 2.1) success criterion for links which says we must “provide link text that identifies the purpose of the link without needing additional context”.

By building our components with inclusion in mind, we can make it easier to make products accessible, before anyone’s even had to think about it. And that’s a great starting point. But that doesn’t mean we don’t have to think about it – we definitely do. And a design system can help with that too.

2. Explain it

Having worked as the GOV.UK Design System’s content designer for the best part of 3 years, I’m somewhat biased about this, but I think that the most valuable aspect of a design system is its documentation.

(Here’s a shameless plug for my patterns Day talk on design system documentation earlier this year, if you want to know more about that.)

When it comes to accessibility, written documentation lets us guide good practice in a way that code and examples alone can’t.

By carefully documenting implementation rules for each component, we have an opportunity to distribute accessible design principles throughout a design system. This means design system users encounter them not just once, but repeatedly and frequently, in various contexts, which helps to build awareness over time.

For instance, WCAG 2.1 warns against using colour as “the only visual means of conveying information, calling an action, prompting a response or distinguishing a visual element”. This is a general principle to follow, but design system documentation lets us explain how this relates to specific components.

Take the GOV.UK Design System’s warning buttons. These are used for actions with serious, often destructive consequences that can’t easily be undone – like permanently deleting an account.

A red button with the text 'Delete account'.

The example doesn’t tell you this, but the guidance explains that you shouldn’t rely on the red colour of warning buttons to communicate that the button performs a serious action, since not all users will be able to see the colour or understand what it signifies.

Instead, it says, “make sure the context and button text makes clear what will happen if the user selects it”. In this way, the colour is used as an enhancement for people who can interpret it, but it’s not necessary in order to understand it.

Making the code in our examples and component packages as accessible as possible by default is really important, but written documentation like this lets us be much more explicit about how to design accessible services.

3. Lead by example

In our design systems’ documentation, we’re telling people what good design looks like, so it’s really important that we practice what we preach.

Design systems are usually for members of staff, rather than members of the public. But if we want to build an inclusive workplace, we need to hold them to the same standards and ensure they’re accessible to everyone who might need to use them – today and in the future.

One of the ways we did this in my team, was by making sure the GOV.UK Design System supports users who need to customise the colours they use to browse the web. There are a range of different user needs for changing colours on the web. People who are sensitive to light, for instance, might find a white background too bright. And some users with dyslexia find certain colours easier to read than others.

My colleague, Nick Colley, wrote about the work we did to ensure GOV.UK Design System’s components will work when users change colours on GOV.UK. To ensure we weren’t introducing barriers to our colleagues, we also made it possible to customise colours in the GOV.UK Design System website itself.

Screenshot of the GOV.UK website with green and white text and black background.

Building this flexibility into our design system helps to support our colleagues who need it, but it also shows others that we’re committed to inclusion and removing barriers.

4. Teach it

The examples I’ve drawn on here have mostly focused on design system documentation and tooling, but design systems are much bigger than that. In the fortuitously-timed “There is No Design System”, Jina reminds us that tooling is just one of the ways we systematise design:

…it’s a lot of people-focused work: Reviewing. Advising. Organizing. Coordinating. Triaging. Educating. Supporting.”

To make a design system successful, we can’t just build a set of components and hope they work. We have to actively help people find it, use it and contribute to it. That means we have to go out and talk about it. We have to support people in learning to use it and help new teams adopt it. These engagement activities and collaborative processes that sit around it can help to promote awareness of the why, not just the what.

At GDS, we ran workshops on accessibility in the design system, getting people to browse various web pages using visual impairment simulation glasses to understand how visually impaired users might experience our content. By working closely with our systems’ users and contributors like this, we have an opportunity to bring them along on the journey of making something accessible.

We can help them to test out their code and content and understand how they’ll work on different platforms, and how they might need to be adjusted to make sure they’re accessible. We can teach them what accessibility means in practice.

These kinds of activities are invaluable in helping to promote accessible design thinking. And these kinds of lessons – when taught well – are disseminated as colleagues share knowledge with their teams, departments and the wider industry.

What design systems can’t do

Our industry’s excitement about design systems shows no signs of abating, and I’m excited about the opportunities it affords us to make accessible design the default, not an edge case. But I want to finish on a word about their limitations.

While a design system can help to promote awareness of the need to be accessible, and how to design products and services that are, a design system can’t make an organisation fundamentally care about accessibility.

Even with the help of a thoughtfully created design system, it’s still possible to make really inaccessible products if you’re not actively working to remove barriers. I feel lucky to have worked somewhere that prioritises accessibility. Thanks to the work of some really brilliant people, it’s just part of the fabric at GDS. (For more on that work and those brilliant people, I can’t think of a better place to start than my colleague Ollie Byford’s talk on inclusive forms.)

I’m far from being an accessibility expert, but I can write about this because I’ve worked in an organisation where it’s always a central consideration. This shouldn’t be something to feel lucky about. It should be the default, but sadly we’re not there yet. Not even close.

Earlier this year, Domino’s pizza was successfully sued by a blind customer after he was unable to order food on their website or mobile app, despite using screen-reading software. And in a recent study carried out by disability equality charity, Scope, 50% of respondents said that they had given up on buying a product because the website, app or in-store machine had accessibility issues.

Legally, reputationally and most importantly, morally, we all have a duty to do better. To make sure our products and services are accessible to everyone. We can use design systems to help us on that journey, but they’re just one part of our toolkit.

In the end, it’s about committing to the cause – doing the work to make things accessible. Because accessible design is good design.

how-to-design-better-buttons

A button is an interactive element that results in the action described on it. If it says “save” on a button, clicking it will most likely “save” something. It’s also one of the most important interactive elements of any digital product.

It can lead to a purchase, download, send, among other important actions. Digital buttons are also descendants from real-world buttons, like on a TV remote, record player, or game controller.

The most important thing to know is a button should look like a button, and the most important rule for designing a button is to make it stand out enough so it won’t be confused with anything else.

By removing elements from a button it’s function starts to dissolve and disappear. It becomes decoration or text, losing its actionable qualities.

Familiar = good

We are used to certain shapes and forms that are normally associated with an action. The more our button looks similar to what we associate with buttons, the better. This is why a rectangle (or a rounded rectangle) is always the safest choice for a button.

This element will be immediately identified as a button.

Other shapes and forms (triangle, circle, organic) are not as recognizable to the user. Proceed with caution, and use them only when the general style of your product requires deviating from the norms.

Elements that can take much longer to be identified as being actionable.

Button dissection

While designing buttons think about each element and choose wisely. Using the company in question’s brand or style guide as a baseline, think about what kind of buttons will match the brand and fit well within the interface.

You should set the padding and safe space using grid base numbers. In the above example, the left inner spacing is twice as big, as the vertical spacing, which is a safe ratio choice for increased readability.

Spacing and alignment

Unevenly spaced buttons are one of the most common problems of interfaces. Double-check if your button labels are centered both horizontally and vertically. Create guides if you need to be sure.

Aside from grid-based methods, a safe way of choosing button spacing can also be done with the uppercase “W.” If at least one “W” fits on each side of the button label, you’re safe. On the sides, it’s even better to use double the “W” rule for increased readability.

Don’t forget about the safe space of, or space in between, your buttons. If you have a group of them, the safe space should be individual for each one — don’t overlap it!

The right size

Both web and mobile buttons should also have the right minimum size. If your buttons are too small, it will be difficult to tap or click on them. That results in frustration and can lead to users uninstalling your app. The best way is to start with 44 x 44 pixels for all interactive elements on mobile devices.

The sweet spot is somewhere around 50 pixels for mobile buttons. In the case of cursor-based devices, 32x 32 pixels should also work. Remember that even on desktops, the larger the button the easier it is to use

Good practices

Important buttons also work well with icons. A checkout is quickly identified by a basket or a cart icon, but only as long as the word “checkout” also appears.

A right arrow or chevron placed after the button label makes the resulting message stronger. The user is more compelled to click and “proceed.” This works well if you’d like to strengthen your CTA.

Buttons with shadows are also more “clickable” and noticed much faster than flat ones. Add a subtle drop shadow in the button to make it stand out from the background more.

Rounded corners

Rounded buttons are considered more friendly and positive than sharp edges. At the same time, they make it a lot harder to design content around them. If you have left-aligned text just above the button, the more rounded the corner the less that text will visually fit — it’ll make you feel as if the left margin is in two places at the same time.

Aligning icons

Good icon alignment on buttons is one of the hardest things to do. In many cases the relation between font-weight and icon-weight is specific to them. There is however a simple and useful rule that works in most cases.

Depending on our corner radius, we create a circle or a square the size of the height of our button. Inside it, we create another shape to house the icon. It should have a padding inside the larger shape which is the same size as our text height. Then we place our icon inside the smaller shape.

In the case of a chevron, it’s best for it to be text-height. You can also check the line-width against the font width — the more closely matched the better the end result.

Edge balancing

If you’re using rounded buttons, keep in mind to have the same rounded corner ratios as other onscreen elements, otherwise, there will be imbalances in the margins.

The diagonal spacing is the same here as the one on the left side and the bottom. This results in a much nicer, faster to process outer edge.
The diagonal spacing is larger (left) and smaller (right) than the side spacing. That makes the edge stand out too much and take the attention away from the button itself.

Summary

When you start building out your primary, secondary, and tertiary buttons, try to remember to check them against a couple of factors every time. Even small inconsistencies or bad alignments can lead to lower conversion. When it comes to buttons, conversions and clicks are all that matter.

In summary, remember to:

  • Make your button look like a button
  • Have the label centered both vertically and horizontally
  • Have enough space (padding) inside the button
  • If you’re using an icon choose the right size and alignment
  • Set your border radius depending on where the button will be used
  • And then check if that radius matches your other on-screen elements
  • Make it the right size! The bigger the button the easier it is to use. That includes desktops!

Good luck!

This article was originally published on UX Collective by Michal Malewicz, a designer with over 20 years of experience in building digital products. CEO of the HYPE4 agency and author of the “Designing Interfaces” book.

Read next:

Hackers steal $480,000 worth of NULS cryptocurrency from its dev team

logo-design-tips-for-fitness-and-health-businesses

Which are some of the most impact health and fitness brands? Do you know that?

Let us tell you the answer — the ones that not only inspire but empower. Whether you’re already into healthcare business or want to kick-off one by helping people shed those extra kilos for summer, it’s imperative to present your brand through a logo that would influence customers. It can persuade them to join your gym or studio classes.

But before you jump start, let’s take a look at these stats surrounding this industry. According to the International Health, Racquet & Sportsclub Association, the health & fitness industry is growing by a rate of 3 to 4% per year in the US. At present, about 20% of adults in America own a fitness club membership, and this number is still growing with each passing day.

Now you know the competition is going to be stiff. And if you are unable to grab the attention of your target audience, business survival would be hard.

The human brain can process visual information 60,000 faster than the plain text. So, getting your logo game right is the key to success. When you start considering a fitness logo design for your business, you need to look at the bigger picture instead of focusing on just any design. You want to make sure that your brand logo looks impressive, but it’s also identifiable no matter where you put it on.

The first step in designing a fitness logo, either by logo maker tool or by hiring a professional designer,  is to keep in mind that it will be placed on various platforms. Therefore, the logo should retain its identity no matter what the size or placement is. For example, the logo appearing on your business letterhead can be big and bold, but when it appears on a platform like Instagram, it can be small.

With these ideas in mind, here are a few tips to ponder upon when creating a fitness logo design. 

1. Focus on brand vision 

The first and foremost factor that you should set before starting with the health logo is – to identify your brand vision. A brand without a vision is soulless. Find out what you’re going to pitch to your audience — a particular type of fitness or overall health. Are your products the central focus or your customers? Also, consider what you want to achieve and how you want your customers to recognize your brand. Remember, your healthcare logo is a sale pitch; so you need to figure out what impression you want to leave behind with it.  

The motto is to convey who you are, what’s your mission, and what you want to deliver. 

2. Embrace concept-based ideas 

If you are planning to use images or icons without giving it a thought, stop it. Whatever element you plan to include should have a concept behind it, or it will end up being poles apart from your brand vision and mission.

Therefore, before using any element, shift your focus to the concepts first. The concept could be anything. It could be fitness equipment that reflects the equipment you use for training, or an icon or a symbol that has a deeper meaning and is relevant to your health and fitness business.

3. Use relevant colors & consider their effects 

Do you know, using the right colors can boost your brand recognition by 80%? Colors have a significant role to play when it comes to logo designing. It can influence your potential customers and also have a substantial impact on how they recognize your brand. Every color has a specific meaning, and it also depicts certain traits. Knowing these traits and meanings can help you understand what will work for your fitness logo design.

Additionally, as a health and fitness business owner, it is essential to know that logos with a maximum of two colors have lower printing costs than logos with multiple color combinations.

For fitness or health care logo, the best colors include:

  • Blue — that depicts dependability and trustworthiness
  • Yellow — that shows optimism and happiness
  • Green — that stands for health and peace
  • Orange — that shows confidence and friendliness

4. Choose the right and legible typefaces for your business

When you choose the font for your healthcare logo, keep these three most important factors in mind —

  • The font should be simple
  • It should be easy to read
  • It should give a clear view of what’s written 

Some typography choices may look aesthetically pleasing and beautiful, but they are not suitable to be used in a fitness logo. You want your audience to read what is written on your logo clearly at a glance. Choosing fonts from Sans Serif font families like Arial, Geneva, Helvetica, Roboto and more is a better option. For a more artistic and attractive font, you can choose from Slab Serif typefaces like Clarendon and Rockwell. However, you need to stay away from script font families like Comic Sans and Brush Script. 

5. Keep your fitness logo design simple yet catchy 

The best logos in the world have simple designs. The simpler the logo design, the easier it’s for people to remember the behind it and recall it. What’s common between the logos of Apple, IBM, HP, Nike, Pepsi, and Amazon? Each of the logos is simple but meaningful. Here, the idea isn’t to show the artistic side, but how creatively you can convey your ideas without being complex.

Don’t forget to incorporate the story (if you have any) into your fitness or gym logo design.

Conclusion 

The right logo design helps you bridge the gap between your business and your target audience. Whether you put it on brand’s signage, letterhead, brochure, social media post, email marketing campaign or fitness app; if your logo is well-designed, it will go a long way. Consider all the points discussed earlier before starting with your logo design.

Don’t forget to share your tips with us if you have any. 

is-web-design-easier-or-harder-than-it-was-10-years-ago?

Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don’t have any data for you, but I can shell out some loosey-goosey opinions.

HTML

HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool it’s the looser variant (instead of getting XHTML3 or something). More compatible this way. Maybe I’ll close my
and maybe I
won’t. Having better semantic tags (e.g.

) is great. Input types are wonderful. But none of this pushes HTML to be significantly easier or harder.

Same.

CSS

CSS has gotten easier. We use way fewer “hacks” all the time. I can literally feel it. The CSS we write today feels so intentional and direct. 10 years ago I feel like every other element had some kind of weird hack on it, and today, almost none. If CSS feels any harder, I’d wager it’s because the sites we’re building are bigger and more complex so the styling systems for them need to be all the more robust and the dangers of getting it wrong more stark.

Easier.

JavaScript

I’m sure there are strong arguments to be made both ways here. The language, perhaps, with all its recent syntactic innovation… perhaps easier. But what JavaScript is being asked to do, and what we’re doing with it, is so astronomically larger that more difficulty comes along for the ride. It’s similar to CSS in that way, but even more pronounced since we’re not just doing what we were before on a new scale; we’re building entire interfaces with the language in a way we just weren’t before.

Harder.

Domains

I mention this one because it’s such a crucial step in any given person’s ability to go from zero to actually having a website.

I don’t think buying a domain name is any easier. Domain names are a commodity market, so the companies selling you them are selling you them for some other reason, meaning the incentive is very high for them to push other products on you. For someone entirely green, I can imagine the confusion is either high or they don’t know enough for the confusion to settle in yet. Do I buy it through this page builder thing? Do I have to buy it through this page builder thing? Do I need the WHOIS protection? Oh god, what even is DNS? I guess I do want email, right? Or is that like some weird special hosted email? Ughjakd. I’m gonna call it a wash. Nothing has made this any easier or harder in a decade.

Same.

Hosting

There is so much money in hosting it kind of blows my mind that we don’t see deeper innovation here. I might argue it’s a little easier these days. But commodity low-end hosting isn’t terribly different or being any more or less helpful than it was a decade ago. We’re still largely stringing together our own bespoke build and deployment processes like we were 10 years ago.

Large-scale stuff might have seen a lot of innovation, a la AWS, but nobody is going to argue that stuff is anywhere near easy.

The most innovation we’ve seen is from companies like Netlify and Zeit who are looking at the developer experience wholistically from helping you run things locally, to testing builds in staging, to immutable deploys. I’d love to see all hosting companies realize that every single one of their customers needs to get their code onto their platforms and they have a massive opportunity to help us do that directly.

Slightly easier.

How people actually do it

I like thinking about HTML, CSS, and JavaScript. But of course, precious few people actually start with those technologies to build actual websites from scratch. Really they end up being treated as underlying technologies you dabble in amongst a slew of other tech.

You can build a website from just an index.html file. I’d argue more people should. But people reach for more “complete” solutions and customize from there. I know I did. The first websites I ever created were WordPress because it was a whole website in a box (with its own struggles) and I customized it. People still do that today, probably more now than 10 years ago, and I don’t feel like it’s significantly easier or harder. Or they reach for something familiar. I made a one-page index.html site not long ago, only to have it picked up by another developer who turned it into a create-react-app site but otherwise changed nothing. They just didn’t know how to work on it without React.

Or they use WordPress.com, or Squarespace, or Wix, or Shopify, or BigCommerce, or you know what I mean. This isn’t about what people can do, it’s about what people do do. And for most people, these apps significantly lower the bar of creating a website.

So, for the average person, is it easier or harder to go from zero to having some kind of website?

Much easier.

Can people actually do it?

If we’re talking about creating from scratch, it’s interesting to see who feels like they even hold those keys anymore. The whole idea for this post came from a conversation I had with someone who has been a front-end developer and was asked to build a website by a friend. They declined because they didn’t know how.

Chatted with someone who’s been working at a company as a front-end developer for 3 years. Their friend asked them to help build a website, but they had to decline. They didn’t know how.

— Chris Coyier (@chriscoyier) October 14, 2019

Some part of that doesn’t surprise me. As I write, the world is awfully full of React-specific developers working on huge sites (partially due to boot camps, partially due to market demand). They understand that very specific ecosystem and are perfectly productive within it, but don’t have a wider understanding of how it all comes together to make the complete site.

Specialists are specialists!

Them: What do you do?

Me: I’m a web designer

Them: Cool! Can you help me build my website?

Me: [laughing] Oh god no, I have no idea how to do that

— Karen McGrane (@karenmcgrane) October 14, 2019

Another part of me is surprised. You know an index.html file with “Hello, World!” in it can be a website, right? Even React devs are generally highly aware of create-react-app and how that scaffolds out a ready-to-rock site. Tools like Stackbit slap together a JAMstack site for you that can go anywhere. For developers, it seems to be going from zero to website is a heck of a lot easier these days.

Much easier.

9-web-design-trends-for-2020

Design trends posts are like art directors — practically guiding your hands on the mouse. This year, we’re doing trends different, by focusing on what actually matters. From accessibility to truth, no-code to role, these are the web design trends to focus on if your definition of beauty includes functionality, accessibility, and psychological safety.

Web design’s biggest trends for 2020

  1. Designing truth
  2. Accessibility is (finally) key
  3. Content gets its due in web and UX design
  4. Inclusivity is key
  5. The no-code revolution has arrived
  6. The rise of the visual developer
  7. Design has its seat at the table. Now what?
  8. Role is not identity
  9. Okay, one visual trend: Marquee is back, baby!

Each year, I share my take on the web design trends that will shape the coming year, often incorporating the opinions of my fellow designers at Webflow, as well as those of well-known names in the broader design community. I’ve always included a mix of concrete design details and interaction models as well as higher-level concepts, which helped fill out my self-imposed constraint of adding one more trend than the number of the year (19 web design trends for 2018, for example). 

This year, I’m breaking the mold. 

Because 2020 is going to be a different year for design, to my mind. A year when we’re all going to focus a little less on this layout, that color scheme, and whichever nifty animation mode caught our eye last week, and instead consider the deeper underlying concerns of design.

So I’m ditching the same ole design specifics we see year after year (broken grids, anyone?!) to focus on the bigger picture. To ask far more significant questions like: 

  • How do we design to make information clear, while still making it easily consumable?
  • How do we make design universal, ensuring that no one feels excluded or erased by our decisions?  
  • And, perhaps most significantly, how will a new generation of tools, built upon a paradigm that’s simultaneously brand-new, yet old as spreadsheets, change not only the way we work, but also what we produce?

But more on that last point later. Let’s dive into the 9 web design trends we’ll see in 2020:

1. Designing truth

It’s no secret that we’ve entered what many are calling the “post-truth” era, with myriad instances of deepfakes, misinformation campaigns, and outright lies popping up, gaining viral traction, and ultimately shaping the decision-making of millions — all too often driven by prominent individuals who will here go unnamed. 

The major social media platforms have each come out with policies — and in some cases, designs — to account for this new flourishing of untruths. 

Facebook has decided that it simply won’t intervene with political untruths. To support its stance, the platform has cited everything from the First Amendment to the FCC’s similar stance on political advertising on the TV. Conveniently forgetting that it is neither a) the government (the one that’s actually restricted from censorship by freedom of speech) nor b) the increasingly anachronistic technology that is television. 

Facebook’s been (apparently) trying to combat fake news on its platform since 2015, doing so in classic Silicon Valley iterative design style. It first tried to encourage individual users to flag content as “false news” — an odd half-borrowing from President Trump — then by marking some stories as “disputed” — which, according to what it called “academic” research, backfired by reinforcing some users’ belief in the content — then, most recently overlaying the content with a straightforward notice reading: 

False Information

Checked by independent fact-checkers.

independent fact checkers

Source: The Verge

The overlay also provides a prominent CTA to view the fact-checkers’s findings — as well as a secondary button to go ahead and view the false content.

At present, there’s still no plan to flag paid political posts as false.

One interesting thing to note is that Facebook started trying to remedy sharing of false information only after it was shared — the original poster was given no alerts to the fact that the content they wanted to share was disputed. They’ve amended this in subsequent designs to be more proactive in alerting the original sharer — but it’s still intriguing that the notifications focus on the fact that there’s “additional reporting” on the content. 

This strategy focuses on encouraging what we call “curiosity clicks.” This encourages engagement with the information, but that’s also its flaw: you have to care enough that there’s “additional reporting” to click through. As a content designer, I have to wonder if it wouldn’t be more effective to name the fact checkers and pull a significant quote on the content. Snopes, for example, does a great job of highlighting what the specific claim is and giving it a straightforward “true” or “false” (with a range of fuzziness between) rating. 

snopes fact checker

Twitter has taken a rather more straightforward (and cheerworthy) stance of simply disallowing political advertising on its platform. Though as many people have commented, it’s just not that easy. All kinds of misinformation “earns” its way into our feeds daily, a reality that Twitter seems to have done little to nothing to address.

We’ve made the decision to stop all political advertising on Twitter globally. We believe political message reach should be earned, not bought. Why? A few reasons…?

— jack ??? (@jack) October 30, 2019

In the end, what really matters here is not so much what the major platforms are doing to bring clarity and trustworthiness to their platforms, but what you might do to bring more of that into your own work.

Here are a few thoughts on doing that: 

Label more prominently and clearly

In a 2016 report on a Stanford study of students’ ability to determine the veracity of information found online, the Wall Street Journal stated: 

Some 82% of middle-schoolers couldn’t distinguish between an ad labeled “sponsored content” and a real news story on a website, according to a Stanford University study of 7,804 students from middle school through college. 

Much of the “optimization” of ad formats like “sponsored content” has gone into … well, hiding the fact that they’re ads. Just look at the name: “sponsored content.” On a content-driven site, that simply implies that the content was “sponsored” by someone, much as race car drivers are sponsored by various corporations. 

The reality, of course, is that these are ads, even if they’re not as direct as banners. And we should label them as such.

And it’s not just our language that could be clearer. Our design work could use some improvements too. Just look at the screenshot above (taken on Dec 3, 2019). Every single story in that shot is a piece of sponsored content, hosted on a different website, but seamlessly integrated into Slate’s own homepage. 

The title font for the native news articles and the sponsored stories is the same. But note what’s quite different: the font size and location of the “author.” In the native stories, the author’s name is set reasonably large, above the title. You definitely still see the title first, but the author name cries out for your attention in these real stories. 

The sponsored posts, on the other hand? The “author” — or brand, actually — is set much smaller. The fact that the “author” is listed as a brand, rather than as an individual writing for the brand, is telling as well: While we have someone to follow up with (or blame or praise) for real reporting, the sponsored stories are attributed to faceless brands.

Perhaps even more significantly: note that the real articles are practically emblazoned with a category title (e.g., News & Politics). The sponsored stories? Oddly lacking that prominent header. 

Make sources more obvious

In the world of journalism, you’ll often hear the mantra:

Consider the source.

Which is not something most students do these days, according to the study: 

Many students judged the credibility of newsy tweets based on how much detail they contained or whether a large photo was attached, rather than on the source.

And while that maxim is stressed to young and aspiring journos as a core practice, it could also help us designers help the rest of the world out. What if, for example, every organization’s Twitter profile included a link to their Wikipedia page, or a Google search of their name? What if publications featured an about page that clarified their political stance, history, management, and funding sources? One better: what if they linked to independent commentators on the publication? 

These, of course, are just ideas — if nothing else, prompts to consider more deeply how we might encourage readers to act more like journalists and consider their sources in a more objective manner.

But we can also consider carefully the criteria young students are using to evaluate credibility, and encourage our social media teams to make updates information-dense, and pair them with large, engaging graphics.

Finally, and to bring this closer to home for web designers crafting publishing experiences (that is, any designer who works on a site with a blog, case studies, etc.): consider making your authors and their credentials much more obvious in your content-driven experiences. This can not only boost your site’s credibility and give readers a point of contact, but also arm readers to better evaluate your authors’ content. A thoughtfully curated list of contributors then becomes a marketing asset, akin to the list of blurbs on every mass-market book cover.

Use “related content” to provide context and contrast

Related content — a familiar content pattern often appearing in the middle or at the end of blog posts and news articles, often under a heading like “You might also like…” — gives designers a powerful tool for adding easily accessible nuance to a reader’s understanding of a topic. 

How? By ensuring two things: 

  1. That opinion pieces are contextualized by the stories they comment on, or by contrasting opinions
  2. That news stories get additional color through the opinion pieces through the pieces that comment on them

Using related content to provide extra context on fact- and opinion-based pieces helps work against our age’s increasingly obvious preference for “bite-sized” information. Bite-sized data helps us quickly get a basic understanding of issues in a world fraught with issues — but it also means that we often lack a nuanced understanding of said issues. 

When we rely solely on our favorite “influencers’” hot-takes on Twitter, we start to look a lot like a pitchfork-and-torch wielding mob, all too ready to take one charismatic voice for the font of truth. But the more that content creators and designers can point readers to extra information and contrasting opinions, the more we can encourage nuanced understandings that rely more on information and reason than on emotion.

To sum up: 

  • Label your content types clearly to help readers create a mental model of your content and better distinguish between organic and promotional materials
  • Contextualize and promote your sources so readers know where your content comes from and can better evaluate its credibility
  • Use related content to add context and promote nuanced understandings of topics

All the above said, it’s worth remembering that misinformation isn’t a fixed target, a fact captured beautifully by Tom Rosenstiel, director of the American Press Institute and senior fellow at the Brookings Institution: 

Whatever changes platform companies make, and whatever innovations fact checkers and other journalists put in place, those who want to deceive will adapt to them. Misinformation is not like a plumbing problem you fix. It is a social condition, like crime, that you must constantly monitor and adjust to. Since as far back as the era of radio and before, as Winston Churchill said, ‘A lie can go around the world before the truth gets its pants on.’

Which is to say: if you want to play a role in fighting misinformation in 2020, prepare for the long haul, and be ready to update your strategies and tactics as the information landscape continues to change.

2. Accessibility is (finally) key



Before I dive in here, I have to offer a confession on behalf of Webflow: We did not build Webflow with accessibility in mind. But we’ve recently hired two accessibility specialists and formed a team around the effort to make accessibility a first-class citizen in Webflow. Stay tuned for more on that.

Web accessibility — the practice of ensuring that websites and web applications are usable by everyone, regardless of their abilities — has long been a vital part of the web design and development process in mature organizations. Particularly in governmental and publicly funded institutions, where Americans with Disabilities Act (ADA) compliance has long been a legal requirement.

But with high-profile cases like the Domino’s lawsuit and others gaining broad notice, the writing is on the wall: soon, all websites will be required to meet ADA requirements — making accessibility a compliance issue, not just a “nice to have.” 

And while I don’t want to overplay the impact this will have on our profession — as numerous relatively minor interventions in our processes and skillsets will have significant impact on the accessibility of our products — I don’t think we can afford to underplay this fact either. Because while relatively small efforts will have significant impact, the changes required of us to make more accessible sites will affect literally every step of the design process, and the workflows of every participant in that process. 

Don’t believe me? Check out Vox’s accessibility checklist, which outlines the ways every web professional, from designers to QAs to editors, can contribute to building more accessible websites and applications. 

But the work of accessibility requires far more than checklists and automated checks via browser plugins. Because much of the work of accessible website design can’t be checked via software. And because web design, outside of web app development, is essentially all about publishing, accessible web design means reconsidering the ways we publish too. If we create videos for the web, we need to consider captioning, transcripts, and other non-visual equivalents we can offer. If we host podcasts, we’ll need to think about how we can make our content available to those with low or non-existent hearing. If we publish infographics and charts, we’ll need to think about how we can make the content of these mediums available to those who can’t see them.

And designers, long used to relying on visual formats and low-contrast aesthetics to do their work, will have to stretch to account for this more inclusive paradigm. We’ll have to think long and hard about the limitations of visual formats not only for the differently abled, but for those for whom visuals aren’t nearly as transparently legible as they are to designers (myself included!). 

Blind spots abound in the design process, and these holes are often based on our disciplines. As a writer, I often find it difficult to account for those with a less broad vocabulary, as well as those who prefer visual formats. (Even the turn of phrase I opened this paragraph with could be seen as ableist.) Designers, similarly, tend to overlook the value and power of a single sentence, especially when paired with an equally powerful visual. 

The reality is: we learned our skills in a context that assumed there was such a thing as a “normal.” That you could apply your skills to communicate to “everyone” in your preferred format because “most people” can process your preferred format just fine. 

website accessibility

Disability can be permanent, temporary, or situational.

But the fact is that is much as 26% of the United States’ population experiences some form of disability, according to the Centers for Disease Control and Prevention (CDC). And as Microsoft has so eloquently communicated via their inclusive design content, 100% of the population may experience temporary or situational disabilities. And the fact is that none of us are getting any younger, and the older we get, the higher the chance we’ll experience a more or less permanent disability becomes. 

There is no health; physicians say that we

At best enjoy but a neutrality.

–John Donne, “An Anatomy of the World,” 1611

The world (and its advertising) may turn around the healthy and young, but we can no longer afford to design solely for them. 

3. Content gets its due in web and product design



That many designers (and therefor finished websites) can’t accept the fact content is more important than style.

Well written words in plain HTML w/ decent typography will always perform better than a pretty site with poorly written content.

— shane rostad (@shanerostad) November 21, 2019

I’ve been a content professional working on the web since 2006, and in those (almost) 14 years, one debate has defined my experience of the profession: 

Does design or content come first? 

This so-called debate has never failed to flummox me, for several reasons. And it’s incredibly relieving to me to see that designers are increasingly coming to understand what has always seemed obvious to me: that the “content,” or rather, the “message,” has to come before the design. Because, otherwise, there’s literally nothing to design

On the other hand, this debate is confusing and frustrating because, in reality, it’s not even the real question. Neither content nor design come first. Because you really can’t create content or design till you have a strategy. And you can’t have a strategy until you have a goal: a purpose that the thing you want to publish should fulfill. 

To clarify this, I like to point back to web design and publishing’s predecessor: print publishing. Before you can design a book, you need a book to design. And before you can write a book, you need a point: an idea or truth that you wish to convey to your audience. 

It’s important to point out here that a website is not, in fact, a book. Its material expression, functionality, and distribution are vastly different than a book. But in terms of purpose, a book and a website are very much the same: they both exist to convey information to an audience. (No, I’m not talking about web apps here.*) 

The core difference is that the website hopes to gather some information from its audience in exchange for the information (or functionality) it offers: typically, an email, that uniquely modern key to an individual’s identity, and to communication with that person. 

But to get, you have to give. You need to offer some value, and even the teams behind the world’s most popular digital products realize that quality content makes for an incredible source of value, allowing you to draw the attention of even those your product (isn’t yet) for. 

Of course, content isn’t just blog posts. (Nor is it just words, but that’s a whole other post.) Content also plays a key role in your product’s overall user experience, and increasingly, platforms are feeling the pain of getting content wrong.

Here’s an example I ran across just the other day, on LinkedIn (where I once worked, for transparency): 

linkedin

Notice anything? I sure do! And I could go on and on about the flaws of this interface, but I’ll restrict myself to the single most important one: 

What the heck do I do if that’s not my “correct” or “active” email address? 

I’m being asked to take action on this information if necessary, but there’s no obvious way for me to do anything but “remove” my phone number! The content and the interface are completely misaligned, ensuring that — at best — LinkedIn might get an accurate, current phone number from me.

But, ironically, what this UI does best for me, the user, is to remind me that LinkedIn has my phone number (why tho?!) and, better yet, give me a chance to dissociate it from my profile. (I originally wrote “delete it from their database,” but a colleague rightly pointed out … it almost certainly doesn’t do that.) 

I’m just going to guess that wasn’t their goal.

But I’m not here to complain about LinkedIn’s content. I’m here to stress the centrality of content to the overall user experience of any digital environment. Hopefully the above does the trick, but to reinforce my point, here are a few content-related highs and lows from 2019: 

Nothing has made me want to cancel @Dropbox more than the condescending, passive-aggressive use of “Oops!” to mean that *I* have to change something.

“Oops” means “I fucked up”, not “You fucked up.”

Talk to your customers like adults, please. pic.twitter.com/qguTBrOKhA

— Marco Arment (@marcoarment) July 14, 2019

I don’t, personally, share Alicia’s praise here.

Hey how badly does Apple want to be your default card in Wallet? It doesn’t say “no thanks,” at this prompt, it says “Set as default later” pic.twitter.com/a69iUgK3TV

— nilay patel (@reckless) August 6, 2019

Most telling, perhaps, is the increasing prominence of content strategy and UX writing in the brands of some of today’s most recognizable brands. Just look to the design publications and publicly-shared design systems of brands like Facebook, Dropbox, Google, and Shopify and you’ll see the word content — and its dedicated creators — getting their fair share of name drops.

facebook design blog

dropbox design blog

*But a content-first viewpoint still has dramatic effects on web apps: Just look at Twitter, where a single content decision — limiting character count — has done everything to define both the glory and horror of that platform.

4. Inclusivity matters

We designers, for all our focus on empathy, remain human beings. We aim relentlessly to take others’ views and experiences into account through user research, critique sessions, A/B testing, and myriad other methods. But at the end of the day, we’re all subject to a very human propensity: an unconscious assumption that what works for us will work for everyone else. 

Just look at the language we use every day: Reach out. I see that. We hear you.  

We assume these phrases are universal — equally meaningful to everyone who hears or reads them. We blithely conflate the concrete, sensory basis of these phrases with their emotional register and intent.

But it’s a faulty assumption. The blind cannot see that. The deaf do not hear you. Those with cerebral palsy may struggle to reach out.

Of course, inclusivity is about far more than accounting for disability. It’s about accounting for difference. It means that we can’t limit ourselves to “male” and “female” when we ask someone’s gender in a form. It means realizing that a “happy Father’s day!” email won’t mean the same thing to the child of a deadbeat dad as it does to one who grew up in a “normal” nuclear family. Hell, it means realizing that even the one from the “normal” family might have a bad relationship with their father — or have, not a father and a mother, but two mothers.

To enjoy and find value in a product, an individual needs to see themselves reflected within it. Without that glimpse of themselves, what a person sees instead is a refusal. The message is: you don’t belong here.

Designing for inclusivity — and ultimately, for UX — then means making space for our audience within the products we build. 

I want to expand on that link between inclusive design and user experience design. Because I think that inclusivity — which is ultimately the idea that we should treat “others” not as others, but as part of us — is built right into the very notion of user experience design, and I want to take a moment to explain why. 

Let’s start by looking at Peter Morville’s “user experience honeycomb”: 

user experience honeycomb

The user experience honeycomb.

The honeycomb aims to depict the interlinked characteristics that form a user experience — good or bad. The overall user experience is a gestalt — a sum total — of all these facets, arrived at via a kind of mental math we perform automatically and without deep consideration of the individual values we might assign to one or the other. 

Note that each is a characteristic in the eye of the beholder. And who the beholder is, whether “us” or “other,” isn’t part of the graph. That is: the honeycomb doesn’t say who the product is credible, valuable, accessible, etc. for

We can, of course, assume that the beholder is “our audience”: the group of people we most want to appeal to and turn into paying customers.* 

Now, audiences may seem homogenous insofar as, for, say, a web design platform, all members of the audience are interested in designing websites. But that’s one, relatively minor, characteristic when we look at the whole of what makes up a human being. 

Within that seemingly homogeneous crowd there’s a multitude of identities. Different races, creeds, religions, gender identities, gender expressions, socioeconomic classes, family backgrounds, cultures, and dozens of other facets of selfhood — they all want to build, manage, and grow websites. 

Therefore, excluding people exhibiting any one particular flavor of any of those backgrounds poses a threat to the overall user experience. Which translates directly to a business risk — especially in the modern day, when a single tweet can mobilize massive numbers of people to either lionize or villainize a company. (Or, let’s face it: both.) 

Exclusionary design, then, has a direct impact on not only the user experience, but also the bottom line. 

Of course, you could argue that being inclusive poses its own business risk, in that it might alienate your more conservative users. But when you look at the size and prominence of companies that are now more than happy to take “progressive,” inclusive stances on any number of issues — from LGBTQ pride to toxic masculinity, it’s pretty easy to see the writing on the wall: These businesses have done the math, and they’ve come to the conclusion that the reward of inclusivity far outweighs the risk.

I would, then, posit that the definition of user experience design should be: 

The practice of designing experiences to be as useful, usable, findable, credible, accessible, desirable, and valuable as possible for any user, regardless of their identity. 

When we set out to design for others, we often end up designing for ourselves. (Especially when we do so without the constraints of a framework or design system.) We can, of course, make assumptions about who we’re designing for, and more specifically, who we want to design for — but our biases still lead the way. 

It’s important to note that this isn’t a recrimination. We can’t avoid biased thinking because it’s been built into us from day 1 and become largely unconscious. What we can do is to work to consciously limit or overcome our biases. That’s what makes user research so fundamental. Without exploring the differing viewpoints, cognitive habits, and identities of our audiences, we end up designing to fit our expectations — and for every web professional, that’s a weakness. 

Writers will tend to assume that written content is the most likely to be effective. Designers will lean heavily on the visual and/or interactive. And devs and engineers … well, my biases prevent me from easily filling in that blank. 

Point is: when we stretch beyond our boundaries and defaults to incorporate others’ perspectives, we strengthen our work, making it more accessible and comprehensible to others. Which makes it that much more likely to work well for everyone.

*Because, of course, UX design is, as most commonly practiced, a capitalist discipline. Capitalism being, of course, a political philosophy.

5. The no-code revolution has arrived

No big deal. Just over 10 billion results.

When it comes to democratizing the power of software, it’s hard to think of an industry making more of an impact.

–Caleb Kaiser, Growth at AngelList

If you’re at all aware of Webflow, you know that we’re all-in on no-code, a new way of thinking about web and software development that’s ditching the traditional coding paradigm, in which code can only “properly” be produced in a text editor, written by hand, in favor of a new visual modality. 

The reasons for our enthusiasm for no-code are many, but they’re ultimately driven by a desire to make coding accessible. Not simply so that “everyone can code,” of course, but so that everyone can enjoy the power to bring their ideas to life.

Instead of taking the coding bootcamp or early-childhood coding education route, we’re redesigning the very way that code is made. 

In other words, we believe it’s time to refactor coding itself. 

You don’t have to look far back in history to find analogous transformations. Just look back to the first graphical user interface (GUI) itself. 

Before the first GUI, computing was keyboard-driven. The primary user interface (UI) was the terminal — a primitive text editor where computer users literally “told” the computer what to do through an arcane language of commands and responses. This interface model required a great deal of knowledge of its users, meaning that truly savvy computer users were few and far between. (And yes, those of you just returning from the Thanksgiving onslaught of IT support requests from computer-illiterate family members: it was worse back then.) 

This also limited computers’ applicability to real-world problems. Sure, they sprang up in all sorts of high-knowledge environments, but they were anything but the ubiquitous engines of knowledge work they’ve become today. 

Then came the mouse (along with almost a dozen other game-changing technologies), introduced in what’s now known as the “Mother of All Demos.” 

As the demo’s Wikipedia page puts it, this demo sparked the revolution that would transform computers from mere “number-crunching” tools into “communication and information retrieval” hubs. And while it would take years for this demo to turn into a functional reality, that reality is what made computers sufficiently accessible to a sufficiently large population to make them the definitive technology of the 20th (and now 21st) century. 

No-code now aims to take that sea-change a step further by empowering an even broader swath of people to not only use computers, but to build the software that makes computers so powerful, without coding it.  

Today, Webflow occupies a particular niche of the no-code movement, which we call “visual web development.” Since 2013, we’ve been relentlessly focused on making the primary tools of front-end web development — HTML, CSS, and JavaScript — dramatically more accessible to dramatically more people. And we’re proud to say that, here in late 2019, we’ve enabled thousands upon thousands of folks who would never have thought of themselves as web developers to build beautiful, powerful websites using technologies like CSS grid, JavaScript-controlled Lottie files, and semantic HTML5. 

In 2015, we began to take that mission a step further with the launch of Webflow CMS, a GraphQL-powered database and publishing tool that gives designers and developers the power to create custom schema — then design around those data fields — visually.

Here in 2019, database management and publishing tools like Webflow CMS have become the core of all kinds of powerful web-based applications, and we couldn’t be more excited to lend our voice to the continued revolution that is no-code. 

Of course, we’re far from the only no-code tool out there. So we’d like to take this opportunity to shout out to our fellow travelers in the no-code future:



6. The rise of the visual developer

Of course, technologies mean little without the human beings who use them.

And so, to parallel the wave of no-code tooling comes the rise of the no-code tool user, or, “visual developer.” 

Just as the desktop publishers who used tools like Microsoft Word/Publisher, Adobe InDesign, and other tools may have known little to everything about picas and PostScript, visual developers may be anything from code experts to pure novices — but they’ve learned to master the machines of translation that turn design decisions into functional code. 

webflow on linkedin

At the time of writing (December 16, 2019 — a slow time in hiring), 135 jobs mention Webflow. And we’re just one visual web development tool!

In doing so, they act as force multipliers to the traditionally trained coders who have built websites and apps for decades, and continue to do so. They automate tasks that used to take tedious hours of manual work. They transform static wireframes and mockups into fully functional web experiences that not only present content to visitors, but then take in visitor’s data, pipe it into email service providers and customer databases, and nurture them into leads and, ultimately, paying customers. 

And most concretely, in modern web design workflows, they enable brand, growth, and marketing teams to move much, much faster. In one dramatic example, they turn the website update cycle from an 8-year process into an 8-minute one, as car-sharing startup Getaround’s Camille Esposito told us in her No Code Conf talk, “Taking back your website.” 

As the no-code landscape becomes more and more mature and powerful, we expect to see “visual developer” becoming as common a sight in job postings as “web developer” and “web designer” are now — and in the latter case, we can honestly see “visual developer” taking their place entirely. 

7. Design has its seat at the table. Now what?



Sometimes the UX/design industry is so focused on fighting for a seat at the table that when they get it, they don’t know what to do. A seat means little without a vision and plan. Getting the seat isn’t the win. The win is in getting to do the hard work that comes next.

— Amy Thibodeau (@amythibodeau) November 30, 2019

Ever heard the phrase “careful what you wish for”?

Design has been pushing for a so-called “seat at the table” — that is, a voice in higher-level decision-making at companies — for years now. And increasingly, we’re seeing that happen. At least, according to the zeitgeist. Every day, more and more articles suggest that design is the key differentiator at [insert hot startup name here]. Design-focused content seems to be gaining more and more prominence in popular culture, with documentary series like Abstract popping up in watercooler conversations almost as often as [insert whatever the kids are watching these days here]. Every time I grab a seat in a cafe, the word “UX” resounds around the room at least half a dozen times every hour — granted, I live in the heart of UX country, but still. 

And yet, how much traction has design really gained in the top echelons of businesses? The question wells up in me every time I see another Facebook scandal grabbing headlines, or hear the latest on the Domino’s accessibility lawsuit. I wonder about it every time the question or Uber or Airbnb’s impact on communities pops back up in the Twittersphere. 

The thing is: it’s a false question. Design has always and already been at every table in “The Business.” 

Thing is, the *real* design decisions, the ones like, say, allowing lies in advertising — they aren’t being made by people who call themselves designers.

— John Moore Williams (@JohnAMWill) October 26, 2019

They just don’t call themselves designers. Or, in some cases, value the things we’ve come to expect designers to value. They aren’t necessarily fighting for users, or even trying to balance user goals and experience with business value. In many cases, the business value — i.e., shareholder gains — is what’s truly paramount in their minds. 

Now, this isn’t meant as an excoriation of these folks. Without wading into the morass of ethics, I get why they’re focused on shareholder value, and why evocations of “freedom of speech” tend to crop up in their arguments (misplaced as they are). 

It’s merely intended as a corrective. “Design” as such doesn’t need a previously unassigned seat at the table. What we’re often arguing for is instead a different view of design. A principled and conscious approach to the design of systems (i.e., businesses) that takes into account the myriad other systems each business impacts, from the political landscape to the local housing market. 

So, to return to Amy’s point above: the thing to focus on while you’re fighting for your seat at the table is the development of your strategy for making use of that seat. And to my mind, a key starting point for the development of that strategy is the acknowledgement that design is very much happening at that seat. It’s up to you to, in the words of Mad Men’s Don Draper, change the conversation about design that’s already happening there. 

Because, like it or not, everyone truly is a designer. (Yep!) But more on that in the next section.

Or course, as Maxim Leyzerovich notes here: 

Only organizations that have real and deliberate strategies for the challenges of:

• remote/distributed work

• diversity & inclusion

• product-driven design

• manager vs IC roles

• experience leveling

• ethical practice

will be the best-positioned companies to work for.

— Maxim Leyzerovich (@round) February 20, 2019

Design’s gaining of a seat at the table isn’t purely a one-sided affair. Both brands that want to give design a seat at the table and the designers who want to give it one need to be thinking about how design will thrive within an organization if it wants to attract and keep talent. 

And, in confirmation of design’s potential to positively influence “from the table,” each of these things aren’t design-specific — they’re necessities for any modern org, which will shape perception of a brand for any professional, but also for the broader public.

So, if you’ve been fighting for a seat at the table, it’s past time to be asking yourself: What are you going to do with that seat? 

Speaking with the voice of experience here: org design is an incredible — and fun — challenge. Working in the media of identities and careers is far more dynamic than pixels.

8. Role is not identity

Is everyone a designer? Yes, just as everyone is a writer. 

(Trust me: I’m a professional writer. And the more I try to deny others that role, the higher my stress levels and the harder my work gets. The more I include other writers’ perspectives, regardless of their individual skill levels, the better my work tends to get. Though it sure does make line edits more complicated.)

The difference between you, titled designer, and any other person who designs without the title, is not one of kind, but of degree. Writing and design are skills, not identities, so “being” a writer or designer is more like occupying a spot on a spectrum. (A lot like gender, ya know?). 

The difference is in skill level, primarily, but also in education and context. Just because we all design doesn’t mean we’re all good at it.

The important thing to realize, however, is that your role is not your identity. Not who you are. The claim that a writer, lawyer, or product manager designs shouldn’t feel like a threat to your identity not only because it’s simply a skill, but because it’s not your identity. 

The problem with overidentifying with a skill — with considering it a part of your identity — is that your identity can then be threatened by all sorts of small attacks. Whenever your work is criticized, you become the subject of that criticism. Whenever a “non-designer” (or non-whatever) applies their skill better than you did, you were outdone not in skill, but in identity. Makes you wonder if this sort of overidentification has a part to play in our industry’s ongoing struggle with impostor syndrome … 

But actor Sam Neill says all this much better than I. So, over to you, Sam:

The wonderful Sam Neill talks openly about mental health in the acting profession and how the constant rejection combined with ‘imposter syndrome’ can be completely crippling.

You are not alone. We’re all in this together. Be supportive. Be kind.

❤️pic.twitter.com/mwZ2M48Els

— The Actors Pad (@TheActorsPad) October 6, 2019

9. Okay, one visual trend: marquee is back, baby!

marquee web design

And I know we’re all excited by excited by excited by that.

A vision for web design we can all (hopefully) get behind

When I read back over this post, I for one can’t help but feel a stirring of hope. Because these 9 trends all suggest a future for website design that I can’t help but love. 

A web design devoted to helping people understand what’s true and what isn’t. A web design for all, regardless of ability, or identity. A web design that’s inclusive of creators who do things a little differently — that is, code visually. 

None of this is going to be easy. There will be pushback. There will be those who don’t want to sacrifice numbers for the sake of making principled stands.