Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic Design a gyakorlatban

354 views

Published on

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]

Published in: Technology
  • Be the first to comment

Atomic Design a gyakorlatban

  1. 1. ATOMIC DESIGN A GYAKORLATBAN
  2. 2. Lukács Gábor #UX Ferenczi Gábor #UI #BRAND Kóczé Péter #DEV
  3. 3. Atomic Design
  4. 4. RSM Hungary #redesign Alföldi #create dotindotlab° #validate
  5. 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. 6. TERVEZÉSI LÉPÉSEK
  7. 7. Content vs Element inventory
  8. 8. Skiccek
  9. 9. @Ryan Singer Felhasználói útvonalak
  10. 10. Prototípus - Pattern library
  11. 11. Content wireframe
  12. 12. Kiemelt modulok
  13. 13. ESZKÖZÖK
  14. 14. UI DESIGN ASPEKTUS
  15. 15. "We’re not designing pages, we’re designing systems of components.” ― Stephen Hay
  16. 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. 17. Ügyfél →← Designer konfliktus feloldása moodboards & prototypes
  18. 18. DESIGN TOOLS Photoshop, Illustrator, Indesign, Sketch. Tudjátok melyik a legjobb? Mindegyiketpróbáltuk. Mindegyikjóésegyiksemigazán.
  19. 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. 20. FRONT-END WORKFLOW
  21. 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. 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. 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. 24. PUG (JADE) • Mixinek • Származtatás tetszőleges mélységben • CMS és Style guide sablonok közös kódbázison
  25. 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. 26. Build tool működése
  27. 27. KÖSZÖNJÜK° KÉRDÉSEK? dotindot.hu

×