Viele von ihnen behelfen sich dabei mit Bildschirmvergrößerung, Sprachausgabe oder speziellen Tastaturen. Trotzdem gibt [über die Hälfte](https://www.einfach-fuer-alle.de/artikel/barrieren/) der Menschen mit Behinderung an, beim alltäglichen Surfen auf unüberwindbare Hürden zu stoßen.

Genauso wie es mittlerweile technisch ausgefeilte Rollstühle gibt, sind Aufzüge und abgesenkte Bordsteinkanten in der Stadt für motorisch eingeschränkte Menschen wichtig.

Trotz technischer Hilfsmöglichkeiten liegt es vor allem in der Hand derer, die digitale Produkte erstellen, ob sie für alle zugänglich sind oder nicht.

Ich persönlich profitiere sehr von Durchsagen am Bahnsteig, Untertiteln, Transkripten, Zoom-Möglichkeiten, gut lesbarer Schrift, Helligkeitseinstellungen und barrierefreien Leitsystemen im Ausland.

Barrierefreiheit ist gut für uns alle, in der realen und in der digitalen Welt.

Ü-65-Jährige machen [20% unserer Bevölkerung](https://de.statista.com/themen/172/senioren/) aus – [fast zwei Drittel](https://www.destatis.de/DE/Themen/Gesellschaft-Umwelt/Einkommen-Konsum-Lebensbedingungen/IT-Nutzung/_inhalt.html) von ihnen surft im Web. [Sehvermögen und motorische Fähigkeiten nehmen im Alter oft ab](https://barrierekompass.de/barrierefreies-internet/zielgruppen.html). Die Zahl der [Menschen mit Behinderung](https://www.bgw-online.de/SharedDocs/Downloads/DE/Medientypen/Wissenschaft-Forschung/BGW55-83-140-Trendbericht-Behindertenhilfe.pdf?__blob=publicationFile) als auch die [Zahl der älteren Menschen](https://service.destatis.de/bevoelkerungspyramide/#!y=2036) steigt kontinuierlich an.

### We are all just temporary abled
„Be-hinderung“ – im Sinne „von der Umwelt behindert werden“ – betrifft uns tatsächlich alle. Spätestens, wenn man nicht erkennen kann, in wie vielen Minuten die Bahn kommt, merkt man, dass man die Brille zuhause hat liegen lassen. Wir sind dann an diesem Tag temporär „sehbehindert“. Verknacksen wir uns den Knöchel, sind wir vorübergehend motorisch eingeschränkt. Behinderungen können sogar situationsbedingt auftauchen, zum Beispiel wenn wir von der Sonne geblendet werden. Dann können wir nicht wie sonst handeln – wir sind eingeschränkt.

Beziehen wir also diese Formen der Einschränkungen mit ein, können wir allen mit barrierefreien Produkten helfen: „[we are all just temporary abled](https://medium.com/@jma245/accessibility-it-applies-to-me-too-a40f3861878)“.

Wie können wir als Webentwickler bzw. -designer also Barrieren abbauen, damit das Internet für alle ein Ort moderner Kommunikation und Informationsbeschaffung wird?

### Makellos, zahlungskräftig, weiß? Die Frage ist, wen wir uns vorstellen.
Um im Arbeitsalltag schneller konkrete Entscheidungen fällen zu können, müssen wir einen inneren Katalog an Nutzern aufbauen. Falls wir zu dem Schluss kommen, dass auch Menschen mit Behinderung, Mindestlohn oder Migrationshintergrund als Nutzer in Frage kommen, müssen wir Websites entsprechend gestalten und entwickeln. Wen stellen wir uns also vor?


Behinderungen können sehr unterschiedlich ausgeprägt sein. Da das Internet ein visuelles Medium ist, birgt es gerade für sehbehinderte Menschen viele Barrieren. Eine deutliche visuelle Gestaltung hilft, den Inhalt der Website besser zu erfassen. Wer blind ist, kann auf [Sprachausgabe](https://www.einfach-fuer-alle.de/artikel/interviews-mobile/interview-christian-bayerlein/), Tastatur und [Braillezeilen](https://www.youtube.com/watch?time_continue=36&v=IXbXtkVVseI)) zurückgreifen. Bieten wir keine Alternativen zu Bildern, Farbleitsystemen oder Videos, schließen wir viele Menschen von unseren Inhalten aus.


Für Menschen, deren motorische Beeinträchtigung die Hände betrifft, gibt es ebenfalls Hilfstechnologien: spezielle Tastaturen, Sensoren und sogar die Möglichkeit, per [Augensteuerung](https://blog.diakonie.at/durchs-arbeitsleben-blinzeln) im Web zu surfen. In der Entwicklung müssen wir deshalb darauf achten, dass die Website auch ohne Maus bedient werden kann. Außerdem sollte der klickbare Bereich von interaktiven Elementen möglichst großzügig sein.

Gehörlosen oder schwerhörigen Menschen hilft es, wenn Videos und Podcasts mit Untertiteln bzw. Transkripten versehen sind.

Kognitiv beeinträchtigten Menschen helfen eine klare Navigation, kurze Sätze und erklärende Grafiken. 

Das hilft aber nicht nur Menschen mit geistigen Einschränkungen oder Leseschwäche, sondern auch all jenen, die unsere Sprache noch nicht perfekt beherrschen. Über ein [Drittel der Hamburger besitzen einen Migrationshintergrund](https://www.statistik-nord.de/zahlen-fakten/hamburger-melderegister/migrationshintergrund/dokumentenansicht/bevoelkerung-mit-migrationshintergrund-in-den-hamburger-stadtteilen-ende-2017-60606/). 

Wer nicht genug Geld für den neuesten Stand der Technik oder schnelles Internet hat, dem werden Websites oft fehlerhaft angezeigt. [19% der Menschen in Deutschland sind von Armut bedroht](https://de.statista.com/statistik/daten/studie/244865/umfrage/von-armut-oder-sozialer-ausgrenzung-betroffene-bevoelkerung-in-deutschland/).

### Was können wir konkret ändern?
Allen Bedürfnissen gerecht zu werden (unterschiedliche Formen von Behinderung, ungeübte Internetnutzer, schlechte technische Vorraussetzungen…), klingt erstmal nach einer großen Aufgabe. Wir können uns ihr jedoch Schritt für Schritt nähern.

Beim Design wie auch bei der Entwicklung einer Website können wir darauf achten, niemanden auszuschließen. Dafür müssen wir miteinander sprechen und von Anfang an die Barrierefreiheit mit einplanen.

Alternativen zu schwierigen Features wie Formularen denken wir am besten von vornherein mit. Dabei ist es sinnvoll, pragmatisch im Kleinen anzufangen, um unsere Vorgehensweise testen zu können.

Es gibt keine Zahlen, wer welche Hilfsmittel wie oft benutzt. Unsere einzige Möglichkeit ist es, eine möglichst gut bedienbare Website zu produzieren:

1\. Ist das HTML [sinnvoll strukturiert](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)?
```
<main>
  <section>
    <h1>Überschrift</h1>
	<p>Text...</p>
  </section>
</main>
```

2\. Sind alle Bilder mit einer Textalternative ausgestattet ([Alt-Attribut](https://web.dev/labels-and-text-alternatives/))
```
<img src="..." alt="Foto von Erika Mustermann">
```

3\. Stimmen [Schriftart, Schriftgröße](https://webaim.org/techniques/fonts/) und [Kontraste](https://axesslab.com/top-color-contrast-checkers/)?
```
.smallest-text {
  font-size: 16px;
  color: black;
}
```

4\. Ist ein angewähltes Element als solches erkennbar ([focus style](https://css-tricks.com/focusing-on-focus-styles/))?

5\. Bei umfangreichen Websites: kann das Menü übersprungen werden ([skip link?](https://webaim.org/techniques/skipnav/))
```
<a href="#content" class="skip">Menü überspringen</a>
```

6\. Ist eine Navigation per [Tabulatortaste](https://web.dev/control-focus-with-tabindex/) möglich?

7\. Ist die Website mit einem [Screenreader](https://webaim.org/techniques/screenreader/) navigierbar?

8\. Können selbstgestaltete Buttons und Pop-ups mit einem Screenreader bedient werden?

Eine inklusive Website sollte für schwierige Bedingungen gerüstet sein, muss aber nicht in jedem Fall gleich aussehen. Bewährt hat sich die Methode [Progressive Enhancement](https://ux.shopify.com/what-is-progressive-enhancement-and-why-should-you-care-cc585184b2d0) (schrittweise Erweiterung):

Zuerst legen wir eine Minimalversion der Website fest – sie funktioniert auf allen Browsern und Geräten, auch ohne JavaScript und CSS sollte alles Wichtige noch erfassbar sein.

Gibt es interaktive Elemente wie Buttons, sollten Interaktionen auch unter diesen erschwerten Bedingungen zumindest nachvollziehbare Ergebnisse herbeiführen.

Es ist sinnvoll, diese Minimalversion zuerst zu gestalten und zu entwickeln, um Tab-Navigation, Sprachausgabe und Co. schonmal testen zu können. Wenn alles klappt, kann der nächste Schritt angegangen werden: Animationen und Interaktionen können jetzt gestaltet und eingebunden werden. Dabei sollte die Website nach größeren Änderungen immer wieder erneut auf Barrierefreiheit durchgecheckt werden. Die Vorzeigevariante der Website läuft dann auf den besten Geräten mit den neuesten Browsern, ist aber trotzdem noch für jeden zugänglich.


Natürlich ist das alles mehr Arbeit, aber eine barrierefreie Website bietet ungeahnte Vorteile, die auch den Auftraggeber überzeugen: inklusive Entwicklung wirkt sich positiv auf SEO aus und die Website kann schneller und auch auf alten Browsern und Geräten geladen werden. Vor allem aber können sich jetzt viel mehr Menschen an unseren digitalen Produkten erfreuen.

thumbnail_barriere-blur-7f8936.jpg

barriere-blur-7f8936.jpg

Ein Essay von Franca

Barriere / Freiheit: Die Grenzen des Internets 

Jeden Tag schicken wir diese Daten hin und her, quer über die Welt. Seien es Passwörter, Zugangsdaten oder SSH-Keys — im Team oder mit unseren Kunden. Dass diese Daten wichtig und sensibel sind, ist uns allen nicht erst seit DSGVO oder den täglich neuen Passwort-Exploits bekannt. Der Mensch kommt bei dieser Thematik mitunter auf innovative aber auch recht merkwürdige Ideen, wenn es um Datenverschlüsselung oder Versand geht.

Ein Bekannter erzählte bereits vor vielen Jahren, dass ein Mitarbeiter eines großen Automobilkonzerns wichtige Daten – weil es eben schnell und Übersee gehen musste – durch den Äther jagte, aber dabei lieber auf Nummer sicher gehen wollte. So wurden die Dateiendungen stets vor dem Versand in ein anderes Format umbenannt. Aus PDF-Dokumenten wurden JPEG Dateien oder aus .pdf ein .tiff. Das ganze wurde zusätzlich gezippt und mit einem Passwort versehen, welches im Anschluss telefonisch mitgeteilt wurde. Solche Taktik ist tatsächlich eine gängige und gar nicht mal so schlechte Methode, für die es sogar eine Bezeichnung gibt: Verschlüsselung durch Verwirrung – allein für den Fall das unterwegs mitgelesen, abgefischt oder gar gehackt wird.

thumbnail_sesame-6b9a9bc6-4e55-4de3-8b15-9bfcde001c26.jpg

sesame-6b9a9bc6-4e55-4de3-8b15-9bfcde001c26.jpg

Sesame — Encrypt your messages or credentials and share them with a passphrase protected secret link. So sensitive data remains secret.

Uns begleitet das gute alte Passwort tagtäglich, selbst, wenn es verschlüsselt im Browser oder einem Passwort-Manager hinterlegt ist. Dennoch ist es nicht verwunderlich, dass auch heute immer noch viele dieser Passwörter geknackt werden. Mit Zeit und Know-How gelingt es jenen, die etwas Böses wollen. Die Schwachstelle sitzt dabei häufig vor der Computer und tippt mit einer, wird-schon-nix-schiefgehen-Haltung 123456 (nach wie vor eines der weitverbreitesten Passwörter auf der Welt) in das Passwortfeld.

Der Mensch geht oft den Weg des geringsten Widerstandes. Das liegt vielleicht in unserer Natur. Oder: Keine Zeit, keine Lust und wie wahrscheinlich ist es, dass ausgerechnet mir etwas passieren kann?

Um überhaupt als ansatzweise sicher zu gelten, muss Entschlüsselung auf der anderen Seite ein klein wenig unbequem für die User/innen sein. Ein Passwort allein ist nunmal nicht sicher genug und das ist nur einer der Gründe, warum es Erfindungen wie die 2-Faktor-Authentifizierung gibt mit der wir unsere Überweisungen beim Online-Banking tätigen.

Doch wie können Informationen im Arbeitsalltag guten gewissens untereinander austauschen ohne das wichtige Informationen in E-Mail Postfächern oder Chats für immer einsehbar sind? Auf diese Frage haben wir als Antwort Sesame entwickelt: Eine Web-App, über die wichtige Informationen verschlüsselt, einmalig einsehbar und zeitlich begrenzt hinterlegt und bereitgestellt werden können. 

Dabei werden Nachrichten direkt im Browser über AES-256 durch eine definierte oder generierte Passphrase verschlüsselt und anschließend über eine REST-API in Redis gespeichert. Dadurch wird sichergestellt, dass zu keinem Zeitpunkt Serverseitig unverschlüsselte Nachrichten gespeichert werden. Ohne Passphrase ist es also für niemanden möglich, gespeicherte Nachrichten zu entschlüsseln – ob als Hoster oder Entwickler.

Die API liefert nach Speicherung einer Nachricht einen Hashwert zurück, über welchen die Nachricht wieder abgerufen werden kann. Der Hash wird per SHA256 generiert und ist daher für niemanden implizit auffindbar. Wird die Nachricht abgerufen, muss nun noch die vergebene Passphrase eingegeben werden, um die Nachricht wieder zu dechiffrieren. Durch den Aufruf wird die Nachricht gelöscht. Wurde die Nachricht nicht innerhalb des gewählten Zeitraums abgerufen, wird sie ebenfalls gelöscht. Für immer.

thumbnail_sesame-088eef19-4780-4168-9c8d-68cf8b63a0dc.jpg

sesame-088eef19-4780-4168-9c8d-68cf8b63a0dc.jpg

Sesame trifft also diverse Maßnahmen die Nachrichten zu sichern. Hierbei ist es dem Nutzer überlassen eine sichere Passphrase und Gültigkeit zu definieren. Ebenfalls sollte der Link und definitiv die Passphrase über einen sicheren verschlüsselten Kanal kommuniziert werden – idealerweise getrennt voneinander.

Letztendlich liegt Datensicherheit natürlich in der Hand des Nutzers. Sesame macht es jedoch ein wenig einfacher, keine hochsensiblen Daten über Slack Historien oder E-Mails zu verteilen, welche dort über Ewigkeiten abliegen und leisten somit einen Beitrag zum Thema nachhaltige Sicherheit im Netz.

Test Sesame: [sesame.atelierdisko.de](https://sesame.atelierdisko.de)

Get it at: [github.com/atelierdisko](https://github.com/atelierdisko)

It is open source and free to use.

thumbnail_sesame-6248b44a-9ecf-4d80-ad19-b79ba206328d.jpg

sesame-6248b44a-9ecf-4d80-ad19-b79ba206328d.jpg

Unser Tool für mehr Sicherheit beim Datenaustausch

Open Sesame Demo released 

Wenn wir heute, sieben Jahrzehnte nach Inkrafttreten des Grundgesetzes und der Gründung der dpa, nach den Gründen für das Gelingen unseres demokratischen Weges — trotz der erlebten Abgründe der Diktatur — fragen, dann ist eben die Deutsche Presse-Agentur ein Teil der Antwort. Sie hat zum Gelingen dieser Demokratie beigetragen.

thumbnail_dpa-mockup-001.jpg

dpa-mockup-001.jpg

Tageszeitungen, Radiosender, Web-Plattformen, Digital-Kanäle oder Apps von Unternehmen und Organisationen weltweit vertrauen auf auf die Dienste und Angebote der dpa — so gibt es z. B. kein Land auf der Erde, aus dem nicht berichtet wird. Diese Angebotsvielfalt journalistischer Berichterstattung ist nicht nur ein durchweg komplexes Unterfangen hinsichtlich ihrer Distribution, sondern erfordert sowohl eine skalierbare und zukunftssichere Lösung als auch eine UX-Strategie hinsichtlich der Darstellung der journalistischen und digitalen Angebote der dpa. Gleichzeitig sollen verstärkt unterschiedliche Benutzer\*innen mit ihren ganz eigenen Interessenschwerpunkten in jene Bereiche gelenkt werden, die ihren Interessen dienen — egal ob es sich um potenzielle Mitarbeiter\*innen oder Nutzer\*innen der Dienste handelt.

Wir befinden uns in einem Positionierungsprozess — die Identität der dpa in Zeiten des digitalen Wandels und der Transformation im Hinblick auf unsere Gründungsgedanken und Leitlinien, für die wir eine neue Klarheit zum Ausdruck bringen wollen: Schließlich stehen wir in unserer Rolle als Vorreiterin und Innovationstreiberin der Nachrichtenbranche auch in der Verantwortung unserer Nutzer*innen.

thumbnail_dpa_screen.jpg

dpa_screen.jpg

thumbnail_dpa-mock-002.jpg

dpa-mock-002.jpg

**Typografie** Ein Mix aus vielen Schriftarten und Schnitten, die sich nicht wirklich signifikant voneinander unterscheiden, resultiert nicht nur in der Qual der Wahl, sondern stiftet vor allem eins: Verwirrung.

Gute Typografie hingegen bedeutet auch klare Hierarchien schaffen: Wenn die dpa Angebote und Inhalte stets mit höchster Sorgfalt kommuniziert, sollte das Schriftsystem dies ebenso kompromisslos widerspiegeln. Seit Gründung der dpa findet die Schrift ,Futura’ im Logo Verwendung und wurde darüber hinaus in vielen unterschiedlichen Schnitten in sämtlichen Medien für die Kommunikation eingesetzt.

Wir reduzierten nicht nur den teils unterschiedlichen Einsatz der Schnitte signifikant, sondern etablierten ein unmissverständliches System: Die Futura PT Book als Markenbotschafterin für sämtliche Inhalte im Digitalen, kombiniert mit der Schrift ,Inter’ für sämtliche Navigations- und UI-Elemente auf der Website.

thumbnail_dpa_typo_01.png

dpa_typo_01.png

Branding ist nicht gleich UI. Das bedeutet gleichzeitig auch: Wir müssen künftig deutlicher differenzieren, was Marke und was Funktion ist. Schriftsysteme und Farben sind erst der Anfang.

thumbnail_dpa_typo_02.png

dpa_typo_02.png

**Farbsystem**

Weniger ist mehr: Wir reduzierten die Farbpalette der dpa im Zuge der Überarbeitung der Dachmarke von gut zwanzig unterschiedlichen Farben für Anwendungen auf drei Kernfarben: Hierbei steht das Grün nach wie vor für die dpa als Marke selbst. Um das Leuchtgrün noch prägnanter wirken zu lassen, ergänzten wir diesen Ton um eine weitere Farbe: das dpa Mauve.

Das Regelwerk für besagten Einsatz ist äußerst simpel: Die dpa als Marke bleibt grün. Inhalte, bei denen es um die Themen Menschen und Mitarbeiter\*innen geht, wird künftig in Mauve darstellt. Darüber hinaus wird das Kernangebot der dpa — dpaID in dunklerem Grün gekennzeichnet. 

Für sämtliche User-Interface-Elemente entwickelten wir aus diesen definierten Farbtönen ein eigenständiges UI-Farbsystem für die Verwendung nicht marken- oder produktrelevanter Inhalte. Diese Farbpalette ist einzig und allein für die Navigation und Eingabe vorgesehen und basiert inhaltlich auf der Annahme, dass Corporate-Farben nicht zwangsläufig im User Interface verknüpft werden müssen. 

color-001.png

color-003.png

**Fläche, Form und Layout** Unabhängig, zuverlässig, sorgfältig und glaubwürdig sind die wichtigsten Attribute der Deutschen Presse-Agentur. Unserer Leitgedanke: Genauso klar und unmissverständlich muss die dpa künftig visuell auftreten: Selbstbewusst, bestimmt — modern, vor allem aber digital. Allein diese Haltung ist für uns Anlass genug gewesen, eine Formensprache zu entwickeln, die gemeinsam mit den weiteren Corporate-Design-Elementen kombiniert und zusammenfasst, wofür die dpa inhaltlich einsteht: Nachrichten und Fakten auf den Punkt kommunizieren — diesen Leitsatz soll künftig auch das Design aufgreifen. Hierzu integrierten wir eines der Kernelemente des Corporate Designs der dpa wortwörtlich in besagte Formensprache.


thumbnail_dpa_dot_01.png

dpa_dot_01.png

thumbnail_dpa_components_01.png

dpa_components_01.png

thumbnail_components-002.png

components-002.png

Mit der Überarbeitung des Designs und Anpassungen im Branding durch Schrift, Farbe und Ikonografie wollen wir markante, aber leicht zu verstehende Oberflächen erschaffen, die responsive und modular für Desktop und Smart Devices funktionieren — Oberflächen, die sich mehr nach App als Web anfühlen.

thumbnail_components-003.png

components-003.png

thumbnail_dpa_components_04.png

dpa_components_04.png

**Skalierbar und modular: dpa.com als Plattform begreifen** Modularität ist der Schlüssel für Flexibilität und ermöglicht der dpa durch den Einsatz einer Headless-CMS-Lösung fortan das redaktionelle und globale Anlegen verschiedener Seiten- und Inhaltstypen. Dieser konzeptuelle und systematisierte Ansatz ermöglichte es uns, das dpa-Designsystem schnell und effektiv zu erweitern. Die technische Entwicklung unserer Vision bedeutete, nicht nur Code unter strikter Einhaltung dieses modularen Ansatzes zu schreiben, sondern auch durch intelligente Schnittstellen-Mechanik so offen zu gestalten, dass an jeder Stelle Dienste eingebunden werden können.

thumbnail_dpa-mock-001.jpg

dpa-mock-001.jpg

**Pattern und Ikonografie** Für ein umfassendes und einheitliches Designsystem haben wir neben Pattern auch neue Icon-Sets für das User Interface und den digitalen Marktplatz gestaltet sowie vorhandene Libraries in die neue Designsprache visuell übersetzt. 

thumbnail_dpa_icons_01.png

dpa_icons_01.png

thumbnail_icons-002.png

icons-002.png

thumbnail_icons-003.png

icons-003.png

thumbnail_dpa_pattern_02.png

dpa_pattern_02.png

dpa – Deutsche Presse-Agentur

dpa.com

thumbnail_dpa-hero.png

dpa-hero.png

Corporate Website

Deutsche Presse-Agentur

Der Abend ist aussergewöhnlich mild dort unten am Hafen. Unter Wellblech trinken wir Bier. Später dann, als wir zurück zu meiner Schwester nach Harburg fahren, regnet es Hamburg-typische Bindfäden. 

Eine Spur aus Regenwasser bahnt sich langsam aber sicher einen Weg durch die Rillen meiner Cordhose. Wir gehen einen im Nachhinein betrachtet beachtlichen Umweg zur S-Bahn Haltestelle Reeperbahn. Umwege erhöhen die Ortskenntnis. Der Rest ist verschwommen. 

Hamburg 2014. Man möge mir diese klaffende zeitliche Lücke verzeihen, aber die tut relativ wenig zur Sache. Von lauer Abend kann nicht die Rede sein. Draußen ist der Gefrierpunkt erreicht und es liegt schon wieder Schnee. Januar, Februar, März, April, Mai. Juni, Juli, August, September. Und gleich drei mal: Oktober. November. Dezember. Endjahresstimmung breitet sich im Büro aus und dieses Jahr scheint um. Rechner aufräumen. Unsortierte Dinge in Ordner umsortieren. Was man halt so macht. Die Luft ist raus und dann macht das Mail-Program doch noch einmal Ping. Absender: Michael Schieben. 

Bei »Rockband« rutscht mir mein Herz ein wenig in die Hose. David auch, aber eher aus Angst, weil er unter dieser Begrifflichkeit an die Toten Hosen denken muss. Ich erinnere mich an ein Cover auf der in Neongrüner Schrift »Kapitulation« steht, welches das Design Studio Precious 2007 gemacht hat.

Das war kurz vor dem Diplom an der Kunsthochschule. Im Gang hielt Ulla die Platte damals in den Händen und lobte die unprätentiös in die Ecke gedrückte Typografie. Fand ich auch gut und mir fällt wieder ein, dass es für mich persönlich gar keine größere (deutsche) Rockband als Tocotronic gibt. »Nich’ dein Ernst, Jan. Glaubst du wirklich? Das wäre ja so super, wenn wir das machen könnten.« Am nächsten Tag vereinbart Stephan, der Manager der Band, einen Termin mit Jan von Tocotronic mit und bei uns in der Budapester Straße in Hamburg.



thumbnail_toco-stage.png

toco-stage.png

Jungs, guckt mal, Michael von Precious hat uns geschrieben, ob wir uns vorstellen könnten.. « — »Ja, verrückt, lesen wir auch gerade. Aber wer soll das denn sein? Eine (große) deutsche Rockband?

Es ist ein wenig unwirklich, wenn frühe Jugendhelden plötzlich an deiner Tür klingeln und bei einem Kaffee mit dir über das neue Album und die Überarbeitung ihrer Webseite sprechen. Es ist auch gerade deshalb ein wenig ungewöhnlich, weil unser Hamburger Büro in genau der Straße ansässig ist, in der die Tocotronic ihre ersten Konzerte gaben. Aber vielleicht soll das jetzt auch alles genau so sein. Ich muss grinsen, als sich Rico und Jan auf japanische Art und Weise Visitenkarten überreichen. Ein Archiv und Museum soll sie werden, die neue Seite. Ein Videothek und Musikbibliothek. Konzerte und Neuigkeiten und das anstehende (rote) Album ankündigen. Es passt, dass kurz nach der Veröffentlichung die Tocotronic Chroniken folgen, die auf über 20 Jahre Geschichte in einem großen Bildband zurückblickt. »Es ist gut, dass ihr in Hamburg und Berlin seid. Beide Städte sind der Band wichtig.«. Eine Woche später ruft uns Stephan an und verkündet, dass man das Projekt mit uns umsetzen möchte. Eine weitere Woche später sitzt Rico bereits zusammen mit Jan Müller in Berlin und bastelt an einer Vorschaltseite, die das neue Album und die anstehende Tour ankündigen soll. In 5 Monaten muss die neue Seite online sein. Die Betonung liegt auf muss, denn am 1. Mai kommt die neue Platte raus.

Das erste musikalische Fragment wird uns zugespielt. Ein Gitarren-Loop der ersten Single-Auskopplung »Prolog«, welcher im Hintergrund der Vorabversion der Seite laufen soll. Noch 4 Monate. In meiner Theorie hat die Entwicklung einer Webseite für Musiker noch vor ein paar Jahren eine weitaus größere Relevanz. Nicht zu letzt war eine Online-Präsenz so etwas wie ein virtuelles Statement einer Band, aber primärer natürlich ein ständiger Informationskanal für Fans. Die heutigen sozialen Netzwerke führen diesen Nutzen nahezu ad absurdum. Zurück im Jahr 2000 lief das so: Da guck ich doch mal online nach, ob meine Lieblingsband eine neue Scheibe angekündigt hat. Oder gar auf Tour ist. Das war Recherche-Arbeit auf gut Glück, aber umso aufregender, wenn man etwas Neues entdecken konnte. Ja, ja, ich weiß was du jetzt denkst. Stell dir mal 1994 vor, da musste man zum Kiosk im Bahnhof gehen und eine Spex kaufen. Heute kommt das alles von alleine zu einem. Gebündelt und mit der Geschwindigkeit von Laser. Noch während des Scroll-Vorgangs. Keine Recherche mehr, abwarten, es findet einen von ganz allein. Praktisch, zugegeben.

Der Zug Richtung Berlin fährt irgendetwas mit zweihundert. Mein Ausklapptisch wackelt. In der Werbung der Bahn sehen alle immer so lässig und entspannt aus beim Reisen. In den Prospekten sieht man Menschen, die Briefe in Schönschrift schreiben und ich bekomme nicht mal eine einzig grade Linie mit dem Kuli hin. Am Südkreuz muss ich immer aussteigen und ich bin ganz stolz, dass ich die Seite mit Davids technischen Hinweisen zur technischen Machbarkeit bei einem ausführlichen Gespräch am Nachmittag zumindest in der Theorie und auf dem Papier fertig gedacht habe, noch bevor die Ansage ertönt. Mal sehen was Rico dazu sagt. Abwarten, was die Band, das Label und das Management davon hält.

Ein neues Tocotronic Album beschreibt für mich persönlich seit Jahren den Anbruch einer neuen Zeit. Wow, was für ein Satz. Und wie pathetisch der klingt! Aber man weiß, dass man um die 3 Jahre gealtert sein muss. Es gibt gibt gewisse Dinge, die einem unterbewusst ein Zeitgefühl vermitteln. Wie die schreienden Kinder auf dem Heiligengeistfeld. Wenn die kreischen, sind 4 Monate rum. So einfach funktioniert meine Zeitrechnung, meine innere Uhr. In den Gesprächen mit Jan (Müller) kristallisierte sich heraus, dass das (rote) Album ein besonders wichtiges für die Band sei. Christophe Stoll von Precious hat 2009 einen interessanten Artikel, zu Zeiten von »Kapitulation« verfasst. Besser als kann man es nicht ausdrücken, was es bedeutet eine Band online zu betreuen – besser als er hätte man die Beziér-Arbeitskurve nicht ziehen können. »Für eine (große) Band zu arbeiten, bedeutet entweder länger gar nicht und dann zeitweise voll und ganz – in jedem Fall dann, wenn ein neues Album ansteht.«









When you’re working on a band website, you have to take this into account. A strategy you can see quite often is separating a regular artist website from temporary promotional microsites supporting record releases. Sometimes it’s just news on band sites, pointing to an external URL somewhere on the label’s website. And sometimes, artist websites change radically from release to release.

Gestalten ist eine Sache, das Programmieren und Umsetzen Selbiger eine andere. Auch der Ablauf hinter der Bühne muss reibungslos bleiben. Was wohl so eine Band braucht, die in gewissen Phasen stets unterwegs ist und wichtigeres zu tun hat, als die Pflege einer Webseite? Musiker stehen bekanntlich immer vorne auf der Bühne und haben während eines Konzertes tendenziell keine Zeit ein Live-Bild auf ihre Website zu stellen. Entscheidend ist also auch das, was nur die Wenigsten sehen. In unserem Fall ist es das Content Management System zur Pflege von Inhalten. Wir fragten uns, wie wir das wertvollen Wissen von Christophe nutzen können, um auch in zeitkritischen Phasen den Workload möglichst gering zu halten, um spontan auf Anfragen des Labels reagieren zu können. Die offenen und modulare Struktur unseres Hauseigenen CMS Bureau hat uns während der Konzept-Phase viel Arbeit abgenommen oder Dinge von ganz alleine gelöst. Statt das Internet wahllos nach irgendwelchen semi passenden Plugins zu durchkämmen, griffen wir auf unsere intelligenten Schnittstellen zurück, um die Inhalte entweder voll automatisiert oder über logische Eingabemasken einfließen zu lassen. So fragt das System in bestimmten Intervallen die Tourdatenbank oder Instagram ab und überträgt die Termine auf die Website. Da freut sich auch der Tourmanager. Sobald alle Tourtermine gespielt sind, verschwinden sie im Archiv und das Modul verschwindet automatisch von der Startseite ohne fehlerhaft wirkende Überbleibsel dastehen zu lassen und ohne, dass jemand alles wieder gerade rücken muss.

Die Einpflege des beachtlich großen Backkataloges der Band und der einzelnen Musiker wurde zum Kinderspiel und ist sicherheitshalber für weitere Veröffentlichungen ausgelegt. 3 Jahre gehen schneller rum als man denkt. Nachhaltikeit und so. Um die Videothek mit über 30 Musikvideos der Band anzulegen, reichte lediglich die Eingabe der Video-ID der jeweiligen Plattform (Youtube / Vimeo). Das war dann auch in 10 Minuten erledigt und niemand musste mit kryptischen Embedded-Codes rumhantieren. 

Das Management stellte einen Fahrplan mit fixen Daten bereit der uns über ein halbes Jahr bis zum Release half, Content- Austausch oder Ergänzung zu terminieren. So baute sich die Webseite vor und nach dem finalen Launch am 1. Mai 2015 mit jedem Single-Relase und jeder Video-Veröffentlichung immer wieder neu zusammen. 

Die Straßen sind voll mit Menschen. Zumindest in Kreuzberg und je näher wir der Oranienstraße kommen. Es ist der 1. Mai 2015. So Jung kommen wir nicht mehr zusammen. Wir stehen vor dem SO36 und warten darauf, dass irgendetwas passiert. Der Abend ist aussergewöhnlich mild. Unter freiem Himmel trinken wir warmes Bier. Nach dem Konzert gehen wir in einer lauwarmen Nacht zu Fuss nach Hause. Umwege erhöhen die Ortskenntnis. Alles ist ganz klar.

Die Tocos haben wir ’96 oder ’97 beim Abends ausgehen nicht gesehen. Aus Trotz haben wir uns Trainings-Jacken gekauft. Zehn Alben später sitzt man mit Herrn Müller in Berlin, nascht Schokolade und trinkt Limo. So ist das also, [nach der verloren Zeit](http://www.tocotronic.de/disko/19-nach-der-verlorenen-zeit).




thumbnail_rot-fuer-die-liebe-teaser.jpg

rot-fuer-die-liebe-teaser.jpg

(Archiv) Ein Projekt-Essay von Jan · 2015

Rot für die Liebe, Rot für die Revolution

thumbnail_GoodBye-2023.jpg

GoodBye-2023.jpg

Good-bye 2023 — Another Spotify Playlist

Peak-Time Selection 2023

thumbnail_GoodBye-2023_LT.jpg

GoodBye-2023_LT.jpg

Last & Lost Tracks 2023

thumbnail_LT2023.jpg

LT2023.jpg

Good-bye 2022 — Another Spotify Playlist

Last & Lost Tracks 2022

thumbnail_PT2023.jpg

PT2023.jpg

Peak-Time Selection 2022

thumbnail_AD_PT.jpg

AD_PT.jpg

Good-bye 2021 — Another Spotify Playlist

Peak-Time Selection

thumbnail_AD_LT.jpg

AD_LT.jpg

Good-bye 2021 — A Spotify Playlist

Last & Lost Tracks

## Beim Arbeiten

Don’t drink and drive oder so. Musik funktioniert für uns alle bei der Arbeit ganz hervorragend und ist im Atelier die Inspirationsquelle schlechthin. Jedes Genre geht, Hauptsache die Musikerkennungs-App Shazam findet es nicht. Das gesprochene Wort hingegen ist während der Arbeit schwierig für uns. Man hängt doch schon so oft und so lange am Telefon.

Deshalb bleiben wir auch gleich beim Thema Musik: [Cashmere Radio hat die sogenannten Sound Portraits im Programm](http://cashmereradio.com/shows/sound-portraits-radio). Elektronische Musik in all seinen Facetten, häufig sogar live aus Neukölln, ums Eck von unserem Berliner Büro. Das klingt doch gut.

## Bei Regen

[Vinyl Stories](http://soundcloud.com/vinylstories) mit Gereon Klug und Nilz Bokelberg. Das ist Experten-Halbwissen auf Top-Niveau und mit viel Verve vorgetragen – besser kann man diesen Podcast nicht beschreiben. Atelier Disko hat ohnehin viel mit Musik zu tun, nicht zuletzt im eigenen Kundenstamm, na, der Name sagt es ja selbst. Dennoch passiert die Musik vornehmlich neben der Arbeit. Kurzum: Es geht um die wirklich wichtigen Dinge im Leben: Warum ausgerechnet Prince Drum and Bass erfand oder warum Michael Jackson für zwei Wochen in einem Hamburger Vorort gelebt hat.

thumbnail_6169ff37-8c9b-46c0-a556-cac5a84696bb.jpg

6169ff37-8c9b-46c0-a556-cac5a84696bb.jpg

[Revisionist History](http://revisionisthistory.com/)
Müssen wir aus Gründen der Relevanz aus dem [Beitrag](https://page-online.de/kreation/lieblingspodcasts-von-designern-studio-mut/) von Studio Mut klauen, weil einfach sehr gut und von Christoph gern gehört. Doppelt hält ja bekanntlich besser.

[Sascha Lobo Podcast](http://spiegel.de/thema/sascha_lobo_podcast)
Debatten, Debatten, Debatten, mit Lobo. Wöchentlicher Podcast zu kontroversen Themen wie Social Media, Digitalisierung und Überwachung. Immer sonntags.

Rap, Rap, Rap. Und Politik. Darum geht es kurzum bei [Machiavelli](https://www1.wdr.de/mediathek/audio/cosmo/machiavelli/machiavelli-106.html), dem Podcast für alle, die Debatten lieben.

Und noch mehr Musik. Seit über 400 Folgen kann man beim [Resident Advisor Exchange](http://soundcloud.com/ra-exchange) interessante Konversationen zwischen Künstlern, Labelmachern und Promotern hören, die unsere gegenwärtige elektronische Musik prägen.

Es geht ja nicht ausschließlich um das Besserwerden beim Arbeiten – weiterbilden kann man sich in allen Bereichen. Eine gute Frage ist nämlich: Was hat Gestern mit Heute zu tun und wie hängen Vergangenheit und Zukunft eigentlich zusammen.

thumbnail_170106_AtelierDisko_TriX_1039.jpg

170106_AtelierDisko_TriX_1039.jpg

## Um (noch) besser zu werden

Es geht ja nicht ausschließlich um das Besserwerden beim Arbeiten – weiterbilden kann man sich in allen Bereichen. Zum Beispiel [bei einer ganzen Stunde History auf Deutschlandfunk Nova](http://deutschlandfunknova.de/eine-stunde-history). Eine gute Frage ist nämlich: Was hat Gestern mit Heute zu tun und wie hängen Vergangenheit und Zukunft eigentlich zusammen.

In dieser Folge von [Command Line Heros](http://redhat.com/en/command-line-heroes/season-2/ready-to-commit) denkt sich jemand ganz gut in jemanden rein, der zum allerersten Mal etwas zu einem Open Source Projekt beisteuern möchte und wirft dabei auch ein Licht darauf, wie die Maintainer so ticken.

Ganz frisch eingetrudelt: [Imagine Podcast](http://space10.io/imagine-podcast-episode-1-cities-for-people) – die neue Serie von Space10 aus Kopenhagen. Interessante Gespräche darüber, wie wir künftig lebenswerte Räume gestalten und unser urbanes Umfeld verbessern können. Erste Folge mit Planungs-Koryphäe Jan Gehl. **Hör-Tipp**!

Einer geht noch: Warum haben eigentlich so viele Leute Angst vor Clowns und woher stammen all die Kunstwerke, die in Hotels hängen? Findet man alles raus, beim [Decoder Ring](http://slate.com/articles/podcasts/decoder_ring.html).

Im Original erschienen bei Page Online am 06.11.2018 von [Sabine Danek](https://page-online.de/author/sabinedanek/)






Alle Fotos: © [René Zieger](https://renezieger.de/)

thumbnail_92b13977-7f4a-4e4f-a707-bc5c65005692.jpg

92b13977-7f4a-4e4f-a707-bc5c65005692.jpg

via Page Online

Die Lieblingspodcasts von Atelier Disko

thumbnail_hamburg-neolyd-playlist-teaser.jpg

hamburg-neolyd-playlist-teaser.jpg

via Neolyd

Vielleicht Hamburg (Playlist)

With this release we’re significantly extending the search capabilities, introducing initial Git support and refining the built-in frontend of [DSK](https://github.com/atelierdisko/dsk).

Search is now driven by the go native “[bleve](https://github.com/blevesearch/)” text indexing library, which enables us to perform advanced analysis on the searched text and use the best fitting matching algorithms. The result is better results, even if your query includes small typos or asks for a different form of the same word.

The – already present – filtering feature has been improved and will now use prefix and real fuzzy matching under the hood. The full-text search feature is really brand-new: it helps to find important design aspects even in very large design systems, where these naturally get lost more easily. We’ve intentionally chosen to implement search directly within DSK instead of relying on external services: We are sure that less external dependencies make deployments easier, especially in corporate environments.

With the introduction of full-text search, we’re dropping support for the keywords option in the meta.yaml files. The search indexer will “generate” keywords for you automatically.

The built-in frontend now shows more meta data for each design aspect: author information, download file sizes, as well as the exact and correct modified date, which can also be read from Git. We visually cleaned up the frontend in many places and are using CSS Grid to create the general layout.

The core team likes to take the chance to thank the contributors, who suggested solutions, tested pre-releases and improved or implemented new features. Thanks to [Zach Wegrzyniak](https://github.com/wegry/) for contributing to the search implementation and edge-testing the Git foundations, thanks to [Rodolfo Marraffa](https://github.com/rodolv1979/) for working on the built-in frontend with us.

Please see the [changelog](https://github.com/atelierdisko/dsk/blob/v1.1.0/CHANGELOG.md) for the complete list of changes. The latest release can be downloaded from the releases section of our [GitHub project page](https://github.com/atelierdisko/dsk).

thumbnail_dsk-1-1-3c810c.jpg

dsk-1-1-3c810c.jpg

Announcement von Christoph

Design System Kit 1.1 released

## What are Design Systems?

As digital products have grown bigger and more complex, so has the effort required to design them. Large teams managing multiple products simultaneously have brought to light organizational challenges that need to be addressed to be able to attain and maintain high quality product design.

Many teams have found one answer to these demands in Design Systems: repositories of organizational knowledge on design that go beyond mere styleguides by incorporating both very abstract design principles and very concrete elements in the form of strictly defined UI components. Design Systems enable teams to speak one shared language and access a set of common components that they can use across products. This allows for greater consistency but also helps making sure that rather than having different people spend time trying to solve the same problem over and over, solutions get shared and new problems can be addressed.

Well known examples of Design Systems that have been made public include IBM’s “Carbon Design System”, Atlassian’s design language and Shopify’s “Polaris”.

## Where do you Build a Design System?

When confronted with the task to create a Design System from scratch for a client we found ourselves pondering this very question. After interviewing several people in the organization about their needs and surveying the client’s existing products we had a rough idea about what the Design System needed to include and wanted to get started. We noticed two things: First, a Design System is a complex system of interconnected elements – we needed a way to express this structure accordingly in order to do it justice. Second, we needed to get started quickly to make sure everyone on the team was on the same page, creating a language for ourselves. The ability to roughly sketch out thoughts in one place and come back to refine later, while expressing very detailed ideas in other places was vital to us.

Unable to find a tool that satisfied these demands in a way suitable for the task, we created DSK as a workbench for collaboratively creating Design Systems.




We noticed two things: First, a Design System is a complex system of interconnected elements – we needed a way to express this structure accordingly in order to do it justice. Second, we needed to get started quickly to make sure everyone on the team was on the same page, creating a language for ourselves.

## DSK: Core Concepts
### Trees

It is important to find a balance between the complexity of a Design System and a structure that is understandable and manageable for humans. Especially in the beginning, when much is still in flux it is helpful to have a clearly defined, if overly complex structure, that can later be simplified for everyday use.

Most Design Systems are organized in a tree like structure, as this allows for high complexity via deep nesting and cross links, while maintaining great accessibility. DSK is built on this idea.

## Diverse Forms of Expression

A Design System is home to a diverse set of contents – this is even more true during the phase of its initial creation: Components are made up of written descriptions and tables, notes, screenshots of what they looked like before, Sketch files of what they might look like soon, JavaScript prototypes of how they might work, React components of how they could be implemented and so on. Maybe throw in a color library and some font files? DSK allows for any kind of content to be added to the Design System.

## Direct Manipulation

To ensure a high velocity of change and the ability to quickly react to new developments, another core concept of DSK is direct manipulation: Changing content, moving components around and renaming parts of the tree have to happen instantly.

## The Design Definition Tree

thumbnail_dsk-1-0-aacc91dc-1af0-4aa5-b730-8875ed8799a7.jpg

dsk-1-0-aacc91dc-1af0-4aa5-b730-8875ed8799a7.jpg

The solution to these three requirements lies closer than one might figure: We found them solved in the file system. The file system therefore became the basis for DSK – it is were the “design definition tree” is kept and manipulated. This tree can be nested as you see fit, each folder can contain more folders and any number of files. In the end, each component is represented by one folder.

## Getting it out There

DSK takes this tree and represents it as a navigable and searchable webpage. It pulls meta-information from a special file that contains information on the author of the component, its version and most importantly keywords that can be used to filter the Design System. Any Markdown files contained in a folder are represented directly on the page, while any other filetypes are displayed as download links. Changes to the file system are immediately mirrored in DSK.

When run locally, the DSK executable looks for the design definitions tree in the folder that it is located in. Starting DSK is as easy as double clicking the file to run it and opening the browser.

thumbnail_dsk-1-0-a0810fbe-ee30-4f1e-b551-9ce936b0ab10.jpg

dsk-1-0-a0810fbe-ee30-4f1e-b551-9ce936b0ab10.jpg

## Deployment via Dropbox

In order to get started immediately, we used an unusual place to host our Design System during the first weeks of development: The design definition tree was placed in a Dropbox folder – making sure everybody was always using the same version. Each team member ran DSK locally, while using a shared folder to stay in sync.

This also meant we could deploy new versions of DSK immediately and without anyone actively updating, simply be replacing the executable in Dropbox. This proved to be a highly advantageous mode of work, allowing us to move blazingly fast and add new features as we noticed the need for them.

## Version Control via Git

Another way of using DSK that is enabled by using the file system as a base is taking advantage of Git for version control. Once our Design System had stabilized and the basic structure had been carved out, we changed to a more formal way of collaborating on it by moving it to a Git repository. Using commits and pull request we started versioning the Design System and provided pre-release version of it to some people in the organization. These first testers still ran DSK locally, but were using it purely to navigate the Design System rather than edit it.

## DSK as an API

When we started building DSK we were looking for a tool to help us create the Design System, to provide us with a place to express our ideas. It was not meant to be the final place for the Design System to be used by the whole organization. But when working with our first testers we noticed that so much was already working great that building a completely new way to present the Design System would be foolish. Instead we created a hosted version of DSK and started using it as an API to provide us with the design definitions tree. We then built a custom, styled front-end for the client, presenting the Design System in a branded way with custom-fit components. This hosted version is accessibly by the client anytime and can be used by anyone in the organization.

## General Availability

DSK is open source software and available under the permissive BSD License which allows you to download, use and modify the software freely.

With today’s release we want to emphasize the production readiness of DSK. The quickstart guide over on our project page on GitHub walks you through the process of setting up DSK in four simple steps.

We’d like to take this special chance and thank all contributors who have been involved in architecting, designing, building, testing, proof reading, peer reviewing and refining the Design System Kit for this release. At Atelier Disko we design and build great software together.

## Visit the Design System Kit Project Page

In case you find a bug, we’re glad to hear about it in our issue tracker. If you’d like to contribute to the future development of DSK as a designer or developer or have questions, we’ll be answering your email under mariuswilms@mailbox.org and christoph@atelierdisko.de.

Irgendwas findet man ja immer …