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 czy 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.
Dzieląc stronę w poziomie uzyskamy rzędy (lub wiersze). W projektowaniu stron używa się ich przeważnie do zaznaczenia kolejnych sekcji.
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.
Połączenie kolumny i rzędu daje nam moduł. Moduły przydają się do tworzenia na przykład galerii zdjęć,
Na koniec zerknijcie też na marginesy, czyli obszar poza siatką.
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?
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.
Od siatki wyjdziemy również gdy projektujemy kolejne podstrony lub moduły w istniejącym już produkcie (o zdefiniowanym systemie, gotowej siatce).
Ale 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. I to jest często wybierane przeze mnie podejście, gdy zabieram się za projekt, który nie ma zdefiniowanej warstwy wizualnej, stylu, wytycznych (design systemu lub style guide).
