Projektowanie UI: Typografia

0:00Czym jest przycisk i z czego się składa.

0:02Przycisk jest jednym z podstawowych elementów interfejsu.

0:05Przyciski pozwalają nam na poruszanie się między zakładkami na stronie, pozwalają

0:09przewijać galerie zdjęć, wgrać jakieś pliki lub wysłać formularz.

0:13Mogą mieć różne zadania i w obrębie

0:15jednego interfejsu może okazać się, że będzie potrzeba zaprojektować kilka ich

0:20rodzajów, które wizualnie będą różnić się od siebie.

0:22Mogą funkcjonować więc jako oddzielne

0:24elementy albo być częścią bardziej złożonych komponentów.

0:27Zadaniem projektanta jest zaprojektowanie

0:29przycisku tak, by był zrozumiały dla użytkownika.

0:32Jak sprawdzić, czy jest to oczywiście testując?

0:35No dobra, ale przejdźmy do tego, z czego taki przycisk w ogóle się składa.

0:39Jeżeli będziemy przechodzić do

0:41projektowania przycisków, musimy pamiętać o takich sześciu podstawowych elementach,

0:45czyli kształcie, obrysie typografii, ikonach, cieniach i marginesach.

0:51Zacznijmy od kształtu.

0:53Przede wszystkim mamy jakąś figurę, która definiuje nam kształt przycisku.

0:57Najczęściej jest to prostokąt, np.

0:59z mniej lub bardziej zaokrąglonymi rogami.

1:02Czasami koło

1:03w UI mówimy również o linkach tekstowych, które nie mają żadnego tła

1:07ale projektując je również musimy brać pod uwagę jakiś obszar, który będzie klikalny

1:13ale o tym powiem w dalszej części warsztatu.

1:16Mamy więc tło.

1:17To tło może mieć wypełnienie, jeden kolor lub gradient.

1:21Zdarzają się też przyciski z tłem półprzezroczystym lub wręcz bez tła,

1:26a jego obszar definiowany jest wtedy przez obrys.

1:29OK, ale zatrzymajmy się na chwilę przy gradient'ach.

1:32W zależności od tego, z jakiego narzędzia

1:34będziecie korzystać do projektowania UI będziecie mieć więcej lub mniej opcji

1:38związanych ze sterowaniem kolorem w poszczególnych elementach.

1:43Jeżeli chodzi o gradien'ty, jest ich kilka rodzajów.

1:46Takim najpopularniejszym jest gradient liniowy czy też linearny,

1:50Czyli jak popatrzymy sobie na te przejścia między kolorami w tych przyciskach, które

1:55tutaj widzicie, to możecie postawić taką kreskę między jednym kolorem a drugim,

2:00która prowadzi od jednego koloru do drugiego.

2:03I to właśnie sugeruje nam wtedy, że mamy do czynienia z gradient'em linearnym.

2:07W niektórych programach możecie również

2:11sterować położeniem tej linii i tworzyć w ten sposób np.

2:16bardzo popularny gradient pionowy.

2:21Chyba najczęściej spotykany gradient w projektach UI.

2:27Ale możecie również stworzyć właśnie takie skośne

2:32gradient'y, które ja tutaj na potrzeby tego warsztatu sobie wcześniej stworzyłam.

2:37I oczywiście można również zrobić gradient poziomy.

2:45I to też będzie dosyć popularne rozwiązanie.

2:49Gradient'y to takie efekty, które w bardzo

2:51prosty sposób mogą uatrakcyjnić nasz interfejs, ale mogą również sprawić, że

2:56tylko temu interfejsowi wizualnie zaszkodzimy.

3:00Jeżeli nie czujecie się jeszcze zbyt

3:01pewnie w połączeniach kolorystycznych, to przede wszystkim zacznijcie od prostych

3:05gradient'ów, które składają się tylko z dwóch barw.

3:08Oczywiście gradient'y można tworzyć z większej ilości barw, ale im więcej barw

3:13będziemy dodawać, tym trudniejsze będzie ich odpowiednie połączenie.

3:19Jeżeli dopiero zaczynacie swoją przygodę z projektowaniem i UI, możecie zaczynać od

3:22gradient'ów, które będą wręcz nie zauważalne na pierwszy rzut oka.

