Jak opanować projektowanie układów graficznych

Pełny przewodnik, dzięki któremu poznasz podstawy projektowania wizualnego.

Pytanie za milion dolarów: jaki jest sekret dobrego designu?

Możemy sobie pofilozofować na ten temat, ale ogólnie rzecz biorąc, przysłowiowy "sekret" dobrego projektu leży w sposobie, w jaki organizujesz swoje elementy wizualne, w odniesieniu do płótna i między sobą. Zasadniczo, właśnie opisaliśmy projektowanie układu graficznego, który, jeśli o tym pomyślisz, jest wszędzie, gdzie spojrzysz.

Weźmy na przykład układ czasopisma. Ich projekt jest zgodny z klasycznym systemem siatki (za chwilę dowiemy się wszystkiego o siatce). Wszystko jest zwykle wyrównane do lewej, prawej i dołu. Kolumny mają zwłaszcza wyraźne uzasadnione wyrównanie, które sprawia, że strona jest nie tylko atrakcyjna wizualnie, ale także łatwa do odczytania i autorytatywna. Duże nagłówki przyciągają uwagę widzauwagę, podczas gdy podtytuł pojawia się jako kontrast w rozmiarze, aby stworzyć wizualną hierarchię informacji.

Linda Gaom, Behance

Wszystkie te cechy sprawiają, że projekt strony jest czysty, uporządkowany i łatwy do odczytania, a także jest zgodny z poradami, o których będziemy mówić dalej. Ale najpierw zrozummy więcej o samym projektowaniu układu.

Co to jest Layout Design?

Nie mówimy tu więc o projektowaniu logo, ale o projektowaniu materiałów drukowanych, takich jak gazety, magazyny, plakaty, a także ich cyfrowych odpowiedników, jak również o projektowaniu stron internetowych, aplikacji czy UX/UI.

Słowo "layout" daje nam wiele wskazówek. Oznacza ono układ z góry ustalonych elementów na stronie.

Kiedy układ jest efektywny, wygląda dobrze i prowadzi widza do zrozumienia wiadomości, którą projekt próbuje przekazać. Zrozumienie układu jest zatem kluczem do tworzenia angażujących, efektywnych, przyjaznych dla użytkownika i przyjemnych kompozycji.

Jeśli layout nie przekazuje dobrze wiadomości do odbiorców, lub innymi słowy, nie "czyta się dobrze", projekt będzie nieefektywny, niezależnie od tego, jak modnie wygląda. W sferze projektowania layoutów, treść zastępuje trendy i sztuczki.

Cel projektowania układu graficznego

Aby szybko przekazać wiadomość

To jest kluczowe. Layout design ustala relacje między aktywami graficznymi, aby osiągnąć płynny przepływ ruchu oczu dla maksymalnej skuteczności i wpływu.

Aby stworzyć równowagę

Korzystanie z zasad projektowania układu jest najprostszym sposobem na stworzenie poczucia równowagi i symetrii w swoich projektach projektowych bez popadania w nudę.

Aby stworzyć spójność

Układ pomaga ułożyć wiele elementów projektu w sposób łatwo przyswajalny, spójny i logiczny.

Aby stworzyć piękno

Równowaga i struktura w naturalny sposób tworzą piękno. Jeśli projekt layoutu jest wykonany poprawnie, automatycznie stanie się atrakcyjny wizualnie dla odbiorcy. Im mniej wysiłku odbiorcy muszą włożyć w zrozumienie przekazu, tym bardziej atrakcyjny wyda się projekt.

Projektant Frank Philippin do swojej książki "I Used to Be a Design Student: Then - Now" Źródło: DesignBoom

Elementy projektowania układu graficznego

Tekst

Obejmuje to nie tylko treść tekstu czy akapity, ale także nagłówki, podtytuły, headery i stopki. Wybór typografii, koloru i rozmiaru osiągnie różne efekty w tym, jak twój układ przełoży się na odbiorców.

Obraz

Najczęściej spotykane rodzaje obrazów to zdjęcia, ilustracje czy infografiki.

Kształty

