Jeśli chcesz przeczytać artykuły z innej kategorii, kliknij w wybrane przez siebie pole:

Jak zrobić stronę internetową?

Obierz zniżkę - 30%

w WebWave

Najnowsze artykuły:

Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To pierwszy wpis z cyklu Nauka webdesignu. Dziś zajmiemy się podstawami grafiki i projektowania. Miłej lektury!

Koniecznie przeczytaj inne artykuły z tej serii:

• Część 1. Podstawy projektowania graficznego - tu jesteś

• Część 2. Pojęcia, pomysły, podstawy UX

• Część 3. UX - badania, makiety, programy 

• Część 4. UX. Jak zrobić makietę? Budowa strony www. Wstęp do UI 

• Część 5. Tworzymy prototyp strony, czyli UI! 

• Część 6. Publikacja strony www i pozycjonowanie (SEO)

Podstawy graficzne

Aby tworzyć profesjonalne stron www konieczne jest opanowanie pewnych podstaw, z którymi mamy do czynienia nie tylko w tradycyjnych technikach plastycznych, ale także w grafice komputerowej. 

Kompozycja 

Do czego przyda nam się wiedza na temat kompozycji? Tworząc strony internetowe musimy pamiętać o tym, jak chcemy, aby były one odbierane. Każdy twór graficzny, którym jest również projekt strony www, to pewna kompozycja - kształtów, kolorów, elementów. W zależności od tego, w jaki sposób ułożymy je w projekcie, dadzą zróżnicowany efekt. 

Kompozycja otwarta i zamknięta

Kompozycja otwarta to taka, której elementy wychodzą poza obszar projektu. Pozostawia ona pewien element niedopowiedzenia. Większość stron internetowych, zamierzenie lub intuicyjnie, jest oparta na kompozycji otwartej, ponieważ kształty, obrazy i grafiki w tle strony, często wychodzą poza jej brzegi. 

Jest to dobre wyjście, zwłaszcza w czasach tworzenia stron responsywnych, czyli takich, które automatycznie dopasowują się do szerokości okna przeglądarki (ekranu komputera, czy wyświetlacza urządzenia mobilnego).

Kompozycja zamknięta jest przeciwieństwem otwartej - wszystkie składowe projektu znajdują się w całości w polu widzenia. Warto ją stosować w przypadku elementów, które nie są umieszczone w tle, takich jak układy tekstowe, czy ułożenie istotnych zdjęć i grafik. 

Kompozycja statyczna i dynamiczna

Kompozycja statyczna to taka, w której elementy są ułożone względem siebie równolegle w pionach lub poziomach. Jak sama nazwa wskazuje, ma na celu uzyskanie efektu statyczności, bezruchu. Jak można odnieść to do strony internetowej? 

Takie ułożenie elementów, z psychologicznego punktu widzenia, wywołuje u odbiorcy poczucie pewności, spokoju, ułożenia, stabilności. Zależnie od działalności, jaką ma reprezentować strona internetowa, a także od grupy docelowej, w pewnych przypadkach taki odbiór będzie pożądany - np. w przypadku strony biznesowej, wizytówki kancelarii prawnej, czy też przedstawienia oferty firmy budowlanej.

Kompozycja dynamiczna jest oparta na ułożeniu po skosie. Daje ona efekt ruchu, energii, działania - kojarzy się z młodością, kreatywnością czy też ze sportem. Dlatego sprawdzi się w przypadku klubu fitness, e-sklepu oferującego ubrania młodzieżowe, agencji kreatywnej, czy portfolio artysty, grafika, a nawet fotografa. Często też strony z dynamicznym układem elementów są odbierane jako nowoczesne. 

Kompozycja symetryczna i asymetryczna

Różnicy pomiędzy nimi raczej nie trzeba nikomu tłumaczyć. Kompozycja symetryczna to zastosowanie zbliżonego układu elementów lub podobnych proporcji względem osi symetrii, najczęściej linii znajdującej się na środku projektu. Będzie to np. tekst z grafiką po lewej strone strony i podobnie po prawej. Mogą być też ułożone na okręgu, którego środkiem symetrii jest punkt. 

Stosując ją na swojej stronie internetowej z pewnością uzyskamy efekt uporządkowania. W naturze to, co symetryczne, odbierane jest jako perfekcyjne, dlatego też zastosowanie tego rodzaju kompozycji znacznie ułatwia uzyskanie estetyki na stronie. 

W jakim wypadku lepiej zastosować kompozycję asymetryczną? Na przykład, jeśli zależy nam na tym, aby wyróżnić jakiś element, czyli ustawić dominantę (o czym w kolejnym akapicie). Dzięki asymetrii możemy łatwiej uzyskać ten efekt. Taka kompozycja jest odbierana w podobny sposób, jak dynamiczna - możemy uzyskać wrażenie nowoczesności, bardziej designerskiego podejścia. 