3:27W przykładzie, który tutaj Wam podałam, te gradient'y są dość zauważalne ze względu na

3:32duże różnice między barwami z których przechodzą.

3:36Jest błękit i ciemniejszy niebieski, jest

3:38też żółć i ciemny pomarańcz wchodzący w czerwień.

3:43Są też kolory

3:45takie jak niebieski wchodzący w zieleń, więc siłą rzeczy te różnice między

3:50poszczególnymi barwami widać dość wyraźnie.

3:53Ale możemy tworzyć gradient'y, które na pierwszy rzut oka w

3:56ogóle nie będą dla użytkowników zauważalne.

4:00OK.

4:00Zacznijmy od tego, żeby stworzyć sobie przycisk, który będzie nie tam

4:06chciałam, żebyś wylądował,

4:08który będzie gładki, żeby była widoczna ta różnica

4:13i ten drugi przycisk, którego gradient nie będzie tak widoczne jak w tym przypadku.

4:19Więc zamienimy ten żółty na barwę bardziej

4:22zbliżoną do tej wyjściowej i damy trochę ciemniejsze, bardziej intensywne odcień.

4:32I w ten sposób mamy już gradient, który

4:35nie jest aż tak widoczny, ale wciąż daje ten efekt uwypuklenia w przycisku.

4:40No i tutaj oczywiście możemy sobie sterować tą krzywą gradientu i nadać np.

4:49pionową.

4:51A pionowe przejście między barwami.

4:54I w ten sposób otrzymujemy przycisk, który

4:56aż tak bardzo nie rzuca się w oczy jak te, które są niżej, ale wciąż wygląda na

5:02bardziej trójwymiarowy. Styl naszego obrysu,

5:05grubość naszego obrysu powinniśmy

5:06dopasowywać do kilku zmiennych, które pojawiają się w naszych przyciskach.

5:11Po pierwsze wielkości.

5:12Po drugie wybranego kroju pisma.

5:14Zwróćcie uwagę, czy ten krój pisma, który wykorzystujecie jest grubszy czy cieńszy,

5:19ale również grubości i budowę ikonek, które stosujecie w przyciskach.

5:24Bo wszystkie te rzeczy ostatecznie będą składać się na jeden element i dobrze

5:28byłoby, żeby wyglądał w miarę, żeby one między sobą wyglądały w miarę spójnie.

5:34Oczywiście czasami możemy pokusić się o

5:36próbę skalowania jednej z jednego z elementów, jak np.

5:41zrobienia bardzo, bardzo grubego obrysu i

5:43wtedy te grube obrysy możemy również stosować w innych elementach naszego

5:47interfejsu, ale raczej dążymy do tego, żeby uspułniać

5:52style graficzne między sobą, żeby to faktycznie wyglądało nie jak przypadkowy

5:57zlepek jakichś elementów, tylko przemyślana decyzja projektowa.

6:02I z takiego jednego przycisku to właściwie

6:05to co widzicie to jest jeden przycisk, który został odrobinę przerabiany pod

6:10kątem właśnie obrysu czy też wypełnienia z tym obrysem.

6:13I z takiego jednego kształtu możecie

6:15zrobić naprawdę bardzo dużo różnych stylów, więc dobrze zastanówcie się w jaki

6:20sposób chcecie te obrysy wykorzystać i jaki właściwie mają cel w tym przycisku.

6:27Można stosować również obrysy półprzezroczyste.

6:30To może całkiem nieźle wyglądać w

6:32przypadku przycisków, które będą znajdować się na jakichś tłach graficznych.

6:36I gdzie te zdjęcia czy obrazki będą spod

6:38tych lekko przezroczystych obrysu wystawać.

6:43Oczywiście możecie nadawać również obrysom,

6:45gradient'y nie w każdym programie do projektowania UI będzie to możliwe,

6:51ale akurat Figma jest jednym z takich z takich programów, które

6:56na to pozwalają, więc tutaj również możecie te gradient'owe obrysy nadawać.

7:02Ja nie jestem ich największą fanką, więc pozwolę sobie z nich zrezygnować.

7:07Dobra, przejdźmy do kolejnego elementu naszego przycisku.