Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Grids
Webdesign

Jak korzystać z siatek przy projektowaniu stron internetowych

by
Length:MediumLanguages:

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

Jeśli nigdy dotąd nie zdarzyło ci się korzystać z siatek w swoich projektach, ten artykuł jest właśnie dla ciebie. Nauczysz się z niego podstaw siatkowej terminologii i przekonasz się na przykładach rzeczywistych stron, jak siatką posługują się zawodowcy.

Zagadnienia

W tym wprowadzeniu omówimy całkiem sporo zagadnień, w tym:

  • Po co w ogóle korzystać z siatki?
  • Pojęcia
  • Regułę jednej trzeciej
  • System siatki dwunastu modułów
  • Akcenty
  • Ograniczenia
  • Schemat koncepcyjny

Po co w ogóle korzystać z siatki?

Siatka może stać się podstawą struktury, szkieletem twojego projektu. Tworzą ją "niewidzialne" linie, przy których umieszcza się elementy projektu. Pomaga to powiązać je ze sobą w spójny system i zbudować logiczną kompozycję.

BBC

Siatka pomoże ci prostym sposobem uzyskać spójność i ładne wyrównanie. Gdy projekt stale rośnie, intuicja i improwizacja niezbyt się sprawdzają. Umiejętnie wykorzystana siatka pomoże ci tworzyć projekty przemyślane, poukładane, zgrabne i spójne.

Uporządkowanie, jak zresztą prawie wszystko w projekcie, nie powinno zwracać na siebie uwagi użytkownika. Im mniej, tym lepiej. Jeśli przedobrzysz, możesz odbiorcę rozproszyć i utrudnić mu odszukanie i zrozumienie treści, których potrzebuje. Przyjmij zasadę - nie będę na każdym kroku udowadniać artystycznej inwencji. Ani też odkrywać na nowo Ameryki, bo tak wypada. Rezygnacja z wyrównania bardzo rzuca się w oczy i daje wrażenie najzwyklejszego bałaganu. Łatwo w ten sposób zrazić do siebie użytkowników swoich projektów - o ile, oczywiście, brak wyrównania  nie wynika z jakiegoś konkretnego zamysłu twórczego.

Ważne terminy

Moduł

Moduł to podstawowy element konstrukcji siatki. Na siatkę składa się określona liczba modułów. W przykładzie poniżej, pochodzącym z serwisu BBC, widzimy siatkę 12-modułową. Każdy z fioletowych pasów odpowiada jednemu modułowi.

Rynna

Wąskie żółte paski na ilustracji poniżej to rynny, które rozdzielają moduły. Rynna to niewielki odstęp, który dodaje naszej siatce nieco oddechu.

Kolumna

I tu zaczyna się zabawa. Kilka modułów i rynien łączy się w kolumnę, która staje się pojemnikiem na treści - zgodnie z obraną strategią. Choć może nie od razu łatwo to dostrzec, tego rodzaju ograniczenia naprawdę pomagają w pracy. Wyznaczone z góry ramy sprawiają, że łatwiej i szybciej podejmujemy decyzję, gdzie umieścić określony rodzaj treści.

W przykładzie poniżej wykorzystano trzy kolumny różnej szerokości. Wymiary każdej z nich dostosowane są do formy, jaką przybrała dana treść, lub do wagi, jaką projektant chciał jej nadać.

Jak widzimy, sposobów na łączenie ze sobą różnych form jest bardzo wiele. Z zestawienia kolumn rodzi się mocna konstrukcja, która dzięki wyrównaniu ma w sobie spójność i ład. Warto było poświęcić kilka minut na ustawienie prowadnic i ustalenie paru zasad, prawda?

Pole

Kolumny treści wyznaczają pola, które dzielą stronę na poziome pasy. Warto postarać się, by pola takie miały zawsze tę samą wysokość od góry do dołu strony. W praktyce jednak nie zawsze da się to osiągnąć. Jeśli ostatecznie uda się utworzyć pola równej wysokości i takie rozwiązanie sprawdzi się w projekcie, świetnie, jeśli nie - nie dopasowuj ich na siłę.

Reguła jednej trzeciej

"Reguła jednej trzeciej", oparta na mini-siatce, podpowiada, że jeśli umieścimy treści wzdłuż linii, które dzielą całość na trzy równe części, uzyskamy miłą dla oka kompozycję. Bardzo często korzystają z niej na przykład fotograficy. Choć reguła jednej trzeciej to na pewno dobry punkt wyjścia i raczej nie zaprowadzi nas na manowce, radziłbym podchodzić do niej z odrobiną dystansu.

Gdy słyszymy w kółko o "magicznych liniach przecięcia", które mają pomóc umieścić wszystkie elementy projektu we właściwych miejscach, radzę wziąć głęboki oddech i zastanowić się, czy nie popadamy czasem w banał. Łatwo pójść za głosem stada, zwłaszcza że wcale nie jest szczególnie trudno trzymać się owej "złotej zasady".  Nie wydaje się jednak, by kryło się za nią jakieś dobre matematyczne czy biologiczne uzasadnienie — a już na pewno nie żadna magia.

