Gridy, czyli jak projektować na siatce 12 kolumn

Jeśli nigdy nie projektowałeś wykorzystując grid, możesz mieć wiele pytań na temat jego zalet i powodów, dla których warto go używać. Zrozumienie samego systemu jest dość łatwe, siatka pikseli daje nam precyzję i kontrolę nad rozmieszczeniem elementów projektu oraz większą elastyczność we wdrażaniu projektów. W tym artykule zagłębimy się w to, czym są siatki i dlaczego warto ich używać w projektowaniu stron internetowych.

Co to są gridy? Z czego zbudowane są siatki gridowe?

Grid to system organizowania treści projektu, wyrównuje i porządkuje elementy. Niezależnie od tego, czy tworzysz układ do druku, na przykład czasopisma, czy łączysz obrazy i tekst w celu zaprojektowania strony internetowej, użyjesz siatki, która pomoże Ci podjąć decyzje projektowe i zapewnić użytkownikowi dobre wrażenia.

Korzystanie z siatki eliminuje przypadkowe podejmowanie decyzji. Dzięki odpowiedniemu użyciu siatki będziesz dokładnie wiedzieć, gdzie umieścić elementy, takie jak logo, elementy menu, nagłówek, treść, obrazy i inne. Pomoże to również przyspieszyć proces projektowania.

Siatki  gridowe w web designie

Siatka witryny internetowej, tak jak wcześniej wspomniałem, to system służący do organizowania treści na stronie oraz tworzenia porządku. Tworzy podstawową strukturę lub szkielet interfejsu użytkownika. Projektanci używają siatek gridowych do podejmowania decyzji projektowych i tworzenia dobrych doświadczeń użytkownika.

Kiedy podzielisz standardowy proces projektowania strony internetowej na etapy, które w większości przypadków będą obejmować tworzenie makiet UX i prototypowanie, zdasz sobie sprawę, że każda strona internetowa jest zbudowana z kwadratów i prostokątów. Ostatecznie, niezależnie od indywidualnego kształtu dowolnego elementu, znajdują się one w układzie siatki.

Jak zbudowana jest siatka?

Niezależnie od tego, czy są proste, czy złożone, wszystkie siatki zbudowane są z trzech głównych elementów:

• Kolumny  –  są podstawą siatek, określają obszar, w którym zostanie umieszczona treść. Szerokość każdej kolumny jest mierzona w procentach, a nie w stałych liczbach, co pozwala profesjonalistom na większą elastyczność w projektowaniu dla różnych rozmiarów ekranu. Liczba kolumn będzie zależała od rozmiaru i rozdzielczości każdego punktu przerwania ekranu (breakpoints). Najpopularniejsze frameworki wykorzystują system siatki składający się z 12 kolumn o równej szerokości; zapewnia to projektantom dużą elastyczność w zakresie układu.
• Gutter (rynna) – Rynny to przestrzeń między kolumnami. Ich funkcją jest przede wszystkim, zapewnienie przestrzeni między elementami projektu.
• Marginesy – to przestrzeń między obramowaniem, a zewnętrzynymi krawędziami strony.

Dlaczego 12 kolumn?

Strony internetowe często prezentują swoją zawartość w wielu kolumnach. Nie jest niczym niezwykłym, że chcemy, aby te kolumny były równomiernie rozmieszczone i miały ten sam rozmiar. Liczba 12 jest najłatwiejszą do podzielenia między rozsądnie małymi liczbami. Możliwe jest posiadanie 12, 6, 4, 3, 2 lub 1 równomiernie rozmieszczonych kolumn. Daje to projektantom ogromną elastyczność w projektowaniu.

Chociaż siatka 12-kolumnowa jest popularnym wyborem wśród wielu projektantów, nie jest to rozwiązanie uniwersalne. Wybierając siatkę, wybierz taką, która zawiera liczbę kolumn, których naprawdę potrzebujesz do swojego projektu. Nie ma sensu używać siatki 12-kolumnowej, jeśli twój układ wymaga tylko 8 kolumn.

Dlaczego warto korzystać z siatki?

Siatki pomagają nadać kształt i hierarchię projektom stron internetowych. Bez nich nie mielibyśmy pojęcia, gdzie umieścić elementy projektu. Potrzebujemy ich, aby stworzyć dobre wrażenia użytkownika, aby wiedział on, jak poruszać się po witrynie i znalazł to, czego potrzebuje. Poniżej znajdziesz listę kluczowych zalet korzystania z siatki.

