Beyondtellerrand 2023 Düssldorf

WACOM Warm-Up

As last year we start off with the lovely people at WACOM who indulge us with tasty food and refreshing drinks. Toying around with their awesome products gives you a good impression why they are so well renowned in the graphics ecosystem. It was a bit sad we did not have a talk there like last time but still a great way to get into btconf mindset.

Day 1

Back at Capitol Theater once again. Even though I am only here once a year it feels strangely familiar. Tobi Lessnow aka Baldower is back at the turntables with his unique sound. We have our transcription service as well (even transcribing song lyrics) and the fabled Twitter wall. Or wait.. This time the wall also shows Mastodon messages! Same, same.. but different :-)

Little anecdote: Two of our little group of four only realized on Sunday evening that they did not actually buy tickets. But the great staff around Marc did check and were able to squeeze them in (door price of course, but still). This resembles the special effort made at the conference series that makes it feel simply special. Thanks a lot!!

This Website Is under Construction – a Love Letter to the Personal Website - Sophie Koonin

The title here is pretty descriptive. Sophie make a lovely plea for the revival of individual websites. Nowadays most websites look the same, built by the same tools and often for the same purpose: to make BU B6money.

Social media allows you to meet people and to generate content for them. But it comes at the cost of creativity (facebook pages e.g. all look the same) and also loss of control over your content.

But why do we not make fun/individual sites for ourselves anymore? Sophie takes us on a trip down memory lane starting with the first websites displaying static data evolving to hosted services like geocities and the changes brought on by web 2.0 and social media like myspace. 

In the end the web has become more about the consumers and how to please them than about the creators and why they build things. Sophie tries to encourage us to build things that we care about, that might be pointless or only concern a small group of people as long as we fun making it. Be yourselves, be creative, be you!

Once again a great starting talk setting the spirit of btconf. Thank you Marc but most of all thank you Sophie!!

Mapping Typography - Scott Kellum

Often a webpage is regarded like a 2 dimensional sheet of paper and for a specific viewport this is indeed true. But a website is much more than this, the viewport can have different heights or widths or is affected by other settings like color modes. All of this make a website a mutli-dimensional object and as a result stylings need to take this into account making the task of a consistent style for all variations and permutations a complex and challenging effort.

To tackle it one requires a system, a design system. But how do we start with that, what is important to consider and what tools can we use. These are some aspects that Scott tries to cover in this talk.

We start out by how a font is usually designed. Common practice is to start with the letters H O D n o p which give a good impression how a font will look overall as they cover general balance, roundings, straights and the combinations of those. Also for each letter you need to create different weights and styles (like italic or boldness) resulting in a multidimensional set of letter variants. 

Unfortunately it is not enough to create a set of nice looking letters, in the end all the letters in a font need to go together, for which font designers use words like Handgloves or similar to make sure the overall fit works well.

Once we have a well defined font the next challenge is to apply it properly in the actual contexts. As an example Scott shows how newspapers use heavier fonts for shorter headlines and lighter for shorter ones. It is also important to adjust other properties like line height depending on certain attributes like width of the enclosing container.

It can become very complex and confusing to define rules or media queries for all these combinations and sometimes it is even impossible with todays tools to achieve a concise design. This is where a new shiny toy comes in: CQI

It gives you the ability to react on the inline size of a container and use this in formulas and animations. With that you can implement various behaviors of font properties to provide consistent and sensible styling throughout all of your website's dimensions.

Since this is not supported in browsers yet Scott showed us some rather hacky workarounds using e.g. css animations to achieve similar effects.

The actual code details were glossed over a bit too quickly for my taste so I had a hard time following but I am sure if you watch the video it will all make sense to you.

ET TU, AI? - Mario Klingemann

Mario is a recognized and award winning artist who uses AI and other generative techniques. Throughout his talk he presented various of his projects that use different algorithms and ways to combine data achieving impressive and interesting results. One example being music used as input to dynamically morph different portions of a set of images. 

For Mario, AI provides new ways to view and combine existing data but on the other hand he enjoys getting inspiration from the real world. As an example, whenever he is in London he tries to find his way to the Thames on low tide and go mudlarking. Which is strolling through the muddy river bed to see what can be found there giving him new impulses.

The new and upcoming AI tools enable everyone to become a generative artist but it takes the creative mind of people like Mario to come up with new and unique ideas using these tools.

Describing all the projects Mario presented would not do them justice so I recommend simply watching the talk or at least looking up some of his projects like Archive Speed Dating, the Uncanny Mirror or Botto.

