Layout

Layout – układ elementów w projekcie (np. na stronie, plakacie, w aplikacji).
Celem jest czytelność, estetyka i hierarchia informacji.
Pomaga uporządkować treści wizualnie i kierować wzrokiem odbiorcy.

Grid (siatka)

Grid – system linii (rzeczywistych lub niewidocznych) pomagający ustawić elementy w harmonijny sposób. Zapewnia spójność między stronami i projektami.
Rodzaje gridu:
1. Kolumnowy – podział na pionowe kolumny (np. gazeta, strona www).
2. Modułowy – siatka w pionie i poziomie (tworzy moduły).
3. Manuskryptowy – prosty blok tekstu jak w książkach.
4. Hierarchiczny – nieregularny układ dopasowany do treści.

Elementy siatki

• Kolumny – pionowe pasy do rozmieszczania treści.
• Rzędy – poziome podziały (np. sekcje strony).
• Marginesy – przestrzeń wokół układu (zewnętrzny „oddech” projektu).
• Guttery – odstępy między kolumnami lub modułami.
• Moduły – pojedyncze „pola” siatki (małe jednostki projektowe).
• Obszary (zones) – większe przestrzenie złożone z kilku modułów (np. miejsce na zdjęcie, nagłówek).

Rodzaje siatek (gridów)

1. Siatka kolumnowa (Column Grid)

• Najczęściej stosowana w druku i projektach webowych.
• Składa się z pionowych kolumn i gutterów (odstępów między nimi).
• Ułatwia ustawianie tekstów i grafik w logiczny, uporządkowany sposób.
• Może mieć 2, 3, 4, 6, 12 itd. kolumn – zależnie od projektu.
• Przykład: gazety, czasopisma, strony internetowe (np. 12-kolumnowy system Bootstrap).

2. Siatka modułowa (Modular Grid)

• Rozszerzenie siatki kolumnowej – dodaje też poziome linie, tworząc moduły (prostokątne bloki).
• Umożliwia bardziej elastyczne rozmieszczanie treści.
• Używana w bardziej złożonych projektach, jak plakaty, katalogi, raporty, aplikacje, dashboardy.

3. Siatka hierarchiczna (Hierarchical Grid)

• Elastyczna, nie opiera się na stałych kolumnach/modułach.
• Powstaje w oparciu o wagę treści – ważne elementy są większe, mniej ważne mniejsze.
• Dopasowana do konkretnego układu graficznego, nie do sztywnej siatki.

4.Siatka ukośna (Lo-axial grid)

• Opiera się na liniach ukośnych (np. pod kątem 30°, 45°).
• Stosowana w projektach, które mają być dynamiczne, nowoczesne, eksperymentalne.
• Często używana w plakatach, okładkach, projektach artystycznych.

5. Siatka radialna (Radial Grid)

• Rzadsza, oparta na promieniach wychodzących z jednego punktu (jak promienie słońca).
• Stosowana w projektach artystycznych, plakatach, kompozycjach typograficznych.
• Może być kojarzona z ruchliwością, energią, centralizacją uwagi.

Layout – zasady korzystania z siatek projektowych

🔹 Ogólne zasady korzystania z siatek

• Siatki pomagają uporządkować przestrzeń w projekcie.
• Trzymajmy się linii – elementy powinny być do nich wyrównane.
• Można przeciągać elementy przez kilka kolumn/modułów (np. zdjęcie lub nagłówek).
• Zachowuj spójne odstępy w całym projekcie.
• Dobieraj liczbę kolumn/modułów do treści i urządzenia:
  • 📱 telefon: 4–6 kolumn
  • 💻 desktop: do 12 kolumn
• Unikaj zbyt wąskich modułów – źle się je czyta i trudniej z nich korzystać.

🔹 Hierarchia i typografia

• Zadbaj o hierarchię wizualną:
  • Ważniejsze elementy (np. nagłówki) mogą zajmować więcej kolumn lub łamać siatkę.
  • Mniej ważne – powinny pozostać w obrębie modułów.