Nie zapominajmy, że wcale nie postrzegamy wszyscy świata w identyczny sposób. Każdy z nas jest inny. Nie jesteśmy maszynami, które postrzegają świat według wyznaczonych precyzyjnie matematycznych reguł. Spójrzmy choćby na Reddit. Czy oni aby na pewno dbają o jakieś magiczne linie przecięcia?

Tak, reguła jednej trzeciej to dobre narzędzie — a przynajmniej bywa dobrym narzędziem — gdy akurat pasuje i "pokrywa się" z danym obrazem, projektem czy czymkolwiek innym, nie warto jednak traktować jej nazbyt poważnie. Łam więc zasady, kiedy tylko widzisz w tym sens. Posługując się wskazówkami i technikami, które poznasz w trakcie pracy nad projektami, działaj zawsze tak, jak sam uważasz za właściwe, i kieruj się intuicją. W twórczym projektowaniu "nic nie jest prawdziwe, wszystko jest dozwolone", jak rzekł kiedyś Nietzsche (choć na inny temat). Można to stanowisko roztrząsać od strony filozoficznej do upadłego — i nie bez przyczyny, jednak dla projektanta jest ono dobrą i pewną zasadą, która pozwala rozwijać własny potencjał twórczy bez "czarodziejskich" ograniczeń.

Szalej, łam zasady i baw się przy tym świetnie, a przy odrobinie szczęścia — sam wyznaczaj nowe granice! 

Boskie proporcje?

Skoro już wkroczyliśmy na czarodziejskie poletko designu, pozwólcie, że ponarzekam chwilę na coś, co się z tym wiąże: otóż długo wierzono, że już samo użycie "boskiej" proporcji sprawia, że powstaje coś niezwykłego, boskiego i miłego dla oka. Próbowano już nieraz owo "przednowoczesne" przekonanie obalić, w dobrej wierze.

Vitruvian Man
Człowiek Witruwiański Leonarda da Vinci

Ostatecznego werdyktu wciąż chyba brak — i tak chyba jeszcze czas jakiś pozostanie — nic zatem nie stoi na przeszkodzie, żebyśmy zachowywali wobec tego rodzaju przekonań nieco dystansu. Starajmy się wznieść ponad myślenie magiczne. Ja sam długo byłem przekonany, że "złoty podział" ma w sobie coś wyjątkowo przyjaznego człowiekowi, ponieważ naturalną koleją rzeczy widzimy go wszędzie wokół siebie. Mimo to warto byłoby mieć na to jakiś przekonujący dowód. Może tak jest, a może nie - nie jest to coś, co chciałbym przyjąć na wiarę i tym się kierować.

Siatka dwunastu modułów

Wróćmy do tematów bardziej praktycznych. Chciałbym omówić bardzo wszechstronny typ siatki, żebyście mogli zacząć już od czegoś konkretnego, podstawowego systemu, który pozwala tworzyć nowe layouty. Siatka 12 modułów będzie tu naszym sprzymierzeńcem.

Etsy

Dlaczego warto korzystać właśnie z siatki 12 modułów? Przede wszystkim łatwo podzielić ją na trzy, cztery lub sześć kolumn, co daje dość elastyczności, by udźwignąć wiele różnych rodzajów kontentu. Co więcej, można stworzyć na je bazie układ symetryczny lub niesymetryczny - co daje wiele opcji, zarówno prostych i bezpiecznych, jak i bardziej dynamicznych, które wykraczają poza prostą symetrię.

Przyjrzyjmy się teraz paru projektom, w których udało się dobrze tę elastyczność wykorzystać.

Siatka czterech kolumn

Główne zalety siatki czterech kolumn to jej prostota, równowaga oraz to, że jest bardzo uniwersalna. Każda z kolumn obejmuje trzy moduły. Wdą jest to, że siatka ta jest symetryczna, co sprawia, że wydaje się ona nudna.

Często potrzebna  jest jakaś sekcja główna na wyróżniony kontent, a także boczny pasek na treści poboczne. Na pierwszym przykładzie poniżej, zauważymy, że pierwsza kolumna wykorzystana została do brandingu, środkowe kolumny zawierają główny kontent, a ostatnia - treści, które nie wymagają szczególnoeg wyróżnienia.

forma
Harvard Design Magazine
Etsy
Wallpaper
marie claire

Siatka trzech kolumn

W tego rodzaju siatce kążda kolumna obejmuje cztery moduły. Ten podtyp jest nieco bardziej wymagający, ponieważ jest to siatka niesymetryczna - musisz zatem bardziej się postarać, żeby zrównoważyć swój projekt. Asymetryczne układy często uchodzą za bardziej aktywne i zmyślne. Można, oczywiście, i warto się z tym spierać!