The latter being an AI creating digital art and selling it to sustain its own infrastructure costs and so becoming a self-sufficient artificial entity (or at least almost). Up until now Botto generated about $2.5 Million of which nothing goes to Mario but is solely used for Botto's expenses. 

瞑想と書： Meditation with Calligraphy - Aoi Yamaguchi

Aoi is the daughter of a calligraphy master craftswoman and got enrolled into a calligraphy school at the age of 6. Later on she incidentally mentions she also started learning the piano at the age of 5 (let that sink in for a moment...). At the age of 14 she achieved the rank of master student. As much as we are aware of the disciplined upbringing common in Japanese culture, it still impresses me everytime I hear of such examples.

Throughout her whole talk Aoi keeps coming back to the values instilled in her during her education. Qualities like discipline, perseverance and patience being some of the most important ones. 

On the other hand she explains what meditation means to her and where meditation and calligraphy either complete or overlap with each other. Mediation helps her to calm down, clear her mind and focus on the drawing she is about to perform. Also the process of preparing her ink is a small mediation in itself and the list goes on and on.

Aoi also showed us videos of some of her performances emphasizing the traditional aspect of calligraphy and importance of those related traits.

I found it very interesting to see what kind of passion and determination goes into traditional calligraphy art while from the outside this is hardly noticeable. 

How to be an Ultra Artist - Gemma O’Brien

This talk started with a nice touch as Gemma added pictures from her morning run to the beginning of her presentation. During her whole talk she managed to radiate energy and positivity which gave off a lovely vibe.

Already in her early years Gemma loved to paint and always embraced new tools or technologies to create content be it a camcorder or her first computer. Being a successful student she first enrolled into law school but soon decided to drop out and study graphic design instead. It was then when she fell in love with printing and lettering leading her to typography. During her studies she created a video in which she covered her body in different letters that somehow found it's way into a German magazine and eventually led to her being invited to speak at a conference despite never having actually worked in the field. But it all worked out fine and somehow got her to work for global companies and become rather successful.

After a while she found herself drawn back to her roots, working with letters. The talk featured many examples of her work and those alone make the video worth watching. Being driven to find new ways on how to work with lettering she discovered calligraphy and experimented with the basics. At one point she got hired to create several hand painted, large scale billboards and simply loved working on such a big scale.

She was downright possessed with drawing and so started drawing on the sick bags on her many flights she had to go on. This got worse with the uprise of tablets, because now she could work anywhere anytime. Over time Gemma was spiraling into a burnout and to get out if she had to return to her initial, analog work process.

To help her, Gemma created a visual diary, a huge physical book where she keeps all of her sketches and even print outs of her drafts. This allowed her to focus again and slow down. Then the pandemic hit and she found herself more or less locked up in her studio for a year. So she finally got into running, first a few kilometers increasing more and more over time until she ran half and even full marathons. But not enough with that, she set her mind on running an ultra marathon and bought a book about it to help her prepare.

Though for some reason the event got canceled and Gemma today realizes that this was a very good thing. But the contents of her ultra marathon book helped her to understand some of the issues she was facing in life and so she retargeted her goal from becoming an ultra runner to becoming an ultra artist. Someone who keeps on creating and being creative over and over again. Only time will tell if she will achieve this...

In my opinion, an inspirational and energizing talk, worth watching!

Goats and cars: beyond failure - Thomas Thwaites

Last talk of the day, everyone being pretty knackered already and a title that leaves you a bit confused. Sounds about right, doesn't it?

I have to be honest, at the start I had absolutely no clue where this was headed or what Thomas actually does ;-)

From what I understood so far he is a maker, a creator who tries to make weird or even seemingly impossible things become reality.

At the start we saw a few of his past projects which were interesting and amusing. Then he kind of switched pace, describing how he felt that as a maker he should at least once make something from scratch and his decision was to make… a toaster.

But not like one would think as in getting like a metal case and the fitting plastic frames etc. No he started out to make steel. So we watched a video where he called a mine to get some ore and for the other components he was equally strict. Very funny to watch.

The next part was rather weird and I can't really say why Thomas made this project but he did..

The idea was how he could transform himself into a goat. We are not talking Halloween costume or cosplaying. He really investigated how his brain could be changed to become more goat like, what prosthetics he would need to walk like a goat and even how to enhance his digestive system to be able to live of grass and other plants.

He consulted legit scientists all over the world and put in a huge amount of effort. In the end he spent several days living among a herd in the Swiss alps.

