ATOMIC DESIGN

A GYAKORLATBAN

Lukács Gábor #UX

Ferenczi Gábor #UI #BRAND

Kóczé Péter #DEV

Atomic Design

RSM Hungary #redesign

Alföldi #create

dotindotlab° #validate

• 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

TERVEZÉSI LÉPÉSEK

Content vs Element inventory

Skiccek

@Ryan Singer

Felhasználói útvonalak

Prototípus - Pattern library

Content wireframe

Kiemelt modulok

ESZKÖZÖK

UI DESIGN ASPEKTUS

"We’re not designing pages, we’re designing systems of components.”

― Stephen Hay

ÜGYFÉL→←DESIGNERAz ügyfél oldalak tervezését várja. A designer rendszert tervez.

30 screen - összetett → egyszerű 71 molekula és organizmus www.rsm.hu

Ügyfél →← Designer konfliktus feloldásamoodboards & prototypes

DESIGN TOOLSPhotoshop, Illustrator, Indesign, Sketch. Tudjátok melyik a legjobb?

Mindegyiket próbáltuk. Mindegyik jó és egyik sem igazán.

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ó

FRONT-END WORKFLOW

• 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

KÉRDÉSEK, KIHÍVÁSOK

• Sok egyedi < > kevés általános

• Elnevezések után-követése

• Nincsenek egyértelmű válaszok

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

PUG (JADE)

• Mixinek

• Származtatás tetszőleges

mélységben

• CMS és Style guide

sablonok közös kódbázison

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?

Build tool működése

KÖSZÖNJÜK° KÉRDÉSEK?

dotindot.hu