Skyline Big Band

2025-08-01T00:00:00Z

Members of a local Big Band approached me if I could update some small things on their website. It ended up in a complete rebuild, and I am glad about that.

BVG.de – Berlin's heart of public transportation

2021-11-19T00:00:00Z

I am currently the main Frontend Developer building the BVG Website at IBM iX.

Read the case study at IBM iX
Awarded "Bronze" for User Experience / Usability by German Digital Award.

Kunst- & Kultur-Rat Ludwigslust-Parchim

2021-11-18T00:00:00Z

Appy SVG filters to any HTML Element

2020-08-06T00:00:00Z

I just learned from the viewBox Newsletter: you can apply SVG filters to anly HTML Elements outside the SVG via CSS. Just define the filter in a (hidden) <svg> tag, give the filter an id and reference it anywhere in the document.

From the Example by viewBox:

<svg hidden>
	<filter id="squiggly">
		<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0">
			<animate attributeName="seed" from="1" to="10" dur="1s" repeatCount="indefinite"></animate>
		</feTurbulence>
		<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
	</filter>
</svg>
</svg><p style="filter: url(#squiggly)" class="squiggly-text">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab, placeat iste
	temporibus soluta, mollitia quisquam. Esse, tempore dignissimos minima,
	voluptatem facere perspiciatis laborum suscipit.
</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab, placeat iste temporibus soluta, mollitia quisquam. Esse, tempore dignissimos minima, voluptatem facere perspiciatis laborum suscipit.

There's also another technique, used in this awesome codepen by yuanchuan. And here's a tool to play around with SVG filters.

Want to learn more about the magical world of SVG? Subscribe to the viewBox Newsletter here.

ScrollOut.js - a tiny js library for scroll-based interactions

2020-04-26T00:00:00Z

Since I recently discovered ScrollOut.js, it quickly became one my favourite micro library.

> ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers.
The ScrollOut library does not handle any animation, but it gives you the elements and tools needed to create animations & transitions with JavaScript animation libraries or only CSS!

The tool itself does not provide any animations/transitions, but CSS Variables that you can hook into.

It's really tiny (1kb minified and gzipped) and the does not make scrolling laggy at all (if used correctly). Oh and it also detects window resizes in case you need that.

I just startet using ScrollOut and I can only imagine the endless possibilities 🤯.

Simple example how to create a auto-hiding header:

ScrollOut applies data-scroll-dir to `` and changes the value based on scroll direction.

.navbar {
	position: fixed;
	transition: 300ms transform ease-out;
	will-change: transform;
	/*...*/
}
/* scrolling down */
html[data-scroll-dir-y='1'] .navbar {
	transform: translateY(100%);
}
/* scrolling up */
html[data-scroll-dir-y='-1'] .navbar {
	transform: translateY(0);
}

Flexbox Magic: Responsive Sign-Up Form

2020-04-04T00:00:00Z

A cool trick by Adam Argyle to create a responsive signup form with flexbox in very few lines of code:

form {
	display: flex;
	flex-wrap: wrap;

	&amp; &gt; input {
		flex: 1 1 10ch;
		margin: 0.5rem;

		&amp;[type='email'] {
			flex: 3 1 30ch;
		}
	}
}

How to preserve Aspect Ratio of Images with Tailwind CSS

2020-04-04T00:00:00Z

With these few tailwind classes you can lock the aspect ratio of an image. In this example the height will be 2/3rds of the height.

<div class="relative overflow-hidden pb-2/3">
	<img src alt class="absolute h-full w-full object-cover">
</div>

Since percentage values for spacing are not available per default you'll need to add it in tailwind.config.js like so:

module.exports = {
	theme: {
		extend: {
			spacing: {
				'2/3': '66.666667%',
			},
		},
	},
};

More details in the Tailwind Docs

Service Innovation Labs

2020-01-24T00:00:00Z

When it came to the point that we needed a new Website at Service Innovation Labs, we had the requirement to make it extremely flexible, but still maintainable by non-technical users. I'll sum up some tech choices I made, since I was mostly busy developing, while others took care of visual design and content.

