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

Hinter renommierten Projekten wie Deutschland3000, Terra Xplore oder HERstory, produziert für arte, FUNK oder die ARD — steckt ein Team aus Redakteur:innen, Produzent:innen und Kreativen, die gemeinsam im Kollektiv unsere Medienrezeption zu neuer Sinnhaftigkeit führen und mitgestalten. Atelier Disko konzipierte und entwickelte für Labo M einen von Grund auf neuen Internetauftritt.

Formate und Werte für eine neue Zeit: Guter Journalismus muss unabhängig sein und ist eine Frage der Einstellung, daher produzieren wir weder Imagefilme noch Branded Content.

thumbnail_labo-mockup-3-phones.jpg

labo-mockup-3-phones.jpg

labo-mockup-realistic_ipad.jpg

labo-mockup-mixed_devices.jpg

labo-mockup-ipad_screens.jpg

labom_cover.jpg

Labo M

thumbnail_labom_cover_2.jpg

labom_cover_2.jpg

Studio und Portfolio Website

Labo M 

Kéré Architecture’s portfolio spans a wide spectrum of projects from civic infrastructure to temporary installations, from concept to execution and across diverse geographies.

thumbnail_Top.png

Top.png

thumbnail_Group 225.png

Group 225.png

At the intersection of utopia and pragmatism we create contemporary architecture that feeds the imagination with an afro-futurist vision.

Kere_Works-Desktop3.png

Kere_Works-Desktop2 (1).png

Kere_Works-Desktop4.png

Kere_Works-Desktop.png

Across all continents and building types the Kéré Architecture expertise has been honed to arrive at an architectural practice that though flexible, distinguishing itself through signature design elements and approach to building.

thumbnail_Works-DesktopWithMobile.png

Works-DesktopWithMobile.png

Kéré Architecture

thumbnail_kere_hero.png

kere_hero.png

Studio und Portfolio Website für Kéré Architecture, Berlin / Burkina Faso

Kéré Architecture 

thumbnail_urbanista-mockup-3-phones.jpg

urbanista-mockup-3-phones.jpg

Wie gestalten man das Thema Stadtentwicklung digital? Unser Ansatz war es, einzelnen UI-Elemente zu schichten und übereinander zu legen — jedoch nicht wie bei der klassischen Topologie, sondern zweidimensional — mit farbigen Flächen, die sich responsiv nahezu unendlich auf dem Display ausbreiten können und mitwachsen.

urbanista-mockup-long_left.jpg

urbanista-mockup-long_right.jpg

thumbnail_urbanista-mockup-overview.jpg

urbanista-mockup-overview.jpg

urbanista

co-creating the future city

thumbnail_Isometrie Kopie.jpg

Isometrie Kopie.jpg

## Prozess

Das Design System entstand auf Basis existierender Produkte und Interfaces, die analysiert, systematisiert und gestalterisch überarbeitet wurden. Im Vorfeld führten wir zahlreiche Interviews und Workshops mit Mitarbeitern unterschiedlicher Abteilungen durch, um die Erwartungen an ein solches System klar zu erfassen und zu dokumentieren.

thumbnail_fm_001.png

fm_001.png

Mitunter können Design Systeme sehr schnell sehr komplex und unübersichtlich werden. Oft sind mehrere Designer parallel an der Gestaltung von Interfaces oder an der Entwicklung größerer Komponenten beteiligt – so auch beim erreichen der ersten kritischen Masse von UI Elementen oder der Content Generierung für übergeordnete Themen, die die Marke Fielmann betreffen.

Um mit den Teams schnell ins Machen zu kommen, entwickelten wir ein eigenständiges Tool, welches auf den Namen DSK (Design System Kit), hört und welches später im Verlauf des Projektes zur Educational Platform heranwuchs. Das Konzept dahinter gleicht einer Art Werkbank die dazu dient, Ideen oder Gedanken im Kollektiv grob anzureissen und zu dokumentieren, um diese später zu verfeinern.