Podstawowe elementy w plastyce

Jest to temat, nad którym nie trzeba się wiele rozwodzić. Warto jednak mieć świadomość, że tak naprawdę każdy element strony internetowej to pewien kształt lub forma. Patrząc projektowo, musimy widzieć najprostsze elementy, czyli kształty. Dopiero później możemy zastanawiać się nad ubraniem ich w formę. 

Zawsze należy rozłożyć dany element na czynniki pierwsze - według zasady od ogółu do szczegółu. Oznacza to, że myśląc np. o projektowaniu siatki obrazów, najpierw wybierzemy kształt poszczególnych sekcji, np. prostokąt. Później możemy zastanowić się nad tym, w jaki sposób ułożyć te elementy, co chcemy w nich zawrzeć itp. Dopiero ostatnim etapem będzie dopracowanie formy (np. dodanie ramki, zaokrąglenie rogów). Do tak przygotowanej siatki możemy dołączyć zdjęcia. 

Istnieją również pojęcia takie jak kontrast, dominanta i hierarchia. Łączy je sposób, w jaki można każdy z tych efektów uzyskać - wyróżnienie, np. wielkością, kolorem itp. Kontrast zbudujemy np. zestawiając obiekt mały z dużym lub czarny z białym (o kontraście kolorystycznym nieco później). Dominantę ustalimy wyróżniając jeden obiekt, np. wielkością. Będzie to obiekt dominujący w projekcie. Jeśli chodzi o hierarchię, polega ona na ustaleniu ważności elementów. Należy zatem wyróżnić najważniejsze i nieco “przyćmić” te mniej ważne.

Kolor 

Oczywiście prawie nikt nie tworzy stron internetowych w czerni i bieli. Dlatego bardzo ważne jest, aby umiejętnie dobierać kolory na stronie. Z marketingowego punktu widzenia, istotna jest też psychologia barw, ponieważ one również mają wpływ na wrażenia odbiorcy - i to znaczący. 

Koło barw i kolory dopełniające 

Koło barw to graficzny model poglądowy, na którym znajdują się wszystkie kolory, w odpowiednim ułożeniu. Odpowiednim, czyli zgodnym z podziałem na barwy ciepłe i zimne oraz barwy dopełniające.

Barwy ciepłe i zimne

Barwy ciepłe to na kole barw kolory od czerwieni, przez pomarańcze i żółcie, po zieleń. Z kolei zimne to fiolety, błękity i pewne odcienie zieleni. Należy pamiętać, że podział ten jest mocno umowny i tak jak nad tym, że czerwienie, żółcie i pomarańcze są barwami ciepłymi nie ma co dyskutować, tak zielenie i fiolety mogą być właściwie zarówno ciepłe, jak i zimne, w zależności od odcienia. 

Jak ta wiedza może przydać się przy tworzeniu stron internetowych? Po pierwsze, kolory ciepłe w większości przypadków będą dobrze ze sobą współgrały - tak samo jest w przypadku tych zimnych. Jest to jedna z dróg, którą możemy się kierować wybierając paletę kolorystyczną na stronę. Kolejna dotyczyć będzie kontrastu.

Barwy dopełniające

Barwy dopełniające leżą naprzeciwko siebie na kole barw. Są zatem do siebie kontrastowe. Użycie dwóch barw wzajemnie się dopełniających w jednym projekcie z pewnością przykuje uwagę. Należy jednak podchodzić do tego ostrożnie - jeśli stosujemy tak silny kontrast, nie warto wplatać zbyt wielu dodatkowych kolorów, ponieważ możemy zgubić ten efekt. W większości przypadków użycie barw dopełniających skutkuje jednak sukcesem. Przykłady takich połączeń kolorystycznych to pomarańczowy z niebieskim, żółty z fioletem itd. 

Psychologia kolorów

Ważny jest również aspekt psychologiczny. Kolory mają niebanalny wpływ na to, w jaki sposób postrzegamy produkt. 

Czerwień oczywiście przykuwa uwagę (co często wykorzystuje się w przyciskach na stronie), ale także wzmaga apetyt. Dlatego większość restauracji fast-food, takich jak McDonald's, KFC, Pizza Hut posługuje się tym kolorem w identyfikacji wizualnej. Może to być więc dobry wybór na stronie cateringowej, umożliwiającej zamówienie jedzenia. 

W przeciwieństwie do czerwieni stoi tu niebieski, który osłabia apetyt, ale ma inne zalety. Barwy niebieskie, błękitne i granatowe budują zaufanie, podkreślają stabilność i pewność. Mogą się więc sprawdzić na stronach biznesowych oraz w przypadku kancelarii prawnych. 

Kolor zielony z kolei kojarzy się z naturą i ekologią. Skorzystają z niego firmy, które chcą budzić świadomość ekologiczną, czy też sklepy internetowe z eko-żywnością, kosmetykami naturalnymi itp. 