• Używaj linii bazowej typografii – czyli jednej wspólnej „linii bazowej” dla tekstów.
  • Ułatwia czytanie i daje rytm projektowi.
• Nie zapełniaj całej siatki – zostawiaj puste miejsca (światło wizualne), by poprawić czytelność i akcenty.

🔹 Łączenie i modyfikacja siatek

• Możesz łączyć różne siatki (np. kolumnową z modularną), jeśli ma to uzasadnienie.
• Dobrze działa np. jedna szeroka kolumna na tytuł i mniejsze moduły na treść poniżej.
• Ustal konsekwentny system marginesów – jednakowe z lewej/prawej, a nieprzypadkowe.
• Zmieniaj skład modułów dynamicznie – nie trzymaj się sztywno jednej wersji układu.
• Dostosuj układ do treści: ważniejsze elementy większe, mniej ważne mniejsze.
• Zmiana rytmu siatki (np. łamanie zasad) może wzmocnić przekaz – ale rób to świadomie!

Darmowe banki zdjęć (stocki)

https://unsplash.com
Ponad 4 mln zdjęć w wysokiej rozdzielczości
Licencja: darmowe użycie do celów komercyjnych i edukacyjnych
Atrybucja nie jest wymagana, ale mile widziana
✅ Swoboda wykorzystania, brak ograniczeń

https://pixabay.com/pl/
Ponad 5,6 mln zdjęć, ilustracji, grafik wektorowych i filmów
Licencja: Pixabay License – darmowe użycie, możliwość modyfikacji
Zakaz sprzedaży “as-is” (bez zmian)
✅ Duża różnorodność materiałów (także wideo)

https://www.pexels.com/
Zdjęcia + wideo (także 4K)
Licencja: Pexels License (zbliżona do CC0)
Brak obowiązku atrybucji, dozwolona edycja
✅ Świetne źródło do filmów, social mediów

https://openverse.org/pl
Metawyszukiwarka ponad 800 mln plików z licencjami CC0 / CC-BY
Przeszukuje różne źródła: Flickr, Wikimedia, Europeana itp.
Wszystkie materiały można swobodnie wykorzystywać i modyfikować
✅ Doskonałe do projektów edukacyjnych i kulturalnych

https://pl.freepik.com/
Duży dział darmowych zdjęć, ilustracji i wektorów
Wymaga podania autora (atrybucji)
Obowiązuje regulamin (np. zakaz redystrybucji bez zmian)
✅ Bogaty wybór grafik wektorowych i szablonów

INKSKAPE

https://maciek-robiszto.github.io/grid_generator/index.html

Shift + 3 – włącza lub wyłącza widok siatki (Grid).

Ctrl + G – grupowanie
Ctrl + Shift + G – rozgrupowanie

Clip – przycinanie (maskowanie) obrazów.
Używane do przycinania jednego obiektu drugim
(np. dopasowanie zdjęcia do kształtu).

Jak użyć Clip:
1. Umieść obraz pod obiektem, który ma być maską (np. kółkiem).
2. Zaznacz oba (najpierw obraz, potem maskę).
3. Kliknij: Prawy przycisk → Set Clip (Ustaw przycięcie)
lub z menu: Object → Clip → Set
LUB
3. Kliknij: Prawy przycisk → Set Clip

🧼 Usuwanie Clipu: Object → Clip → Release

ZADANIE NA TERAZ: 
– Temat artykułu: „Jak technologia wspiera rozwój kompetencji cyfrowych”
– Format: dwie strony A4 (poziomo lub pionowo)
– Materiały:
Logo projektu „Cyfrowe Ekspertki” (plik SVG/PNG)
Tekst artykułu (ok. 500–700 słów, można użyć lorem ipsum lub własny tekst)
3 grafiki stockowe (zdjęcia), pobrane z darmowych źródeł
Kompozycja layoutu do waszego wyboru
Teskt: Logo + tytuł artykułu (krój bezszeryfowy, 24–30 pt)
Podtytuł/lead (16–18 pt italics)głowny tekst (10-14pt)
Kolumny tekstowe:  Rozłóż główny tekst w kolumnach zgodnie z gridemGrafiki:Wstaw zdjęcie główne, wysokość
Dwie mniejsze grafiki osadź w dolnej części: po jednej w każdej zewnętrznej kolumnie
Dodaj podpisy (10 pt) pod każdym obrazkiem
Stylistyka i typografia
Użyj max. 2 krojów pisma (np. Sans-Serif do nagłówków, Serif do tekstu)Zadbaj o hierarchię wizualną: różne rozmiary i wagi fontów dla nagłówków, śródtytułów, akapitów