A conventional CMS like Wordpress or Kirby cannot fulfil this, because it mostly works page-based, what we needed was content editing on a component level. So I proposed storyblok.com, a headless CMS with a visual editor, making the editing experience similar to page-builder tools like Wix or Sqarespace, but without being trapped in their front-end. My wish was to work with Nuxt.js and luckily storyblok turned out to be the perfect match. The killer feature for me was the built in image processing API of storyblok.

For CSS I chose Tailwind. Before that I haven't used it extensively, but really wanted to try it in a bigger Project. Combined with PurgeCSS, that treeshakes your CSS tree (removes all unused code) there's really no drawback in working with hundreds of utility classes. Now I can confirm: Tailwind allows for such a fast and joyful developer experience, I don't want to miss it ever again (coming from someone who actually likes CSS).

The best option for hosting statically generated content is (IMHO by far) netlify.com, it not only provides the best dev experience and speed I could wish for, but also has an extremely generous free plan as well as built-in form handling, usable by just adding data-netlify="true" to any <form> field.

The only caveat I have is that the storyblok live preview does not work out of the box and requires a second build of the website on now.sh that took quite some time to setup before it worked (still slow and unreliable). In retrospect I'd do a lot of things differently, but the overall set of tools and plugins Nuxt provides, combined with Storyblok, Tailwind and Netlify is incredibly pwerful and just a pleasure to work with.

Roman Neumann

2020-01-16T00:00:00Z

In creative co-work with Roman, I conceived a Website for his profession as Coach, Trainer and Speaker. His focus lies in Entrepreneurship, Innovation Strategy and thinking through the effects, this digital world has on our minds and life.

Change the Playback Speed of any Online Video

2020-01-07T00:00:00Z

For every HTML Video element, you can change the playback speed, even if there are no control buttons for this funcionality. This works for every modern website including Netflix or Youtube. Just open the browser console by hitting f12 on your keyboard, paste the following snippet and hit enter.

document.querySelector('video').playbackRate = 1.3;

Of course you can change the value to anything you want. More information on video manipulation on MDN

Highlights from 36c3

2020-01-03T00:00:00Z

36c3 had some awesome talks again. Find the full Playlist here: Original Version / English version on YT

My personal highlight is (no surprise) David Kiresel's talk on Data mining Deutsche Bahn.
Also don't miss Moxie Marlinspike (inventor of Signal App) talking about (de)centralisation and privacy and Will Scott on Private Messaging
Every german citizen should watch "Hacker hin oder her": Die elektronische Patientenakte kommt!
It's suprisingly easy to break PDF securty features

CSS 'all:' shorthand

2019-12-22T00:00:00Z

> The all shorthand CSS property resets all of an element's properties (except unicode-bidi and direction). It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin. MDN: all

I'm not sure if I'd ever want to use it, but this is how it works:

/* reset all css to default values */
.foo {
	all: initial;
}

Base16 Leaf Tomorrow Theme for VSCode

2019-11-14T00:00:00Z

Since "Tomorrow" just felt too red to me, I replaced that color with a nice green. Out came a less red and more green version of Base16 Tomorrow Dark Theme with some modifications in secondary colors. Now also optimised for writing distraction-free in markdown. It displays bold bold and italic in italics.

Install the theme from VSCode marketplace or checkout the Repository on Github.

:focus-visible CSS pseudo-class

2019-05-25T00:00:00Z

Today I learned: There's an alternative to :focus, that's only applied, when selecting the element via keyboard: :focus-visible.

> The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”). > Entry on caniuse.com

Unfortunately support is not great yet. But there's a polyfil and a way to enhance progressively (Video, about minute 41:00):

:focus:not(:focus-visible) {
	/* styles */
}

How to style Browser Scrollbars

2019-05-20T00:00:00Z

Scrollbars still look like 1995 on Windows, so here is an example how to style browser scrollbars (in use on this website). The CSS poperty only works in Firefox for now, but the other gibberish underneath also makes Chrome look great!

Edit: Updated Snippet. In case you only want to change scrollbar style on windows an keep the original everywhere else, a bit of js is required. More details in the article by filamentgroup: Two Browsers walked into a Scrollbar

