Grid System jest jednym z najważniejszych narzędzi, jakimi dysponuje projektant. Pomagają tworzyć hierarchię informacji i ułatwiają odbiorcy zrozumienie układu strony. W tym wpisie przyjrzymy się, jak działają systemy siatek i jak można je wykorzystać na swoją korzyść. Poznamy też niektóre korzyści, jakie daje ich stosowanie.
Gridy opierają się na serii poziomych i pionowych linii, które przecinają się, tworząc szereg kwadratowych lub prostokątnych pól. Taki box nazywany jest modułem, a moduły można następnie wykorzystać do ułożenia treści na stronie. Jedną z głównych zalet stosowania systemu siatek jest to, że pomaga on stworzyć hierarchię informacji. Dzieląc stronę na mniejsze pola, możesz wyraźnie rozróżnić poszczególne typy treści. Na przykład jedno pole możesz przeznaczyć na główny nagłówek, drugie na podtytuły, a trzecie na tekst główny. Ułatwia to odbiorcy skanowanie strony i wybieranie informacji, których szuka.
Kolejną zaletą stosowania systemu siatki jest to, że pomaga on stworzyć symetrię na stronie. Dzieje się tak, ponieważ wszystkie elementy na stronie są wyrównane względem siebie. Dzięki temu strona ma bardziej uporządkowany i ustrukturyzowany wygląd, co może być pomocne w jasnym przekazywaniu informacji. Używanie grid system może też pomóc w poprawieniu responsywności layoutu. Jest tak dlatego, że łatwiej jest dostosować rozmiar elementów na stronie, gdy są one oparte na serii kwadratów lub prostokątów. Oznacza to, że Twój projekt będzie wyglądał dobrze na wszystkich urządzeniach, od telefonów i tabletów po komputery stacjonarne.
Pierwsze kroki
Skoro już wiesz, czym są systemy siatek i jak działają, pora dowiedzieć się jak działają, aby móc zastosować je w swoim następnym projekcie.
Istnieje kilka prostych zasad tworzenia siatek, które ułatwią Ci życie. Stosując się do tych wskazówek, możesz uniknąć powszechnych błędów w tworzeniu siatek i stworzyć układy, które są zarówno piękne, jak i funkcjonalne. Przyjrzyjmy się podstawom projektowania siatek.
- Zacznij od szkicu: Zanim zaczniesz kodować lub projektować w Figmie lub Adobe XD, zawsze pomocne jest szkicowanie swoich pomysłów na papierze. To pomoże Ci uzyskać poczucie, jak Twoja siatka powinna działać i gdzie każdy element powinien iść.
- Używaj liczb parzystych: Podczas tworzenia kolumn i rynien (przestrzeni między kolumnami) użyj parzystych liczb, aby wszystko było symetryczne. To sprawia, że dla czystego, bardziej polerowane wygląd.
- Trzymaj się 12-kolumnowego układu: Większość stron internetowych używa 12-kolumnowego systemu siatki, ponieważ zapewnia on wystarczającą elastyczność, a jednocześnie jest łatwy do zapamiętania i naśladowania.
- Zaprojektuj najpierw na urządzenia mobilne: W dzisiejszym świecie istotne jest, aby zaprojektować najpierw na urządzenia mobilne, a następnie skalować na większe ekrany. W ten sposób wiesz, że każdy element będzie widoczny i dostępny na wszystkich rozmiarach ekranu.
- Używaj procentów zamiast pikseli: Podczas określania szerokości kolumn lub rozmiarów czcionek używaj procentów, a nie wartości bezwzględnych (pikseli). Dzięki temu Twój układ będzie wyglądał dobrze na różnych rozmiarach ekranu.
- Pamiętaj o marginesach: Pamiętaj, aby zostawić wystarczająco dużo miejsca na marginesie wokół wszystkich stron swojej treści – szczególnie na mniejszych ekranach. Pomoże to zachować wizualną równowagę i zapobiegnie przedostawaniu się tekstu na krawędź strony
Podstawowe zasady
Jeśli chodzi o projektowanie siatek, istnieje kilka kluczowych rzeczy, o których należy pamiętać.
Pierwszą z nich jest to, że siatki powinny być oparte na treści, a nie odwrotnie. Siatki powinny być zaprojektowane wokół typu treści, którą wykorzystujesz i układu tej treści na stronie.
Po drugie, siatki powinny być elastyczne – nie powinny dyktować wyglądu treści, a raczej dostosowywać się do niego.
Po trzecie, siatki pomagają stworzyć porządek i hierarchię w treści, ułatwiając użytkownikom jej skanowanie i zrozumienie. Wreszcie, siatki mogą sprawić, że Twoja strona lub aplikacja będzie wyglądała na bardziej dopracowaną i profesjonalną.
Wybór odpowiedniego Gridu
Jeśli nie chcesz tworzyć własnego systemu siatki od podstaw, istnieje wiele istniejących frameworków siatki dostępnych online, które można wykorzystać. Pamiętaj tylko, aby wybrać taki, który będzie dobrze działał z typem zawartości, którą masz i który jest wystarczająco responsywny, aby dostosować się do różnych rozmiarów ekranu.
Jeśli masz już stronę internetową lub aplikację i musisz wybrać system siatki, który najlepiej sprawdzi się dla Twojej treści, jest kilka kluczowych rzeczy, o których należy pamiętać.
Po pierwsze, zdecyduj ile przestrzeni poziomej (od strony do strony) jest dostępne, a następnie znajdź system siatki, który pasuje do tych wymiarów. Możesz również użyć procentów zamiast pomiarów bezwzględnych, jeśli chcesz uzyskać większą elastyczność w zakresie zmiany szerokości strony w czasie.
Po drugie, należy rozważyć, ile pionowej (góra-dół) przestrzeni jest dostępna i wybrać siatkę, która pozwala na wystarczającą ilość nagłówków i podtytułów bez zbytniego zagęszczenia lub zagracenia. Ponownie, wartości procentowe mogą się tu przydać, jeśli chcesz mieć większą kontrolę nad wysokością kolumn w różnych rozmiarach ekranów urządzeń.
Osobiście jednak nie polecam stosowania gridu procentowego, no chyba że naprawdę mocno zależy Ci na nienawistnych spojrzeniach developerów i niespodziankach czekających na dnie Twojego kubka z kawą 🙂Tak na serio to procentowe odniesienie jest względne i bardzo często trudne do wyspecyfikowania i wdrożenia. W większości przypadków to gra całkowicie niewarta świeczki. Polecam zaś trzymanie się tego co znane, natywne i lubiane. Im mniej eksperymentów, tym większa łatwość w implementacji, a co za tym idzie oszczędność czasu i przewidywalność rezultatu.
Projektowanie własnego Gridu
Jeśli chodzi o projektowanie siatki, istnieją trzy główne względy: ogólne odczucie układu, liczba kolumn i wierszy oraz rynny między każdą komórką. Każdy z tych czynników może być dostosowany do stworzenia unikalnego wyglądu Twojej strony lub aplikacji. Ogólny wygląd powinien być oparty na osobowości Twojej marki i pożądanej estetyce. Na przykład, możesz chcieć eleganckiego, nowoczesnego wyglądu, który wykorzystuje dużo białej przestrzeni i cienkie czcionki, lub wolisz coś bardziej tradycyjnego z dużymi blokami kolorów i czcionkami szeryfowymi. Po ustaleniu ogólnego stylu, zastanów się, ile kolumn i wierszy zmieści się wygodnie na ekranie, pozostawiając jednocześnie dużo miejsca na oddech pomiędzy nimi.
Zbyt mała ilość kolumn lub wierszy sprawi, że wszystko będzie wydawało się ciasne, natomiast zbyt duża ilość doprowadzi do niezrównoważonego układu. Odległości pomiędzy kolumnami zwane są Gaterami i odgrywają również ważną rolę w czytelności; dają oczom czytelników przerwę między sąsiadującymi komórkami i pomagają uniknąć przepełnienia.
Podsumowanie
Grid System to standard i konieczność w projektowaniu interfejsów, ułatwia użytkownikom skanowanie i zrozumienie treści, a także mogą być stosowane na różnych platformach. Jeśli chcesz stworzyć przyciągający wzrok i przyjazny dla użytkownika układ dla swojej strony internetowej lub lub aplikacji natywnej, koniecznie zastosuj grid!