SlideShare ist ein Scribd-Unternehmen logo
ATOMIC DESIGN
DIE EINHEIT VON FRONTEND
UND DESIGN IM RWD-ZEITALTER
PATRICK LOBACHER | +PLUSWERK AG | 27.10.2015 | WEBTECH CONFERENCE MÜNCHEN
2
Patrick Lobacher

Vorstandvorsitzender

+Pluswerk AG 





Consultant

Trainer

(Agile) Coach

Autor
Fullservice Agentur für digitale Kommunikation



12 Niederlassungen in DACH, Polen & Kapstadt
130+ Mitarbeiter
999+ Projekte in den letzten 20 Jahren
3
Consulting



Strategieberatung

Agile Coaching

Online Marketing

Projektmanagement

Innovationsberatung
Kreation



Markenentwicklung

Konzeption

Design / CI

UX / Usabilty

Text / Redaktion
Technik



Websites

Portale

E-Commerce

Systementwicklung

Operations
Fullservice Agentur für digitale Kommunikation
4
DESIGN IN AGILEN
ZEITEN
Warum ist heute plötzlich alles anders?
5
DIE GUTEN ALTEN ZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
1 -24 Monate
6
THE GOOD OLD DAYS…
7
8
WHATS WRONG WITH THIS?
9
WHATS WRONG WITH THIS?
10 http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
24.093 Android Geräte (2015) / 18.796 (2014) / 11.868 (2013)
11 http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
12 http://atomicdesign.bradfrost.com/chapter-1/
WHATS WRONG WITH THIS?
13 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
WHATS WRONG WITH THIS?
14
RWDResponsive Web Design
15 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
Logo Logo Logo
16 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
Logo
Logo
17
18
FrontendPlanning / Contract
RWD
Proto-
typing
Content

Strategy
Device

Testing
StyleTile

Atomic DesignContent

Testing
Create

Content
Content

Wireframe
Linear

Design
JETZT: RWD-PROZESS
19
ATOMIC DESIGN
Warum ist heute plötzlich alles anders?
20
“We’re not designing pages,
we’re designing systems of
components.”
Steven Hay
21
22
23
24
FRAMEWORKS?
• Vorteile liegen auf der Hand
• Rapid Prototyping

• Viele Beispiele / Best Practices

• Hohe Browserkompatibilität

• Stetige Weiterentwicklung durch Vendor
• Aber
• Festlegung auf Konventionen, Benennung & Struktur

• „one-size-fits-all“ / individuell

• Viel zu viel nicht benötigter Code

• schlecht skalierbar
25
PATTERNS - NICHT NEU
http://patternlab.io/resources.html
26
“We’re not designing pages,
we’re designing systems of
components.”
Steven Hay
27 http://joshduck.com/periodic-table.html
28 http://bradfrost.com/blog/post/atomic-web-design/
ATOMIC DESIGN
29 http://bradfrost.com/blog/post/atomic-web-design/
ATOME
• HTML-Tags
• Farben
• Schriften
• Animationen o.ä.
30 http://bradfrost.com/blog/post/atomic-web-design/
MOLEKÜLE
• Kombinierte Atome
• Backbone des
Design Systems
• Zweckmässige
Einheiten
31 http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN
• Konkretisierung
(Interface)
• Organismen
bestehen aus
ähnlichen und/oder
verschiedenen
Molekül-Typen
32 http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES
• Weitere
Konkretisierung
• Kontext für
Moleküle &
Organismen
• Layout in Action
33 http://bradfrost.com/blog/post/atomic-web-design/
SEITEN
• Spezifische
Instanzen der
Templates
• Platzhalter-Content
wird iterativ durch
richtigen ersetzt
34 http://atomicdesign.bradfrost.com/chapter-2/
TEMPLATES & SEITEN
35 http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN
36
PATTERNLAB
Let’s get started
37
http://patternlab.io
38 http://patternlab.io
http://patternlab.io
39 https://github.com/pattern-lab/patternlab-php
40 https://github.com/pattern-lab/patternlab-php
41 https://github.com/pattern-lab/patternlab-php
42 http://www.netcraft.com/active-sites/
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON)

CSS (Plain & SCSS)

Schriften

Bilder
JavaScript
43
php core/builder.php -wr
WATCHER
source/_patterns

source/_data
44
MUSTACHE
http://mustache.github.io/mustache.5.html
45
BEISPIEL
mkdir source/_patterns/01-molecules/08-textbild
Molekül „Text mit Bild“, welches aus den drei Atomen
„Quadratisches Bild“, „Titel“ und „Absatz“ besteht
46
BEISPIEL
cd source/_patterns/01-molecules/08-textbild