:root {
	--scrollbar-size: 0.75rem;
	--scrollbar-minlength: 1.5rem; /* min length of scrollbar thumb (width of horizontal, height of vertical) */
	--scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
	--scrollbar-track-color: transparent;
	--scrollbar-color: rgba(200, 200, 200, 0.2);
	--scrollbar-color-hover: rgba(200, 200, 200, 0.3);
	--scrollbar-color-active: rgb(200, 200, 200, 0.8);
}
.styled-scrollbar {
	/* firefox */
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
	scrollbar-width: thin; /* webkit */
	&amp;::-webkit-scrollbar {
		width: var(--scrollbar-size);
		height: var(--scrollbar-size);
	}
	&amp;::-webkit-scrollbar-track {
		background-color: var(--scrollbar-track-color);
	}
	&amp;::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: var(--scrollbar-color);
	}
	&amp;::-webkit-scrollbar-thumb:hover {
		background-color: var(--scrollbar-color-hover);
	}
	&amp;::-webkit-scrollbar-thumb:active {
		background-color: var(--scrollbar-color-active);
	}
	&amp;:-webkit-scrollbar-thumb:vertical {
		min-height: var(--scrollbar-minlength);
	}
	&amp;:-webkit-scrollbar-thumb:horizontal {
		min-width: var(--scrollbar-minlength);
	}
}

How to inherit scoped styles in Vue to child components

2019-05-13T00:00:00Z

I just learned from VueDoese Newsletter that elements in nested components are stylable from the parent while still having scoped css with the /deep/ selector:

.parent /deep/ .child {
	color: indigo;
}

Read the full Post by VueDose. Or have a look at the example.

How to define canonical URL in Nuxt.js

2019-05-09T00:00:00Z

How to set rel=canonical to primary domain in Nuxt.js (and let search engines know to ignore duplicate content on staging server).

// layouts/default.vue

export default {
	head() {
		return {
			link: [
				{
					rel: 'canonical',
					href: 'https://www.my-primary-domain.com' + this.$route.path,
				},
			],
		};
	},
};

Business Innovation Cards

2019-01-08T00:00:00Z

A Serious Card Game I co-designed at SI Labs that lets you develop new directions for your business.

Bonitätsmanager.de

2018-12-25T00:00:00Z

Many small business owners feel overwhelmed when it comes to their own creditworthiness and are not very familiar with the subject. They do not know what their own creditworthiness is or how it is calculated. Creditworthiness is of great importance for business: it determines whether a company will get financing at all and how expensive it will be. To solve this we explored ways in which customers can view processes and actively participate in shaping their creditworthiness.

With the service, entrepreneurs can check their creditworthiness online. They receive a current score and tips on how they can improve it quickly and easily. We developed a prototype and tested it in Berlin with potential customers. In the beta phase with early adopters, we refined the flows according to user feedback. Then we prepared the Germany-wide launch.

Microinteractions

2018-06-06T00:00:00Z

[German]

Warum können vermeintlich kleine Interaktionen so wichtig sein? Wodurch wird eine (Mikro-)Interaktion ausgelöst? Wie funktioniert sie und woher weiß ein Nutzer wie sie funktioniert? Welche Rolle spielen Zeit und Bewegung? Woher kommen die grundlegenden Muster und Regeln, denen digitale Knöpfe, Schalter oder Fenster entlehnt sind? Wie haben sie sich im Lauf der Zeit verändert und wie sieht deren Zukunft aus? Die Webseite war Teil meiner Diplomarbeit und entstand im Rahmen meines Studiums Kommunikationsdesign & Medien an der Hochschule Wismar.

Launching a DIY-Workshop Plattform with Audi

2017-12-01T00:00:00Z

Together with a big automotive brand we created an online plattform where users could explore and book craft workshops.

Despite high usage numbers, satisfied hosts and a reliable, beautiful webplattform, the project was unfortunately discontiunued after a few moths. After all it was just an experiment for the client.

1pLAczk_GmQ

SsfYZm9wpEg

Launching a Parking Ticket App with Volkswagen

2017-06-30T00:00:00Z

During my time at Service Innovation Labs, I helped launching one of Volkswagen first digital services: A parking ticket app. In small team consisting of Project Lead, 2 Designers and 4 Developers, we built the first versions of VW We Park.

