zdrowe podejście do technologii i marketingu w internecie
Wordpress, Joomla, Marketing, SEO - Zdrowy-Web.plweb960 Grid System – jak przyspieszyć projektowanie i cięcie projektu

960 Grid System – jak przyspieszyć projektowanie i cięcie projektu

Coraz większa konkurencja na rynku tworzenia stron internetowych skłania nas do szukania jak najszybszych rozwiązań i jak najlepszych efektów. W tej branży przetrwają Ci co się rozwijają a firmy, które stoją w miejscu czeka zapomnienie. O ile młody freelancer webdesigner może sobie czasem pozwolić by dłuższy czas spędzić nad projektem, o tyle Ci bardziej zapracowani muszą mieć w głowie hasło ‚zapierdalać ćeba‚.

Jednym ze sposobów podwyższenia wydajności w trakcie pracy z projektem jest skorzystanie z systemy, który nam ją przyspieszy. Mamy dwa najpopularniejszy systemy: 960 Grid System i 1140 CSS Grid System.

Na czym to polega?

Pobieramy ze strony domowej projektu paczki, w których mamy zawarte pliki. Na te pliki składają się szablony do Photoshopa, Fireworska, Gimpa oraz pliki CSS i przykładowe pliki html. Dzięki tym plikom w programach graficznych mamy na czystym pliku od razu wmontowane linie pomocnicze. W zależności od potrzeb jest po kilka wersji.

Cały nasz projekt umieszczamy tak by mieścił odpowiednie modułu pomiędzy liniami pomocniczymi – mają one określoną szerokość. Później na podstawie tego projektu wdrażając go do CSS i XHTML’a wykorzystujemy już opisane klasy, dzięki którym praca idzie szybciej.

Zalety korzystania z Systemów Prowadnic (Grid System)

Podstawową sprawą przy tworzeniu strony internetowej jest zadbanie o jej przejrzystość. Nie chciałbym tu urazić ludzi traktujących projektowanie stron jako sztukę, ale tak zwyczajnie nie jest. Strona to narzędzie, które ma pomóc w sprzedaży – nie zawsze chodzi tu o sklepy internetowe, bo czasem sprzedawanym produktem jest treść – content strony. Dla użytkownika ważne jest by szybko, a więc łatwo dotrzeć do szukanych przez niego informacji.

Co właściwie znaczy łatwo?

Nasz mózg lubi rzeczy proste, powtarzalne, symetryczne. Dzięki nim potrafi szybciej przetwarzać informacje. Takie rzeczy bez problemu można zapamiętać. Tak samo jest w przypadku stron internetowych. Dużo łatwiej jest sobie przyswoić (przyzwyczaić się, odnaleźć się w nim) układ strony, w którym treść, boksy są wyrównane względem siebie.  Prowadnice wymuszają na nas stosowanie się do wyrównania, dzięki czemu otrzymujemy przyjaźniejszy design.

Jakie programy wspiera 960GS?

Oto lista programów, których templatki znajdziemy w paczce:

  • Acorn
  • Balsamiq
  • Corel Draw
  • Expression design
  • Fireworks
  • Gimp
  • Illustrator
  • Indesign
  • Inkscape
  • Omnigraffle
  • Photoshop
  • Pixelmator
  • Quarkxpress
  • Visio

O 1/3 tych programów nawet nie słyszałem. Kolejnej 1/3 bym nie polecał do tworzenia stron, ale jak widać twórcy tego systemu dbają o nawet najmniej racjonalne osoby ;-)

Konkrety

960 GS jak sama nazwa wskazuje jest to system, którego podstawą jest szerokość 960px layoutu. Dzięki właśnie tej liczbie projekty spełniają kilka wymogów:

  • mieszczą się przy rozdzielczości 1024px
  • można podzielić lay na 12, 16, 24 kolumny
  • divy mają dodatkowe parametry do przesunięć, paddingów itp

Jak to wykorzystać?

Po pierwsze wchodzimy na stronę 960.gs i pobieramy najnowszą paczkę. Mamy tam przygotowane templatki dla Photoshopa i Fireworksa. Te templatki to nic innego jak puste pliki z liniami pomocniczymi. Na nich oprzemy swój projekt. Mamy do wyboru układu 12,16 i 24-kolumnowe. Im bardziej złożony projekt (więcej boksów i nie możemy sobie pozwolić by strona była zbyt długa) tym więcej kolumn potrzebujemy. Przy 12 kolumnach odległości pomiędzy divami to 20px, a przy 24-kolumnowym układzie 10px. Jak widać wybór zależy do nasycenia treścią, podziałami na stronie. W skrócie można powiedzieć, że projekty bardziej portalowe lepiej współgrać będą z 24-kolumnowym układem, a pozostałem z 12, bądź 16-kolumnowym.

T

ak prezentuje się układ 12-kolumnowy z prowadnicami:

Na powyższym screenie kolorem łososiowym mamy oznaczone kolumny, w których możemy umieszczać nasze treści bądź boksu. Prowadnice oraz biała przestrzeń oznaczają pustą przestrzeń, która w CSS opisana jest jako margin. Oczywiście w przypadku boksów większych niż jedna kolumna biała przestrzeń należy do niej i nie ma dodatkowych przesunięć.

Poniżej przedstawiam boksy na tle układu 16 kolumnowego. Już po tym bardzo prostym schemacie widać zaletę stosowania Grid Systemów:

Wszystko jest spójne. Wiadomo co i dlaczego. Niektórzy mogliby powiedzieć, że oni i tak robią w ten sposób bez używania żadnych systemów. Nie umniejszając nikomu umiejętności – bardzo możliwe, że tworzysz bardzo przejrzyste projekty, ale dzięki takiemu systemowi jest dużo mniejsza szansa na popełnienie błędu.

Jest jeszcze drugi bardzo ważny argument: cięcie do XHTML.

Odbywa się dużo szybciej niż w przypadku standardowego projektowania. Każdy projektant bądź web-developer na pewno stawał przed – wydawałoby się błahymi – problemami z DIV’ami. Sekcje (div) nie zawsze są tak samo interpretowane przez różne przeglądarki – to pierwsza sprawa. Druga, że mając obszar 1000px i chcielibyśmy zrobić z niego 3 kolumny to daje nam 333,333(3)px na kolumnę. Do tego chcemy mieć 20px margines pomiędzy sekcjami, więc trzeba skrócić width i dodać margin.

Oczywiście, można sobie z tym poradzić, ale przechodząc do następnego wiersza w naszym projekcie okazuje się, że mamy 4 kolumny na 1000px i znowu zabawa zaczyna się od początku.

Właśnie w przypadku cięcia, wdrażania projektu Grid System ukazuje swoje prawdziwe oblicze.

Ten temat opiszę dokładniej w przyszłym wpisie, na którym pokaże jak korzystać z tego systemu w praktyce krok po kroku.

Tagged under: , , , , ,

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Fatal error: Call to undefined function cl_display_badge() in /home/users2/totas/public_html/zdrowy-web/wp-content/themes/Magazine/comments.php on line 78