• úvod
  • témata
  • události
  • tržiště
  • diskuze
  • nástěnka
  • přihlásit
    registrace
    ztracené heslo?
    KULHYUI design, design systémy, interakční design, ♥ Figma
    Design rozhraní webů a aplikací. Architektura design systémů. Interakční design. Všechno okolo Figmy, ale i dalších editorů (XD, Sketch, Framer, Webflow).

    Jaka je vase design role?


    Instrukce:
    Pokud profesne delate UI design, jakou roli ve firme zastavate, priapdne jak by jste svou roli definovali, pokud delate sami na sebe?

    15 hlasy od 15 respondentů

    rozbalit záhlaví
    CUBICULA
    CUBICULA --- ---
    KULHY: Nu a nemuzes se podivat, jestli mas stejny problem? :)
    KULHY
    KULHY --- ---
    CUBICULA: Jses si jistej? Mam za to, ze to ukazovali primo live, ale treba se pletu…
    CUBICULA
    CUBICULA --- ---
    Component properties se nezobrazujou v inspectu. Všiml jsem si toho, až když jsem předělal půlku DS :/

    Jinak jako super update jaxvině
    RESK181
    RESK181 --- ---
    Ou yeah! Dark mode ON
    KULHY
    KULHY --- ---
    - password protected prototypes
    KULHY
    KULHY --- ---
    DAVVID: nz

    Jeste mi uniklo:

    - components properties (text, visibility of elements, instance override — drive se to resilo nekonecnym mnozstvim variant)
    - variable fonts
    - absolutni pozice uvnitr auto layoutu
    DAVVID
    DAVVID --- ---
    KULHY: dik za souhrn!
    KULHY
    KULHY --- ---
    Tak za co jsem se modlil neprislo, ale i tak hezka nadilka. Co me utkvelo:

    - negative spacing
    - moznost vybirat poradi vrstev pro kazdy auto layout
    - interskce se spacingem a paddingen primo na canvasu
    - moznost zapocitavat bordery do velikosti auto layoutu
    - indicidualni nastaveni stran borderu
    - dark mode
    KULHY
    KULHY --- ---
    KULHY
    KULHY --- ---
    TIKVIK: Procenta, sloupce a zalamovani objektu radku — muj sen do Figmy.
    TIKVIK
    TIKVIK --- ---
    OUKE: Animapp ti vysvihne celkem pouzitelnou strukturu v blocich, ale nema treba jedotky procenta, takze pro fluidni design menici se podle okna browseru musis opravovat pevne px jednotky velikosti workspace na procentualni. Tze width, min-width, paddingy apod. Ale pak to funguje celkem fajn. Plive to i breakpointy.
    KULHY
    KULHY --- ---
    OUKE: Prijde mi, ze cilem vetsiny tehlech metod je dorucit nejaky hruby, ale korektni a pouzitelny zaklad na handoff pro frontend. Nevim jestli te chapu spravne, ale funkcni web z toho nevypadne (ucesany prototyp ano). Dalsi stranka veci je, ze takovy zamer klade na designera vysoke naroky na spravnost struktury designu v editoru a cistotu prace obecne.

    Kdybys chtel neco co opravdu pracuje s html a css a daji se v tom udelat funkcni weby tak prozkoumej Webflow.
    DSTEPZ
    DSTEPZ --- ---
    OUKE: Anima je free to try, tak si to otesti. Btw k cemu html5? Potrebujes animace?
    KULHY
    KULHY --- ---
    KAJJAK: Jeste spis te asi bude zajimat primo ten push to nejakeho githubu nebo tak.

    Anima: Design to code | High-fidelity prototypes
    https://www.animaapp.com/
    KULHY
    KULHY --- ---
    KAJJAK: Tohle je pro me zatim trochu neprobadana puda. Rekl bych ze cesty na to jsou, ale vzhledem k povaze Figmy to asi neni uplne optimalni a dotazeny CSS. Figma uz v zakladu nabizi nejaky CSS readout v inspect panelu a pak jsou tu nejaky pluginy ktery to asi posouvaji dal (napr. CSSGen).

    Vetsinou je stejne potreba harmonckej tandem designera a frontendisty, aby si nastavili atomickej zaklad a pak uz se vesele sklada jen z nazvu komponent a jejich properties.

    KAJJAK
    KAJJAK --- ---
    KULHY:

    umi to pak nejak figma propsat primo do csska? nebo se tohle vse pak musi preklepat duplicitne rucne?
    KULHY
    KULHY --- ---
    KULHY: Ideal by byla nativni podpora ve Figme.
    KULHY
    KULHY --- ---
    Jak jste na tom s pouzivanim pluginu v paternich casetch design systemu na produkcni praci? Nebo pluginy pro produkcni praci obecne. Osobne se bojim, ze se to nekde v nejake verzi rozsype a ja budu muset opravovat cely design system.

    Hodne me laka zacit pouzivat Tokens:
    Figma
    https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

    Nejvic me laka uziti promenych spacingu a nestovani barev.

    Tady na Figma kanalu meli zajimavou demonstraci vyuziti Tokens na headless design system:
    In the file - Building a headless design system
    https://www.youtube.com/watch?v=yvblQEPGPkM


    Trochu monstrozita na me, ale rozhodne to je pusobive a ledacos se z toho da prevzit.
    QWWERTY
    QWWERTY --- ---
    KULHY: nezbyva nez souhlasit, estetika bude asi jeste hodne dlouho prace pro lidi

    whitepapery co na me vypadly vypadaji, ze pracuji hlavne s posbiranim dat od uzivatelu a zpracovani modelu pro neuronovou sit, nez ze by automatizovaly geometrii/estetiku
    ...ale jak rikam, jsem BFU, takze bych urcite nerekl, ze z nich "cerpam"

    Optimizing User Interface Layouts via Gradient Descent
     https://arxiv.org/pdf/2002.10702
    We present an automated technique for optimizing the layouts of mobile UIs. Our method uses gradient descent on a neural network model of task performance with respect to the model’s inputs to make layout modifications that result in improved predicted error rates and task completion times.

    Layout placement optimization methods using repeated user interface sequence patterns
     https://journals.sagepub.com/doi/abs/10.1177/1473871618825334
    method for automatically optimizing the layout placement of user interfaces in commercial applications
    We used the Apriori algorithm and a genetic algorithm efficiently to optimize user interface component placement based on the evaluation of a keystroke-level model.

    Optimizing Visual Element Placement via Visual Attention Analysis.
     https://rawanmg.github.io/research/vr19.html
    we propose a novel data-driven optimization approach for automatically analyzing visual attention and placing visual elements in 3D virtual environments.
    KULHY
    KULHY --- ---
    QWWERTY: Sem kdyztak hod zdroje tech whitepaperu, at vime z ceho cerpas. Jinak mi fakt prijde lepsi se poptat na konkretni layout takoveho "interfejsu". V zasade by jsi se mohl ptat jakehokoliv navrhare kdo rozmistuje funkcni prvky v kontextu jejich uziti pri zohledneni estetiky. Ten citlivy balanc mezi prakticnosti a estetikou ja zatim imho prace pro lidi.
    QWWERTY
    QWWERTY --- ---
    KULHY: bastlim si stolni zdroj a resim rozmisteni svorek, meraku, vypinace, etc.. na prednim panelu. tak jsem si rikal, ze krome "funkcni" by to navic mohlo vypadat lip nez "hazel jsem to tam, jak to zrovna prislo pod ruku" :))
    ciste technicky jde porad o rozmisteni ovladacich a informacnich prvku pro uzivatele, byt do fyzicke aplikace, tak me napadlo se poptat, jestli treba neco takovyho neexistuje, protoze kdo jiny by o tehle vecech mohl mit lepsi prehled nez prave UI designeri
    i z meho googlefu se zda, ze existuji minimalne whitepaper vyzkumy a ty optimalizace se zkoumaji, ale zatim nic pro BFU jako jsem ja :)
    Kliknutím sem můžete změnit nastavení reklam