Being one of the designers, my focus was creating UX and UI Designs for the iOS and Android Apps. We wireframed and developed prototypes, then testet them where our potential users are: on the street. It turned satisfying the users was not the hardest task we had – Satisfying the client’s (backt then) uber-precautious legal department was.

This was my first Project for a big client after university, and I had to learn so much in a short, very intense time. But it turned out pretty good (for a MVP) and after launch we handed the project over to a client-side team. We Park was the first service in the Volkswagen “We” universe and initiated their transformation from a car manufacturer to provider of digital mobility services.

Read more about the Project in the Case Study at si-labs.com (German).

AKR Tax Consultancy

2016-04-13T00:00:00Z

Wismar University Website

2015-10-08T00:00:00Z

The website of university really really needed a refresh. They still had a separate “jQery mobile” version instead of a responsive website. Plus approximately 30 additional sub-sites running on various systems. Short: it was a mess.

While it was clear that I won’t have the time to fully support the project until launch, I still wanted create a basic concept they could show stakeholders, build upon and refine. Since my screen designs where pretty rough and untested I never expected to see much left of them in the final website. But: Now its online, pretty much exactly how I created it. Have a look: hs-wismar.de

The main challenge here was coming up with a navigation concept that would be able to cover the hundreds of pages. My solution was a mega menu on large screens and some kind of accordion plus a lot of shortcuts on mobile sizes.
Without fully understanding all the content, knowing if it needed an update or was not needed anymore at all, I tried to bring some order to what I found and layed out an information hirarchy that made sense in my eyes. Cleaning up all the legacy content happened to occupy several generations of working students after me.

Zukunft Leben

2015-04-19T00:00:00Z

[German]

Zukunft Leben lässt uns auf sinnliche Weise erfahren, was Nachhaltigkeit bedeutet. Ergänzend zum gleichnamigen Hörbuch des Silberfuchs-Verlags entsteht hier eine neue Form digitalen Magazins. Dem Besucher wird das Thema Nachhaltigkeit ansprechend und niedrigschwellig mit Hilfe formatfüllender Bilder, Animationsvideos und interaktiven Inhalten nahegebracht.

In Zusammenarbeit mit Markus Dittrich u. A.

Gourmääh iPad Cookbook

2014-06-11T00:00:00Z

A prototype for a digital magazine that makes the joys of cooking tasty in a humorous way for all the young at heart.

In collaboration with Max Friedrich and Annika Möller

How to Hochschulgremien

2014-04-11T00:00:00Z

[German]

Ein politisch nicht ganz korrekter Erklärfilm, den jeder Studierende der HS Wismar gesehen haben sollte. AStA, StuPa, FSR: Die wenigsten Studenten der Hochschule Wismar wussten, wofür diese Abkürzungen stehen, geschweige denn, welche Aufgaben die studentischen Gremien haben. Dieser Animationsfilm beantwortet auf unterhaltsame Weise all diese Fragen und gibt einen Überblick über das hochschulpolitische System der HS Wismar.

In Zusammenarbeit mit Markus Dittrich, Tobias Aagard und Julien Jardon

Je t’aime MV

2014-04-10T00:00:00Z

Die Fakultät Gestaltung der Hochschule Wismar präsentierte im Juni 2014 die besten studentischen Arbeiten mit regiolalem Bezug. Eine vom Besucher per iPad steuerbare Fotogalerie, ein Augmeted-Reality-Kiosk und per Gyroskop kontrollierte iPads für die dreidimensionale Darstellung von Architekturmodellen ermöglichten eine individuelle Erfahrung von Ausstellungsinhalten.

In Zusammenarbeit mit Markus Dittrich, Johann Mikkat, Richard Stickel, u. A.

Virtual Campus Tours

2014-03-11T00:00:00Z

Vasarely

2014-01-24T00:00:00Z

A typographic audio-visualisation inspired by the works of the Op-Art artist Victor Vasarely syncronized to the song Disc Wars by Daft Punk.

Photogrammetry Experiments

2013-12-31T00:00:00Z

Experimenting with Photogrammetry software, which was still in the fledgling stages back then and did not work as expected. In the end, producing cool texture files became became my goal rather than nice 3D models.