Kształty mogą być geometryczne, które są bardzo kanciaste, lub mogą być organiczne, naśladujące świat przyrody. Mogą być również abstrakcyjne. Abstrakcyjne kształty były bardzo modne w ostatnim roku, ponieważ widzieliśmy projektantów stron internetowych włączających je do złożonych i rozległych kompozycji.

Kształty mogą zastąpić obraz, mogą też służyć do dodawania elementów graficznych do strony, wyróżniania tekstu lub wyznaczania przestrzeni pomiędzy innymi elementami wizualnymi.

Biała przestrzeń

Każdy projekt layoutu będzie miał pewną ilość białej przestrzeni, która pozwoli Twoim elementom oddychać i wyróżniać się samodzielnie.

Złote zasady projektowania układu graficznego

Zauważysz, że zasady projektowania układu graficznego są zgodne z podstawowymi zasadami projektowania, takimi jak użycie kolorów w określony sposób, typografia, powtórzenia, kontrast, hierarchia i równowaga.

Zasada nr 1: Stosuj siatki

Siatki pomagają projektantom pozycjonować różne elementy projektu, takie jak tekst i obrazy w sposób, który wygląda spójnie i jest łatwy do naśladowania.

Zapewniają poczucie porządku, nie pozwalają, aby elementy się nawzajem przytłaczały, a co najważniejsze, siatki poprawiają również Twoje wyrównanie, dzięki czemu Twoja praca wydaje się czystsza i bardziej profesjonalna.

Źródło: hgmlegal.com

Anatomia siatek

Możesz myśleć, że to tylko pionowe i poziome linie, ale siatka składa się z kilku części. Wiele, w rzeczywistości. Oto najważniejsza terminologia, którą musisz znać w podstawowej siatce:

• Format Jeśli projektujesz coś do druku, formatem jest strona, a jeśli jesteś projektantem internetowym, formatem jest strona internetowa lub okno przeglądarki.
• Marginesy to celowe puste przestrzenie pomiędzy formatem a projektem.
• Linie przesyłowe to poziome linie, które dzielą Twój układ na równoległe sekcje. Flowlines pomagają w czytelności projektu i prowadzą czytelnika do prawidłowego podążania za treścią.
• Moduły są blokami, które są tworzone przez poziome linie i pionowe linie przepływu dowolnej siatki. Jeśli myślisz o tym, są one budulcem każdej siatki. Wszystkie twoje pionowe moduły tworzą twoje kolumny, podczas gdy wszystkie twoje poziome siatki tworzą twoje wiersze.
• Regiony są to grupy połączonych modułów, pionowe lub poziome. Nie ma żadnych reguł co do tego, jak zdecydujesz się je zorganizować.

Źródło: Radversity

Rodzaje kratek

Siatki układowe po raz pierwszy zostały wykorzystane do układania pisma ręcznego na papierze.

Pochodzą one już z XIII wieku, kiedy to francuski artysta Villard De połączył system siatki ze złotą proporcją, aby stworzyć układy stron drukowanych z marginesami. Ten system siatki można zobaczyć do dziś, czego dowodem jest większość drukowanych układów książek i czasopism. Wydawcy, redaktorzy i projektanci wolą używać standardowych siatek nie tylko dlatego, że dobrze wyglądają, ale dlatego, że czytelnicy przywykli dooczekiwać, że pewne elementy projektu znajdą się w określonym miejscu.

Siatki mogą być zaprojektowane na dwa sposoby: symetryczne lub asymetryczne. Siatki symetryczne podążają za linią środkową, gdzie pionowe i poziome regiony są sobie równe; a kolumny mają tę samą szerokość.

W siatka asymetryczna , jak sama nazwa wskazuje, marginesy i kolumny nie są wszystkie identyczne.

Na podstawie tej klasyfikacji istnieje pięć głównych typów siatek układu używanych na całym świecie, na których można polegać:

Siatki rękopisów to najbardziej powszechny rodzaj siatki dla dokumentów. Oddzielają one nagłówek, stopkę i marginesy, a w zasadzie tworzą prostokąt wewnątrz formatu (lub strony), który stanowi granice dla Twojego tekstu. Są one podstawą dla magazynów, gazet i książek. Jest to więc prawdopodobnie układ, z którym jesteś najbardziej zaznajomiony.

Źródło: UXplanet

Źródło: Radversity

