馃帹 uxowy.dev #40
4 min czytania

馃帹 uxowy.dev #40

kolejny pi膮teczek, kolejne wydanie uxowego, no i weekend! 馃コ
Dzi艣 b臋dzie bardzo UI-owo. 馃帹

Zapraszam do obczajki:

  1. UI Guideline - Tw贸j MUST HAVE podczas tworzenia komponent贸w
  2. Podnie艣 swoje skille UI-owe z tymi szybkimi tipami - seria obrazk贸w od Vikalp Kaushik
  3. Rive (beta) - alternatywa dla animacji Lottie

Startujemy 猬囷笍 猬囷笍 猬囷笍


UI Guideline - Tw贸j MUST HAVE podczas tworzenia komponent贸w

UI, Resources | 藕r贸d艂o
UI Guideline

Je艣li wprowadzasz do swojej aplikacji jaki艣 komponent - to bardzo dobre miejsce, aby zacz膮膰.

Bez znaczenia, czy masz ju偶 design i masz go zakodowa膰, u偶ywasz komponentu z聽jakiego艣 frameworka UI czy robisz wsio od zera.

Znajd藕 komponent i...

  • oblukaj, jak wygl膮da w najpopularniejszych aplikacjach, gdzie jest u偶ywany i聽w聽jaki spos贸b,
  • sprawd藕 go w popularnych Design Systemach,
  • zapoznaj si臋 z nazewnictwem jego element贸w, aby porozumiewa膰 si臋 sp贸jnie,
  • zaci膮gnij do siebie gotowy komponent z Figmy 馃憖
  • a nawet - pobierz gotowy kod HTML 馃憖 馃憖 馃憖

To, i jeszcze wi臋cej, ustalone na podstawie analizy komponentu聽w:

  • popularnych Design Systemach, m.in.: Material UI, Atlassian Design System, Polaris od Shopify, Cosmos od Vercel
  • 藕r贸d艂ach z patternami, m.in.: UX Mailchimp
  • oraz frameworkach UI, m.in.: Bootstrap, Angular Material, Vuetify, Tailwind聽UI

Oblukaj i dodaj do zak艂adek:
www.uiguideline.com


Podnie艣 swoje skille UI-owe z tymi szybkimi tipami

Learn UI Design Series - Part 1/7: Color

Profil Vikalp Kaushik (bo nawet nie mam poj臋cia jak odmieni膰 imi臋 i nazwisko tego pana 馃槀) jest istn膮 skarbnic膮 o UI/UX dla developera.

W serii artyku艂贸w Learn UI Design Vikalp zarzuca nam proste graficzki do ogarni臋cia podstaw UI designu. Idealne to szybkiego przyswojenia wiedzy o聽UI/UX dla developera!

Do dnia dzisiejszego powsta艂y 4 wpisy:

  1. Learn UI Design Series: Color
  2. Learn UI Design Series: Typography
  3. Learn UI Design Series: Grids
  4. Learn UI Design Series: Alignment
  5. ...na pozosta艂e trzy czekamy

Jest te偶 w膮tek na Twitterze z tymi graficzkami:
https://twitter.com/betterdesigning/status/1577878817443414016

Polecam chocia偶by przeskanowa膰.
Zawsze co艣 si臋 "艂yknie" 馃檪


Rive (beta) - aletrnatywa dla animacji Lottie

Tools | 藕r贸d艂o

Zawsze by艂em pod wra偶eniem zajebistych animacji w aplikacjach internetowych i聽natywnych. Czy to takich wi臋kszych w sekcji hero, czy tych malutkich mikrointerakcji.

Poza tym, 偶e mo偶emy po prostu animowa膰 SVG za pomoc膮 CSS, mamy do tego te偶 dost臋pnych kilka narz臋dzi. Jednym z nich jest Lottie - sprawdzony w boju spos贸b na animacje w aplikacjach.

Ale ostatnio natkn膮艂em si臋 na aletrnatyw臋 - Rive. Najciekawszym elementem dla oka developera jest... maszyna stan贸w 馃ス

State machine w Rive - link do dokumentacji.

Pozwala to na zdefiniowanie stan贸w naszego elementu i prze艂膮czanie si臋 mi臋dzy nimi.

Przyk艂ad to "idle", "hover" i "active" elementu (ni偶ej znajdziesz przyk艂ad z聽buttonem). Albo animacja zmieniaj膮ca stan podczas konkretnego stanu formularza (przyk艂ad). Robi wra偶enie.

Narz臋dzie wydaje si臋 na pierwszy rzut oka tak rozbudowane i skomplikowane, 偶e聽a偶 strach w艂膮cza膰. Ale nie ma czego. Pr贸bowa艂em i nie jest 藕le. W po艂膮czeniu z聽wieloma tutorialami i plikami od spo艂eczno艣ci - jest ok. I b臋dziemy w聽stanie stworzy膰 swoj膮聽pierwsz膮 animacj臋 bez problem贸w.

Oblukaj np. to: rive.app/community/3703-7734-fire-button/ 馃敟 Mo偶emy wystartowa膰 z tych plik贸w community i zobaczy膰 jak one s膮 zrobione. Lub dostosowa膰 pod siebie (w tym przypadku sprawd藕 koniecznie licencj臋).

Rive chwali si臋 te偶, 偶e ich pliki z animacjami s膮 mniejsze i mniej obci膮偶aj膮 urz膮dzenie u偶ytkownika:

Rive vs Lottie

Spr贸buj! 馃槈 聽
Ciekawe to! Na pewno zrobi na Tobie wra偶enie interakcja na przycisku "Get聽Started"聽馃槄

A tutaj przyk艂ady zastosowa艅: rive.app/use-cases

Rive Use Cases
Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics for your products, apps, sites, and games.

To wszystko na dzi艣!
Czas zacz膮膰 weekend! 馃嵒

鉂わ笍
Pom贸偶 swoim znajomym i ziomkom z pracy. Je艣li podoba Ci si臋 content, jaki wysy艂amy w 馃帹 uxowym, to jest du偶a szansa, 偶e im te偶 si臋 spodoba. Pode艣lij im link do ostatnich wysy艂ek. I niech do nas do艂膮czaj膮!

Pozdrawiam i do nast臋pnego! 馃憢
...w przysz艂y pi膮tek!

Miko艂aj Wa艣kowski
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.