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.
Jak v GoodData tvoříme UI
Michal Maňák
Interakční designer
Ahoj, jmenuji se Michal Maňák a pracuji jako Interakční designe...
Několik let jsem taky pracoval jako frontendista a webdesigner. A abych se přiznal, nikdy jsem neměl rád Photoshop. Vždy j...
zdroje obrázků:
html5: wiki
css3: http://hagaizamir.com/wp-content/uploads/2013/03/css3_logo1-186x160.png
ember: wiki
yui:...
GoodData funguje už pár let. Ve firmě jsem necelé dva roky a tak úplně nevím, jak to probíhalo úplně na začátku. Našel jse...
Jako designeři máme dost velkou volnost v tom, jaké nástroje používáme … nebo nevím o tom, že bychom byli nuceni používat ...
A posledních několik měsíců efektivně používáme Sketch pro tvorbu vizuálů. Což nám přináší několik výhod, ale i nevýhod…
(...
Když k nám dnes přijde nějaký designer na pohovor, typicky umí ovládat Photoshop. A má v něm zaběhnuté postupy... co posle...
Docela by mě zajímalo, co se Vám konkrétně nelíbí na Photoshopu? A nezmiňujte prosím, že je to nástroj na fotky - to víme ...
Být efektivní!
… my se tu zamýšlíme nad otázkou, jestli je dobré využívat PSDčka, nebo jiné programy. Ale vždy bychom měli...
Od nákresů na whiteboardu ...
… skicy ...
… detailnější wireframy ...
… až po detailní visuální design UI ze Sketche.
… několikrát jsme se dohadovali s vývojáři o tom, jak vlastně design implementovat. Dostali jsme se na diskuzi, i přes to,...
Abych se přiznal, jsem hrozně rád, že mohu s vývojáři věci diskutovat přímo. Sedím s nimi v jedné místnosti, o všem se bav...
Stane se, že některé věci prostě nepodchytíme a neuvědomíme si. Proto jsme se dohodli na užší spolupráci…
… a protože větš...
Vytvořit “sexy” UI… piplat detaily ...… zlepšovat ...Rychle stavět ...
Když dnes tvoříme nějaké UI, tak jsme zjistili, že ...
V GoodData už máme několik produktů. Složitých. A taky hodně vývojářů, kteří se na jeho tvorbě podílí. I designerů máme ně...
Benefity guidelines
● Snadnější vývoj - přepoužitelné prvky
● Konzistentní UI
● Předcházení diskuzím!
Díky tomu máme efekt...
Snažím se vytvořit dostupnou knihovnu přepoužitelných prvků, ze které budou jasné různé formy a typy elementů … jak pro de...
… ale i pro samotné vývojáře.
Jenže my to nemůžeme dělat jen na visuální vrstvě, protože máme více komplexních produktů...
… a proto i vytváříme popisy (právě ty guidelines), které říkají kdy, jak a proč použít. Hlavně proto, že už to tak někde ...
Super je, že se vývojáři přímo účastní tvorby těchto guidelines. My specifikujeme, jak se má co chovat a jak vypadat, disk...
Používejte nástroje, díky
kterým jste efektivní!
Abych se přiznal - myslím si, že je podstatě je jedno, jaké nástroje použ...
Díky za pozornost
http://www.manakmichal.cz
@manakmichal
Jak v GoodData tvoříme UI
Jak v GoodData tvoříme UI
Upcoming SlideShare
Loading in …5
×

Jak v GoodData tvoříme UI

1,508 views

Published on

Na srazu http://frontendisti.cz/ s tématem, jestli používat Photoshop nebo ne (PSD či nePSD?), jsem ukazoval, jak v GoodData tvoříme UI - na které klademe vysoké nároky. A jak se snažíme být co nejvíce efektivní a dodávat ty nejlepší výsledky.

(prezentaci jsem trochu upravil, aby slajdy obsahovaly i komentáře)

Published in: Design
  • Be the first to comment

Jak v GoodData tvoříme UI

  1. 1. Jak v GoodData tvoříme UI Michal Maňák Interakční designer Ahoj, jmenuji se Michal Maňák a pracuji jako Interakční designer ve společnosti GoodData. Kde navrhuji produkty primárně pro nahrávání dat. Diskuze, jestli Photoshop nebo ne, mi přijde jako takový evergreen, který se pravidelně objevuje a diskutuje… A Dnes bych Vám rád řekl něco o tom, jak v GoodData tvoříme UI… u něhož klademe velký důraz na kvalitu. Nechci tady dělat žádnou agitaci, ale ukázat, jak se snažíme mít co nejefektivnější vývoj, kvalitu UI a právě jaké nástroje pro jejich dosažení používáme.
  2. 2. Několik let jsem taky pracoval jako frontendista a webdesigner. A abych se přiznal, nikdy jsem neměl rád Photoshop. Vždy jsem raději používal Fireworks … … na druhou stranu jsem nikdy neměl problém s tím, abych překódoval jakýkoliv design - ať už jsem jej dostal v PSDéčku, JPEGu nebo PNG … pokud to tedy nebyla nějaký splácanina :) (zdroj obrázku: wiki)
  3. 3. zdroje obrázků: html5: wiki css3: http://hagaizamir.com/wp-content/uploads/2013/03/css3_logo1-186x160.png ember: wiki yui: https://www.servage.net/blog/wp-content/uploads/ … ? Jen pro představu, GoodData UI je v podstatě kompletně poháněné apíčkama. A většina UI je tvořená pomocí Ember.js, HTML5, CSS3, SASS - starší část ještě pomocí YUI. A spoustou dalších technologií… takže většina věcí pro UI se implementuje přímo v klientovi. (… jestli je tady někdo od nás, tak vám pak určitě rád řekne víc … :))
  4. 4. GoodData funguje už pár let. Ve firmě jsem necelé dva roky a tak úplně nevím, jak to probíhalo úplně na začátku. Našel jsem informace pár let dotazu ….UI jsem dříve vyvíjelo externěDodávalo se ve formě PSD nebo PNGček … a když jsem si nedávno procházel naše různá úložiště, našel jsem designy v nejrůznějších formátech ... z různého softwaru… … od naskenovaných skic, wireframů, naklikaných prototypů až po keynoty, PSDčka a Sketch files. (zdroj obrázku: http://businessblog.winweb.com/wp-content/uploads/2013/09/WinWeb_File_Management2.png)
  5. 5. Jako designeři máme dost velkou volnost v tom, jaké nástroje používáme … nebo nevím o tom, že bychom byli nuceni používat konkrétní software… důležité je, abychom byli efektivní. Dost často zkoušíme různé nástroje … například v poslední době jsme zkoumali Affinity Designer, Frame, Avocado a další. (zdroj obrázku: http://3.bp.blogspot.com/-BXhvhcYeYlI/TpW9-mz6XdI/AAAAAAAAJWE/5G8AWEWTQvE/s1600/crossroads+sign.jpg)
  6. 6. A posledních několik měsíců efektivně používáme Sketch pro tvorbu vizuálů. Což nám přináší několik výhod, ale i nevýhod… (zdroj obrázku: http://bohemiancoding.com/static/images/home/app-icon.png)
  7. 7. Když k nám dnes přijde nějaký designer na pohovor, typicky umí ovládat Photoshop. A má v něm zaběhnuté postupy... co posledních pár měsíců monitoruji pracovní nabídky pro design a frontend, typicky se požadují znalosti Photoshopu nebo celého balíku Creative Suite. … i náše současná hlavní vizuální designerka byla zvyklá používat Photohop. A na Sketch trochu nadává a říká, jak byla spousta věcí ve Photoshopu jednodušší. Ale na druhou stranu se ve Sketchi dá plno věcí dá udělat snáze. A tak se i ona se Sketchem sžila ... (zdroj obrázku: http://www.quickmeme.com/img/24/249458e1276e87eb9aae4c13287babaccb7a592fac7e7ff8148d0565bf05a94b.jpg)
  8. 8. Docela by mě zajímalo, co se Vám konkrétně nelíbí na Photoshopu? A nezmiňujte prosím, že je to nástroj na fotky - to víme všichni :). … četl jsem komentáře na Facebooku - například, že designeři používají subpixely, atypické velikosti fontů, nemají pořádek ve vrstvách, atp … … pokud se k něčemu takovému dostanete - že designer dělá nestandardní věci - tak podle mě není problém v softwaru, ale i v samotném designerovi! Spolupracoval jsem s mnoha designery (i ještě jako kodér). A když jejich výstupy (a troufám si říct, že jsem nepracoval s žádnými amatéry), tak měli většinou ve své práci pořádek - normální velikosti fontů, pořádek ve vrstvách, atp… Já jsem například Photoshop neměl nikdy rád, protože to je podle mě zbytečně složitý nástroj. Dost věcí se v něm dělá docela zbytečně složitě, dost věcí v něm není úplně intuitivní, atp… Ale pokud se ho člověk jednou naučí, dokáže v něm dělat efektivně a dobré výstupy... … Já jsem na webovou grafiku vždy raději používal Fireworks (v té době ještě od Macromedia). Který pro web designery nabízí i další funkce … a dnes se mi celkem líbí právě zmíněný Sketch. Protože oba zmíněné jsou zamýšlené právě pro vizuální návrhy pro web. (zdroj obrázku: http://carie-lyndene.com/wp-content/uploads/2014/05/Why1.jpg)
  9. 9. Být efektivní! … my se tu zamýšlíme nad otázkou, jestli je dobré využívat PSDčka, nebo jiné programy. Ale vždy bychom měli používat takové nástroje, které nám umožní být efektivní … … vždyť pro efektivnější psaní JavaScriptu také vzniklo jQuery, Dojo, atp. … a přeučit grafiky na jiný software může být docela drahé - jak ve smyslu času, tak i ve smyslu kvality rozhraní. (zdroj obrázku: http://holisticworkplace.files.wordpress.com/2013/10/too-busy22.jpg)
  10. 10. Od nákresů na whiteboardu ...
  11. 11. … skicy ...
  12. 12. … detailnější wireframy ...
  13. 13. … až po detailní visuální design UI ze Sketche.
  14. 14. … několikrát jsme se dohadovali s vývojáři o tom, jak vlastně design implementovat. Dostali jsme se na diskuzi, i přes to, že používáme kvalitní software, že bychom měli veškeré UI specifikace popisovat… hodně do detailu... … a tím v podstatě usnadnili práci vývojářům. … a několikrát jsem slyšel “... to je hrozně pocitové ne, třeba jaký odstín zelené zvolit. Vždyť ani lidé neuvidí rozdíl…”
  15. 15. Abych se přiznal, jsem hrozně rád, že mohu s vývojáři věci diskutovat přímo. Sedím s nimi v jedné místnosti, o všem se bavíme a případné nesrovnalosti tak můžeme okamžitě vyřešit. Takže běžně diskutujeme jednotlivé designy, které se budou implementovat. A já na tom třeba nevidím nic špatného. Je lepší se zeptat, než udělat chybu a pak to složitě předělávat... Dost věcí funguje především díky tomu, že jsme rozdělení do jednotlivých Scrum týmů. A každý tým má v zastoupení designera, UI vývojáře, back-end vývojáře, QA, atp. Takže jsme schopni dost věcí nejen hned diskutovat, ale také v určité míře iterovat.
  16. 16. Stane se, že některé věci prostě nepodchytíme a neuvědomíme si. Proto jsme se dohodli na užší spolupráci… … a protože většina designeru umíme kódovat, nabídli jsme jim s tvorbou pomoc. Protože jako designeři víme přesně, co zamýšlíme a proč. A i když to na obrázku předáme, někdy je těžké. (zdroj obrázku: http://images.football.co.uk/630x472/ec3b58c0355103833d06c28984c6d5d4.jpg)
  17. 17. Vytvořit “sexy” UI… piplat detaily ...… zlepšovat ...Rychle stavět ... Když dnes tvoříme nějaké UI, tak jsme zjistili, že je mnohem lepší ze začátku nabouchat aplikaci s kvalitním interakčním designem. A vizuál dořešit jako poslední … když už je aplikace hotová… … protože jak máme agilní vývoj a 14ti denní sprinty, dodáváme zadání postupně. A postupně celou aplikaci implementujeme a pouštíme. A čím detailnější design developerům dodáme, tím více tíhnout k předoptimalizaci. A když se pak dělá nějaká další část vizuálu, může se stát, že se ostatní části rozbijí, předoptimalizace je potřeba dále optimalizovat, atp. Takže to ve výsledku ještě vývoj trochu zdražuje a lehce protahuje. A když už chceme implementovat vizuál, tak s vývojáři projdeme zadání, oni si vytvoří představu, jak CSS strukturovat. A pak jim můžeme dodat obrázek a nebo Sketch file, ze kterého si mohou jednotlivé hodnoty snadno vyzobat.
  18. 18. V GoodData už máme několik produktů. Složitých. A taky hodně vývojářů, kteří se na jeho tvorbě podílí. I designerů máme několik… … a právě abychom zajistili co nejvyšší kvalitu našeho UI a co nejvíce zefektivnili jeho tvorbu, rozvíjíme vlastní designové guidelines. Říkáme ji GoodStrap. (zdroj obrázku: http://2.bp.blogspot.com/-4GH4nR74Tx0/UuzXU2OJlSI/AAAAAAAAAnU/1wLRNXDfhxI/s1600/tourist_guide_cartoon.jpg)
  19. 19. Benefity guidelines ● Snadnější vývoj - přepoužitelné prvky ● Konzistentní UI ● Předcházení diskuzím! Díky tomu máme efektivnější vývoj, ale také i efektivnější návrh. Samozřejmě jsou to jen guidelines - doporučení. A pokud to situace vyžaduje, tak samozřejmě uděláme nějakou custom úpravu. Která ale nemusí spadnou do těchto guidelines…
  20. 20. Snažím se vytvořit dostupnou knihovnu přepoužitelných prvků, ze které budou jasné různé formy a typy elementů … jak pro designery, management, atp. ...
  21. 21. … ale i pro samotné vývojáře. Jenže my to nemůžeme dělat jen na visuální vrstvě, protože máme více komplexních produktů...
  22. 22. … a proto i vytváříme popisy (právě ty guidelines), které říkají kdy, jak a proč použít. Hlavně proto, že už to tak někde používáme a lidé jsou na to naučení.
  23. 23. Super je, že se vývojáři přímo účastní tvorby těchto guidelines. My specifikujeme, jak se má co chovat a jak vypadat, diskutujeme to společně, jak složité to bude udělat, atp… a vývojáři pak naše sny přetvoří na skutečné prvky. (zdroj obrázku: http://consciousbusinessblog.files.wordpress.com/2013/08/collaboration.jpg)
  24. 24. Používejte nástroje, díky kterým jste efektivní! Abych se přiznal - myslím si, že je podstatě je jedno, jaké nástroje používáme… a proto jsem rád, že máme v GoodData velkou volnost... ... všichni chceme dělat svou práci co nejefektivněji a co nejlépe. A to by měl být přece náš cíl.
  25. 25. Díky za pozornost http://www.manakmichal.cz @manakmichal

×