Każdy, kto uczy się projektowania graficznego, prędzej czy później zetknie się z siatką lub liniami pomocniczymi. Trudno wyobrazić sobie bez nich projektowanie layoutów stron www, składanie większych tekstów oraz projekty graficzne. Dotyczy to zarówno relatywnie prostych projektów, jak wizytówki, aż po bardziej skomplikowane, takie jak makiety gazet lub książek.
W twoim projekcie mogą znaleźć się różne elementy: teksty, zdjęcia, animacje i video. Możesz postawić na bezpieczne symetryczne układy albo eksperymentować z asymetrią. Możesz dążyć ku przewidywalnym rozwiązaniom albo zaskoczyć odbiorcę erupcją niekonwencjonalnych kształtów i kolorów.
Nawet w tych projektach, które mają tworzyć wrażenie największej swobody, potrzebny ci będzie wewnętrzny szkielet projektu, linie pomocnicze i struktura. Bez nich swoboda szybko zamieni się w chaos.
To właśnie rola siatki (grid) i linii bazowych. Ten schemat linii dzielących twój obszar roboczych na „bloczki”, niewidoczny dla odbiorców, pomaga rozmieścić elementy projektu, ustalić optymalne odległości i określić proporcje między nimi.
Praca z siatkami – podstawowe rady
Być może siatka wydaje ci się na razie niepotrzebnym ograniczeniem albo uważasz, że nie jest ci do niczego potrzebna, ale projektowanie „na oko” nie stanowi wcale łatwiejszej i bardziej praktycznej opcji.
Kiedy opierasz się tylko na swoim wyczuciu, a nie na regularnych podziałach siatki, możesz spędzić całe godziny szukając właściwego miejsca dla przycisków albo właściwych proporcji ilustracji i tekstu.
Nawet jeśli na początku odbierasz grid jako ograniczenie dla swojej kreatywności, z czasem jednak przekonasz się, że nie ma trudniejszego punktu startu niż pusty obszar roboczy i gorszego briefu niż „dajemy ci wolną rękę”.
Siatka i narzucane przez nią ograniczenia są więc czymś, co paradoksalnie może pobudzić twoją kreatywność, postawić kilka twórczych i inspirujących wyzwań.
Projektowanie w oparciu o siatkę sprawia, że nawet niezbyt minimalistyczne strony www wydają się czytelne, a wszystkie elementy są powiązane ze sobą i tworzą wizualną całość.
1. Zacznij projekt od projektu siatki
Twój Photoshop, Illustrator, InDesign lub inne wybrane narzędzie może zaproponować ci domyślną siatkę, jednak „domyślny” nie oznacza „uniwersalny”.
Zacznij projektowanie od przemyślenia, jaka siatka będzie ci potrzebna. W przypadku prac przeznaczonych do druku nie bez znaczenia jest na przykład, czy siatka ma obejmować marginesy, czy kończyć się na ich linii? W projektach zawierających więcej tekstu przemyśl, jaka powinna być odległość między kolumnami tekstu – tę wartość również możesz ustawić w siatce i zastosować dla całego projektu, aby zachować wizualną spójność.
Projektowanie na potrzeby stron www kieruje się swoimi ograniczeniami: tutaj siatka powinna opierać się na wielkości 4 lub 8 pikseli. Dzięki temu zaprojektowana strona lub ekran aplikacji mobilnej będą się dobrze skalowały, a tym samym wyglądały dobrze na ekranach o różnej wielkości i rozdzielczości.
2. Eksperymentuj z siatkami
Różne projekty mogą wymagać różnych siatek i trudno tu wskazać jeden uniwersalny model, który sprawdzi się zawsze. Zanim „w ciemno” będziesz ustalać, do jakiego projektu jaki podział będzie optymalny, warto przećwiczyć kilka ustawień. Dlatego zachęcamy cię do ćwiczeń na własną rękę (nie na komercyjnym projekcie dla klienta) – dzięki temu w przyszłości unikniesz trzymania się siatki, która nie daje ci oparcia, a rzeczywiście ogranicza.
Przetestuj, czy w projektach z dużą ilością małych zdjęć i elementów rysunkowych sprawdzi się siatka podzielona na wiele pól albo które siatki najlepiej działają dla składu tekstu. Wybierając szerokość kolumny tekstu warto opierać się na wielkości fontu, którego będziesz używać najczęściej. Aby kolumna była wygodna do czytania, powinna zawierać od 7 do 10 słów (około 65 znaków ze spacjami).
W twoim projekcie może się okazać konieczne użycie kilku rodzajów siatek (np. w projektach magazynów, broszur, ofert) – i jest to całkowicie dopuszczalne.
3. Zachowaj odstęp
Wbrew pozorom odstęp to nie jest przestrzeń, w której możesz umieścić tekst albo ilustrację, jeśli nie mieszczą się gdzie indziej albo są za duże, żeby wpasować się w pole siatki. Taka sytuacja to dla ciebie znak, że albo siatka się nie sprawdza, albo rozwiązanie, które chcesz przeforsować, wymaga zmiany.
Odstępy w siatce pomogą ci zachować właściwy odstęp między elementami projektu. Nawet jeśli kolumna tekstu lub grafika zajmują kilka pól siatki, powinny zaczynać się i kończyć na krawędziach odstępu, nie za nimi.
4. Linie bazowe pisma
Walka z liniami bazowymi tekstu, które nijak nie chcą zgodzić się z liniami siatki może kusić, żeby zignorować tę pierwszą – ostatecznie jak długo kolumna tkwi w siatce, wszystko powinno być ok.
Warto jednak trochę nad tym popracować. Tekst osadzony na liniach bazowych sprawia wrażenie bardziej harmonijnego i wpływa na organizację wizualną całej strony.
A jakie ty masz doświadczenia z siatką? Czy jest dla ciebie pomocą, czy raczej utrudnieniem? Czekamy na twój komentarz!