Projektując strony WWW, o ile do makiet i prototypowania w najprostszej wersji nie potrzebujemy nic więcej poza kartką i ołówkiem, o tyle prace grafików i projektantów strony wizualnej warto wspomóc jakimś frameworkiem. Jako projektant DTP-owiec (kolejność zamienna, sic!) preferuję osadzenie całości strony na solidnej podstawie. Znakomicie sprawdzi się tu 960 Grid System. Uważam, że Adobe InDesign to znakomite narzędzie do przygotowania makiet, również na potrzeby sieci. Stworzyłem więc mały projekt: InGrid960, makietę wykorzystującą system szerokości 960 pikseli z podziałem na 12 i 16 łamów.
Makieta InGrid960 zawiera:
- dwie, zwymiarowane według 960GS strony wzorcowe (mastery) dla 12 i 16 łamowej kompozycji,
- przezroczyste palety wymiarowania (znajdują się na warstwach),
- podstawowa tabela stylów dla fontów stosowanych w sieci.
Zaprojektowany układ ostatecznie bardzo łatwo przenieść do arkusza styli dzięki stałym krotnościom odległości w łamach i marginesach. Tym samym warto już na etapie projektowania planować rozmieszczenie i zależności poszczególnych kontenerów w kodzie CSS (warstw, div).
Makietę można pobrać ze strony domowej projektu.
Polecam stronę 960 Grid System jako kompletne źródło informacji, przykładów i narzędzi.
English
While designing website, where for the layout and prototyping in the simplest version we do not need anything more than a sheet and a pencil, the work of graphic designers of visual aspect of pages we might help some framework. As a DTP and press designer I prefer placing the page as a whole on a solid basis. Excellent application could be here the 960 Grid System. I believe that Adobe InDesign is an excellent tool to prepare layout, even for the web pages. Hence an InGrid960, simple template providing a system with a width of 960 pixels in two wariants into 12 and 16 columns.
The InGrid960 template includes:
- two, dimensioned according to the 960GS model pages (master pages) for 12 and 16 columns composition,
- transparent dimensioning pallets (located on the layers),
- primary table for the paragraph style used on the web.
Designed layout is ultimately easy to move to the style sheet with a constant multiples of distance in columns and margins. Thus, at the design stage it is worth it to plan the deployment relations of the various containers in the CSS code (layers, div).
Template may be downloaded from InGrid960 home page.
I recommend 960 Grid System as a complete source of information, examples and tools.