SlideShare a Scribd company logo

A design systemről – UI szemmel

T
Tom Kato

Az előadás videója: http://bit.ly/tomkato-presentation-02 Az előadás alapján készült cikk: https://blog.fps.hu/a-design-systemrol-ui-szemmel/ Előadásom nagyvonalúan a design systemről fog szólni, ám munka és érdeklődési körömből adódóan inkább a UI oldalát igyekszem majd bemutatni, és mint a prezentáció végére látható lesz, ez csupán egy szelete az egész rendszernek.

1 of 27
Download to read offline
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y T S E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
A D E S I G N S Y S T E M R Ő L
Kató Tamás
A design systemről – UI szemmel
A design systemről – UI szemmel
A design systemről – UI szemmel
A design systemről – UI szemmel
A design systemről – UI szemmel

Recommended

Meddig kell még designer? | Vajon a design systemek felváltják majd a designe...
Meddig kell még designer? | Vajon a design systemek felváltják majd a designe...Meddig kell még designer? | Vajon a design systemek felváltják majd a designe...
Meddig kell még designer? | Vajon a design systemek felváltják majd a designe...Tom Kato
 
fps – Édes hármas, avagy az ügyfél is csapattag
fps – Édes hármas, avagy az ügyfél is csapattagfps – Édes hármas, avagy az ügyfél is csapattag
fps – Édes hármas, avagy az ügyfél is csapattagTom Kato
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 

More Related Content

Featured

Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...Palo Alto Software
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free VacationWeekdone.com
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceEmpowered Presentations
 
How to Map Your Future
How to Map Your FutureHow to Map Your Future
How to Map Your FutureSlideShop.com
 
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...AccuraCast
 
Read with Pride | LGBTQ+ Reads
Read with Pride | LGBTQ+ ReadsRead with Pride | LGBTQ+ Reads
Read with Pride | LGBTQ+ ReadsKayla Martin-Gant
 

Featured (20)

Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from Prince
 
How to Map Your Future
How to Map Your FutureHow to Map Your Future
How to Map Your Future
 
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
 
Read with Pride | LGBTQ+ Reads
Read with Pride | LGBTQ+ ReadsRead with Pride | LGBTQ+ Reads
Read with Pride | LGBTQ+ Reads
 

A design systemről – UI szemmel

  • 1. A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y T S E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L A D E S I G N S Y S T E M R Ő L Kató Tamás
  • 7. - Hogyan lehet egy szerteágazó terméket konzisztensen megtervezni? - Hogyan tudjuk az iterációkat értelmezhető határokon belül tartani, mind idő, mind erőforrás tekintetében? - Hogyan lehet a megnövekedett tervezői csapatokat egy olyan mederbe terelni, ahol a termék is jól érzi magát, de nem vágjuk el a torkát a kreativitásnak sem?
  • 9. ‒ fontos a hasonló megjelenés és a hasonló viselkedés ‒ ismétlődő UI komponenseket kell használni ‒ ismétlődő, alacsony funkcionalitással bíró UI elemekkel dolgozol ‒ white label, vagy template maga a termék ‒ folyamatosan, iterálva módosítani kell a felületen ‒ különböző “tech stack”-ekkel dolgozol OK, de kell ez nekem?
  • 10. ‒ egy központi helyen kezeled a UI elemeket ‒ időt és ezáltal pénzt takarítasz meg ‒ nagyban növeli az egységességet ‒ csökkenti a karbantartási időt Mik az előnyei? Miért lesz jó?
  • 11. ‒ költséges ‒ megfelelő csapat kialakítása ‒ a termék megismerése Ám!
  • 12. ‒ Ismerd fel! ‒ Határozd meg! ‒ Tervezd meg! ‒ Készítsd el!
  • 14. ‒ Színek ‒ Tipográfia ‒ Méretezések, eltartások ‒ Ikonok ‒ Vizuális formák ‒ Mozgás ‒ Hang A vizuális nyelv megszületése
  • 15. ‒ név ‒ egyszerű változók ‒ például a lekerekítés nagysága, a vonalvastagság, annak stílusa stb. Design token
  • 17. ‒ korábbi ismeretek használata ‒ hierarchia ‒ előre definiált stílusok
  • 19. ‒ skálázz! ‒ reszponzív ‒ segédvonalak ‒ fent-lent ‒ stílusok, stílusok mindenütt!
  • 21. ‒ Keresd meg a termékedhez leginkább megfelelőt! ‒ Legyél következetes! ‒ A kivételeket elszigetelt jelenségként kezeld!
  • 22. ‒ forradalom és egységesítési hullám ‒ SVG dominancia ‒ egységes méretezések ‒ elnevezések ‒ komponensek

