Czy siatki wymuszają tworzenie sztywnych projektów? A może wyzwalają ukrytą kreatywność? Czy projektanci powinni korzystać z frameworków, czy raczej budować swoje siatki od podstaw? Craig Grannell spytał ekspertów o opinię na ten temat.
Klasyczny projekt kieruje się kontrolą: pragnieniem zaprezentowania informacji w spójny sposób, który pełni rolę informacyjną, jak też ma walory zachęcające. Wspieranie projektowania od samego początku to właśnie koncepcja siatki, to schemat umożliwiający projektantowi wypracowanie solidnych podstaw i spójnej struktury swojej pracy, bez względu na rodzaj wyjściowego medium. Obecnie koncepcja projektowania na bazie siatki staje się popularna i jak wiele wcześniejszych trendów, ma swoich zwolenników i przeciwników.
Wspólny język
Niektórych projektantów odrzuca sama myśl tworzenia na bazie siatki. Są one postrzegane jako bardzo ograniczające poprzez samo \”zmuszanie\” projektu do bycia sztucznym. Jednak osoby regularnie pracujące z siatkami argumentują, że takie postrzeganie siatek jest błędne i dobrze skonstruowany system siatki umożliwia projektantowi bycie kreatywnym w obrębie frameworku. Mark Boulton, projektant i autor książki Five Simple Steps to Designing Grid Systems, uważa, że rozpoczynanie pracy ze szkieletem jest o wiele prostsze, niż z pustą kartką.
– Nie tylko niektóre problemy graficzne, takie jak rozmieszczenie i wyrównanie, są od razu częściowo rozwiązane, ale siatka ułatwia stosowanie jednego graficznego języka w całym projekcie, nie tylko na jednej stronie – argumentuje.
Zdaniem wielu projektantów, tego rodzaju silne podstawy to potencjał dla większej twórczości, nie zaś mniejszej.
Dave Shea, siła napędowa Bright Creative i CSS Zen Garden, wyjaśnia:
– Siatki ułatwiają decyzje, które muszą być podjęte podczas procesu projektowania. Zamiast zastanawiania się, jak szeroki powinien być boczny pasek, ustalona struktura siatki określa to dla nas. To prawda, że ten rodzaj automatycznych decyzji narzuca pewną sztywność, ale jednocześnie umożliwia zastosowanie jej wszędzie w projekcie. Dodatkowy czas można poświęcić na uzyskanie bardziej twórczych efektów.
Co więcej, ze względu na fakt, że stosowanie siatki wymusza podejmowanie wielu decyzji dotyczących struktury projektu, różne wariacje layoutu są przygotowane zgodnie z założonymi zasadami, a nie na zasadzie arbitralnie podjętej decyzji. Elementy składowe struktury są bardziej ze sobą powiązane, a nie sprawiają wrażenia, że istnieją samodzielnie, co oznacza, że nawet biała przestrzeń nie wygląda jak puste miejsce, odkąd jest dopasowana do innych kolorów.
Z punktu widzenia projektanta, stosowanie siatek zazwyczaj prowadzi do bardziej uporządkowanego efektu pracy, który podoba się odbiorcom. Silna struktura strony z większym prawdopodobieństwem pomieści informacje, które będzie łatwo znaleźć. Dzięki temu użytkownicy będą mieli szansę przywiązać się do projektu, będą też szybko orientować się, gdzie znajdują się poszczególne jego elementy.
– Korzystanie z konwencji nie oznacza, że rezultat będzie nudny, ale to, że po prostu będzie łatwy w użyciu – zwięźle wykłada projektant Olav Bjorkoy.
Projekt online
Chociaż siatki powszechnie występowały w projektach drukowanych, projektanci stron WWW stosunkowo wolno przyswajali tę koncepcję, pomimo stojących za nią teoretycznych zasad – organizacji, łatwości dostępu i nawigacji po treści, spójności oraz elastyczności w obrębie frameworku. Największe różnice w projektowaniu online na bazie siatki są takie same, jak każdego projektu strony, który porównamy do druku: brak potencjalnej elastyczności i skalowalności niektórych lub wszystkich elementów, jak też brak różnicowania ustawień końcowego użytkownika. Ponadto podczas gdy poziome linie siatki są powszechne w druku, z elementami dopasowanymi do stałych punktów u dołu strony, trudniej jest to osiągnąć online, ze względu na różną treść i możliwość do skalowania tekstu przez przeglądarki.
– Powiedzmy, że ustawiliśmy rzędy o rozmiarze 150 pikseli (wysokość). 150 pikselowy obrazek w znalazł się po lewej stronie, natomiast tekst umieściliśmy po prawej. W naszym planie tekst może pasować, jednak gdy tylko użyjemy CMS-a i zaczniemy edycję tekstu, szybko okaże się, że to nieprawda. W efekcie otrzymamy martwą przestrzeń poniżej obrazka, jeśli wzrosła długość tekstu, lub martwą przestrzeń pod tekstem, jeśli się skurczył.
Zagwarantowanie idealnego dopasowania długości jest niemożliwe, toteż projektanci stron rzadko tego próbują.
Praca Richarda Ruttera nad Vertical Rhytm (zobaczmy http://24ways.org/2006/compose-to-a-vertical-rhythm) pokazuje, jak korzystać z podstaw typografii w wersji online w celu naśladowania bardziej surowej pionowej siatki występującej w druku. Jednak, opiera się to na założeniu, że pionowe wymiary wszystkich elementów odpowiadają wielu specyficznym wartościom, i podczas gdy jest to dobra metoda upewnienia się, że tekst w wszystkich kolumnach jest dostosowany do wspólnej siatki, to może ona narzucać ograniczenia, gdy mamy do czynienia z mieszanką obrazków i innych elementów.
Powrót do podstaw
Bez względu na to, czy naszym zamiarem jest ściśnięcie pracy projektowej poprzez użycie siatki, czy chcemy iść na całość i uwzględnić poziome linie siatki, eksperci zalecają uprzednie przepracowanie siatki na papierze, z uwzględnieniem wszystkich wymiarów, zanim na jej bazie zaczniemy cokolwiek budować. Siatki można konstruować posługując się takimi współczynnikami jak złoty odcinek lub można je po prostu zwielokrotniać.
– Najważniejsze jest takie zaprojektowanie siatki, by odpowiadała wymogom projektu – wyjaśnia Boulton. – System musi gwarantować maksymalną elastyczność przy jednoczesnym zachowaniu pewnego stopnia prostoty.
Boulton jest też adwokatem zasady trójpodziału. Powszechna w fotografii zasada jest łatwa do zastosowania w projektowaniu bazującym na siatce, poprzez proste wprowadzenie podziału na trzy, chociaż w jednolitej siatce można uzyskać wrażenie braku prężności.
Bardzo istotna jest tutaj świadomość, że w przeciwieństwie do czasopism, serwisy podlegają regularnym zmianom. Siatka zasadnicza musi być wystarczająco elastyczna, by poradzić sobie z różnymi zmianami w czasie.
– Siatka pełni rolę informacyjną dla projektu, ale nigdy nie powinna go ograniczać – mówi projektant Simon Collison. – Trzeba zadać sobie pytanie, jak będzie działać siatka, jeśli użyte elementy złączą cztery kolumny zamiast trzech, czy też czy poradzi sobie z sezonowymi i promocyjnymi poprawkami do layoutu, i co się wydarzy, gdy będziemy szybko zmieniać treść.
Simon uważa, że siatki powinny zachowywać się podobnie jak skóra cebuli. W zależności od wymagań strony powinniśmy móc \”obrać\” warstwy, aż siatka przystosuje się do celów strony.
– Koncepcyjnie mniej dotyczy to kolumn i rzędów, a bardziej granic – mówi.- Siatka zawsze powinna pomagać nam umieszczać nasze stałe elementy, ale także dawać wolność bycia kreatywnym w stosunku do specyficznych treści na stronie.
Magiczne liczby
Gdy zamiast abstrakcji przechodzimy do konkretnych liczb, opinie zaczynają się różnić. Każdy projektant ma swoją koncepcję tego, co jest najlepsze, i jeśli mamy zamiar pracować na siatkach, sami musimy o tym zdecydować. Bjorkoy zazwyczaj pracuje na 24 kolumnach o szerokości 30 pikseli, umieszczonych z 10-pikselowym odstępem między nimi. To dobre liczby, argumentuje, gdyż można je podzielić przez wiele liczb całkowitych, co zapewnia layoutowi elastyczność w różnych wersjach. Korzystając z tej metody będziemy mieć całościowy projekt o szerokości 950 pikseli, który dobrze komponuje się z wyświetlaczami o wymiarach 1024×768. Inni zachwalają korzystanie z szerokości 960 pikseli jako punktu startowego – i znowu ze względu na podzielność przez wiele liczb – i korzystanie z odstępów, które mają dodatkowy piksel szerokości, gdyż to pozwala na wizualnie przyjemniejsze rozmieszczenie linii siatki.
Jednak łatwo jest dać się ponieść. Khoi Vinh, dyrektor projektowy w New York Times i czołowa postać projektowania na bazie siatki, zaleca dopracowanie wszystkiego, zamiast sięganie po skrajne rozwiązania.
– Gdy widzę projektantów tworzących wielokolumnowe siatki, którzy rygorystycznie z nich korzystają, to takie podejście nie odpowiada mi – mówi. – Jestem za jak największą prostotą, ale jednocześnie jestem zwolennikiem elastyczności – to delikatna równowaga.
Na przykład, blog Vinha – Substraction ma elastyczny layout, który oparto jedynie na ośmiu kolumnach.
Do tej pory szerokość podawano w pikselach. Chociaż wielu projektantów zaleca płynne layouty, w rzeczywistości błędy zaokrąglania przez przeglądarki, jak też strony z elementami o sztywnej szerokości w pikselach (zwłaszcza obrazy) sprawiają, że prawie wszyscy pracują na stałych layoutach siatki.
Jeśli chodzi o kodowanie, opinie są jednomyślne: przede wszystkim należy zachować prostotę.
– To tu tabele były właściwie lepsze przy tworzeniu layoutów niż standardy sieciowe – mówi Boulton. – Przemawiały językiem projektanta: kolumnami i rzędami. Nie mamy jeszcze tych narzędzi dla CSS, chociaż pojawią się.
By być pewnym, że nasza praca jest dopasowana do siatki, Boulton poleca metodę Vinha, polegającą na nakładaniu półprzezroczystych obrazów kolumn i przerw. Można to zrobić w Photoshopie (za pośrednictwem warstw) oraz serwisie (za pośrednictwem tła CSS).
W miarę jak rośnie popularność siatek, zaczynają pojawiać się frameworki z dwoma popularnymi reprezentantami: YUI Grids Builderem
(http://developer.yahoo.com/yui/grids) oraz Blueprintem (http://code.google.com/p/blueprintcss). Umożliwiają drogę na skróty przy tworzeniu layoutów bazujących na siatce, jednak wielu projektantów zaleca tu ostrożność.
Najpopularniejszym argumentem przeciwko frameworkom jest to, że ukrywają sam proces. Taki stan rzeczy odpowiada profesjonalnym projektantom, którzy potrzebują szybko przygotować prototyp layoutu na bazie siatki. Trochę mniej jest to przydatne tym, którzy nie mają wiedzy na temat tego, jak frameworki są skonstruowane. W przypadku wielu projektów frameworki okazują się niewystarczające, gdy podejmowane są próby przystosowania ich do siatek, które zostały utworzone od zera.
Odmienną opinię prezentuje Ellen Lupton, autorka takich książek jak Thinking With Type. – Projektuję dla druku i amatorsko zajmuję się siecią – mówi. – Projektanci docenią wszystko, co sprawi, że CSS-y staną się bardziej intuicyjnym narzędziem layoutu, docenią to też użytkownicy.
Kolejna fala krytyki w stosunku do frameworków jest związana z kodem, jaki z siebie wyrzucają. Niektóre panują nad semantyką, która jest odrobinę lepsza niż komendy z martwego już FrontPage\’a. Wyjątkiem jest Blueprint Bjorkoya, framework CSS, który dostarcza elastyczną siatkę i podstawową typografię, wraz z potężnymi skryptami służącymi do przystosowania projektu do naszych potrzeb.
Blueprint zbiera nawet pochwały od osób takich jak Boulton, który zauważa, że \”został zaprojektowany do rozwiązywania problemów projektowych, a nie problemów technicznych\”.
Sam Bjorkoya, co zrozumiałe, jest fanem frameworków, utrzymując, że często są dobrze udokumentowane, z poradnikami i przykładami pomagającymi rozpocząć pracę. Przyzwoity framework jest lekki, dobrze korzysta z powtarzającego się kodu.
Jednak Bjorkoy nie ostrzega, że frameworki nie powinny być postrzegane jako jedyna droga do stosowania siatek. I choć mogą dobrze sprawdzać się w charakterze edukacyjnym, początkujący powinni sięgać do znanych serwisów bazujących na siatkach, by na ich przykładzie zorientować się, jak są skonstruowane.
Utworzyć lub zniszczyć
Ostatecznie najbardziej elastyczna siatka to ta, którą sami utworzymy, i choć jest możliwe zbudowanie dobrze skonstruowanych ram siatki, większość będzie potrzebować dostosowania związanego z wymogami poszczególnych projektów. Boulton pracuje obecnie nad serwisem zamieszczającym dużo tekstu, który wymaga wysokiego poziomu zróżnicowania dla każdego szablonu, przy jednoczesnym zachowaniu wspólnej siatki. To sprawia, że siatki tego rodzaju zazwyczaj są tworzone od podstaw. Shea i Vinh dodają, że nawet w przypadku elastycznej siatki, czasem konieczne jest jej złamanie, ze względu na reklamy.
– Czasem trzeba zablokować kawał strony, która nie dostosowuje się do siatki, by wszystko się zgodziło, lub po prostu zaprojektować siatkę wokół reklamy – wyjaśnia Shea.
Vinh preferuje drugie podejście i nawet uważa reklamy za pomocne; służą jako stałe ograniczenie – a \”ograniczenia są matką inwencji w projektowaniu\”.
Niektórzy twierdzą, że opłaca się być bardziej radykalnym – łamać siatkę w całości.
– Pragnienie złamania siatki może być pociągające, jednak bardzo łatwo dochodzi do nadużyć – uznaje ekspert CSS i sieciowy autor Eric Meyer. – Ile razy trafialiśmy na stronę, gdzie wszystko było porozrzucane właśnie z tego powodu? To jak typografia lat 80. ubiegłego wieku.
Zamiast raczej \”łamać\” siatkę, powinniśmy przeprojektować ją lub zmodyfikować, tak by odpowiadała nowym wymogom – radzi Boulton.
Kierując się tą radą, nawet najbardziej radykalne projekty mogą korzystać z podstawowej siatki. Siatka nie powinna wpływać na to, jak projekt wydaje się być kreatywny czy atrakcyjny dla użytkownika: ma jedynie zapewnić, że treść pojawi się tam, gdzie jest spodziewana. Podczas gdy siatki nie są magiczną różdżką, które uczynią nasz serwis pięknym i użytecznym, są krokiem we właściwym kierunku.
– Jest wiele ważnych technik związanych z prezentowaniem treści, które jeszcze nie trafiły do głównego nurtu tworzenia serwisów – podsumowuje Bjorkoy. – Jednak wreszcie możemy powiedzieć, że korzystanie z siatek nabiera zasłużonego rozmachu, niosąc ze sobą intrygujące koncepcje zaczerpnięte z druku, co może przynosić jedynie korzyści.
