🎨 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

UI | źródło
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