Gotowe zasoby dla Product Designera. Od ikon po animacje.

Projektuj mądrzej, nie ciężej, czyli gotowe zasoby dla projektantów.

W poprzednim artykule, o narzędziach w UX, które warto znać w 2019 (link tutaj), poznaliście programy najczęściej wykorzystywane w zawodzie Product Designera. Artykuł spotkał się z pozytywnym odzewem, dlatego tym razem zebrałem przydatne strony internetowe z gotowymi zasobami i inspiracjami, które przyspieszają cały proces tworzenia produktów internetowych.

Co znajdziesz w tym artykule?

W tym artykule ograniczam się do tych banków zasobów, które ściśle łączą się z projektowaniem (od makiet Low-Fi do ostatecznej grafiki). W artykule nie opisuje wtyczek (plug-inów) do programów takich jak Sketch, Figma i Adobe XD — to temat na oddzielny artykuł (dajcie znać w komentarzach, czy chcielibyście przeczytać takie zestawienie).

Banki zdjęć
Ikony i ilustracje
Animacje
Tekst
Palety kolorów

Zdjęcia

Sporo projektów, nad którymi pracowałem, nie posiadało swoich „własnych” zdjęć (dotyczy to zwłaszcza stron, które nie sprzedają produktów, a usługi). Na szczęście obecnie w internecie znaleźć można miliony płatnych, a nawet darmowych zdjęć wysokiej jakości. Oczywiście przy wykorzystaniu tego typu zasobów zawsze zwróćcie uwagę na prawa do ich wykorzystania.

Pexels (darmowy)