Ruszty kolumnowe to kolejny faworyt w wydawaniu czasopism. Typowy układ czasopisma wykorzystuje siatki kolumnowe do rozdzielenia tekstu na czytelne sekcje. Są one jednak bardzo popularne także na stronach internetowych. Można stosować od dwóch do sześciu siatek. Więcej jest możliwe, ale nieczęsto spotykane. Bardzo ważną rzeczą w siatkach kolumnowych jest to, że odstępy między kolumnami, czyli rynienki, są jednakowo oddalone od siebieinne.

Źródło: UX Planet

Źródło: Radversity

Ruszty modułowe są podobne do siatki kolumn, ale uwzględniają również poziome linie przepływu. Ten typ siatki jest potrzebny, gdy musisz zorganizować różne elementy w swoim układzie, a siatki kolumn są po prostu niewystarczające.

Źródło: UX Planet

Źródło: Radversity

Siatki podstawowe Linia podstawowa to linia, na której spoczywa tekst podczas pisania, a linia wiodąca to odstęp pomiędzy dwiema liniami podstawowymi. Zastanawiasz się, jak duży powinien być Twój nagłówek lub podtytuł?

Źródło: UX Planet

Źródło: Fragaria

Siatki hierarchiczne Wyglądają mniej jak siatka niż ich odpowiedniki, ale są bardzo przydatne przy organizowaniu elementów projektu w kolejności ich ważności. Siatki hierarchiczne mogą być oparte na siatkach modułowych, lub można nawet stworzyć własne. Strony internetowe często używają tej siatki, zwłaszcza cyfrowe magazyny i gazety mają tendencję do polegania na siatkach hierarchicznych, a nie na siatkach kolumnowych w ich przejściu do stania sięcyfrowy.

Źródło: UX Plane

Zasada nr 2: Wykorzystaj przestrzeń negatywną

Często myślimy, że pustka, cisza, czy brak kolorów to coś złego. Nie zastanawiamy się jednak nad tym, jak są one solidnym fundamentem kontrastu.

Dobra i zła przestrzeń negatywna

Negatywna przestrzeń pomoże oddzielić różne obszary w twoim projekcie, jednocześnie pozwalając twojemu układowi oddychać. Pomaga w hierarchii wizualnej i równowadze wizualnej; ustawia skupienie użytkownika na głównych elementach; zmniejsza poziom rozproszenia; i wreszcie, dodaje styl i elegancję do twojego projektu.

Niedoświadczeni projektanci mogą mieć tendencję do wypełniania jak największej części płótna, poprzez skalowanie tekstu, powiększanie logo lub obrazu. Ale danie swoim elementom przestrzeni pozwala widzowi na szybsze i wygodniejsze odbieranie pewnych wskazówek informacyjnych.

- Aaron Walter, "Projektowanie dla emocji

Łatwym sposobem na określenie przestrzeni negatywnej jest użycie siatki modułowej. Umieszczając ją na górze projektu, można łatwo zwizualizować, które moduły mogą pozostać puste, a które należy wypełnić.

Designer by Brunswicker, Źródło: Codesignmag.com

Zasada nr 3: Wybierz jeden punkt centralny

Czy kiedykolwiek klient poprosił Cię o powiększenie logo? A potem o jeszcze większe powiększenie nagłówka?

Nie można podkreślać wszystkiego, bo to mija się z celem dobrego projektu. Podobnie jak czas, ostrość jest względna. Aby jeden element się wyróżniał, inny musi służyć jako tło. Niektóre elementy muszą dominować nad innymi, aby w projekcie pojawiła się wizualna hierarchia.

Punkt centralny oznajmi Twoim odbiorcom, gdzie zaczyna się ich podróż po projekcie. Jest to więc początek historii, którą opowiadasz.

Zwykle można to osiągnąć poprzez użycie dużego obrazu lub dużego źródła typografii. Zauważ, jak skuteczny jest poniższy punkt centralny

Designed by Braulio Amado for Bloomberg Businessweek, Źródło: Miło, że

Ale podczas gdy punkt centralny przyciągnie uwagę Twoich odbiorców, kolejna zasada pomoże ją ukierunkować.

Zasada nr 4: Myśl o bliskości i przepływie

