Skip Navigation
#MadeWithSketch

Documenting the humane design movement

How designer, writer and digital creator Jon Yablonski used Sketch to turn his own daily reflections on humane design into a resource that everyone can benefit from.

Over the past few years, we’ve seen a dramatic shift in thinking around the goals of product design. Now more than ever, instead of solely supporting business needs, designers have to consider the ethical implications of the products they’re working and apply their skills in a way that supports the wellbeing of users. Designer, writer and digital creator Jon Yablonski is doing his bit to help with that.

Jon is the creator of Humane By Design — a website that lays out the principles of the humane design movement, and offers resources that help designers put those principles into action in the products they work on.

Humane By Design started life in Jon’s private notes and sketchbooks, as part of his daily self-reflection. But with a little help from Sketch, Jon has brought his thoughts and ideas to live as a living, breathing resource that helps designers with the ethical considerations they encounter in their work.

What is Humane by Design and what does it aim to achieve?

Humane by Design is a resource for designing ethically humane digital products through patterns focused on user well-being. It’s essentially a collection of best practices, organized by overarching principles, that consciously prioritizes people’s time and attention.

I created Humane by Design because I wanted to explore ways in which designers and developers can create products that are less invasive, addictive, dishonest, or harmful to the people using them.

Do you think there was a point when we lost our way when it came to designing ethical, humane products?

There was a trend that popped up not too long ago that emphasized UX design supporting business goals by creating “habit forming” products that keep users coming back. As a designer I know this isn’t what people actually want.

People want technology to empower them — to amplify their abilities and make life easier. In reality many products and services out there, even ones that are well-designed, are based on exploitative practices that monopolize people’s time and attention. People are becoming more aware of this and I think it will become imperative that companies consider how their products affect those using them.

“A lot of my ideas come from a daily habit of writing, reflecting and sketching in a notebook. Humane by Design came out of this process.”

How did you come about the format for Humane by Design where you present principles, then follow up with additional resources and further reading?

The format evolved organically through a process of constant iteration and reduction. A lot of my ideas come from a daily habit of writing, reflecting and sketching in a notebook. Humane by Design came out of this process and began as an informative poster series, but evolved into a website once I realized best practices would provide additional value. Further reading followed to allow people to dive deeper, and it was also a way for me to self-document the research I was doing. Principles were the last thing to take shape once it was clear there were distinct themes.

“Sketch has been invaluable…it allows me to quickly explore all the edges of an idea and iterate quickly without getting bogged down.”

What role did Sketch play in creating Humane by Design?

I spend a lot of time working on side projects and having a tool like Sketch has been invaluable. My process usually begins with loose concept exploration, which is all about getting ideas out of my sketchbook and onto a digital canvas. Sketch is a perfect tool for this because it allows me to quickly explore all the edges of an idea and iterate quickly without getting bogged down.

I did a ton of initial exploration for Humane by Design, beginning with simple poster concepts that I iterated on until I had a clear idea of what the project would be and a general design aesthetic.

Jon’s initial poster concepts slowly evolved into the final design aesthetic for the project

The next step in my process is experimenting with the shape of content and UI, which helps me get a sense of how everything comes together. I start this part by laying out key screens, making use of features like text styles and symbols to speed up my work once a cohesive UI approach emerges.

I also like to begin working in code at this point, so I’ll prototype in parallel with design which I feel helps to inform design decisions. Decisions get made in the browser, but design iteration continues to inform what eventually will get translated into code.

A screenshot of the Sketch Mac app with different webpage designs

Jon’s content and UI explorations make use of Symbols and Text Styles to speed up his work

I also used Sketch for the intricate graphics associated with each principle for this project, which wasn’t always easy. The vector shape tools in Sketch are simpler in comparison to an app like Illustrator, so I had to figure out a process in order to create them. I eventually landed on a process that worked, and was able to create some pretty complex graphics.

A screenshot showing different poster designs in the Sketch Mac App

Beyond the UI, Jon used Sketch to design the more intricate graphical elements of the project, too.

How has the wider design community reacted to Humane by Design?

The project has been really well received. A lot of folks in the tech industry are asking similar questions. We’ve collectively entered a new era of product design and now it’s time we slow down and be more intentional with the things we are building and putting out into the world. I think many agree with this view and are looking for ways in which it can be done.

How do you go about incorporating the principles you’ve laid out in Humane by Design in your work at General Motors?

I believe in cultivating my design practice, which is much deeper than simply honing my craft as a designer. Part of this means advocating for best practices, design methodologies and principles that push not only myself but those around me. I’d like to think I bring that to the team I work with and they incorporate it into their own practice and influence others as well.

“I think design plays a critical role in how products are created and we have a responsibility to prevent them from becoming invasive, addictive, dishonest, or harmful to the people using them.”

How confident are you in the role design plays in shaping products and services for the better, especially when there are so many other influencing factors?

A lot of discussion on this topic seems to suggest that design has little to no impact, especially if the underlying business model of a product is geared toward capturing people’s attention and keeping it. But I think design plays a critical role in how products are created and as designers we have a responsibility to prevent them from becoming invasive, addictive, dishonest, or harmful to the people using them.

Yes, we can use persuasive design patterns to keep users engaged in the products we help create, but there is also an ethical question that we must consider. People are becoming more aware of the exploitative practices that monopolize their time and attention, and designers have a responsibility to be their advocates. I think it has become imperative that companies consider how their products affect those using them, and design is at the forefront.

Finally — what’s the one plugin, library or tip you share with anyone who’s new to Sketch?

Symbols make you a better designer. They speed up and support scalable and consistent design, but they also help designers understand modularity and component architecture. Understanding and using all the features that symbols have to offer (overrides, nested symbols, external symbol libraries) in Sketch will not only help you create more cohesive design, but it will also help facilitate collaboration with developers because development is usually very component-driven. It’s through this collaboration that better products are created.

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free