Mehr Details über DSK sind in [diesem Journal-Eintrag ](https://atelierdisko.de/journal/announcing-dsk-10)oder der [DSK Website](https://rundsk.com/) zu finden.

thumbnail_fm_002_2.png

fm_002_2.png

thumbnail_FM_color_ep.png

FM_color_ep.png

## Die Vorteile von Design Systemen

Designer und Entwickler über verschiedene Produktteams hinweg können nun eine gemeinsame Sprache sprechen, Gestaltungs- und Entwicklungsprozesse wurden so beschleunigt. Die Marke wird auch in der Gestaltung der Anwendungen widergespiegelt, um Kunden einheitlich anzusprechen.

## Die Educational Platform

Das Herz des Design Systems ist die kuratierte „Educational Platform”: Hier dokumentieren Artikel die visuelle Sprache, den Aufbau von Anwendungen, sowie einzelne Komponenten. Durch Hinweise zur Gestaltung und Verwendungen einzelner Komponenten wird ein konsistentes Erscheinungsbild gegeben. Mit der Plattform haben interne und externe Designer und Entwickler stets Zugriff auf eine zentrale Ressource („single source of truth“), auf der alles gesammelt ist, was zur digitalen Produktentwicklung benötigt wird: Schriften, Icons, Farben, sowie eine Sketch- und eine React-Library mit fast 70 UI-Komponenten erleichtern den Einstieg.

thumbnail_fm_003.png

fm_003.png

Das Design System und die „Educational Platform“ werden auch langfristig betreut — Komponenten werden laufend verbessert und aktualisiert, neue Erfahrungswerte aus der Produktentwicklung fließen kontinuierlich in das Design System zurück.

thumbnail_fm_004.png

fm_004.png

Die Gestaltung der „Educational Platform“ dient als Vorbild für andere Anwendungen – sie folgt ihren eigenen Guidelines und reflektiert den aktualisierten Gestaltungsanspruch.

edu_2.png

pads_2.png

overview.png

Das Design System und die „Educational Platform“ werden auch langfristig betreut: Komponenten werden laufend verbessert und aktualisiert, neue Erfahrungswerte aus der Produktentwicklung fließen kontinuierlich in das Design System zurück.

thumbnail_fm_110.png

fm_110.png

thumbnail_fm_anwendung.jpeg

fm_anwendung.jpeg

## Expertise

- Analyse, Klassifizierung und Bestandsaufnahme sämtlicher Design-Elemente in bestehenden digitalen Produkten der Fielmann AG auf denen das Design System aufgebaut wurde.
- Beratung und Bereitstellung der richtigen Werkzeuge zur Dokumentation des Design System
- Aufbau und Instandhaltung einer Sketch Symbol Library
- Design von UI Elementen, Icons und Applikationen
- Screendesign und Entwicklung der Educational Platform
- Fortlaufenden Wartung, Weiterentwicklung und Versionierung des Design Systems
- Entwicklung einer Component Code Library in React

Fielmann AG

fielmann.de

thumbnail_455ba485-8323-4877-82b5-240717c46690.png

455ba485-8323-4877-82b5-240717c46690.png

Design System 

Fielmann Design System

fielmann.design

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 

thumbnail_ottocgi-5b067b6b-6e2b-4ddf-8605-c553473785cd.png

ottocgi-5b067b6b-6e2b-4ddf-8605-c553473785cd.png

Der CGI Produktions-Service von OTTO erstellt individuellen und fotorealistischen CGI-Content innerhalb kürzester Zeit. Ganz gleich ob es sich um cleane Studio-,  eindrucksvolle Ambiente Bilder, Video oder Augmented & Virtual Reality handelt. Der Vorteil liegt dabei klar auf der Hand: Hohe Flexibilität der Darstellung bei geringen Kosten. Hierzu werden sogenannte digitale Zwillinge der Möbel erstellt, die sich in Bezug auf Licht und Schatten an der realen Welt orientieren. CAD-Daten, technische Zeichnungen oder Fotos reichen für die Erstellung der Datengrundlage vollkommen aus. 

Atelier Disko hat es geschafft, unsere Erwartungen in Bezug auf Design und Funktionalität der Website zu übertreffen. Die Zusammenarbeit war stets sehr partnerschaftlich und hat allen Beteiligten viel Spaß gemacht.

thumbnail_ottocgi-a069a679-3ce9-4cca-b049-5c3c7f65ad50.png

ottocgi-a069a679-3ce9-4cca-b049-5c3c7f65ad50.png

thumbnail_ottocgi-a3a6de3d-3742-4cb4-a32d-aeeb11bc33b5.png

ottocgi-a3a6de3d-3742-4cb4-a32d-aeeb11bc33b5.png

Um Service und Angebot von CGIbyOTTO einfach und gut strukturier zu vermitteln, entwickelten wir eine interaktive Landingpage, die die Vorteile der Technologie und des Prozesses ausführlich erläutert und aufzeigt, welcher Detailgrad in der Content-Produktion möglich ist. Hierbei integrierten wir zur Veranschaulichung ein AR-Modul, welches sich direkt im Browser-Client aufrufen lässt und das virtuelle Möbelstück nach Hause ins eigene Wohnzimmer holt.

OTTO GmbH & Co. KG

thumbnail_ottocgi-942735e4-87ec-4484-96cf-163aaa248c12.png

ottocgi-942735e4-87ec-4484-96cf-163aaa248c12.png

Consulting, Design, Infrastructure, Front- & Backend Development

CGIbyOTTO

Als größte Nachrichtenagentur Deutschlands liefert die dpa täglich internationale Nachrichten an Rundfunk und Zeitung. Medienanstalten können über den „dpa-Marktplatz“, ein digitales Portal, auf ihren Bedarf zugeschnittene Dienste abonnieren. Redakteur/innen können über ein ausgeklügeltes Filtersystem somit genau die Nachrichten abrufen, die sie für ihre Zwecke benötigen.

Die dpa Deutsche Presse-Agentur GmbH ist die größte Nachrichtenagentur der Bundesrepublik Deutschland mit Sitz in Hamburg und der Zentralredaktion in Berlin.

thumbnail_dpa_icons.jpg

dpa_icons.jpg

Das digitale Angebot der dpa besteht aus mehreren Anwendungen. Atelier Disko entwickelte eine einheitliche und nach Bedarf erweiterbare Formen- und Farbsprache für die App-Icons.

Damit Drittunternehmen Dienste der dpa in ihre eigenen Produkte integrieren können, gestaltete, schrieben und entwickelten wir eine technische Dokumentation über die vorhandenen Schnittstellen mit Beispielprojekten. Für interne und externe Projekte wurde zeitgleich eine Design-Dokumentation über die Corporate Identity der dpa erstellt. Für die technische Umsetzung wurde das von uns intern entwickelte [DSK](https://rundsk.com/) (Design System Kit) verwendet, ein speziell für Designsysteme ausgerichtetes Informationsmanagement-Produkt, welches ebenfalls auf der Educational Platform des [Fielmann Design Systems](https://atelierdisko.de/projekte/fielmann-design-system)  zum Einsatz kommt. 

thumbnail_dpa_docs_2.jpg

dpa_docs_2.jpg

Um den digitalen Anwendungen der dpa den nötigen Raum zu geben und dem Projekt den richtigen Auftritt, gestaltete und entwickelte Atelier Disko zusätzlich die ausgelagerte Produkt-Landingpage. Sie bildet fortan die erste Adresse für einen unkomplizierten Einstieg.

Wir glauben, der Berdarf an den Kernprodukten unabhängiger Nachrichtenagenturen war nie größer als heute.

thumbnail_dpa_pads.jpg

dpa_pads.jpg

thumbnail_dpa_landingpage.png

dpa_landingpage.png

dpa Deutsche Presse Agentur

thumbnail_dpa_id_mockups_12.jpg

dpa_id_mockups_12.jpg

Design, technische Umsetzung & Dokumentation

dpa ID

partnerprogramm.dpa-id.de

thumbnail_itt.png

itt.png

Das gibt’s nicht nur im CERN – unter Hamburg-Bahrenfeld liegen die Teilchenbeschleuniger des Forschungszentrums DESY (Deutsches Elektronen-Synchrotron). Freie Kapazitäten der Forschungsanlagen stehen Wissenschaft und Wirtschaft zur Verfügung. Die Stabsstelle Innovation & Technologietransfer (ITT) von DESY betreut Industriekooperationen, identifiziert vielversprechende Erfindungen und unterstützt Ausgründungen aus dem Forschungsbetrieb.

Grundlagenforschung im Dienst der Gesellschaft ist heute weit mehr als Spitzenforschung allein.

thumbnail_desy_itt_001.jpeg

desy_itt_001.jpeg

Für das DESY ITT entwickelten wir ein modernes Erscheinungsbild mit wiederkehrenden identitätsstiftenden Elementen. Sie bilden digital und analog die Grundlage für eine übergeordnete Gestaltungssprache, die sich in der von Grund auf neu entwickelten Website und diversen Print-Materialien wiederfindet – alles aus einem Guss.

In enger Zusammenarbeit mit dem ITT-Kommunikationsteam entwickelten wir das inhaltliche Konzept der Website, erarbeiteten Wireframes und eine durchdachte Navigationsstruktur. Darauf aufbauend wurde eine visuelle Form gefunden, die mit modernen Frontend-Technologien wie CSS Grid responsiv umgesetzt wurde. Ein besonderes Augenmerk lag auf der Accessibility und der Unterstützung von älteren Browsern.

Bei der DESY suchen die Wissenschaftler nach den kleinsten Materiebausteinen der Welt, entwickeln innovative Hightech-Werkstoffe und fahnden nach neuen Wirkmechanismen für künftige Medikamente.

thumbnail_keyvisuals.png

keyvisuals.png

thumbnail_desy_mockup_001.jpeg

desy_mockup_001.jpeg

Mit durchdachten Fragestellungen und zielführenden Ansatzpunkten des Teams ist die Zusammenarbeit mit Atelier Disko für unsere Fragestellungen reibungslos und punktgenau.

thumbnail_desy_itt_003.jpeg

desy_itt_003.jpeg

DESY Innovation & Technologie Transfer

innovation.desy.de

thumbnail_5a3591b8-577f-4028-8eb6-8daf520562f5.png

5a3591b8-577f-4028-8eb6-8daf520562f5.png

Website Design & Frontend-Entwicklung

DESY ITT Website

Der (orange) Pantone Farbton auf dem Cover wirkt nicht nur sommerlich, sondern ist durch den weiterlaufenden Farbschnitt an den Heftseiten besonders auffällig — unsere Stammdruckerei meint, haben sie in all den Jahren auch noch nicht gesehen, geschweige denn gedruckt. 

Deutsche Presse-Agentur

Labo M

Kéré Architecture

urbanista

Fielmann Design System

Chronik

2022

2021

2020

2019

2018

2017

2016

2015