When we design and build things for the web, it’s tempting to fall into the trap of doing things the We-have-always-done-it-that-way™. And this doesn't necessarily have to be our fault alone. We are all part of project teams and work environments that shape our perception of what viable solutions are and which achievements we are satisfied with. Also, tilting at windmills to change this can be tedious and unrewarding at times. But doing no more than what is absolutely necessary just isn’t necessarily the same as doing good work and the rapid rate of change on the web demands that we continuously reexamine our habits and challenge our assumptions.
So it is important to remember that leaving your comfort zone and trying out new ways of doing things is vitally important. There are many ways to broaden your horizons if you are looking for inspiration: You could do some research, read a book or an article, or visit a new city. But one of the best ways surely is the experience of a conference, because it provides you with many new concepts and ideas. Moreover, ideas that were floating around in your head for a while are affirmed.
So let’s look at three basic ideas on how you could depart from the beaten track that also surfaced at beyond tellerrand Düsseldorf, Marc Thiele’s pleasant and inspiring conference that always excels at bringing together a wide variety of speakers.
Rediscovering Originality
There are many voices critizising the trend towards standardization in web design. “All websites look the same”, is an often-heard claim these days. And there clearly is a trend towards standardizing not only user experiences, but also the process of designing those experiences. While this standardization surely has positive effects, it also leads to an obvious lack of originality.
To Espen Brunborg, creative director and co-founder of the web design company Primate, telling compelling stories on the web comprises two key aspects. For one, good design meets the users’ expectations. Espen compares this to music: Just like rhythm provides a reliable structure and leads to familiarity, doing your homework regarding the information architecture, element hierarchy, typographical rhythm, all the UI patterns, and also performance and accessibility will make your site easier and more efficient to use.
But there is another side to the coin, which is often neglected these days yet is so powerful: comedy. While music meets our expectations, comedy breaks them. This is when surprise, emotion, and joy of use occur. It is what makes your site stand out and gives it personality – and in the end also makes it more successful.
So Espen encourages us all to make “the good shit”. Great work that does meet user expectations with regards to consistency, usability, and performance, but also deliberately breaks expectations to become more memorable and surprising, and to tell stories that create a true connection with our audience.
Storytelling with Code
Telling compelling stories with personality was also a central theme of Sarah Drasner's talk at beyond tellerrand. Sarah is a designer, developer, consultant, and speaker who wrote a highly recommended book on SVG animations and also regularly writes for CSS-Tricks. Her talk covered lots of useful insights and techniques for animating user interfaces effectively, but it was furthermore special in that it highlighted the immense power of animating directly with code. Code is Sarah’s tool of choice for creating animations and rightly so: Creating web animations with tools like AfterEffects or even Photoshop will always be a half-baked workaround and eventually also cost more because more effort has to be spent to achieve great results, especially if details get lost along the way from design to development.
Crafting meaningful, functional animations directly in the final output medium though, results in another way of thinking. Instead of just “adding some animation” to an interface, you start to think and work with animation in a more direct and precise way. Working directly with code allows for considering (device) performance as well as technical implications of front-end frameworks or certain animation libraries.
To create your stories directly in code, you will of course need either a designer and a developer in the same room working closely together or a – drumroll – designer who codes. You also might need to change the way you work, but it's not as hard as it sounds. We are not talking about production code here. When working with my students on HTML prototypes, many of them have never written a single line of HTML before. Yet even after one day, they manage to get their head around basic CSS animations. Add a little practice and you will drastically improve the quality of your user interfaces. You can start with little Codepen prototypes and also use tools like Framer or JavaScript libraries like Greensock – but jump into code as soon as possible to work directly with the material.
Sarah's talk is also on Vimeo.
Adopting New Technologies
Trying out new things and by that constantly evolving your toolset and adjusting your workflow is eminently important, especially on the web, because it changes so fast. But humans are allergic to change and given all the endless possibilities out there, it happens easily that we stick to the tried and true instead of risking to invest time and money into some new and unproven technology. And how could we possibly tell if a new technology is worth the effort of learning about it and incorporating it into our workflow? How can we evaluate technology?
This is the question that Jeremy Keith tried to answer in his talk that also was a little journey into the history of technology. He suggests: When evaluating a new technology, one of the most important questions is not „How well does it work?“ but rather „How well does it fail?“. Because even the most outlandish web technology is still safe to use if – and only if – a fallback is provided in the not so unlikely event of failure. By providing those fallbacks, a technology is not only more likely to be adopted by change-allergic humans but it also directly benefits users, because the product remains usable. And users should always come first when considering the use of a certain tool.
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
Another question to ask yourself when considering the use of a tool is: What are the assumptions? All software is opinionated and was created to solve a very specific problem. But your problems might be completely different, so you will need to check if the assumptions baked into a certain tool match your own philosophy and the situation you are in. Otherwise, you will always work against the tool, not with it.
You can watch Jeremy's talk here.
Leaving the beaten track
As professionals we don't need to defend ourselves for using unconventional methods or new technologies. That's a huge part of making successful projects. Also, good design isn't about being right. It happens off the beaten track. Good design is about finding useful, accessible, memorable, entertaining, and appropriate solutions to real problems. Problems for which classical solutions often don't work anymore, because we are facing new realities everyday. Solving those problems demands that we leave the safe harbors of what seems to be true and trusted and learn to embrace the unknown. Only then will we make outstanding, meaningful ideas a reality.
–
Beyond tellerrand is a conference on design, development, creativity, and all things web. It is run by Marc Thiele twice a year in Düsseldorf (coverage and wrap-up here) and Berlin (06 – 08 Nov 2017, Admiralspalast) and it is really worth a visit. You can find videos and transcripts of the talks as well as tickets for the event on the conference website.
~
