🎨 uxowy.dev #14

Ale śniegu naje...  😂 ❄️️  Zaraz po sankach 🛷 i ulepieniu bałwana ⛄️ (a kto komu zabroni dobrze się bawić...) dawaj pod koc z ciepłym kało-kało i obczaj, co przygotowaliśmy dla Ciebie w kolejnym wydaniu newslettera:

  1. Design Checklist - sprawdź, czy o czymś nie zapomniałeś...
  2. Zagadka 🧐
  3. Na pewno znasz Google Fonts i Material Icons. Poznaj Fonts Knowledge - jeszcze cieplutka wiedza o fontach od Google
  4. Kogo warto obserwować 👀
  5. Figma Freebies - nie musisz zaczynać od zera

Siedzisz wygodnie? Startujemy!


Design Checklist - sprawdź, czy o czymś nie zapomniałeś

UI, UX | źródło
checklist.design

To niesamowicie przydatne źródło, które może być jedyną kontrolną listą poczas projektowania nowej aplikacji lub strony www.

Zobacz, co obejmuje checklista:

Kategorie i checklisty do sprawdzenia na checklist.design

Dla każdego tematu znajdziesz:

  • wskazówki UI/UX, o których należy pamiętać tworząc dany element lub flow
  • artykuły bardziej wyczerpujące dany temat
  • inspiracje i przykłady ze znakomitym UI/UX

Wszystko to w formie "checklisty", którą możemy przy tworzeniu następnej aplikacji lub www szybko przelecieć, pozaznaczać co zrobilismy i być pewnym, że niczego nie przegapiliśmy.

Przykład checklisty dla strony logowania (pierwsze 5 punktów):

Checklista dla "Login page".

Polecamy, BARDZO!
checklist.design →


Chwila na zagadkę 🧐

Co tutaj jest nie tak?

Odpowiedź znajdziesz na końcu maila.


Poznaj Fonts Knowledge - jeszcze cieplutka wiedza o fontach od Google

UI, UX | źródło

Na pewno milion razy odwiedziłeś już stronę Google Fonts, aby zaciągnąć fonta do aplikacji. Obok Google Fonts i Material Icons, które też na pewno przeszukiwałeś nie raz, dodano nową pozycję w menu - Knowledge.

Zespół Google zebrał najbardziej wartościową wiedzę ze świata typografii i razem z ekspertami z tej dziedziny wypuścił serię artykułów, dzięki którym za darmo możemy zglębiać jej tajniki.

Kategorie wpisów na Fonts Knowledge.

Warto zacząć od artykułu "Why care about typography?", który wyjaśni nam w czym rzecz i dowiemy się, czy chcemy wgłębiać się w ten temat, czy nie 🙂

Link do strony głównej: fonts.google.com/knowledge.


Kogo warto obserwować?

devaslife - Takuya Matsuyama

Indie app developer, który robi niesamowite aplikacje i niesamowity content. Solo-develoepr aplikacji Inkdrop. Nie ma co dużo pisać, zobacz ostatnio dodane wideo "How to build a smoothly animated ToDo app":

YouTube: devaslife
Web: https://www.craftz.dog/
Twitter: @inkdrop_app


Figma Freebies - nie musisz zaczynać od zera

Resources | źródło
Lista freebies do Figmy z freebiefy.com

Nie jesteś designerem i na design masz dość mocno ograniczony czas. Dlatego, warto posiłkować się wszelkiego rodzaju źródłami, które przyspieszą Ci ten proces.

Oto strona z listą "freebies" - darmowych ekranów, projektów aplikacji, design systemów, ikon, ilustracji ...i wiele więcej, które możesz zaciągnąć za darmo i zacząć swój projekt od mega boost'u.

Dashboard? Sklep online? Learning app? Crypto? Food delivery? Messaging? - to i wiele więcej znajdziesz na tej liście:

Wejdź i dodaj do zakładek:
freebiefy.com/figma-freebies


Zagadka - odpowiedź 👇

Co tutaj jest nie tak?

Zły UX 👆
Dobry UX 👆

Ważne: przyciski z samymi ikonami są dość problematyczne.
Szybkie tipy:

  • upewnij się, że ikona bardzo dobrze odzwierciedla akcję, którą wykonuje przycisk; nie ma nic gorszego niż konieczność kliknięcia przycisku, aby zobaczyć co on robi
  • dodaj tooltip, który wyjaśni, co robi ten przycisk (możesz dodać delay, żeby user, który już wie, co robi przycisk nie widział tego tooltipa za każdym razem)
  • używaj przycisków-ikon tylko dla oczywistych akcji, np.: dodaj, edytuj, usuń
  • zadbaj o accessability przycisku (aria)

To wszystko na dziś, dobrego weekendu ❄️

A tutaj memik:

Źródło

PS. Prześlij znajomym developerom link do ostatnich wysyłek newslettera: uxowy.dev/lista. Niech obczają co wysyłamy i dołączą do społeczności developerów, którzy tworzą aplikacje z lepszym UI/UX 🔥

Pozdrawiam i miłego dnia!