Editor's Notes

  1. Előadásom nagyvonalúan a design systemről fog szólni, ám munka és érdeklődési körömből adódóan inkább a UI oldalát igyekszem majd bemutatni, és mint a prezentáció végére látható lesz, ez csupán egy szelete az egész rendszernek.
  2. A képen látható egy elemhalmaz. Távolról megvizsgálva ezekről eldönthető, hogy hasonló méretőek, hasonló funkciót töltenek be és több mint valószínüsíthető, hogy hasonló is a működésük. Egyébként ezek csavarok és anyák. Ezek képeznek egy halmazt. Ha csak ezeket az elemeket ismerem, akkor még nagyon sok mindent el tudok képzelni, hogy minek a részét képezhetik.
  3. Ám ez csak egy része az egésznek. ha jobban vizsgálódunk és másfajta elemeket is elkezdünk keresni, rátalálhatunk ilyen kis csikóhal kinézetű távolról hasonlú, de közelebbről már eltérő tulajdonságokkal rendelkező elemekre is. Van aki esetleg már tudja, hogy ezek az elemek minek a részét képzik? Ha van, akkor milyen típusú írógép az? Ha rossz, akkor: nem, de menjünk tovább, mert vannak it még másfajta elem is.
  4. No, itt már látható, hogy három nagyobb halmazt is el tudunk különíteni, és a második halmaznak először csak egy részét ismertük. A harmadik halmaznál pedig látható, hogy a tengericsikók megfordultak és a fejük is nagyobb lett. Ám ezekből is több féle létezik, viszont egymásmellé téve őket itt is valószínűsíthetjük, hogy működésében, funkciójában hasonló szerepet töltenek be. Itt már biztos kitaláltátok, hogy minek a részeit láthatjuk! igen, egy írógép. De milyen írógép? Mi a típusa? mikor készítették, aktuális még? Milyen a billentyűzet kiosztása, milyen rajta írni? Mekkora a súlya? Lehet még kapni? Ha igen, mennyibe kerül? És folytathatnák a kérdések sorát.
  5. Íme, ez egy Adler Favorit típusú 1930-as években gyártott írógép részei, és mint látható jó pár elemmel rendelkezik még a korábban látottakon kívül. A kérdésekre pedig inkább aukciós oldalakon, vagy múzeumokban kereshetjük a választ. Magyar ékezetek viszont nem tartalmaz. Hogy mire volt jó ez a kis bemutató, arra kicsit később térek majd vissza, most inkább egy kis eredettörténet.
  6. Íme, ez egy Adler Favorit típusú 1930-as években gyártott írógép részei, és mint látható jó pár elemmel rendelkezik még a korábban látottakon kívül. A kérdésekre pedig inkább aukciós oldalakon, vagy múzeumokban kereshetjük a választ. Magyar ékezetek viszont nem tartalmaz. Hogy mire volt jó ez a kis bemutató, arra kicsit később térek majd vissza, most inkább egy kis eredettörténet.
  7. Egyre égetőbb kérdések fogalmazódtak meg. Hogyan lehet egy szerteágazó terméket konzisztensen megtervezni? Hogyan tudjuk az iterációkat értelmezhető határokon belül tartani, mind idő, mind erőforrás tekintetében? Hogyan lehet a megnövekedett tervezői csapatokat egy olyan mederbe terelni, ahol a termék is jól érzi magát, de nem vágjuk el a torkát a kreativitásnak sem? Egyre több cikk, majd könyv foglalkozott a problémával és egyre többen látták a megoldást a szabványosításban, a lefektetett, előredeffiniált munkafolyamatokban. Ezzel egyidőben a szoftvergyártók is kezdték ebbe az irányba fejleszteni programjaikat és próbáltak megoldást nyújtani a felhasználói felületeket tervező emberek számára. A Photoshopot szép lassan leváltották a célszoftverek. Így jutottunk el mi is, az fps-nél a Figmáig, mert láttuk, hogy mennyi felesleges erőforrás egy-egy psd, neadj isten ai elkészítésénél, azok módosításánál, nem beszélve a tervek fejlesztői környezetbe történő implementásáról.
  8. Emlékeztek az írógépes hasonlatra. Ott is sok-sok elem alkot egy egészet, amiket valahol valaki kitalált, finanszírozott, összerakott rá egy csapatot, valaki megtervezett, legyártott, valaki összerakta és valaki kipróbálta, aztán valakik használták azt. Ha a képeken látott elemek közül egy hiányzik, vagy épp hibás, máris nem működött volna jól, vagy nem úgy működött volna az írógép, ahogy azt szerették volna. Nincs ez máshogy a digitális termékek világában sem. Ha csak egy elemkészletet látunk, amit esetünkben hívhatunk UI kitnek, abból még sok mindent össze tudunk rakni, és ahány ház annyi szokás. Ahhoz, hogy úgy történjenek a dolgok a kezdetektől a felhasználói visszajelzésekig, és az ezekből történő módosításokig, ahogy azt szeretnénk, abban lehet nagy segítségünkre a design system.
  9. OK, de kell ez nekem? Spoilerezek egy kicsit és elmondom a válaszom. Több mint valószínű, hogy nem. Viszont maga a rendszer olyan elemekre bontható, és olyan megoldásokat tartalmaz, amik segíthetik a későbbi munkádat, még akkor is, amikor nem használod ki az egészet. Ha az alábbi listából a termékre, amivel foglalkozol ráismersz, akkor a válasz igen, innen tudsz mertítkezni és megéri belevágni bizonyos részekbe. Olyan terméken dolgozol…: amikor fontos a hasonló megjelenés és a hasonló viselkedés - konzisztens felület ahol ismétlődő UI komponenseket kell használni – akár egy komplex site ahol ismétlődő kevés funkcionalitás tartalmazó UI elemekkel dolgozol amikor white label, vagy template maga a termék amikor folyamatosan, visszatérve  módosítani kell a felületen – termékfejlesztés amikor különböző “tech stack”-ekkel dolgozol – akár már van a terméknek applikációja és weboldal is
  10. Mik az előnyei? egy központi helyen kezeled a UI elemeket időt és ezáltal pénzt takarítasz meg nagyban növeli az egységességet csökkenti a karbantartási időt a tervezőknek: átláthatóbb és könnyeben kezelhető felületek gyorsabb globális módosítási lehetőség rövidebb iterációs hossz, ezáltal több megoldási javaslat, ami a végén nagyobb elégedetséget is szül, nem csak a felhasználóban, hanem a tervezőben is. a fejlesztőknek: kevesebb idő a UI elemek megismerése csökken a refaktorálásra fordított idő következetes implementáció lehetséges persze ezekhez szükséges a szoros együttműködés, és a megfelelő kommunikációs csatornák megléte, ami jelenthet akár egy dokumentációt, vagy élőbeszédet is üzleti oldalon: időt spórol→pénzt teremt ezt a folyamatot már nehéz lesz visszafordítani jó a felhasználónak és az ügyfélnek hisz egyre jobb terméket kap; jó a dolgozóknak, mert a munkafolyamatai átláthatóbbak és egyre több ideje marad a kreatív ötletelésre;
  11. Fontos: Ami nagyon fontos, hogy ha egy teljes, átfogó design systemet próbálunk készíteni, akkor az nagyon költséges folyamat. A megfelelő emberek, a csapat felállítása. A tervezők meghatározzák a rendszer vizuális elemeit Front-end fejlesztők moduláris, hatékony kód létrehozásához Szántai Karcsi – legyen egy akadálymentes szakértőd hogy a rendszer megfeleljen nemzetközi szabványoknak Tartalomstratégák – akik segíthetnek a csapatnak a rendszer hangjának és hangjának megszólalásában Olyan kutatók, akik segítenek megérteni az ügyfelek igényeit Teljesítmény-szakértők, akik biztosítják a rendszer gyors betöltését minden eszközön A termék menedzserei biztosítják, hogy a rendszer megfeleljen az ügyfél igényeinek Vezetők (VP-k és igazgatók), hogy az egész vállalatot, beleértve a vezetői vezetést is, elsajátítsák és összehangolják a jövőképet Ennek a csapatnak az összeszokása, a megfelelő edukálás, a csapat számára  leginkább kézreálló módszertanok megtalálása, hogy segítsék és ne hátráltassák egymást. És persze maga a termék üzleti és felhasználói oldalról történő megismerése is időigényes. Erről lehetne bővebben beszélni, de az inkább már design menedzseri feladat lenne. Mi összpontosítsunk inkább a UI oldalára továbbra is.
  12. Hogyan kezdjünk neki? Nathan Curtis design system evangélista  szerint – Design system is not a project. It's a product, serving products. – Azaz ez nem egy projekt, hanem egy termék, Ez egy olyan termék, amely termékeket szolgál ki. Így is kell nekifogni. Meg kell tervezni magát a tervezést. Fontos, hogy mindig határozd meg a célokat, mit szeretnél elérni és milyen problémát akarsz megoldani. Ne vegyél bele olyan dolgokat, amik majd egy esetleges problémára adhatnak választ. Ennek persze vannak a UI részén kívül más vetületei is a rendszer tekintetében, de maradjunk fókuszban.
  13. UI audit Ha egy olyan helyzetet nézünk, amikor redesign szükséges, akkor mindig nagy segítségünkre lehet a CSS Stats oldala. Bocs srácok, de most a szallas.hu oldalát vettem alapul. Ahogy a képen is látható, 425 betűméret, 726 szín, 315 hátrészin… És persze tudom, hogy ez nem a valóság, és szerencsére nem ez látható az oldalon, de ha azt a feladatot kapnám, hogy tervezzem újra és ezeket a számokat látnám csak, menten sarkon fordulnék, vagy kérnék 1 évet a tervezésre. Természetesen, ha egy olyan termék tervezése a feladat, ami tiszta lappal indul, akkor sokkal szerencsésebb helyzetben vagyunk. Egy ilyen rendszernél az előző lépést kihagyhatjuk és egyből elindulhat a vizuális nyelv létrehozásához az új termékhez.
  14. A vizuális nyelv megszületése UI tekintetben ez a mi feladatunk. Megalkotni egy termék vizuális nyelvezetét. Ha feldaraboljuk a vizuális rendszer elemeit, akkor a nyelvezetünket a következők alkotják: Színek Tipográfia (méret, vezető, betűtípus stb.) Méretezések, eltartások (margók, dőlések, igazodások, határmetszet) Ikonok (igazából képek, ikonok, illusztrációk) Egy szofisztikáltabb nyelvezet a következőket is tartalmazhatja: Vizuális formák (mélység, magasság, árnyékok, lekerekített sarkok, textúra) Mozgás Hang Ám mielőtt tovább mennénk, két dolgot is meg kell említeni.
  15. Az egyik a design tokenek. A tokenek a design system "szubatomikus" alapjai. Biztos sokatok hallotta, olvasta már Brad Frost Atomic design címú könyvét, mondhatni kiáltványát. Ezt az analógiát követve születtek a szubatomikus design tokenek is. Ezek azok a  legegyszerűbb elemek, amik tartalmazzák azokat az adatokat, amik egy atomi szintű elemnek az alaptulajdonságait tartalmazzák. Ilyenek a név, és azok az egyszerű változók, amik meghatározzák majd a későbbi elem egyes részeit. Például a lekerekítés nagysága, a vonalvastagság, annak stílusa stb. Fontos, hogy ezeket az elejétől egy helyen kell alkalmazni és a későbbi komponensekbe be kell építeni, hogy megmaradjon a konzisztencia és csökkentse a design system kezelésének terhét.
  16. Dokumentáció A másik ami nem szoros része a vizuális nyelvnek, az pedig a dokumentáció előkészítése. Ebben már nagyon hasznos, ha egy követ fújtok a front-endessel, mert akkor már az elejétől közösen tudtok egy olyan listát készíteni, amiben felvezethetitek a elemeket, azok neveit és egyedi tulajdonságait. Ki-ki majd kitölti a maga celláját, de a lényeg, hogy legyen egy élő lista, amit segíti mindkettőtök munkáját.
  17. Színek Olyan nagy újdonságot nem kell azért várni, inkább csak a rendszerhez igazított momentumokat emelem majd ki. Természetesen jó, ha foglalkoztál színelmélettel, így könnyeb dolgod van. A színharmóniák mellet viszont mindig figyelj a kontrasztokra. Építsd be és használd a UI elemek részeként a brand színeit és úgy általánosságban az eddig használt módszerek működni fognak. Alkalmazz hierarchiát és alkoss csoportokat a színeknek, hogy később egy könnyeben tudjál rá hivatkozni. Válaszd külön az elsődleges, másodlagos színeket, a informális színeket és a szürke skálaidat is határozd meg. Felül ha ,már az elején felkészülsz az árnyalatokra, akkor később meg lehet akadályozni a színek elszaporodását is. Már ekkor kezdj el a lehetőségekhez mérten állapotokat rendelni a színekhez, amik a nevükben is megjelenhetnek. Ami újdonság, hogy a digitális termékek korában is elérkeztünk ahhoz az állapothoz, mint amit a tördelőprogramok a kezdetektől alkalmaznak. Definiálj és alkoss stílusokat! Ez nagyon megkönnyíti az egység egyben tartását, és a későbbi globális módosítást is. Ezen felül segít neked is, hogy fókuszban maradj a tervezés során. Amikor pedig a fejlesztő próbálja a munkádból kiolvasni a a színeket, akkor végre nem találja magát szemben a 30 féle kékek állapotával.
  18. Tipográfia Ahogy a színeknél itt is a tipográfiai ismeretek használata révén olyan nagy újdonságokat nem fogunk tapasztalni. Sőt! Sokkal inkább egy tördelő program adta lehetőségek kezdenek itt is megjelenni. Skálázz! –az egyik a méretezési rendszerek bevezetése. Itt is találhatsz számos mintát és kiválaszthatod a termékedhez a megfelelőt. Erre számos mintát lehet a neten találni, az aranymetszéses méretezéstől a négyes alapúig. Erre egy jó kiindulási pont a type-scale.com oldala, ahol előre beállított arányokkal kísérletezhetsz. Reszponzív – az előbb említett méretezési standardoknak köszönhetően a reszponzívitással kapcsolatos problémák is leegyszerűsödnek Segédvonalak – ahogy a színeknél is, itt is eljönnek a tördelőprogramok vertikális segédvonalai, amikhez igazíthatod a sortávolságot, és ezzel is könnyeben megtudod teremteni a vizuális egyensúlyt. Fent-lent – ami még fontos egy rendszer építésekor a tipográfia tekintetében, hogy már az elején igyekezz meghatározni, az eltartásokat. Sokat tudsz spórolni amikor már oldalakon használod a és nem csak a Shift+nyíl nyomkodásával tolod el a betűtörzs, vagy betűszár aljától, tetejétől a következő szövegblokkot. Ez egyébként egy örök dillemma, hogy mely betűk, mettől-meddig határozzák meg a vertikális méretüket. Tapasztalataim alapján úgy jársz a legjobban, ha inkább a lelógó és felnyúló betűszárakat veszed alapul, aljának, illetve tetejének. Stílusok – és az elmaradhatatlan stílusok. Ezt inkább nem is magyarázom, hanem egy videóban gyorsan bemutatom, hogy miért működik végre ez remekül a Figmában.
  19. Ahogy látható, ha az elején nem spóroltuk ki a stílusok elkészítését, akkor nagyon könnyen tudunk olyan módosításokat elvégezni, ami globálisan is hatással lehet az aktuális munkákra.
  20. Méretezés és eltartások Keresd meg – Erre is sok direktíva létezik és akár már a fejlesztésben is alkalmazott keretrendszereket is alapul veheted. Következetes – A lényeg, hogy az elején tedd le a voksod egy mellé, mert ez mind a fejlesztésben, mind a további tervezésben lényeges méreteket fog meghatározni. Kivételek – Amit én mostanság előszeretettel használok az a 8-as, vagy 4-es osztás. Amikor ki kell lépnem a 8-as bűvköréből, akkor is igyekszem azt elszigetelt és egyedi esetnek megtartani és törekszem külön jelezni egy kommentben a fejlesztő felé, hogy itt a standarizált méretektől eltérő esettel van dolga.
  21. Ikonok Ez az elmúlt években egy külön elszeparált munkakörré fejlődött. Olyan szabályokat kezdenek alkalmazni, amikbe jómagam már nem biztos, hogy biztonságban érezném magam, így még nem merészkedtem bele. Az evidens értelmezhetőségi, felismerhetőségen túl vannak designerek, akik a következőket is igyekeznek egységesíteni: Optikai gridek – a befoglaló és maga az ikon elhelyezkedésé azon belül Pixel gridek – itt nem csak a pixelpontosság, hanem a körvonalak igazodását is előre meghatározzák A méretezési standardok bevezetése → 24 → 36 → 48 →72 És ami a legfontosabb, a tiszta SVG-k készítése. Ez már olykor inkbb front-endes feladatba csúszik át, mert a grafikai programok még mindig szemetelnek exportálás közben. De mondom ilyen mélységekig még én se merészkedtem. Ahogy a képen látható igyekszem úgy építeni az ikonokat, hogy azért megfeleljenek a standardoknak, de inkább a felhasználói és nem az ikon tervezői oldaláról szoktam közelíteni. Amikre figyelek az ikonoknál Egységes méretezések és azok skálázása. Az elnevezések, és azok helyes használata. Komponensbe ágyazás, a könnyebb kezelhetőség miatt. A befoglaló és maga az ikon külön választása. A képen egyébként a Material Design 2 legújabb ikonkészletének elemei láthatóak egy éppen folyamatban lévő termék tervezése során.
  22. Az alábbi videó azt szemléltetem, hogy mennyire könnyíti meg a komponens alapú tervezés a szükséges módosításokat. Ebben az állapotban 3 méretben láthatjátok ugyanazt az ikont, aminek a legnagyobb mérete a mesterkomponensem, így amikor változtatást kell végeznem, elég csak egy helyen módosítanom, és az mindenhol megtörténik. Most képzeljétek el, hogy mennyi helyen használhattok egy ikon, és mennyi változtatást kellene végezni egy ilyen egyszerű ügyfél igénynél.
  23. És amikor végig mentetek ezeken akkor itt kezdődik maga a Pattern Library. Különböző mélységekben és eltérő megoldásokkal lehet találkozni, ha elkezded bele ásni magad a témába. A lényeg, hogy kezdjétek el strukturálni azokat a munkafolyamataitokat, aminél a legnagyobb erőforrás veszteséget érzitek és aztán majd ha tényleg szükségességét érzitek, belevághattok a saját Design Systemetekbe. Remek kis gyűjtühely a napokban megjelent designsystemsrepo.com, ahol a már megvalósult és kódszintre átültetett felületek listáját találjátok.
  24. Az utolsó videón pedig már egy olyan komponens alapú elemeket láthattok, amik alacsonyabb szintű elemekből épültek fel. Itt már előre lettek definiálva az eltartások és igazodások, ám így is sokkal könnyben tudod a fejlesztő, vagy ügyfél felé prezentálni egy beviteli mező reszponzívitását. Íme.
  25. És hogy mennyi minden tartozik egy valódi design system alá? Az az alábbi képen látható, hogy a UI miért csak egy apró szelete az egész rendszernek.