A Brad Frost féle Atomic Design tervezési és fejlesztési módszertant jó néhány projektben alkalmaztuk az elmúlt 1-2 évben. Ezeken keresztül mutattuk meg a 2016. decemberi UX Budapest + Frontend meetup közönségének, hogy miben egyszerűsíti az életünket, illetve milyen hibákba lehet belefutni. Nem csak kódolásról volt szó, így a UX/UI/frontend szentháromság együttműködésében szerzett tapasztalatainkat is megosztottuk. [Ferenczi Gábor, Lukács Gábor, Kóczé Péter]

1. ATOMIC DESIGN
A GYAKORLATBAN

2. Lukács Gábor
#UX
Ferenczi Gábor
#UI #BRAND
Kóczé Péter
#DEV

3. Atomic Design

4. RSM Hungary
#redesign
Alföldi
#create
dotindotlab°
#validate

5. • Koncepció / Konzisztens, Fejlődő, Gyors
• Ügyfél bevonódás / Workshopok
• Tervezés / A teljes kép
• Projekt méret / Örökíthetőség
• Ajánlat készítés / Excel erdő
• Zárás / Lazább határok
ELADHATÓSÁG

6. TERVEZÉSI
LÉPÉSEK

7. Content vs Element inventory

8. Skiccek

9. @Ryan Singer
Felhasználói útvonalak

10. Prototípus - Pattern library

11. Content wireframe

12. Kiemelt modulok

13. ESZKÖZÖK

14. UI DESIGN
ASPEKTUS

15. "We’re not designing pages,
we’re designing systems
of components.”
― Stephen Hay

16. ÜGYFÉL→←DESIGNER
Az ügyfél oldalak tervezését várja.
A designer rendszert tervez.
30 screen - összetett → egyszerű
71 molekula és organizmus
www.rsm.hu

17. Ügyfél →← Designer konfliktus feloldása
moodboards & prototypes

18. DESIGN TOOLS
Photoshop, Illustrator, Indesign, Sketch.
Tudjátok melyik a legjobb?
Mindegyiketpróbáltuk.
Mindegyikjóésegyiksemigazán.

19. UI design painpoints
• nevezési konvenció
lekövetés problémás
• komponens méretváltozás
nincs megoldás
• komponensek változói
lorem ipsum nem jó

20. FRONT-END
WORKFLOW

21. • Kód és időt spórolás?
• Workflow és komponensek öröklése
• Mindig oldalakból indultunk ki
• Atoms > Molecules > Organisms >
Templates > Pages
• Pug (Jade), Stylus preprocesszorok
• CMS sablonok + HTML styleguide
• Patternlab.io saját build tool

22. KÉRDÉSEK, KIHÍVÁSOK
• Sok egyedi < > kevés általános
• Elnevezések után-követése
• Nincsenek egyértelmű válaszok

23. STYLE GUIDE
• Tájékoztatás és kontroll
• Jól skálázhatónak bizonyult
• 21 atom
• 69 egyedi organizmus
• 48 különböző oldal
rsm-styleguide.dotin.hu

24. PUG (JADE)
• Mixinek
• Származtatás tetszőleges
mélységben
• CMS és Style guide
sablonok közös kódbázison

25. BUILD TOOL
• Node.js, Gulp task
• PUG > HTML + CMS templates (PHP)
• Stylus > minified CSS
• Javascript > minified JS
• Kézi és automata üzemmód
• Styleguide és CMS fordítás üzemmód
• Fordítási sebesség?
• CMS tag-ek elhelyezése?

26. Build tool működése

27. KÖSZÖNJÜK°
KÉRDÉSEK?
dotindot.hu