--- title: "Siatka projektowa: co to jest? Słownik pojęć" description: "Siatka projektowa to układ niewidocznych kolumn, marginesów i odstępów, na którym opiera się projekt strony www, katalogu czy prezentacji." url: https://fluostudio.pl/baza-wiedzy/slownik/siatka-projektowa/ --- [Identyfikacja wizualna](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=identyfikacja) # Siatka projektowa Inaczej grid, siatka typograficzna Siatka projektowa to układ niewidocznych kolumn, marginesów i odstępów, na którym opiera się projekt strony www, katalogu czy prezentacji. Dzięki niej elementy stoją w równych liniach, a kolejne strony mają ten sam porządek. ## W skrócie - Strony www najczęściej projektuje się na 12 kolumnach, bo 12 dzieli się na 2, 3, 4 i 6 - Siatka linii bazowych trzyma wiersze w sąsiednich kolumnach na tej samej wysokości ## Usługi - [Katalogi](https://fluostudio.pl/uslugi/projektowanie-graficzne/katalogi/) - [Projektowanie graficzne](https://fluostudio.pl/uslugi/projektowanie-graficzne/) Siatki nie widać w gotowym projekcie. Widać za to jej brak. Zdjęcie na jednej stronie katalogu zaczyna się kilka milimetrów niżej niż na sąsiedniej, tekst jest raz szerszy, raz węższy, a ikony stoją trochę obok osi. Klient nie powie, co jest nie tak, ale materiał wyda mu się mniej staranny. Siatka to decyzje podjęte raz, na początku: ile kolumn, jak szerokie odstępy, jakie marginesy, gdzie zaczyna się tekst. Potem każda kolejna strona, slajd czy post korzysta z tych samych linii. ## Z czego się składa - **Kolumny.** Na stronach www najczęściej 12, bo taką liczbę da się podzielić na 2, 3, 4 i 6 równych części. - **Odstępy między kolumnami.** Są stałe, żeby tekst i zdjęcia nie kleiły się do siebie. - **Marginesy.** To pas wolnego miejsca wokół treści. - **Linie bazowe.** Pozioma siatka, dzięki której wiersze tekstu w sąsiednich kolumnach stoją na tej samej wysokości. Gdy kolumny przetnie się też poziomymi rzędami, powstaje siatka modularna. Sprawdza się w katalogach z wieloma produktami na stronie i w raportach z tabelami. ## Po co firmie siatka Dla szybkości. Na gotowej siatce kolejną stronę [katalogu](https://fluostudio.pl/baza-wiedzy/slownik/katalog-produktow/) czy kolejny [szablon](https://fluostudio.pl/baza-wiedzy/slownik/szablon-graficzny/) składa się szybciej, bo decyzje o układzie już zapadły. Dla porządku: gdy materiały robi kilka osób, siatka sprawia, że wyglądają jak z jednej ręki. Na stronie www siatkę ustala się już na etapie [makiet](https://fluostudio.pl/baza-wiedzy/slownik/makieta/). Siatka mówi też, jak układ ma się przełożyć z ekranu komputera na telefon, więc jest podstawą [responsywności](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/). ## Siatka projektowa a siatka konstrukcyjna znaku W [księdze znaku](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-znaku/) też pojawia się siatka, ale to inna rzecz. Siatka konstrukcyjna pokazuje, z jakich okręgów, kątów i proporcji zbudowano logo. Siatka projektowa porządkuje całą stronę, na której to logo potem stoi. ## Zobacz też - [Druk i publikacje Skład Skład to układanie tekstu, zdjęć i tabel na stronach publikacji według ustalonej siatki i zasad typografii. Z niego powstaje gotowy katalog, raport czy ebook, a na końcu plik do druku albo na ekran.](https://fluostudio.pl/baza-wiedzy/slownik/sklad/) - [Strony www Makieta Makieta to uproszczony schemat strony lub ekranu aplikacji. Pokazuje, gdzie stoją treści, przyciski, formularze i zdjęcia, bez kolorów i ostatecznej grafiki, żeby ustalić układ przed projektem graficznym.](https://fluostudio.pl/baza-wiedzy/slownik/makieta/) - [Identyfikacja wizualna Szablon graficzny Szablon graficzny to gotowy plik z ustalonym układem, kolorami i krojami marki, w którym zespół podmienia tylko treść, np. w prezentacji, ofercie albo poście. Dzięki niemu materiały zgodne z marką powstają bez udziału grafika.](https://fluostudio.pl/baza-wiedzy/slownik/szablon-graficzny/) - [Strony www Responsywność Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać.](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/) - [Druk i publikacje Katalog produktów Katalog produktów to uporządkowana prezentacja oferty ze zdjęciami, opisami, parametrami i wariantami. Wydaje się go w druku, jako PDF albo na stronie, a korzystają z niego klienci i handlowcy.](https://fluostudio.pl/baza-wiedzy/slownik/katalog-produktow/) - [Identyfikacja wizualna Typografia Typografia to dobór i układ liter w tekście: krojów pisma, ich wielkości, odstępów i hierarchii. W identyfikacji wizualnej to zasady, dzięki którym teksty marki łatwo się czyta i wyglądają wszędzie tak samo.](https://fluostudio.pl/baza-wiedzy/slownik/typografia/) - [Identyfikacja wizualna Design system Design system to uporządkowany zbiór komponentów, zasad i plików źródłowych, z których zespół składa kolejne ekrany albo materiały marki. Zamiast projektować każdy element od nowa, korzysta się z gotowych, sprawdzonych części.](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Identyfikacja wizualna Księga znaku Księga znaku to instrukcja obsługi logo. Pokazuje jego wersje, kolory, pole ochronne, najmniejszy dopuszczalny rozmiar i przykłady złego użycia.](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-znaku/) Hasło pojawia się też w: [Margines bezpieczeństwa](https://fluostudio.pl/baza-wiedzy/slownik/margines-bezpieczenstwa/), [Raport roczny](https://fluostudio.pl/baza-wiedzy/slownik/raport-roczny/) ## Masz logo, ale nie masz systemu? Od tego zaczynamy. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)