Tworzy przejrzystość i spójność

Siatka strony internetowej  jest podstawą porządku w projekcie. Proporcje, biała przestrzeń i hierarchia to cechy projektu, które bezpośrednio wpływają na szybkość poznawczą. Siatki tworzą i wymuszają spójność tych elementów w całym interfejsie. Skuteczna siatka prowadzi wzrok, ułatwiając i uprzyjemniając skanowanie obiektów na ekranie.

Poprawia zrozumienie projektu

Ludzki mózg dokonuje oceny w ułamku sekundy. Źle złożony projekt sprawi, że produkt będzie wydawał się mniej użyteczny i godny zaufania. Siatki gridowe łączą i wzmacniają wizualną hierarchię projektu, udostępniając zestaw reguł, takich jak rozmieszczenie elementów w układzie.

Reaguje na zmianę szerokości ekranu

Korzystanie z siatki zapewnia spójne wrażenia na wielu urządzeniach o różnych rozmiarach ekranu. Projektanci nie mogą już tworzyć dla ekranu jednego urządzenia. Środowisko wielu urządzeń zmusza projektantów do myślenia w kategoriach dynamicznych systemów siatek czyli tworzenia projektów responsywnych.

Przyspiesza proces projektowania

Siatki umożliwiają projektantom zarządzanie proporcjami między elementami interfejsu użytkownika, takimi jak odstępy i marginesy. Pomaga to od samego początku tworzyć projekty perfekcyjne co do piksela i pozwala uniknąć poprawek spowodowanych nieprawidłowymi ustawieniami.

Ułatwia modyfikowanie i ponowne wykorzystanie projektu

W przeciwieństwie do druku, produkty cyfrowe nigdy nie są skończone — nieustannie się zmieniają i ewoluują. Siatki zapewniają solidną podstawę, ponieważ gdy wszystko jest zgodne z siatką, poprzednie rozwiązania można łatwo wykorzystać do stworzenia nowej wersji projektu. Siatka to szkielet, który można wykorzystać do uzyskania zupełnie innego wyglądu.

Ułatwia współpracę

Siatki ułatwiają projektantom współpracę nad projektami, udostępniając plan rozmieszczenia elementów. Systemy siatkowe pomagają podzielić pracę nad projektowaniem interfejsu, ponieważ wielu projektantów może pracować nad różnymi częściami układu, wiedząc, że ich praca będzie płynnie zintegrowana i spójna.

Rodzaje gridów na stronach internetowych

Kolumny, rynny i marginesy można łączyć na różne sposoby, tworząc odrębne typy siatek. Poniżej znajdują się trzy standardowe siatki układu:

Siatki hierarchiczne

Siatki hierarchiczne można przydzielić do kategorii, w których inne formy siatek nie pasują. Nie są one ułożone według rzędów ani kolumn. Siatki hierarchiczne nie mają równych odstępów między modułami. Zasadniczo może więc składać się zarówno z wierszy, jak i kolumn, często zachodzących na siebie, tworząc w ten sposób więcej miejsca na treść i kreatywność.

Siatki hierarchiczne są często spotykane w Internecie. Wykonuje się je poprzez umieszczenie danych i uporządkowanie ich w sposób instynktowny, czyli w zasadzie zgodnie z potrzebą danych.

Siatki kolumnowe

Siatki kolumnowe są najczęściej wykorzystywanym typem siatki, służą do organizowania elementów w kolumny. Czasopisma używają siatki kolumn, aby umieścić tekst w łatwych do odczytania sekcjach. Używane są często w witrynach internetowych, ale też w książkach i podręcznikach.

Tekst i obrazy w siatce kolumn są umieszczane zgodnie z pionowymi liniami tworzącymi kolumny. Obrazy można umieszczać w jednej kolumnie, w dwóch lub więcej, aby utworzyć inny układ wizualny. Odstępy między kolumnami (gutters) powinny być proporcjonalne i spójne w całym dokumencie.

Siatki modułowe

