🎨 uxowy.dev #33
Mam nadzieję, że u Ciebie wszystko dobrze i - bez zbędnego przedłużania - możemy przejść do treści dzisiejszego wydania newslettera 🔥
A co dzisiaj?
- Cards - jak zrobić je dobrze?
- Web component <Tabs> tworzony od zera - o czym warto pamiętać?
- Nagradzaj usera - odpal np. confetti na koniec procesu
Gotowy/a?
3... 2... 1... START!
Cards - jak zrobić je dobrze?
![](https://uxowy.dev/content/images/2022/07/Ultimate-guide-for-designing-UI-cards---by-Vikalp-Kaushik---UX-Planet-2022-07-07-15-04-45.png)
Zacznijmy od szybkiego wstępu.
Co to jest i co zawiera Card?
![](https://uxowy.dev/content/images/2022/07/image.png)
- Zdjęcie / grafika / ilustracja - coś, co przyciąga wzrok
- Tytuł / nazwa przedmiotu / artykułu itd.
- Krótki opis
- CTA (call to action)
- Podtytuł
- Ikony
A teraz czas na szybkie tipy:
1. Przykuj uwagę - użyj właściwej grafiki / zdjęcia
![](https://uxowy.dev/content/images/2022/07/image-1.png)
2. Pamiętaj o wizualnej hierarchii
![](https://uxowy.dev/content/images/2022/07/image-2.png)
3. Mniej znaczy... lepiej
![](https://uxowy.dev/content/images/2022/07/image-3.png)
4. Unikaj linków w treści
![](https://uxowy.dev/content/images/2022/07/image-4.png)
5. Odróżnij od siebie akcje (CTA)
![](https://uxowy.dev/content/images/2022/07/image-5.png)
6. Nie używaj linii do dzielenia contentu
![](https://uxowy.dev/content/images/2022/07/image-6.png)
7. (Trend) Użyj zaokrąglonych rogów
![](https://uxowy.dev/content/images/2022/07/image-7.png)
8. (Trend) Dodaj lekki cień lub border
![](https://uxowy.dev/content/images/2022/07/image-8.png)
Przykłady dobrych Cardów:
![](https://uxowy.dev/content/images/2022/07/image-9.png)
![](https://uxowy.dev/content/images/2022/07/image-10.png)
![](https://uxowy.dev/content/images/2022/07/image-11.png)
![](https://uxowy.dev/content/images/2022/07/image-12.png)
![](https://uxowy.dev/content/images/2022/07/image-13.png)
Web component <Tabs> tworzony od zera - o czym warto pamiętać?
![](https://uxowy.dev/content/images/2022/07/Building-tabs-in-Web-Components---David-Darnes-2022-07-07-15-12-21.png)
Jeśli musiałeś kiedyś robić komponenty tego typu od zera, to wiesz, że to wcale nie jest takie proste...
A jeśli myślisz, że jest, to tym bardziej zerknij do artykułu poniżej 😛
(nie umieszczam tutaj całego opisu, bo trzeba wejść w szczegóły i zobaczyć kody źródłowe, animacje itd.)
Zobacz, o co warto zadbać tworząc web component typu tabs:
https://darn.es/building-tabs-in-web-components/
Nagradzaj usera - odpal confetti na koniec procesu
![](https://uxowy.dev/content/images/2022/07/Confetti-Effect-using-html-css-and-javascript---YouTube-2022-07-07-15-18-50.png)
Chyba wszyscy lubimy być nagradzani.
I lubimy, jak ktoś cieszy się z osiągnięcia naszego celu.
Dajmy userowi jakiś instant gratification w naszej aplikacji. Myślę, że dobrym pomysłem jest np. dodanie confetti na ekranie kończącym jakiś dłuży proces / osiągnięcie celu.
Z tego co pamiętam, już całkiem dobrze rozkręcona platforma EasyCart ma tego rodzaju confetti na stronie potwierdzającej kupno produktu/usługi w koszyku.
Tutaj link do skrypciku, dzięki któremu możemy dodać taki efekt konfetti na naszą stronę w 5 minut:
- film na yt: https://www.youtube.com/watch?v=quSR_ZrVz6Y
- wpis na blogu: https://dev.to/official_fire/creating-a-confetti-effect-in-5-minutes-16h3
To wszystko, co przygotowałem na dziś.
Memik na zakończenie:
![](https://uxowy.dev/content/images/2022/07/image-14.png)
Pomóż innym wiedzieć więcej
Znasz kogoś, kto powinien dołączyć do 🎨 uxowy.dev? 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 naszej społeczności programistów, którzy chcą robić aplikacje z lepszym UI/UX! 🚀
Pozdrawiam i do następnego! 👋
...w przyszły piątek!
Mikołaj Waśkowski
Jeśli jeszcze nie ma Cię na liście 🤔
Wysyłamy jeden email tygodniowo, w każdy piątek, o godz. 12:00.
Wartościowa wiedza o UI/UX dla developera może wylądować do Twojej skrzynki.