馃帹 uxowy.dev #27
4 min czytania

馃帹 uxowy.dev #27

Na wst臋pie chcia艂bym Ci臋 przeprosi膰 za brak wysy艂ki newslettera w聽zesz艂ym tygodniu. Jak co艣, to wina tego Pana...

Uroczy, prawda? Ale nie zawsze 馃槀
I opr贸cz niego jest jeszcze drugi - dwuletni szogun, kt贸ry nawet jak siedzi i聽ogl膮da bajk臋 "najutube" musi rusza膰 cho膰by jednym paluszkiem u nogi ...bo musi by膰 w聽ci膮g艂ym ruchu 馃槀

Dlatego... je艣li kt贸rego艣 razu nie dostaniesz nowego wydania newslettera, to wiesz ju偶 jaki by艂 pow贸d. I mam nadziej臋, 偶e mi to wybaczysz 馃檪


A teraz wracamy do mi臋ska. Co dzisiaj?

  1. Jak powinna wygl膮da膰 Twoja paleta kolor贸w
  2. #PrzemoPatterns: Tab
  3. Gestalt - Design System Pinteresta
  4. Czy trend neubrutalism opanuje web聽design?

Scrolluj dalej!


Jak powinna wygl膮da膰 Twoja paleta kolor贸w

UX, UI | 藕r贸d艂o
殴r贸d艂o

艢wietny teskt poruszaj膮cy kwestie palety kolor贸w, m.in.:

Co uwzgl臋dnia膰?

  • kolory brandu (primary secondary),
  • kolory semantyczne (warning, success)
  • kolory neutralne (uwaga: w naturze nie istniej膮 czyste odcienie szaro艣ci, np. rgb(128, 128, 128), u偶ywaj "blue-gray", np. rgb(128, 123, 148) albo szaro艣ci z聽dodatkiem koloru primary)
  • kombinacje kolor贸w (dobrze wygl膮daj膮ce ze sob膮 zestawy kolor贸w)
  • odcienie kolor贸w (dobre stwierdzenie: More shades = more decisions and maintenance)
  • accessibility (m.in. kontrast kolor贸w)
  • prawid艂ow膮 konwencj臋 nazewnictwa (np. "success" a nie "green")
  • mo偶emy skorzysta膰 z narz臋dzi do wygenerowania palety kolor贸w:
    Canva color wheel, Coolors, Colorable, Palx.

Pe艂na tre艣膰 artyku艂u:
https://medium.com/atmos-style/how-to-create-the-best-ui-color-palette-abdd9f60c827


#PrzemoPatterns: Tab

馃 Co to jest?

Tab (zak艂adka) to element nawigacyjny, kt贸ry umo偶liwia u偶ytkownikom 艂atwy dost臋p do r贸偶nych tre艣ci na pojedynczej stronie. Taby wizualnie przypominaj膮 przegrody z zak艂adkami w szafce na dokumenty. I jak to tradycyjnie bywa w 艣wiecie UX/UI, warto pami臋ta膰 o podstawowych zasadach przy u偶yciu danego elementu.

Nie przeci膮gam - lecimy z tematem!

鈩癸笍 Wskaz贸wki

  • U偶yj tab贸w, aby prze艂膮cza膰 si臋 mi臋dzy widokami w tym samym kontek艣cie, a nie nawigowa膰 do r贸偶nych obszar贸w systemu
  • Podziel logicznie zawarto艣膰 mi臋dzy zak艂adkami, aby u偶ytkownicy mogli 艂atwo przewidzie膰, co znajd膮 po wybraniu danego taba
  • U偶ywaj zak艂adek tylko wtedy, gdy u偶ytkownicy nie musz膮 por贸wnywa膰 tre艣ci z聽wielu tab贸w jednocze艣nie. W innym przypadku prze艂膮czanie si臋 mi臋dzy r贸偶nymi tabami obci膮偶y ich pami臋膰 kr贸tkotrwa艂膮 oraz obni偶y przyjemno艣膰 korzystania z systemu
  • Pod艣wietl aktualnie wybran膮 zak艂adk臋. Upewnij si臋, 偶e wyr贸偶nienie jest wystarczaj膮co widoczne, aby ludzie mogli stwierdzi膰, kt贸ra zak艂adka jest wybrana
  • Pisz kr贸tkie etykiety na tabach i u偶ywaj prostego j臋zyka. Etykiety zak艂adek powinny zwykle zawiera膰 1-2 s艂owa. Kr贸tkie etykiety s膮 艂atwiejsze do zeskanowania; je艣li potrzebujesz d艂u偶szych etykiet to z regu艂y znak, 偶e labele s膮 zbyt skomplikowane
  • Trzymaj si臋 tylko jednego rz臋du zak艂adek. Wiele wierszy tworzy przeskakuj膮ce elementy interfejsu u偶ytkownika co burzy pami臋膰 przestrzenn膮, a tym samym uniemo偶liwia u偶ytkownikom zapami臋tanie, kt贸re zak艂adki ju偶 odwiedzili
  • Umie艣膰 rz膮d zak艂adek na g贸rze panelu 鈥 nie po bokach ani na dole, gdzie u偶ytkownicy cz臋sto je przeoczaj膮
  • Wszystkie zak艂adki powinny wygl膮da膰 i dzia艂a膰 tak samo. Sp贸jno艣膰 jest wa偶na w projektowaniu sterowania GUI, poniewa偶 buduje poczucie panowania u偶ytkownika nad systemem

Gestalt - Design System Pinteresta

Resources | 藕r贸d艂o

Mega rozbudowany, ale i mega dobrze podzielony (architektura informacji) Design聽System Pinteresta - do obczajki, jako przyk艂ad poprawnie wykonanego Design Systemu, kt贸ry s艂u偶y jako dokumentacja wielu, wielu osobom na r贸偶nych stanowiskach.

Gestalt is Pinterest鈥檚 design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

Elementy, o kt贸rych warto wspomnie膰:

Co wi臋cej, mamy dost臋p do kodu 藕r贸d艂owego Gestalta 馃憖


Czy trend neubrutalism opanuje web聽design?

殴r贸d艂o

Micha艂 Malewicz, o kt贸rym pisali艣my w premierowym wydaniu uxowy.dev, po raz kolejny postuje w kategorii "design trends". Tym razem na tapet l膮duje neubrutalism.

Wyniki wyszukiwania "neubrutalism" na Dribbble.

Micha艂 uwa偶a, 偶e to dobry "counter-balance" do aktualnie panuj膮cych聽design贸w.

Oblukaj, co to i jak to zrobi膰:
https://uxdesign.cc/neubrutalism-is-taking-over-the-web-e9d09e0fe441


To wszystko na dzi艣.

Dzi臋ki wielkie i do nast臋pnego! 馃憢
Trzymaj si臋!


Pom贸偶 innym wiedzie膰 wi臋cej

Znasz kogo艣, kto powinien do艂膮czy膰 do naszej spo艂eczno艣ci? Je艣li tak, to聽wy艣lij do tej osoby link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista. I聽niech do艂膮czy do馃帹聽uxowy.dev!

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.