Siatka modułowa to siatka kolumn podzielona na wiersze. Przecinające się rzędy i kolumny tworzą moduły. Można ich używać do zarządzania decyzjami dotyczącymi układu. Jest to swojego rodzaj przedłużenia siatki słupów. Siatki modułowe są dobre, gdy wymagana jest większa kontrola nad układem projektu niż przy siatce kolumnowej, zapewnia elastyczny formaty stron i umożliwia tworzenie złożonej hierarchii.

Jak korzystać z siatek w projektowaniu stron internetowych?

Choć użycie siatki wydaje się intuicyjne, warto zapoznać się z kilkoma instrukcjami i podstawowymi zasadami korzystania z Gridów w projektowaniu UX/UI.

• • Umieść elementy w zestawach kolumn – w siatce z 12 kolumnami elementy można umieszczać na kilka sposobów. Na przykład możesz utworzyć dwa bloki treści przy użyciu sześciu kolumn, trzech zestawów po cztery kolumny w każdym lub czterech ramek po trzy kolumny. Pamiętaj, aby zostawić gutter, przestrzeń między każdym blokiem treści. Ustaw również granice swoich elementów na kolumnach, nie umieszczając ich krawędzi na gutterach. Ponadto, centrując elementy w kolumnach, zawsze zostaw trochę miejsca na krawędziach. Oznacza to, że dodaj spacje wypełniające po wewnętrznej stronie.

• • Nie zostawiaj zewnętrznych kolumn bez treści, tak jakby były dopełnieniem – jeśli nie jesteś przyzwyczajony do pracy z siatkami, możesz poczuć potrzebę dodania wypełnienia do swoich projektów. Ale po to właśnie są marginesy boczne: będą dodatkowym wypełnieniem.

• • Wyjście z siatki jest w porządku – używanie obrazów lub elementów, które wylewają się z siatki, jest w porządku; mogą przejść od krawędzi do krawędzi (np. banner lub elementy nawigacji witryny). Jeśli chcesz zaprojektować kolor tła lub obraz, który jest pełnym spadem, po prostu wyciągnij go poza siatkę w makiecie.

• • Zwróć uwagę na odstępy między blokami treści – umieszczając różne elementy na siatce, upewnij się, że odstępy między nimi są spójne.

• • Testuj i pozwól sobie na kreatywność – podobnie jak w przypadku każdej decyzji dotyczącej projektowania UX, powinieneś przetestować i zebrać informacje zwrotne na temat sposobu umieszczenia elementów w interfejsach użytkownika. W ten sposób uzyskasz informacje i spostrzeżenia na temat podróży użytkownika, które mogą być przydatne do ciągłego ulepszania projektów. Nie bój się też eksplorować. Użyj siatki w najlepszy sposób, aby poprawić organizację treści. Spróbuj zrozumieć, w jaki sposób możesz wyróżnić swoje treści i zapewnić lepsze wrażenia użytkownikom.

Gridy, a urządzenia mobilne

Siatki mobilne mają ograniczoną przestrzeń, co sprawia, że układ wielokolumnowy nie jest tak naprawdę możliwy. Treść mobilna jest zwykle ograniczona do jednej lub dwóch kolumn. Projektując dla urządzeń mobilnych, rozważ użycie układu kafelków, w której wysokość kolumn i wierszy jest taka sama. Szczególnie, jeśli korzystasz z podejścia Mobile First Design.

Zwróć uwagę na fakt, że na urządzeniach mobilnych użytkownicy mają ograniczoną przestrzeń na ekranie i mogą przeglądać tylko niewielką ilość treści naraz, zanim będą musieli przewijać. Tak więc, projektując układ siatki, stwórz obrazy wystarczająco duże, aby były rozpoznawalne, a jednocześnie wystarczająco małe, aby umożliwić jednoczesne obejrzenie większej ilości treści.

Podsumowanie

Grid jest jak klej, który spaja projekt. Nawet jeśli elementy są fizycznie od siebie oddzielone, łączy je coś niewidzialnego. Teraz, gdy już wiesz, dlaczego siatki są tak ważne i jak je zbudować, nadszedł czas, aby zacząć mierzyć i wyrównywać.

Pamiętaj, że dotyczy to każdego elementu projektu: widżetów i komponentów zarówno w poziomie, jak i w pionie. Pomoże Ci to osiągnąć zamierzony efekt końcowy i dostarczać wartościowe projekty.