I know this sounds super weird and it is. Just watch the video. It is a mix of funny, disturbing and fascinating.

After this he started to build a harmless car. So far he built a chassis out of a certain kind of wicker like wood 

I can't really explain.. just watch the talk.

Day 2

The 7 Traits of an Emotionally Fit Leader - Emily Anhalt

Before I start: This is THE must see talk of the conference. If you are going to watch only one talk (even though I would not know why) then this is the one to go for. It is funny, insightful, useful and simply awesome! 

Also when you watch (not “if” “when”!!!) make sure to watch it together with someone else (or in pairs if you are more people). Over the course of the talk there are short exercises for the audience that need to be done in pairs and they are worth it.

Emily has a doctorate in psychology and extensive experience in therapy. We start off with some basic concepts about mental health and how basically everyone has the one or other issue to work through in their lives. It is also important to realize that “not sick” does not necessarily mean “healthy” or even “fit”, that goes for physical and emotional fitness.

Emily did conduct a survey among 100 psychiatrists and 100 leaders in which she asked them how they recognize if the person opposite of them is “emotionally fit” and summarized the results as well as techniques on how to ascertain, ensure and achieve such a fitness.

I will only give short summaries of the 7 topics because if I try an extensive report I am bound to get things wrong, so once again: Watch the talk!

1. Self Awareness

One has to understand their own triggers and biases in order to be able to cope with them. Going into therapy can be a very useful tool here regardless if you are working through an issue at that moment. It is even better to train your emotional muscles as long as you are healthy just in the same way as it is with your physical muscles.

Keeping a journal and explicitly asking for feedback are also good ways to increase your self awareness

2. Empathy

Empathy means to not only understand others but to also relate to their feelings, otherwise it is “just” sympathy.

Here she introduces the tool of an Emotional Fitness Survey in which people can give hints to their friends/coworkers how to react in certain situations.

3. Mindfulness

In order to grow we sometimes need to accept discomfort instead of avoiding it. Otherwise we risk getting stuck and then ending up in even worse situations than the ones we tried to avoid in the first place.

4. Curiosity

In case of criticism we should learn to accept it and  be curious on how to improve instead of getting defensive. To help with that it is necessary to build up a certain self confidence. Here she suggests the tool of a self-esteem (team) file.

5. Playfulness

If someone approaches you with an idea, say “yes, and” instead of “yes, but”. Dare to play around with ideas, ignore constraints, think big e.g. start meetings with ice-breaker questions. 

In Emily’s slides is a link to 30 of her favorite ice-breaker questions and one is used in one of the aforementioned exercises, so try it :-) 

6. Resilience

In order to become more resilient in the face of critical issues it can help to learn not to worry about things that have not happened yet and/or things that you have no control over if that will be an issue one day. Be confident in your future self to handle these things when they happen.

Share with others what your warning signs of becoming burned out are, so that they can give you feedback on that and help you react before it hits you.

7. Communication

It is better to communicate things clearly instead of suppressing issues and then being even more upset if the other person does not notice that something is wrong. In her company and even her relationship they established the use of remojis. If you do not know what they are, watch the talk.

This talk was the perfect start for the second day and the slot was the perfect fit for such a talk. Brilliant matching by Marc!

Typography for Everyone - Tobias Kunisch

Tobias has been involved with fonts for a very long time and took us on short time travel on the evolution of digital fonts. In 2010 IKEA changed their font on the yearly catalog to Verdana for the sole reason to the same font for their online and offline presence. At that time there was only about a dozen web fonts available that could be used reliably so that is why the print version had to be adjusted.

In  the early days of the web there were not many options, some people used js hacks like sIFR to replace fonts dynamically. But then HTML5/CSS3 came along and introduced the font-face directive. Finally fonts could be embedded in websites just like images. So all's well that ends well, right?

Not quite: Even though now from a tech perspective fonts could be used easily there was still the issue of licensing. After all, even font designers need to eat, or so they claim. And so the issue was now to find a font that you were actually allowed to use.

This bothered Tobias pretty much and he was dreaming of a world where there were free fonts for everyone easy to use. At that time he started his job at Google and met 2 colleagues who were working on that exact issue as part of their 20% project. Tobias joined them and this project is now known as Google Fonts!!

But still, there are some issues with fonts. For one there are many many many glyphs out there and most fonts only contain a small subset of those, e.g. the Latin glyphs (just like the ones you are reading right now). But there are so much more, to be more precise all those that are part of the unicode standard. So in order for a font to be truly useful to everyone it should contain all these glyphs. Noto is such a font that is meant to address this issue and is kept up to date with all additions to unicode.

