🎨 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ś

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:

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):

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

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.

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

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?

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:

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!