Graphic Design – podstawy

Graphic Design czyli projektowanie graficzne to najprościej ujmując zarządzanie tekstem i obrazem w taki sposób by wspólnie przedstawiały zamierzony komunikat. jest to odpowiednie zarządzanie relacjami pomiędzy elementami w projekcie.

Dobry design to taki który ułatwia to co powinno być zrobione, a utrudnia to co nie powinno być wykonane.

Aspekty dobrego designu:

• white space
• kontrast
• teoria kolorów i psychologia kolorów
• typografia

wizualne narzędzia

1. symetria – asymetria

W naturze odnajdujemy wiele symetrii, co daje poczucie stabilności, spokoju i balansu.

Asymetria prowadzi wzrok oglądającego w bardziej dynamiczny, ekscytujący sposób.

Odmianą symetrii jest symetria radialna, która rozchodzi się od centrum obiektu, jak np. rozgwiazda.

2. skala

Skala dotyczy wielkości obiektów, ale jest pojęciem względnym, zależnym od otoczenia, kontekstu wspomnianego obiektu.

Skala obiektu oddaje często jego znaczenie:

• duże obiekty są: ważniejsze, bliższe
• mniejsze obiekty są: mniej znaczące, oddalone

Kontrast w skali wprowadza życie, ekscytację, dynamikę do projektu. Może wprowadzić napięcie pomiędzy małymi, delikatnymi obiektami a dużymi, wyolbrzymionymi.

Skala pozwala na wprowadzenie zaskoczenia kiedy cos co standardowo jest uważane za bardzo duże, zaprojektujesz jako małe i odwrotnie.

Zwróć uwagę na to w szczególności w przypadku nagłówka i tekstu głównego, czasami powiększenie jeszcze bardziej nagłówka i zmniejszenie trochę tekstu daje ciekawy efekt.

3. kadrowanie

Ramy swojemu projektowi nadajesz poprzez marginesy, ramki i odpowiednie przycinanie czy to tekstu czy obrazów. Dzięki temu zarządzasz tym jak obiekt wypełnia przestrzeń. Zarządzasz tym jak obserwator ma zwrócić uwagę na treść. Czyli gdzie i na co powinien patrzeć

Czasami ciekawym zabiegiem wizualnym jest umieszczenie tzw. ramki w ramce, czyli w przypadku fotografii, gdzie sam kadr jest ramką jest uchwycenie interesującego nas obiektu w dodatkowym, wewnętrznym obramowaniu.

Margines – ochronna ramka w okół tekstu czy grafiki, powala wyróżnić wtedy obraz jako obiekt

Spady (bleeds) – czyli wypełnienie grafiką strony, kadru poza jego krawędzie, wprowadza nas bardziej w grafikę, wypełnia całą scenę przez to staje się bliższy

Kadrowanie – pozwala na zmianę proporcji lub kształtu (kiedy zamykamy grafikę np. w kole czy trójkącie) grafiki, jak również może nadać dramatyzmu, intymności czy abstrakcji. Taki zabieg kadrowania z tła może nadać efekt spojrzenia z dystansu na scenę,

4. Hierarchia

Nadaje kolejność, porządek przekazywanej informacji. Pozwala na łatwa nawigację w skomplikowanym rozłożeniu treści lub wyłapywaniu szybko głównego założenia. Jest zasygnalizowaniem ważności informacji tylko tam gdzie jest potrzebne.

Hierarchia to inaczej pokazanie odmienności, takie jej zaznaczenie by odseparować elementy od siabie.

stopnie wyróżnienie

• pogrubienie czcionki
• odmienny kolor czcionki
• odmienny rozmiar czcionki
• odmienny odstęp od początku strony
• większa przestrzeń nad i pod tekstem
• drukowane litery
• jasny – ciemny
• mały – duży

5. siatka – grid

Jedno z najważniejszych narzędzi w projektowaniu. Nadaje strukturę i ułatwia cały proces projektowania. Podstawowa siatka czyli pionowe i poziome linie tworzące kolumny i rzędy. Bardziej zaawansowana zawiera margines (czyli przestrzeń przy krawędziach) oraz odstępy (gutters, czyli przestrzeń pomiędzy komórkami, blokami kolumn i rzędów).

Siatka może być prosta lub bardzo detaliczna, rygorystyczna, może składać się tylko z 2-3 kolumn lub 18. Dzięki niej podejmujesz lepsze decyzje odnośnie symetrii, wielkości, czy kadrowania elementów na projekcie.

Ułatwia on umieszczanie elementów, dobieranie ich wielkości i co najważniejsze stosowanie tej samej siatki pozwala na zachowanie spójności pomiędzy każda podstroną.

Proces projektowania

1. określ CEL/ CELE (objectives) projektu (np. zapis, informacje, zakup) – tak by móc go wyjaśnić w jednym, prostym zdaniu czy 5 sekundowym wyjasnieniu
2. stwórz moodboard do projektu
3. przygotuj materiały takie jak zdjęcia, grafiki, tekst
4. wybierz czcionkę lub czcionki z jakimi będziesz pracować (fajnie łączyć font szeryfowy z bezszeryfowym, np. Lava i National)
5. stwórz siatkę na jakiej będzie opierał się projekt – dobierz ilość kolumn i odstęp rzędów tworzący baseline pod teksty
6. stwórz widoczną hierarchię typograficzną tak by było widać co jest nagłówkiem, co tekstem głównym a co dodatkowymi informacjami
7. eksploruj i eksperymentuj z bardziej odmiennymi układami

Ogólne zasady

• w sekcji powinno być max do 7 różnych możliwości interakcji lib informacji, a najważniejsza powinna być wyróżniona i w centrum
• dobra nawigacja spełnia 3 założenia jak: prostota, przejrzystość, spójność
• określenie celu lub celi jakie użytkownik powinien wykonać
• jedno z najważniejszych upewnij się że elementy interaktywne są łatwe do użycia, czyli by było widoczne w co się klika lub w wersji mobilnej było również łatwo w to kliknąć
• używanie podobnych rozwiązań do podobnych akcji, czyli by formularz był obsługiwany podobnie jak inne formularze w internecie tak by użytkownik nie uczył się przy znajomych rzeczach nowej logiki
• Gestalt principles – prawo bliskości
• Gestalt principles – prawo wspólnych obszarów mówi o tym by zamykać podobne czy powiązane elementy w jednym obszarze, czyli grupowanie pewnych treści w sekcje
• prawo Millera – by dzielić projekt na mniejsze logiczne 'kawałki’ co ułatwia odnajdowanie szukanych informacji
• twarze – ludzki wzrok naturalnie jest przyciągany przez widok innej twarzy czy to ludzkiej czy tez zwierzęcia, robota, ilustracyjnej, szczególnie tych które pobudzają emocje
• sztuka wykorzystywania znanych aspektów w projekcie, spójność odzwierciedla poczucie czegoś znajomego, co budzi zaufanie odbiorcy
• efekt ekspozycji (exposure effect) – im częściej widzisz dany motyw, tym bardziej mu ufasz