🎨 uxowy.dev #27

Mikołaj Waśkowski -

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

UX | źródło

🤔 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’s 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?

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