Zasada bliskości jest prosta, należy zadbać o to, aby elementy, które są ze sobą powiązane, były umieszczone razem.

W związku z tym grupuj tylko te aktywa projektowe, które są ze sobą powiązane, i używaj kieszeni informacyjnych na projekcie, aby poprowadzić odbiorców do fragmentu odpowiedniej treści, którą muszą skonsumować. Nazywa się to również zasadą przepływu.

Źródło: Satori Graphics

Projekt z dobrym przepływem będzie prowadził oko widza przez cały układ, od elementu do elementu, z łatwością. Twoje punkty centralne przyciągną oko i staną się miejscem odpoczynku, podczas gdy inne elementy nadadzą kierunek.

W prosty sposób można to zrozumieć na przykładzie naszej strony internetowej. Grafiki są wyraźnie oddzielone od tekstu, podobnie jak wezwania do działania, dzięki czemu uwaga odbiorcy nawiguje od jednego skupiska informacji do następnego.

Zasada nr 5. Używaj kontrastu

Upewnij się, że masz wystarczająco dużo kontrastu w swoim projekcie.

Co więcej, dobre wykorzystanie kontrastu dodaje wizualnego zainteresowania w całym projekcie. Spójrzmy prawdzie w oczy, układ, w którym wszystko jest tego samego rozmiaru, kształtu lub koloru będzie wyglądał nudno. Kontrast dodaje pikanterii.

Pierwszą myślą, jaka przychodzi Ci do głowy, może być kontrast kolorystyczny, np. ciepłe kontra chłodne, ciemne kontra jasne, niebieskie kontra pomarańczowe. Ale choć kolor jest niezwykle istotną zasadą kontrastu, istnieją również kontrasty typu, wyrównania i rozmiaru. I pamiętaj, że kontrast jest również względny - ma znaczenie tylko w zestawieniu z innymi elementami.

Oto kilka przykładów układów, które wykorzystują tę zasadę w inteligentny i piękny sposób. Zwróć uwagę na kontrast w typografii, kolorze, a nawet na kontrast w wielkości elementów.

Źródło: Plan działania IAG w zakresie pojednania

Zasada 6. Powtarzanie, wzór, rytm

Kiedy myślimy o powtórzeniu, myślimy o tym samym elemencie w kółko.

Ale w projektowaniu jest inaczej, na pewno nie jest to tak nudne. Gdy jest używane poprawnie, powtórzenie może faktycznie wzmocnić twój projekt.

Spróbuj zidentyfikować i ponownie wykorzystać motyw w całym swoim układzie, tak aby różne obszary czuły się połączone i były częścią tej samej kompozycji. Dzięki temu Twój projekt będzie miał temat przewodni. Powtarzając elementy, nie tylko dostarczysz zgodnie z oczekiwaniami odbiorców, ale także poprawisz doświadczenie użytkownika. Bycie spójnym sprawia, że użytkownicy czują się bardziej komfortowo.

Możesz to zrobić poprzez powtarzanie kształtów lub symboli. Albo nawet schematu kolorów, kroju pisma i ogólnie tego samego stylu.

Dobrym nawykiem jest używanie kroju pisma o dużej rodzinie. Ogranicz różną liczbę wzorów, wag/styli linii i kolorów, a następnie powtarzaj je w całym projekcie. Staraj się również utrzymać ten sam styl obrazów i grafik. Na przykład używaj ilustracji tego samego artysty.

Źródło: Thepentool.co

To wszystko - oto sześć zasad, które pomogą Ci uporządkować projekt i osiągnąć czystszy, bardziej profesjonalny i zrównoważony układ.

Ale twoja podróż nie kończy się tutaj. Projektowanie graficzne nie jest nauką ścisłą i nie powinno być ograniczone do wskazówek i zasad. Jak to jest prawdziwe we wszystkich dziedzinach tworzenia, nie ma twardej reguły kciuka. Wyłamanie się z tych wskazówek w subtelny sposób doda głębi i różnorodności do twoich projektów.

Niemniej jednak stanowią one świetny punkt wyjścia i zachęcamy do ich wypróbowania. I dajcie nam znać, jak się sprawdziły!

Pobierz Vectornator, aby rozpocząć pracę

Przenieś swoje projekty na wyższy poziom.