Strona Pexels jest jednym z najczęściej wykorzystywanych, darmowych banków zdjęć i plików wideo. Zdjęcia w serwisie możecie edytować oraz wrzucać na swoją stronę także w celach komercyjnych (https://www.pexels.com/pl-pl/photo-license/). Sam często korzystałem z zasobów tej strony. Minusem Pexels jest popularność zdjęć w nich zamieszczonych – stockowe zdjęcia dosyć często przewijają się na różnych stronach i w artykułach co sprawia że nasze treści mogą wydawać się mniej oryginalen. Na duży plus zasługuje dobra jakość zdjęć i ich estetyka. Na stronie raczej się nie spotkałem z amatorskimi zdjęciami co ułatwia wyszukiwanie tego jedynego ujęcia 🙂

Adres strony: https://www.pexels.com/pl-pl/

iStock (płatny)

Na iStock poza zdjęciami znaleźć można także ilustracje, pliki wideo oraz dźwięki. Ponieważ baza zdjęć cały czas „puchnie” a cena jest stosunkowo wysoka — zdjęcia z tej strony są rzadziej spotykane w internecie. Minusem jest dosyć spora ilość zdjęć słabej jakości oraz ujęć typowo biznesowych (np. stockowe uśmiechy zespołów), na których miny modeli mogą wydawać się sztuczne. Mimo wszystko iStock jest najpopularniejszy nie bez powodu, większośc zdjęć na strony internetowe w projektach komercyjnych biorę właśnie stąd.

Adres strony: https://www.istockphoto.com/pl

Shutterstock (Płatny)

To, co wyróżnia Shutterstock od innych banków zdjęć, to dobrze przygotowane i rozbudowane filtry, które umożliwiają m.in. szukanie zdjęć o podobnej kolorystyce, orientacji (pozioma/pionowa) a nawet według rodzaju aktorów (płci, wieku i etniczności). Brzmi skomplikowanie, ale strona dosyć dobrze sobie z tym poradziła. Filtry znacznie ułatwiają pracę jeśli mamy konkretne wymagania co do ujęcia. Oczywiście strona oferuję także dobrej jakości zdjęcia za przyzwoitą cenę.

Adres strony: https://www.shutterstock.com/pl/

Ikony i ilustracje

Rysowanie ikon od podstaw ciężka praca, która czasami zajmuje sporą część czasu przeznaczonego na projektowanie. Biblioteki jak te poniżej, potrafią zaoszczędzić mnóstwo czasu, zwłaszcza jeśli zdamy sobie sprawę z ich ogromu i różnorodności (poniższe bazy mają łącznie ponad 2 mln ikon!). Strony zamieszczone poniżej umożliwiają pobieranie ikon w formatach SVG, PSD, PNG, EPS oraz Icon Font.

Flaticon / Freepik (darmowe i płatne)

Flaticon to jedna z moich ulubionych stron z ikonami, sama strona jest zasobem znanej marki Freepik. Paczki ikon są tu dobrze uporządkowane według stylu oraz stale dodawane zarówno przez prywatnych autorów, jak również twórców witryny (Freepik). Strona umożliwia pobranie zawartości i wykorzystanie jej do celów prywatnych — w przypadku komercyjnych projektów należy oznaczyć autora ikon lub wykupić pełną licencję.

Adres strony: https://www.flaticon.com/

Iconfinder (darmowe i płatne)

Na stronie Iconfinder znajdziemy paczki ikon premium (płatnych) oraz darmowych (niektóre także do komercyjnego użytku). Strona posiada jedną z największych baz ikon, na jakie się natknąłem. Polecam jeśli poszukujemy darmowych ikon i nie mamy za dużo czasu.

Adres strony: https://www.iconfinder.com/

Icon8 (darmowe i płatne)

To co wyróżnia Icon8 od wcześniej wymienionych stron to bogate ilustracje (największa baza ilustracji, jaką widziałem). Z zasobów na stronie możemy korzystać darmowo pod warunkiem, że umieścimy informację, skąd została pobrana dana ikona/ilustracja. Icon8 dysponuje także płatną subskrypcją umożliwiającą korzystanie z ikon bez oznaczania ich autora. Polecam zwłaszcza do ilustracji (znaleźć je można na tej stronie https://icons8.com/ouch).

Adres strony: https://icons8.com/

Czcionki i treści

Tekst potrafi być jednym z najbardziej zaniedbanych aspektów w projekcie. Wydawać by się mogło, że dobór odpowiednich fontów zajmuje ułamki sekund z drugiej strony jednak odpowiednie dobranie wyglądu tekstu może trwać godzinami czy dniami. Poniższe programy mają za zadanie pomóc w podjęciu szybkiej i przemyślanej decyzji o rozmiarach oraz krojach pisma jakich użyjemy w naszych projektach.

Fontpair

FontPair to strona podpowiadająca wizualnie pasujące do siebie dwa fonty. Na stronie możemy wybrać jeden z dostępnych fontów lub przeglądać najpopularniejsze “pary”. Narzędzie daje też możliwość szukania według krojów pisma np. połączenie szeryfowych z bezszeryfowymi.

Adres strony: https://fontpair.co/

Modular scale

Modular scale pozwala nam dobrać odpowiednie proporcje fontów na naszej stronie. Jak to działa? Wystarczy wybrać jedną z siedemnastu różnych skal (m.in. „złota proporcja”) a program sam przeliczy odpowiednie wartości w pikselach lub firetach (em). Skala sprawia, że programiści mają jasne wytyczne, jakie wielkości fontów mogą wystąpić w projekcie. Minusem narzędzia jest to, iż nie ma możliwości zmiany fontu, więc zanim zaimplementujemy skalę proponuje, najpierw sprawdzić proponowane wielkości na docelowym kroju pisma.

Adres strony: https://www.modularscale.com/

Jasnopis

Jasnopis jest szczególnie przydatny, gdy chcemy pisać w sposób prosty i zrozumiały. Działanie programu jest proste, wklejamy tekst lub jego fragment, a następnie program analizuje poziom jego skomplikowania w skali od 1 do 7, gdzie 1 to najlepsza ocena (“tekst dziecinnie łatwy”) a 7 to ocena “najgorsza” (“tekst wybitnie skomplikowany”). Pamiętajcie, tylko aby nie przejmować się, gdy program wystawi wam ocenę 4 lub 5 – to wciąż przyzwoita ocena.

Adres strony: https://jasnopis.pl/#

Gotowe animacje

Czasami stworzenie animacji w programach typu Principle czy AfterEffect może zająć sporo czasu zarówno animatorowi, jak również programiście. Nie musimy, na szczęście, w takim wypadku rezygnować z animacji, jeśli chcemy, aby nasz projekt posiadał animacje pomimo niskiego budżetu, to warto skorzystać z dostępnych bibliotek. W tym zestawieniu wypisałem tylko te strony, które dają możliwość podejrzenia kodu animacji co przyśpiesza pracę także po stronie programisty.

Codepen

Portal stworzony przez programistów, którzy lubią się dzielić swoją wiedzą. Na stronie znajdziemy skodowane przykłady ciekawych animacji a także fragmenty całych mechanizmów (np. ekran logowania z animacją). Z roku na rok przybywa kolejnych prac, a wszystkie stworzone są w kodzie. Jeśli jakaś animacja się nam spodoba, to wystarczy podlinkować ją od razu programiście, który będzie mógł sprawdzić jak działa a następnie zaimplementować we własnym projekcie podobną. Niestety aby samemu zrobić animację musimy znać chociaż podstawy programowania.

Adres strony: https://codepen.io//

LottieFiles

LottieFiles to repozytorium dla animacji tworzonych w programie Lottie, który pracuje na JSON. Nie musimy jednak znać tego języka programowania, aby skorzystać z biblioteki. Animacji jest naprawdę dużo, a wszystkie możemy pobierać za darmo po zalogowaniu. Używanie animacji w celach komercyjnych jest dozwolone pod warunkiem, oznaczenia ich autora. Niewątpliwym plusem jest to, że programiści mogą podejrzeć kod animacji.

Adres strony: https://lottiefiles.com/recent

Palety kolorów

Google Arts & Culture

To narzędzie od Google pozwoli nam dobrać paletę kolorów na podstawie dzieł sztuki. Jedno z bardziej inspirujących narzędzi, z jakich miałem okazję korzystać. Strona pomaga nam odnaleźć wymarzoną paletę kolorów a przy okazji inspiruje nas obrazami i rzeźbami znanych artystów – czego chcieć więcej! Na stronie mamy dwie możliwości wyłonienia naszej palety:
1. Na podstawie przesłanego przez nas obrazu
2. Możemy dać się zaskoczyć Google (przycisk “Surprise me”) i poznać nowe ciekawe dzieła sztuki.

Adres strony: https://artsexperiments.withgoogle.com/artpalette/colors

Color tool – Material Design

Color tool z Material Design od Google, pozwala sprawdzić wybrane przez nas kolory na przykładowych makietach w stylu material design. Dzięki temu narzędziu możemy w szybki sposób sprawdzić, czy nasze kolory spełniają wymogi dostępności WCAG oraz, czy wybrane kolory pasują do siebie estetycznie. Minusem jest tu ograniczenie do elementów znanych z material design oraz brak możliwości edycji kolorowanej makiety (Google daje nam 6 gotowych ekranów do pokolorowania).

Adres strony: https://material.io/resources/color/#!/

Gradient Hunt

Gradient Hunt to strona zawierająca propozycji gradientów innych użytkowników. Ponieważ każdy może dodawać nowe propozycje, strona zawiera obecnie setki prac. Gradient Hunt daje też możliwość wyboru typu gradientu np. kolory rozłożone liniowo, kołowo itd. Po wybraniu gradientu, mamy możliwość pobrania go w formacie PNG lub skopiowania kodu gotowego do użycia na naszej stronie (z kodu możemy wyciągnąć wartość RGB-a).

Adres strony: https://material.io/resources/color/#!/

Color – Cloudflare

Color od cloudflare to narzędzie umożliwiające nam wybranie gotowej palety kolorów spełniającej wymogi WCAG. Wchodząc na stronę od razu otrzymujemy propozycję wraz z prezentacją przykładowego UI i wartością kontrastu. Możemy także wybrać własne kolory, aby np. sprawdzić, czy spełniają wymogi kontrastu lub zobaczyć czy estetycznie do siebie pasują.

Adres strony: https://cloudflare.design/color/

Podsumowanie

Dzięki bibliotekom takim jak te powyżej, jesteśmy w stanie tworzyć produkty lepsze i szybciej niż gdybyśmy wszystko tworzyli samodzielnie. Nie bój się inspirować pracami innych a czasami wprost korzystać z darmowych bibliotek. W tym artykule opisałem najciekawsze i najbardziej praktyczne strony, ale jeśli znasz coś co warto dodać w tym zestawieniuć – napisz komentarz, chętnie nauczę się czegoś nowego!