Pomarańcze i żółcie to kolory energii. Dlatego świetnie sprawdzą się w przekazie dla młodzieży lub w branży fitness. 

Fiolety kojarzą się z elegancją i luksusem. Mogą być użyte na stronie marek ekskluzywnych, np. sprzedających drogą bieliznę czy biżuterię. Należy jednak zachować umiar, mając na uwadzę przede wszystkim estetykę. 

Kolory pastelowe są zwykle kierowane do kobiet - czy to w przypadku sklepu internetowego z artykułami dla dzieci, czy też kosmetyków, strony marki kosmetycznej, czy salonu fryzjerskiego lub SPA. 

Barwy neutralne, takie jak szarości, czerń, biel czy beże w większości przypadków dobrze współgrają z każdym kolorem. Dlatego najczęściej wykorzystuje się je jako kolory tła. 

Dodatkowo biel kojarzy się z czystością i buduje przestrzeń. Jest najczęściej wykorzystywanym kolorem, przeważnie dominującym. Czerń za to pomaga uzyskać elegancki i nowoczesny efekt. Może się sprawdzić w przypadku stron prezentujących marki samochodów. 

Jak dobierać kolory

W doborze kolorów, jak już wcześniej wspomnieliśmy, można wykorzystać kontrast barwny (kolory dopełniające), co skutkuje mocnym efektem wyróżnienia. Można postawić również na bardziej spójną paletę i wybrać barwy tylko ciepłe lub tylko zimne. 

Najważniejsze jest to, aby nie przesadzić. Na stronie internetowej powinno się używać maksymalnie 3 kolorów. Ważne jest również uwzględnienie całej identyfikacji wizualnej marki. Jeśli masz już gotowe inne materiały, np. logo, istotne, aby kolory w nich zawarte znalazły się w Twoim projekcie strony, dla zachowania spójności. Nie można zapomnieć również o trendach - jeśli nie kłóci się to z Twoim przekazem i z kolorami, jakich używa Twoja marka, warto wziąć je pod uwagę. 

W przypadku, gdy nie radzisz sobie z doborem kolorów samodzielnie, możesz skorzystać z narzędzi, które ułatwiają to zadanie, np. tego. Więcej na temat kolorów przeczytasz w tym wpisie. 

Typografia

Drogą wstępu - jeśli chcesz zajmować się grafiką, podstawa, o której musisz pamiętać to: font, to nie to samo, co czcionka! To drugie to metalowy bloczek, który w dawnych czasach używany był w drukarstwie. Fontem nazwiemy jej odpowiednik, który możemy zobaczyć na ekranie. Skoro to już wytłumaczyliśmy, możemy przejść do podziału fontów. 

Typografia jest niezwykle ważna w każdym projekcie graficznym - na stronie internetowej przede wszystkim, ponieważ większość zawartych na niej informacji przekazywana jest tekstowo. Głównym podziałem fontów jest ten na kroje szeryfowe, skryptowe, odręczne i bezszeryfowe. I to właśnie tych ostatnich użyjemy na stronie internetowej, szczególnie w długich elementach tekstowych. Fonty szeryfowe i odręczne można zastosować w nagłówkach, pamiętając o tym, że powinny być odpowiednio dostosowane do grupy docelowej. O tym, jak je dopasowywać, przeczytasz tutaj, a gdzie ich szukać - tu.

Gdzie uczyć się designu? 

Oczywiście powyższy opis to podstawy podstaw, jeśli chodzi o projektowanie graficzne. Kiedy chcesz stworzyć stronę samodzielnie i nie potrzebujesz dalej się rozwijać w grafice, mogą Ci one wystarczyć. Jeśli jednak zaciekawił Cię ten temat, warto, abyś wiedział, gdzie nauczysz się więcej.

Możesz to zrobić na platformach szkoleniowych. Należy jednak pamiętać o tym, że większość z kursów jest płatna. Takie strony to np. Udemy, czy EduWeb. Są również darmowe rozwiązania, takie jak YouTube, czy darmowe platformy edukacyjne. Oczywiście warto też czytać książki i e-booki. Więcej na temat miejsc do nauki webdesignu (i nie tylko!) znajdziesz tutaj.

Podsumowanie

Jest to pierwsza z 6. części naszego mini cyklu poświęconego nauce webdesignu. Skupiliśmy się tu głównie na podstawach grafiki komputerowej. W kolejnych wpisach dowiesz się, jak szukać pomysłów i jakie należy znać pojęcia, jeśli chodzi o webdesign, jakie są podstawy UX, które musisz znać tworząc stronę internetową, jak przeprowadzać badania i robić makiety, jak stworzyć prototyp strony pod względem UI oraz jak wdrożyć witrynę i dbać o gotową stronę. Śledź nas na facebooku, aby nie przegapić żadnego wpisu!