Elementarz

Gridy, czyli siatki w projektowaniu

Gridy, a po naszemu, siatki, to temat, który z pewnością obił się Wam nie raz o uszy. Zazwyczaj wiąże się je z projektowaniem stron internetowych, co oczywiście błędne nie jest, ale siatki stosuje się i stosowano długo przed pojawieniem się cyfrowych mediów.

Jak co poniedziałek, na kanale pojawił się również film na ten temat:

Czym są gridy/siatki?

Siatki to po prostu narzędzie, który służy projektantom do uporządkowania treści w projekcie – zarówno tekstów, jak i obrazów. Dzięki siatce osiągamy wrażenie ładu i spójności, co ma wpływ nie tylko na estetykę, ale również użyteczność.

Siatek używa się nie tylko we wspomnianych stronach internetowych. Używane były w projektowaniu… książek. Świetnie sprawdzają się w projektach magazynów, katalogów, ulotek, reklam, a także mniejszych form – logo czy ikon. Można nazwać je zatem takim szkieletem dla wszystkich elementów, które znajdą się w projekcie.

Siatki w web designie

Oprócz wrażenia porządku, siatki na stronach internetowych spełniają jeszcze inną funkcję. W czasach gdy nie projektujemy tylko na jedną rozdzielczość zachowanie ładu na stronie zaczęło być problematyczne. Dlatego dynamiczne siatki zyskały tak ogromną popularność. Zmieniając szerokości i ilość kolumn, czy marginesów w projekcie, możemy układać treść tak, by niezależnie od rozdzielczości była estetyczna i czytelna.

Jak zbudowana jest siatka?

Zacznijmy od tego, z czego składa się właściwie siatka? Na początek mamy kolumny, które dzielą stronę na pionowe części. Kolumna może być jedna, może być ich i 16. Budując kolumny pod teksty warto pamiętać, że im szersze kolumny, tym mniej przyjemnie będzie czytało się dłuższe teksty.

grid kolumnowy

Dzieląc stronę w poziomie uzyskamy rzędy (lub wiersze). W projektowaniu stron używa się ich przeważnie do zaznaczenia kolejnych sekcji.

siatki w projektowaniu

Bardzo ważnym, choć z pozoru nieistotnym, elementem siatki są również odległości między kolumnami i rzędami. To one odpowiadają za „oddech” na stronie, dlatego warto poświęcić im chwilę czasu.

jak uzywac gridow

Połączenie kolumny i rzędu daje nam moduł. Moduły przydają się do tworzenia na przykład galerii zdjęć,

projekt grida do strony

Na koniec zerknijcie też na marginesy, czyli obszar poza siatką.

gridy projektowanie stron

Jak wybierać siatkę do projektu?

Mamy różne rodzaje siatek – te składające się wyłącznie z kolumn, modularne czy hierarchiczne. Możemy tworzyć je sami lub korzystać z gotowych. Skąd jednak wiedzieć, którą siatkę wybrać do swojego projektu?

gridy w projektowaniu strony
Po lewej siatka kolumnowa, po prawej przykład hierarchicznej

Drogi są dwie i tę, którą wybierzecie zależy w sumie od Waszych upodobań, czy projektu, który aktualnie robicie. Można wybrać najpierw siatkę. Dajmy na to, że robicie bardzo prostą, minimalistyczną stronę, gdzie będzie potrzebny nagłówek ze zdjęciem, lista wpisów i boczny panel na social media. Możecie stworzyć sobie wtedy hierarchiczną siatkę, na które będziecie opierać swój projekt.

Albo robiąc listę produktów w sklepie, wiecie, że potrzebna będzie siatka modularna. Szerokość kolumn i odstępy poprawia się wraz z budową kolejnych elementów, ale wciąż, z projektem wychodzi się od siatki.

Można również pracować w drugą stronę. Czyli zaczynacie tworzyć projekt i na bazie zaprojektowanych elementów dopiero ustalacie sobie siatkę. Wiecie już jakiej szerokości kolumny będą potrzebne, czy marginesy wyglądają w porządku i tak dalej.

No to co? Używacie siatek? Wolicie te gotowe, czy jednak tworzycie swoje?

Od 9 lat zajmuję się projektowaniem (na co dzień IA) i nie wyobrażam sobie żeby zajmować się czymś innym (choć projektowanie w moim wypadku to bardzo, bardzo szerokie pojęcie). W wolniejszej chwili jem, gram w gry i czytam nie tylko sci-fi i komiksy ;)