touch 00-text-mit-bild.mustache
<h1>Text mit Bild</h1>
<div class="block block-thumb">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{{> atoms-square }}
</div>
<div class="b-text">
<h2 class="b-title">{{ title }}</h2>
{{> atoms-paragraph }}
</div>
</a>
</div>

47
REAL LIFE DEMO
Pattern Lab im Einsatz
48
REAL LIFE DEMO
http://styleguide.typo3.org/?p=all
http://styleguide.europeana.eu
http://demo.patternlab.io/?p=all
49
QUELLEN
Zum Thema Atomic Design
50
REAL LIFE DEMO
http://atomicdesign.bradfrost.com
51
QUELLEN
http://atomicdesign.bradfrost.com
http://de.slideshare.net/bradfrostweb/atomic-design
52
QUELLEN
http://atomicdesign.bradfrost.com
https://vimeo.com/67476280
53
DAS BESTE ZUM
SCHLUSS
Die ultimative Top-5 Liste
54
#1
CONTENT FIRST
55
#2
MOBILE
SECOND
56
#3
KEINE
PSD!
57
#4
KEINE
LAYOUTS!!
58
#5
ATOMIC
DESIGN
59
VIELEN DANK!
www.pluswerk.ag

@patricklobacher
60
KONTAKT
Patrick Lobacher

Vorstandsvorsitzender



patrick.lobacher@pluswerk.ag
+49 89 130 145 20 
www.pluswerk.ag
+Pluswerk AG

Wilhelm-Hale-Str. 53

80639 München

Germany
https://www.facebook.com/pluswerk
https://twitter.com/pluswerkag
https://twitter.com/patricklobacher
https://www.linkedin.com/company/-pluswerk-ag
https://plus.google.com/113397823770862988928

Weitere ähnliche Inhalte

Was ist angesagt?

Visualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADFVisualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADF
Ulrich Gerkmann-Bartels
 
Cloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, DemoCloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, Demo
enpit GmbH & Co. KG
 
Its all about the domain honey
Its all about the domain honeyIts all about the domain honey
Its all about the domain honey
Carola Lilienthal
 
DevOps Meetup Freiburg - DevOps in Practice
DevOps Meetup Freiburg - DevOps in PracticeDevOps Meetup Freiburg - DevOps in Practice
DevOps Meetup Freiburg - DevOps in Practice
Haufe-Lexware GmbH & Co KG
 
SAP Ednable Now bei SEMIKRON
SAP Ednable Now bei SEMIKRONSAP Ednable Now bei SEMIKRON
SAP Ednable Now bei SEMIKRON
Thomas Jenewein
 
Interaktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit CollaborationInteraktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit Collaboration
Stefan Hilpp
 
TYPO3 Neos - Next Generation CMS (IPC 2014)
TYPO3 Neos - Next Generation CMS (IPC 2014)TYPO3 Neos - Next Generation CMS (IPC 2014)
TYPO3 Neos - Next Generation CMS (IPC 2014)
die.agilen GmbH
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
OPITZ CONSULTING Deutschland
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
Belsoft
 
Collaboration day 2016 - Connections - Apps
Collaboration day 2016 - Connections - AppsCollaboration day 2016 - Connections - Apps
Collaboration day 2016 - Connections - Apps
Belsoft
 
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPagesCollaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Belsoft
 
Watson Services und Cognitive Computing
Watson Services und Cognitive ComputingWatson Services und Cognitive Computing
Watson Services und Cognitive Computing
Belsoft
 

Was ist angesagt? (12)

Visualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADFVisualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADF
 
Cloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, DemoCloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, Demo
 
Its all about the domain honey
Its all about the domain honeyIts all about the domain honey
Its all about the domain honey
 
DevOps Meetup Freiburg - DevOps in Practice
DevOps Meetup Freiburg - DevOps in PracticeDevOps Meetup Freiburg - DevOps in Practice
DevOps Meetup Freiburg - DevOps in Practice
 
SAP Ednable Now bei SEMIKRON
SAP Ednable Now bei SEMIKRONSAP Ednable Now bei SEMIKRON
SAP Ednable Now bei SEMIKRON
 
Interaktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit CollaborationInteraktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit Collaboration
 
TYPO3 Neos - Next Generation CMS (IPC 2014)
TYPO3 Neos - Next Generation CMS (IPC 2014)TYPO3 Neos - Next Generation CMS (IPC 2014)
TYPO3 Neos - Next Generation CMS (IPC 2014)
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
 
Collaboration day 2016 - Connections - Apps
Collaboration day 2016 - Connections - AppsCollaboration day 2016 - Connections - Apps
Collaboration day 2016 - Connections - Apps
 
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPagesCollaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
 
Watson Services und Cognitive Computing
Watson Services und Cognitive ComputingWatson Services und Cognitive Computing
Watson Services und Cognitive Computing
 

