Podstawy projektowania: budowanie marki i witryny

Jeśli jesteś projektantem, prawdopodobnie teraz się wyłączysz, ale jeśli nie, to trzymaj się przejażdżki i dowiedz się wszystkiego o podstawach projektowania.

Design to nie tylko upiększanie rzeczy. Tak naprawdę chodzi o manipulowanie i nauczenie użytkownika, jak korzystać z Twojej witryny. Rolą projektanta jest wytyczenie drogi, którą użytkownik powinien podążać, aby mógł zaspokoić swoje potrzeby i wszyscy byli zadowoleni.

Często użytkownik nawet tego nie zauważa. Dzieje się tak, ponieważ projektowanie jest zgodne z zestawem zasad, których nauczyliśmy się w naturalny sposób odwiedzając setki stron internetowych w naszym życiu.

Kompozycja

Wszystko, co widzisz na stronie, jest tam z jakiegoś powodu, a dobry projekt będzie przestrzegał zbioru zasad określanych jako zasady projektowania Gestalt .

Ludzkie mózgi są cudowne, ponieważ mogą wypełnić luki w obrazie bez konieczności świadomego myślenia o tym. Jeśli kiedykolwiek widziałeś twarz w nieożywionym przedmiocie, to twój mózg właśnie to robi.

Zasady Gestalt opierają się zasadniczo na tym, jak działają nasze mózgi. W trakcie dnia Twój mózg gorączkowo próbuje uprościć i uporządkować serię złożonych obrazów w każdej sekundzie – a Ty po prostu popijasz kawę!

Jesteśmy stworzeni, aby szukać wzorów i struktur we wszystkim, na co patrzymy, podświadomie organizując wszystko w zorganizowany system w naszych umysłach. Projektanci następnie wykorzystują tę wiedzę do projektowania dla podświadomości, stosując następujące zasady:

Postać/ziemi

Figure/ground wykorzystuje koncepcję negatywnej przestrzeni i kontrastu. Mózg podzieli elementy na to, co uważa za na pierwszym planie i na tło. Zabierze jedną część obrazu i przypisze jej rolę „punktu centralnego” i zobaczy większy obszar obrazu jako tło, na którym znajduje się postać.

Jest to często widoczne w złudzeniach optycznych, ale można je zastosować do logo i stron internetowych. Na przykład logo FedEx wykorzystuje negatywną przestrzeń w logo, aby stworzyć iluzję ukrytej w nim strzałki.

Ujemna przestrzeń między „E” i „x” sprawia, że ​​wydaje się, że jest tam strzałka.

Bliskość

Ta zasada skupia się na idei, że mózg próbuje grupować rzeczy razem. Obiekty znajdujące się blisko siebie wydają się być częścią rodziny. Nawet jeśli kształty są identyczne, ich położenie powoduje, że użytkownik zakłada, że ​​elementy są częścią grupy.

Mimo że kolor, kształt i rozmiar są takie same, nasze mózgi mówią nam, że są to trzy oddzielne grupy:

Jednolita łączność

To jeden z kluczowych sposobów, w jaki projektanci „uczą” użytkownika korzystania z serwisu. Można to zrobić za pomocą koloru, rozmiaru i kształtu. Można bezpiecznie założyć, że informacje podane np. w kółkach mają podobny charakter, a informacje podane np. w kwadracikach mają inny charakter niż kółka.

Kontynuacja

Kontynuacja lub wyrównanie opiera się na założeniu, że ludzkie oko będzie podążać najprostszą ścieżką na stronie. Dlatego wszystkie ważne informacje powinny znajdować się w tej linii, ponieważ jest to pierwsze miejsce, w którym użytkownik będzie szukał.

Można to zrobić bardzo subtelnie, ponieważ linie kierują oko widza za pomocą dosłownych linii lub kształtów, które naturalnie układają się w linię. Widać to zazwyczaj na schematach blokowych i infografikach, ale także w witrynach eCommerce na poziomych suwakach pokazujących powiązane produkty.

Siatki stanowią dużą część tego wyrównania. Wywodząc się z idei prostoty, ruch artystyczny Bauhausu, wywodzący się z Niemiec na początku XX wieku, zapoczątkował koncepcję siatek.

Kolor

Kolor jest oczywiście ważny dla rozpoznawalności marki. Gdy tylko zobaczymy jasne złote łuki McDonalda na czerwonym tle, wiemy, co to jest. Te kolory nie zostały jednak wybrane losowo, kryje się za tym trochę nauki.

Na przykład McDonald's wybrał czerwień i żółć, ponieważ są to ciepłe kolory, które zwiększają tętno, a tym samym sprawiają, że stajesz się bardziej głodny i bardziej skłonny do kupowania ich produktów spożywczych.

Kolor to dużo emocji. Musisz pomyśleć o tym, kim są Twoi odbiorcy i z jakimi emocjami chcesz kojarzyć swoją markę.

Żółty

Powszechnie kojarzony ze szczęściem i pewnością siebie. Jego ciepłe kolory sprawiają, że nadaje się do stosowania w przemyśle spożywczym, ponieważ może zwiększać apetyt. Należy jednak wziąć pod uwagę czynniki związane z wiekiem. Żółty może sprawić, że dzieci będą bardziej skłonne do płaczu, ale nastolatki i młodzi dorośli czują się bardziej optymistycznie w związku z żółtym kolorem. Zmienia się to ponownie, gdy docierasz do starszej grupy demograficznej, która następnie kojarzy żółty ze strachem.

niebieski

Często używane w środowisku medycznym i technologii. Ma spokojniejszą, spokojną jakość i może wyglądać bardziej profesjonalnie. Ma również odwrotny wpływ na apetyt i bardziej go tłumi.

Purpurowy

Fioletowy kojarzy się z bogactwem, władzą i sukcesem. Wynika to z faktu, że królowie nosili fiolet jako oznakę bogactwa, ponieważ był to jeden z najtrudniejszych pigmentów do barwienia tkanin – trzeba było być bardzo bogatym, aby uzyskać odzież w tym kolorze. To przeniosło się do naszej podświadomości i daje fioletowi te same skojarzenia, co setki lat temu.

Różowy

Różowy jest znany ze swoich właściwości uspokajających. Jego efekty są tak silne, że kolory są używane w więzieniach, aby początkowo uspokoić więźniów. Ma wtedy również bardziej stereotypowe skojarzenia, takie jak miłość i romans.

Pomarańczowy

Podobnie jak żółty, ponieważ jest ciepłym kolorem, pomarańczowy przekazuje emocje entuzjazmu i podniecenia. Może być używany jako łagodniejsza wersja żółtego, ponieważ jest bardziej przystępny i przyjazny. Jego jasne kolory oznaczają również, że można go używać jako znaków zwracających uwagę lub ostrzegających, nie będąc tak ostrym jak np. czerwony.

Zbierając to razem

To dopiero wstęp do projektowania. Jak widać, za czymś, co na pierwszy rzut oka może wydawać się stosunkowo proste, może kryć się wiele elementów i wiele przemyśleń. Ale każda marka i strona internetowa są zasadniczo tworzone poprzez połączenie niektórych z tych zasad, aby stworzyć marki i witryny, które nauczysz się rozpoznawać natychmiast.

Jeśli chcesz dowiedzieć się więcej o projektowaniu, skontaktuj się z jednym z naszych twórców.