chillax

Zadanie : Plakat z wykorzystaniem gridów
Cel ćwiczenia: Opanowanie konfigurowania modułowej siatki (gridu) w Inkscape
Precyzyjne rozmieszczanie elementów (tekst, grafika, logo) według wyznaczonych kolumn i wierszy. Ćwiczenie komponowania plakatów o silnej hierarchii wizualnej
Opis zadania:
* Przygotowanie dokumentu
- Utwórz nowy dokument w formacie A3 (420 × 297 mm), orientacja pionowa.
- Ustaw marginesy po 15 mm ze wszystkich stron.
- Projektowanie kompozycji
- Tło: wybierz kolor bazowy (poza marginesami).
* Nagłówek: Wybierz wyrazisty krój bezszeryfowy, rozmiar ~60 pt.
* Logo: Logo „Pakt dla Kobiet” umieść je w prawym górnym narożniku, przyciągając do linii gridu.
* Obraz główny: Wstaw dużą grafikę (zdjęcie lub wektor) rozciągniętą na 3 kolumny i 2 wiersze pod nagłówkiem; dodaj delikatny cień lub ramkę.
* Tekst dopisowy / slogan: Pod główną grafiką ustaw slogan 
* Elementy dekoracyjne: W dolnej części rozmieszczaj mniejsze ikony lub kształty (po jednej w każdej kolumnie), korzystając z siatki pomocniczej do wyrównania.
* Typografia i kolory: Dobierz max. 2–3 kolory spójne z paletą logo. Zastosuj 2 kroje pisma.

Zadanie: Plakat z cytatem
Wybierz swój ulubiony cytat (z książki, filmu, piosenki). Zaprojektuj plakat w formacie A4, używając maksymalnie dwóch krojów pisma. Skup się na hierarchii wizualnej (które słowa są najważniejsze?), kontraście (np. grubością fontu) i kompozycji, aby projekt był interesujący wizualnie.

Zadanie: Monogram Ślubny "Kod i Płótno"
Opis klienta: Nietypowa para – programistka (np. inicjał 'A') i malarz (np. inicjał 'M') – prosi o projekt monogramu, który połączy ich dwa światy i będzie używany na papeterii ślubnej.
Wytyczne: Zaprojektuj monogram (logo z inicjałów) dla pary. Połącz w nim dwa style: jeden geometryczny, precyzyjny, inspirowany kodem (dla programistki), a drugi swobodny, z teksturą pędzla (dla malarza). Eksperymentuj z krojami pisma, przekształcaniem ich w krzywe i łączeniem w spójną całość.

Zadanie: Zaproszenie Ślubne "Kod i Płótno"
Opis klienta: Ta sama para, dla której projektowałaś monogram, potrzebuje teraz pełnego projektu zaproszenia ślubnego. Musi ono być spójne stylistycznie z monogramem i jasno komunikować wszystkie niezbędne informacje.
Wytyczne:
* Format: Zaproszenie składane, format po rozłożeniu A5 (148 x 210 mm).
* Strona frontowa: Wykorzystaj zaprojektowany wcześniej monogram, dodaj imiona pary oraz datę ślubu.
* Wnętrze zaproszenia: Zaprojektuj układ tekstu z informacjami o miejscu ceremonii i wesela, godzinach oraz prośbą o potwierdzenie przybycia (RSVP).
* Stylistyka: Utrzymaj spójność z monogramem
* Zadbaj o czytelną hierarchię informacji.

Zadanie: Diorama
100x120mm