Andere mochten auch

Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
die.agilen GmbH
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
die.agilen GmbH
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
die.agilen GmbH
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
Alex Kellner
 
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Wolfram Nagel
 
TYPO3 Neos and Flow - Security 2.0
TYPO3 Neos and Flow - Security 2.0TYPO3 Neos and Flow - Security 2.0
TYPO3 Neos and Flow - Security 2.0
netlogix
 
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
die.agilen GmbH
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
Sylvia Egger
 
Responsive Accessibility in der Praxis
Responsive Accessibility in der PraxisResponsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
Sylvia Egger
 
SketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st RoundSketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st Round
Jens Hoffmann
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)
die.agilen GmbH
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
die.agilen GmbH
 

Andere mochten auch (20)

Atomic design
Atomic designAtomic design
Atomic design
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
 
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
 
TYPO3 Neos and Flow - Security 2.0
TYPO3 Neos and Flow - Security 2.0TYPO3 Neos and Flow - Security 2.0
TYPO3 Neos and Flow - Security 2.0
 
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
Keynote: Von Scrum und Tütensuppen - Warum Scrummaster die besseren Köche sin...
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
 
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
 
Responsive Accessibility in der Praxis
Responsive Accessibility in der PraxisResponsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
 
SketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st RoundSketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st Round
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
 

Ähnlich wie Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
Shift Left fängt ganz links an
Shift Left fängt ganz links anShift Left fängt ganz links an
Shift Left fängt ganz links an
BATbern
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
Christian Giesswein
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
Agile Austria Conference
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = Kommunikation
Matthias Bohlen
 
Wjax Vortrag 2018: Von DevOps bis DesignThinking
Wjax Vortrag 2018: Von DevOps bis DesignThinkingWjax Vortrag 2018: Von DevOps bis DesignThinking
Wjax Vortrag 2018: Von DevOps bis DesignThinking
Annegret Junker
 
Technische schulden abbauen
Technische schulden abbauenTechnische schulden abbauen
Technische schulden abbauen
Carola Lilienthal
 
Web Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the FutureWeb Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the Future
Alexander Loechel
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
die.agilen GmbH
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Lena Königsberger
 
Developer Week 2019: Architekturen für .NET Core-Anwendungen
Developer Week 2019: Architekturen für .NET Core-AnwendungenDeveloper Week 2019: Architekturen für .NET Core-Anwendungen
Developer Week 2019: Architekturen für .NET Core-Anwendungen
Robin Sedlaczek
 
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAVIntegrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Christian Krause
 
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
Praxistage
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
PROJECT CONSULT Unternehmensberatung Dr. Ulrich Kampffmeyer GmbH
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
SharePoint Lösungen für die Zukunft
SharePoint Lösungen für die ZukunftSharePoint Lösungen für die Zukunft
SharePoint Lösungen für die Zukunft
David Schneider
 

Ähnlich wie Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15 (20)

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Shift Left fängt ganz links an
Shift Left fängt ganz links anShift Left fängt ganz links an
Shift Left fängt ganz links an
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
AgileAustriaConference2023_Agile Software Development meets Business_FlorianB...
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = Kommunikation
 
Wjax Vortrag 2018: Von DevOps bis DesignThinking
Wjax Vortrag 2018: Von DevOps bis DesignThinkingWjax Vortrag 2018: Von DevOps bis DesignThinking
Wjax Vortrag 2018: Von DevOps bis DesignThinking
 
Technische schulden abbauen
Technische schulden abbauenTechnische schulden abbauen
Technische schulden abbauen
 
Web Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the FutureWeb Content-Management-Systeme the Past - the Present - the Future
Web Content-Management-Systeme the Past - the Present - the Future
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
 
Developer Week 2019: Architekturen für .NET Core-Anwendungen
Developer Week 2019: Architekturen für .NET Core-AnwendungenDeveloper Week 2019: Architekturen für .NET Core-Anwendungen
Developer Week 2019: Architekturen für .NET Core-Anwendungen
 
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAVIntegrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
 
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
Michael Jäger (Techsoft), Dipl.-Ing. Bernd Kuntze (Franz Haas Waffel- und Kek...
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
[DE] Trends für ECM 2010 | Dr. Ulrich Kampffmeyer | Keynote für COI | 2009
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
SharePoint Lösungen für die Zukunft
SharePoint Lösungen für die ZukunftSharePoint Lösungen für die Zukunft
SharePoint Lösungen für die Zukunft
 

Mehr von die.agilen GmbH

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
die.agilen GmbH
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
die.agilen GmbH
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
die.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
die.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
die.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
die.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
die.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
die.agilen GmbH
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinking
die.agilen GmbH
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015
die.agilen GmbH
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
die.agilen GmbH
 

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinking
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 

Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15