Wallpaper
Kickstarter
Kickstarter
Wallpaper
WIRED

Siatka sześciu kolumn

W tym typie kolumna obejmuje dwa moduły, co jest pewnym utrudnieniem w stosunku do siatki o trzech kolumnach. Sześciokolumnowa siatka daje więcej opcji i pola dla dopracowania drobnych detali. Jeśli pracujesz nad stroną o bardzo bogatym kontencie i musisz zawrzeć na niej wiele informacji, sześciokolumnowa siatka będzie dobrym punktem wyjścia do eksperymentów. Jako że to prawdopodobnie najbardziej zaawansowana siatka, nie polecałbym jej tym, którzy właśnie zmagają się ze swoim pierwszym projektowym wyzwaniem.

Wallpaper
The New York Times

Kombinacje

Możesz również zestawić w jednym projekcie różne siatki - właśnie to czyni układ dwunastu modułów tak poręcznym. Pozwala on łatwo i zgrabnie podzielić układ na bloki złożone z trzech, czterech czy sześciu kolumn.

Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy

Akcenty

Zrównoważone i proste układy często wydają się wygodniejsze od tych bardziej złożonych. Z drugiej strony trzeba uważać, by nie iść za bardzo na łatwiznę, bo w ten sposób możemy popaść w nudę. Aby coś zaakcentować, możesz przełamać siatkę, wyróżniając pewne elementy poprzez rozmiar - na przykład poprzez łączenie ze sobą kilku kolumn. Pozwoli nam to uzyskać ciekawy efekt wizualny i lepsze uporządkowanie podstawowych elementów projektu.

Etsy

Projekt wiele może zyska, gdy przełamuje się siatkę dla zaakcentowania najważniejszych elementów, z drugiej strony może to dać,.umówmy się, niezbyt dobry efekt. Wallpaper bardzo dobrze poradził sobie z przełamaniem czterokolumnowej siatki, by zaakcentować film, który autorzy chcieliby podsunąć czytelnikowi do obejrzenia.

Wallpaper
form
Wallpaper

Trzeba jednak uważać: zbyt częste przełamywanie rytmu może dać efekt połamania i przeciążenia akcentami, z których żaden nie jest już w stanie dominować.

Ograniczenia

Często pada pytanie, kiedy należy używać w projekcie siatki? Odpowiedź brzmi: zawsze! Zawsze warto korzystać z siatki, bo pomaga ona zachować równowagę, hierarchię, uporządkowanie i spójność.

Mówi się również, że siatka ogranicza pole manewru. Jednak jest to właśnie jej zaleta - siatka może wspomóc kreatywność i ułatwić podejmowanie decyzji. Tego rodzaju ograniczenia to dobry punkt wyjścia. Gdy masz już określone pewne stałe zasady, jak choćby. rozmiary reklam narzucone przez twojego klienta, wiesz już, na czym oprzeć swój projekt. Rozmiar siatki powinien te ograniczenia uwzględniać.

W przykładzie poniżej, pochodzącym z The Wall Street Journal, widzimy, jak szerokość reklamy, zaznaczonej na zielono, skłoniła projektanta do zbudowania części siatki w oparciu o ten właśnie rozmiar.

Schemat strony

Dobrze użyta siatka pomoże co stworzyć schematyczny model dla całej strony i dla poszczególnych podstron. Nie powinniśmy tworzyć żadnej z nich w oderwaniu od pozostałych - planując projekt, trzeba pomyśleć o jakimś wspólnym mianowniku, który dopasowuje się do funkcji danej strony.

Przyjrzyjmy się teraz jeszcze raz paru udanym przykładom z Etsy. Tym razem skupmy się na tym, jak siatka radzi sobie z treściami o różnych potrzebach i jak łączy je ze sobą na różnego typu podstronach. Moim zdaniem, projektantowi udało się tu bardzo zgrabnie uzyskać pewną spójność i wrażenie jednolitości, które wiąże strony ze sobą. Projekt prowadzi czytelnika poprzez treści, podpowiadając mu, czego i gdzie może oczekiwać. Schemat strony jest bardzo konsekwentny i nie ma tu niespodzianek, które zaburzyłyby doświadczenie odbioru.

Twórcom udało się nadać stronom ładny rytm, a siatka wygląda zgrabnie dzięki swojej prostocie.

Kilka słów na koniec

O wyrównanie treści na stronie w sposób uporządkowany zawsze warto zadbać - i to właśnie chciałem przede wszystkim przekazać w tym artykule. Zadbaj o silną oś, która pokieruje wzrokiem użytkownika i o akcenty, które skłonią go do działania. W ten sposób tworzy się współzależności, które wiążą twoją pracę w jedną spójną całość. Postaw na prostotę! Dzięki temu będziesz tworzyć projekty łatwe do wykorzystania i do dalszego rozwoju.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.