Even though there are a lot of fonts out there catering for various different needs, e.g. fonts helping people that suffer from dyslexia or have very bad eyesight or fonts that need to render a certain letter differently depending on where in a word that letter appears.

As if that was not already a lot to take in, lastly we Tobias covered the topic of Variable Fonts and Color Fonts. These fonts can be defined in a highly flexible way with arbitrary values for things like weight, width, length of ascending or descending glyph parts and even have decorations depending on their context or different coloring in single parts of a glyph. 

Modern CSS Layout is Awesome! - Michelle Barker

Oh yeah, fasten your seatbelts, the techie train is about to shift into the next gear.

Where Tobias left us with a nice push down the tech path Michelle took over and off we went.

She showed us not just what nice and shiny tools modern CSS has in store for us but also how to use them with some lovely demo coding. At first we took a short glance into the past about floating divs, flexbox and the arrival of grid just to then dive into new and more advanced tools.

There is no use to describe it all you need to have a look at the talk but as a teaser: You will learn about aspect ratio, object fit, gap, small/large/dynamic viewport units, overlaying, inset, grid, subgrid, intrinsic sizing, feature queries, has(), animated grid tracks, container queries and more!

You just gotta love this!

Animating the Impossible - Cassie Evans

Well, I might sound like a broken record here but again we get into deep technical waters this time about UI animations with Cassie.

She showed us what cool things can be done using tools provided by gsap when animating objects on websites and what issues of traditional approaches are solved by them. One issue is that in order to use an animation you need to define the boundaries in the same unit, so e.g. combining a px value with the ‘auto’ keyword just ain’t gonna cut it. Or when you have to deal with objects using different positioning directives.

She even threw in some biology explaining to us, why in the peripheral view we mostly just recognize motion and how that should be factored in when creating user interactions.

Another funny and insightful talk that should go on your watch list as once again a transcript just is not enough.

Side Quests: Satisfy Your Distracted Self - Hugh Elliott

Oh boy, everyone’s head is dizzy from all the tech input before and we are already for a new topic. But Hugh gave us a nice change of pace, telling us the story of his early professional life and how he became a tinkerer and a creator. What motivated him and how that impacted his life.

If you want the bare facts then it could be summarized like this: Hugh created a rainbow colored led rod and used that with long term photography to create pictures of rainbow curves in lovely sceneries and even got to work on the pride campaign of WWE. 

Sounds rather drab, doesn’t it? But it wasn't! This guy is a great speaker, funny, a bit ironic, sometimes a bit below the belt, everyone had a blast. And if that was not enough he even managed to raise money for LGBTQIA2S+ charities on the way.

Start the video, kick back and enjoy!

Past Present Future - Eike König

Okay, last talk of the conference. Expectations are high and the previous talk might be hard to follow. As a heads up due to the schedule being delayed and our train leaving earlier than we would have liked (was unfortunately the last option to bring us back to Munich at a sensible time) we had to leave the talk early after about 30 minutes. 

We start with a somewhat artsy music performance which, I must honestly say, I did not get. Followed by a rather dark reminder that creativity can also be used to create destructive things like the atomic bomb. Very true and very discomforting. I braced myself for some deep and meaningful content.

But after that the presentation was more like a stoic stringing together of Eike’s work in advertising and his art studio presented without much passion or joy, glossing over most things, skipping many slides over and over with comments like “that doesn’t matter anymore because it is in the past” but still emphasizing all the things he and his team did just to diminish them again immediately.

At this point we had to go and I really hope this talk will be uploaded so I can check the end and see if there is some iconic twist that explains everything and proves that I am just to stupid to understand what Eike was setting up.

One thing I feel the need to point out though is that during the pandemic when there were not many jobs for him and his employees he started his 50/50 project. Meaning that he sold his work for half the price with the requirement that his customers spend the other half (or maybe just some of it, I can’t remember at the moment) on charity or buy things from other artists so that everyone gets a share and can make a living. This I consider a great idea and a nice touch.

Summary:

Again another great conference with the lovely Marc being his charming self and setting a great atmosphere once more. Apart from the last talk the second day blew my mind, the first day was good too, but just not quite at that level overall.

One thing you have to keep in mind if you consider going next year (which you should) there will be delays. Not one talk started on time, so it might be a good idea to travel back on Wednesday if possible. 

I really hope all talks will be available online (youtube) as there are many that I would like to share with colleagues and friends. Until next time!