## 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

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 

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

dpa.com

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

Fotografie: © Deutsches Elektronen-Synchrotron DESY 

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

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

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

thumbnail_ura_001.jpeg

ura_001.jpeg

Building on long-standing collaboration between German and Chinese research institutions, URA follows a systemic and inter-disciplinary research and development approach.

2019 startete das ambitionierte Projekt mehrerer deutscher und chinesischer Universitäten, u.a. mit der TU Berlin und Universität Shanghai.

Eine bilinguale Website, sammelt nun fortan Erkenntnisse und Fortschritte des Projektes und bündelt sie an einem Ort. Über ein modernes Content-Management-System können Neuigkeiten und Forschungsergebnisse stets aktualisiert werden – auf Englisch und Chinesisch. 

thumbnail_ura_0022.jpeg

ura_0022.jpeg

thumbnail_ura_poster_001.png

ura_poster_001.png

Technische Universität Berlin

TU Berlin Fakultät Architektur

thumbnail_ura_hero.png

ura_hero.png

Corporate Design & Website Development

Urban-Rural Assembly (URA)

urbanruralassembly.com

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. 

thumbnail_fm_ctb-001.png

fm_ctb-001.png

thumbnail_fmctb_002.jpeg

fmctb_002.jpeg

fm_slider_001.jpeg

fm_slider_004.jpeg

fm_slider_003.jpeg

fm_slider_002.jpeg

fm_slider_005.jpeg

thumbnail_fielmann_ctb_01.jpeg

fielmann_ctb_01.jpeg

Konzeption, Editorial Design & Drucküberwachung

Fielmann Coffee Table Book

Divimove, Bertelsmann Stiftung

stopptkinderarmut.org

thumbnail_ska_003.png

ska_003.png

Website

Initiative Stoppt Kinderarmut

thumbnail_polycarp_records.jpeg

polycarp_records.jpeg

thumbnail_polycarp_hero.jpeg

polycarp_hero.jpeg

Polycarp Records

polycarprecords.com

thumbnail_bonnhero.jpeg

bonnhero.jpeg

Art Direction

Bereits in den Jahren 2014 und 2015 lief das Ausstelllungsprojekt Manufacturing Race an verschiedenen Orten und beleuchtete – mit besonderen Fokus auf die Rolle der Wissenschaft – durchaus erfolgreich die bisher kaum aufgearbeitete Kolonialgeschichte Deutschlands.

Die deutsche Kolonialzeit war kurz, aber leider sehr intensiv

Auch wir finden (das wurde uns schnell klar), dass dieses Thema sicherlich mehr Aufmerksamkeit in der Öffentlichkeit verdient hat.

Wir wollten die Reinszenierung nutzen eben diesen Prozess zu unterstützen, indem wir die nun digitalen Mittel nutzen die Materie greifbarer zu machen. Wir wollten die Idee der „Digitalen Ausstellung“ herausfordern und eine passende Darstellung des Themas finden.

Die Ausstellung gliedert sich in zwei Hauptkapitel – „Manufacturing Race“ sowie „Contemporary Memories“ – wobei beide mit weiteren Unterkapiteln versehen sind. Wo beim ersten Kapitel Texte und damit das Editoriale im Vordergrund stehen sollte, so ist das zweite Kapitel wesentlich multimedialer angelegt. Dort werden seitens der AutorInnen Audio-Snippets (via Soundcloud) und Videomaterialen (via Vimeo) eingebunden.

Da Kapitel und Inhalte aufeinander aufbauen, bestand seitens des Teams der Wunsch nach einer möglichst linearen Navigation. Auf den ersten Blick scheint dieser Wunsch im Widerspruch zum Konzept des Webs an sich zu stehen denn: Das Web favorisiert ganz klar Nonlinearität und verknüpft mittels Hyperlinks Inhalte assoziativ.

Unsere Lösung verbindet beide Ansätze: Die Kapitel sind visuell klar voneinander getrennt und entsprechen jeweils einer Seite (liegen sich gegenüber). Nach dem Einstieg in ein Kapitel kann frei in den Unterkapiteln navigiert werden. Ein Wechseln zum jeweils anderen Kapitel ist durch einen bewussten „Ausstieg“ und den Weg über die Startseite möglich.

Bereits im Intro der Startseite, machen wir durch die Übersetzung des (ursprünglich gedruckten) Plakats in den dreidimensionalen Raum, sowie der Animation klar, dass die BesucherIn keine reine Reproduktion der (analogen) Ausstellung nur mit anderen Mitteln erwartet. Diese Ausstellung wird die neuen (digitalen) Mittel nutzen um eine Vertiefung der Inhalte zu erreichen.

Freie Universität Berlin

www.fu-berlin.de

thumbnail_manufacturing.jpeg

manufacturing.jpeg

Webdesign & Development

Manufacturing Race

manufacturingrace.org

Ki Records

Sorry, Website ist offline

thumbnail_ki.jpeg

ki.jpeg

Christian Löffler

christian-loeffler.net

thumbnail_the-veil-poster-mockup.jpeg

the-veil-poster-mockup.jpeg

thumbnail_the-veil-card-mockup.jpeg

the-veil-card-mockup.jpeg

thumbnail_xweiss_002.jpeg

xweiss_002.jpeg

thumbnail_xweiss003.jpeg

xweiss003.jpeg

kruegerxweiß

www.xweiss.info

thumbnail_db9994.jpeg

db9994.jpeg

Print- & Editorial Design

kruegerxweiss

Tocotronic

tocotronic.de

thumbnail_toco_unendlichkeit.jpeg

toco_unendlichkeit.jpeg

Tocotronic (Unendlichkeit)

Jakob Sinn

jakobsinn.com

thumbnail_sinn.jpeg

sinn.jpeg

Bevor es Atelier Disko gab, gingen Rico und ich ordentlichen Berufen in sogenannten Kreativbüros nach. Damit meine ich natürlich nicht, dass unser jetziger Beruf kein ordentlicher sei – im Gegenteil. Schließlich sind wir mittlerweile unsere eigenen Chefs. Man hatte einen Job in Festanstellung, also genau das, was sich Mütter oder Väter gerne für ihre Kinder wünschen, wenn sie schon nicht die berufliche Laufbahn des Mediziners oder Juristen einschlagen wollen. Beklagen können sich unsere Eltern trotzdem nicht – immerhin ein akademisch sinnvolles Studium. An der Kunsthochschule. Spätestens wenn dieses dann vorbei ist, braucht man ziemlich dringend zwei Dinge: Besagten Job und eine Wohnung. Den Job im Idealfall als Designer. Hat man schließlich die letzen Jahre studiert, macht total Sinn. Die Wohnung, für meinen Teil gesprochen am liebsten in Hamburg. Hamburg, Werbe-City. Werbung ist nicht so meins, denn auch unser Studium an der Hochschule, war meiner Meinung nach auch nur indirekt dafür gemacht. Es sei denn, man legte es darauf an und veranstaltete sein 6-monatiges Praktikum bei den Jungen und Matten dieser Welt. Nicht mit mir.

Design & Print

Cleptomanicx

Fielmann Design System

Kéré Architecture

dpa ID

DESY ITT Website

CGIbyOTTO

Labo M

Urban-Rural Assembly (URA)

Chronik

2021

2020

2019

2018

2017

2016

2015