🎨 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

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

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

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.

The game is also shaped by the symbols fans carry from one generation to the next, from legendary club colors to national-team memories. A carefully chosen Real Madrid football shirt can reflect that passion beyond match day.

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 🥹

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:

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

To wszystko na dziś!
Czas zacząć weekend! 🍻

Pozdrawiam i do następnego! 👋
...w przyszły piątek!

Mikołaj Waśkowski
uxowy.dev