-
ATOMIC DESIGNDIE EINHEIT VON FRONTEND UND DESIGN IM
RWD-ZEITALTERPATRICK LOBACHER | +PLUSWERK AG | 22.06.2016 |
DEVELOPER WEEK
-
2
Patrick Lobacher Vorstandvorsitzender+Pluswerk AG
ConsultantTrainer(Agile) CoachAutor
Fullservice Agentur fr digitale Transformation 12
Niederlassungen in DACH, Polen & Kapstadt 130+ Mitarbeiter 999+
Projekte in den letzten 20 Jahren
-
3
Consulting
StrategieberatungAgile Coaching
Online MarketingProjektmanagementInnovationsberatung
Kreation
MarkenentwicklungKonzeption Design / CI
UX / Usabilty Text / Redaktion
Technik
Websites Portale
E-CommerceSystementwicklung
Operations
Fullservice Agentur fr digitale Transformation
-
4
DESIGN IN AGILEN ZEITEN
Warum ist heute pltzlich alles anders?
-
5
DIE GUTEN ALTEN ZEITEN
Alle Agenturen welche es in die Grundauswahl geschafft
haben,
werden dann in der nchsten Phasedazu aufgefordert einen
Designvorschlag zu erstellen.
-
6
DIE GUTEN ALTEN ZEITEN
Planung Wireframes Design Entwicklung Content
Qualitts-sicherung
1 -24 Monate
-
7
THE GOOD OLD DAYS
-
8
-
9
WHATS WRONG WITH THIS?
-
10
WHATS WRONG WITH THIS?
-
11
http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
24.093 Android Gerte (2015) / 18.796 (2014) / 11.868 (2013)
-
12
http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
-
13 http://atomicdesign.bradfrost.com/chapter-1/
WHATS WRONG WITH THIS?
-
14
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
WHATS WRONG WITH THIS?
-
15
RWDResponsive Web Design
-
16
BERGANGSZEITEN
Planung Wireframes Design Entwicklung Content
Qualitts-sicherung
Logo Logo Logo
-
17
BERGANGSZEITEN
Planung Wireframes Design Entwicklung Content
Qualitts-sicherung
Logo
Logo
-
18
-
19
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
JETZT: RWD-PROZESS
-
20
ATOMIC DESIGNWarum ist heute pltzlich alles anders?
-
21
Were not designing pages, were designing systems of
components. Steven Hay
-
22
-
23
-
24
-
25
FRAMEWORKS? Vorteile liegen auf der Hand
Rapid Prototyping
Viele Beispiele / Best Practices
Hohe Browserkompatibilitt
Stetige Weiterentwicklung durch Vendor
Aber Festlegung auf Konventionen, Benennung & Struktur
one-size-fits-all / individuell
Viel zu viel nicht bentigter Code
schlecht skalierbar
-
26
PATTERNS - NICHT NEU
http://patternlab.io/resources.html
-
27
One of the biggest advantages atomic design provides is the
ability to traverse between abstract and concrete. We can
simultaneously see our interfaces broken down to their atomic
elements and also see
how those elements combine together to form our final
experiences.
Brad Frost
-
28 http://joshduck.com/periodic-table.html
-
29 http://bradfrost.com/blog/post/atomic-web-design/
ATOMIC DESIGN
-
30 http://bradfrost.com/blog/post/atomic-web-design/
ATOME HTML-Tags Farben Schriften Animationen o..
-
31 http://bradfrost.com/blog/post/atomic-web-design/
MOLEKLE Kombinierte Atome Backbone des
Design Systems Zweckmssige
Einheiten
-
32 http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN Konkretisierung
(Interface) Organismen
bestehen aus hnlichen und/oder verschiedenen Molekl-Typen
-
33 http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES Weitere
Konkretisierung Kontext fr
Molekle & Organismen
Layout in Action
-
34 http://bradfrost.com/blog/post/atomic-web-design/
SEITEN Spezifische
Instanzen der Templates
Platzhalter-Content wird iterativ durch richtigen ersetzt
-
35 http://atomicdesign.bradfrost.com/chapter-2/
TEMPLATES & SEITEN
-
36 http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN
-
37
PATTERNLABLets get started
-
38
http://patternlab.io
-
39 http://patternlab.io
http://patternlab.io
-
40 https://github.com/pattern-lab/patternlab-php
-
41 https://github.com/pattern-lab/patternlab-php
-
42 https://github.com/pattern-lab/patternlab-php
-
43 http://www.netcraft.com/active-sites/
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON)
CSS (Plain & SCSS)
Schriften
Bilder
JavaScript
-
44
php core/builder.php -wr
WATCHER
source/_patterns source/_data
-
45
MUSTACHE
http
://m
usta
che.g
ithub
.io/m
usta
che.5
.htm
l
-
46
BEISPIEL
mkdir source/_patterns/01-molecules/08-textbild
Molekl Text mit Bild, welches aus den drei Atomen Quadratisches
Bild, Titel und Absatz besteht
-
47
BEISPIELcd source/_patterns/01-molecules/08-textbildtouch
00-text-mit-bild.mustache
Text mit Bild {{> atoms-square }} {{ title }} {{>
atoms-paragraph }}
-
48
REAL LIFE DEMOPattern Lab im Einsatz
-
49
REAL LIFE DEMOhttp://styleguide.typo3.org/?p=all
http://styleguide.typo3.org/?p=all
-
50
REAL LIFE DEMOhttp://styleguide.europeana.eu
http://styleguide.europeana.eu
-
51
REAL LIFE DEMOhttp://patterns.frostfinery.com
http://patterns.frostfinery.com
-
52
REAL LIFE DEMOhttp://patterns.frostfinery.com
http://patterns.frostfinery.com
-
53
REAL LIFE DEMOsevenheadsdesign.com/patterns/
http://sevenheadsdesign.com/patterns/
-
54
REAL LIFE DEMO
-
55
REAL LIFE DEMO
-
56
REAL LIFE DEMO
-
57
QUELLENZum Thema Atomic Design
-
58
REAL LIFE DEMO
http://atomicdesign.bradfrost.com
-
59
QUELLEN
http://atomicdesign.bradfrost.com
http://de.slideshare.net/bradfrostweb/atomic-design
-
60
QUELLEN
http://atomicdesign.bradfrost.com
https://vimeo.com/67476280
-
61
DAS BESTE ZUM SCHLUSS
Die ultimative Top-5 Liste
-
62
#1CONTENT FIRST
-
63
#2MOBILE SECOND
-
64
#3KEINE PSD!
-
65
#4KEINE
LAYOUTS!!
-
66
#5ATOMIC DESIGN
-
67
VIELEN [email protected]
-
68
KONTAKT
Patrick
[email protected]
+4989130 145 20
www.pluswerk.ag
+Pluswerk AGWilhelm-Hale-Str. 5380639 MnchenGermany
http://okr-beratung.dehttps://www.facebook.com/pluswerk
https://twitter.com/pluswerkag
https://twitter.com/patricklobacher
https://www.linkedin.com/company/-pluswerk-ag
https://plus.google.com/113397823770862988928
mailto:[email protected]?subject=http://www.creativestyle.dehttp://okr-beratung.dehttps://www.facebook.com/pluswerkhttps://twitter.com/pluswerkaghttps://www.linkedin.com/company/-pluswerk-aghttps://plus.google.com/113397823770862988928
-
69
PORTFOLIOFullservice Agentur fr digitale Transformation
Strategy Consulting Digital Technology Operations
Digitalisierung / Digitale Transformation
New Work / OKR (Digital) Leadership / Management 3.0
Agile / Lean
CRM / CMSE-Commerce
IoT
z.B. SEO / SEM / SMM / Innovation
Coaching / SparingPM / Beratung Digital Agentur z.B. Continuous
Integration
ServerRedaktion
Content
