Porządek i zasady, jakie panują podczas projektowania – czy to domów, czy miast, czy innych przedmiotów posiadających określoną strukturę i harmonię – można przełożyć na projektowanie w świecie cyfrowym. Projektowanie, zarówno to fizyczne, jak i cyfrowe, powinno być harmonijne i strukturalne – dzięki temu nie tylko łatwiej przemieszczać się po przestrzeni projektowej, ale łatwiej o lepsze doznania użytkowników. Dlatego dzisiejszy artykuł jest poświęcony grid systemowi, dzięki któremu możliwe jest uporządkowanie informacji oraz tworzenie spójnych doświadczeń.
Czym jest grid?
Grid to system linii, który ułatwia rozmieszczanie elementów graficznych i tekstowych na danym ekranie. Używany jany tak w publikacjach drukowanych, jak i internetowych. Dlaczego jest tak przydatny? Przede wszystkim pozwala na stworzenie wizualnej spójności oraz umieszczenie treści w wybranym formacie. Wdrożenie gridu z pozoru może wydać się skomplikowane, jednak okazuje się być bardzo dużym ułatwieniem w pracy projektanta, gdy przyjrzymy się mu bliżej.
Kiedy i w jaki sposób tworzyć grid?
Grid przydatny będzie we wszelkiego rodzaju projektach twórczych: podczas pisania książki, tworzenia zaproszeń i przy projektowaniu interfejsów. Na początku projektowania należy wyznaczyć dwa obszary. Pierwszym obszarem będzie część robocza, drugim – część pozarobocza (ta właśnie część jest obszarem z marginesami, nagłówkami i stopkami). W tym artykule poruszę jedynie część roboczą, ponieważ to obszar najintensywniejszej pracy. W tej części projektu grid system staje się niezbędnym narzędziem, pozwalającym właściwie tworzyć interfejsy. Aby ułatwić sobie pracę nad projektem, należy zastosować siatkę podziału na wszystkich widokach oraz podstronach – siatka pozwoli na rozłożenie elementów w odpowiedni sposób. Przestrzeń robocza powinna zostać podzielona za pomocą kolumn, a pomiędzy kolumnami nie powinny znajdować się żadne elementy (to zapewni czytelność oraz jasny podział widoku). Programy dla projektantów umożliwiają szybkie zdefiniowanie gridu przy użyciu parametrów, czyli szerokości obszaru roboczego oraz liczby wybranych kolumn. Dzięki takiemu oprogramowaniu generowana jest propozycja układu, a samodzielnie można wpływać na odległości między kolumnami. Co, jeśli oprogramowanie nie ma takiego mechanizmu? Warto dodać rozszerzenie grid system – w internecie można znaleźć dużo ciekawych przykładów.
Przed wyznaczeniem gridu wyznacz liczbę kolumn
Przed wyznaczeniem gridu należy podzielić projekt na kolumny. Treść możemy umieścić w jednej lub kilku kolumnach, zależnie od rodzaju projektu. Przestrzeń pomiędzy kolumnami to tzw. rynny, które powinny być jednakowej wielkości. Dzisiejsze rozdzielczości ekranu osiągają bardzo duże rozmiary w porównaniu z tym, co było dostępne jeszcze kilkanaście lat temu. Nadal jednak użycie szerokości 960 pikseli może zapewnić prawidłowe wyświetlanie projektu na wielu ekranach komputerów. Ostatecznie wybór należy do Ciebie, jednak bardzo ważne jest, aby podczas realizacji projektu trzymać się wyznaczonych założeń i nie wprowadzać zmian, które mogą zaszkodzić projektowi. Niestety, nie mam dla Ciebie recepty na idealną liczbę kolumn, choć część z układów jest mniej lub bardziej popularna. Jednym z najczęściej zalecanych układów jest 12 kolumn i ten układ ma swoje zalety. Jeśli jednak Twój interfejs składa się np. z bardzo małych elementów, być może lepszą alternatywą byłoby użycie 24 kolumn, które pozwolą na dużo większą swobodę w komponowaniu elementów.
Reguły tworzenia gridów
Istnieje kilka zasad tworzenia gridów. Warto zapoznać się z nimi, bo być może chętnie wykorzystasz je w trakcie tworzenia swojego projektu lub rozpoznasz używane przez Ciebie wcześniej. Grid systemy obejmują zasadę trójpodziału, złotą sekcję oraz jednokolumnową, wielokolumnową, modułową, bazową i responsywną siatkę. Poniżej opisuję, na czym polega użytkowanie każdego z poszczególnych systemów.
Rule of thirds
Reguła ta polega na równomiernym podziale pola pracy na trzy części, zarówno poziomo, jak i pionowo. W ten sposób powstaje siatka, składająca się z dziewięciu kwadratów. Elementy interfejsu umieszczone są na przecięciach linii poziomych i pionowych lub wzdłuż jednej z wybranych linii.
Golden section
Tutaj przyda nam się trochę matematyki, ponieważ złota sekcja to matematyczny współczynnik, używany przez artystów i architektów od – UWAGA – ponad 2000 lat. Złota sekcja używana jest również podczas projektowania interfejsów. Często występuje ona w naturze, a projektowanie w zgodzie z nią pozwala stworzyć minimalistyczne i naturalnie wyglądające kompozycje.
Single-column
To najprostsza siatka, która składa się z pojedynczej kolumny tekstu, otoczonej marginesami. Jest to ustawienie domyślne dla nowych dokumentów w programach do tworzenia układu stron. Możemy ją również spotkać w książkach.
Multi-column
W taki sposób określamy siatki o nieco bardziej złożonej strukturze. Na tych siatkach mogą zostać stworzone rozmaite formaty publikacji. Od liczby kolumn zależy elastyczność siatki – im więcej kolumn utworzysz, tym bardziej będzie ona elastyczna. Możesz użyć siatki, aby wyrazić hierarchię publikacji, tworząc strefy dla różnych rodzajów zawartości. Co ważne: tekst lub obraz może zajmować pojedynczą kolumnę lub obejmować kilka, nie trzeba wypełniać całej przestrzeni.
Modular
Ten typ gridu ma spójne podziały poziome od góry do dołu oraz podziały pionowe od lewej do prawej. Praca na tej siatce polega na podziale strony na kilka kolumn, zgodnie z treścią. Następnie dzieli się stronę od góry do dołu w kilku rzędach. Ta kombinacja zapewnia ciągłość całego projektu.
Baseline
Ten system siatki jest już nieco bardziej skomplikowany, bo zawiera on tzw. horyzontalne wytyczne, które rządzą całym dokumentem. Siatka linii bazowych jest ustalana na podstawie linii bazowych, na których znajduje się twoja typografia. Pojawiają się one jako pomoc wizualna w projekcie, obejmując całą szerokość projektu i powtarzając się w pionie na równym poziomie wewnętrznym. Siatki linii bazowych pomagają zakotwiczyć wszystkie (lub prawie wszystkie) elementy układu we wspólnym rytmie.
Responsywny
To system, który dostosowuje się do rozmiaru i orientacji ekranu. Równocześnie zapewnia on spójność w różnych układach. Zazwyczaj składa się z trzech elementów: kolumn (obszar zajmowany przez treść), rynien (przerwy znajdujące się pomiędzy kolumnami) i marginesów (przestrzeń pomiędzy zawartością strony a krawędziami okna ekranu). W tym systemie konfiguracja kolumn, rynien i marginesów zmienia się w zależności od szerokości ekranu.
Grid zagnieżdżony
Okej! Masz już grid, działasz na nim od kilku ekranów, ale musisz zaprojektować nową funkcję, a ona nie pasuje do Twojego gridu? Rozwiązaniem jest grid zagnieżdżony. Z mojego doświadczenia wynika jednak, że grid zagnieżdżony powoduje duże komplikacje podczas implementacji, a dodatkowo jest dużo bardziej kosztowny.
Podsumowując: projektowanie przy użyciu gridu pomaga osiągnąć większą harmonię w projekcie. Pamiętaj, że Twoją inspiracją podczas tworzenia interfejsów (i nie tylko) mogą być inne strony internetowe, dlatego inspiruj się. Codziennie masz możliwość poznawania nowych sposobów rozłożenia treści na stronie. Zwróć uwagę na grid podczas przeglądania internetu, niezależnie od tego, czy płacisz za buty, czy przeglądasz social media. Zastanów się, jakiej siatki używa projektant, wówczas zauważysz zarówno pozytywne aspekty, jak i mankamenty danego rozwiązania. Im częściej będziesz przyglądać się różnym typom siatek, tym lepsze będziesz mieć pomysły.