Przez Hanna Dąbrowska 2D 2025 w 2d — 25 sie 2025

Dzień 5 - Layout, Grid

Siatka:

Siatka pozwala nam organizować przestrzeń kiedy projektujemy.

Podziały zawarte w siatce pozwalają nam na lepsze prowadzenie idei oraz skuteczniej demonstrować intencje.

Najważniejsze elementy siatki:

Pionowo:
Kolumny
Marginesy
Przestrzenie Buforowe - Gutter

Poziomo:
Rzędy
Marginesy
Przestrzenie Buforowe - Gutter

Podstawowe rodzaje layoutów:

Podział kolumnowy:

Podział modułowy:

Modular grid czyli podział modułowy
Podział modułowy najczęściej wykorzystywany jest w:
- Stronach www
- Aplikacjach
- Plakatach

Podział hierarchiczny:

Hierarchical grid czyli podział hierarchiczny
- Podział ten polega na stworzeniu takich proporcji aby poszczególne elementy albo kontrastowały w jakiś sposób.
> Przy pomocy wielkości obrazów
> Przy pomocy zmiany koloru
>Przy pomocy tekstury

Najważniejsze elementy podziału hierarchicznego to:
-Grupa główna - Loga, Nazwy, Tytuły
-Grupa drugorzędna - Miejsce, artyści, Daty itp.
-Grupa trzeciorzędna - www, SoMe, kontakt itp
*SoMe - Social Media

Podział Manuskryptowy:

Manuscript grid czyli podział manuskryptowy:
Podział najczęściej spotykany w książkach, jedna kolumna w której są inne elementy, głównie tekst.

Axial Grid:

Radial grid:

- Bardzo Dynamiczny
- Celem jest wyróżnienie i podkreślenie jednej cechy

Inne:

Rule of thirds - trójpodział
Isometric Grid
Asymetric Grid

Zasady Korzystania:

Siatki służą nam do uporządkowania przestrzeni.
- Trzymamy się lini.
- Możemy przeciągać elementy po kilki elementach siatki.
- Zachowanie konsekwentnych odstępów w całym projekcie jest ważne
- Dobieraj liczbę kolumn do treści i urządzenia - na telefonie wystaczy 4-6 kolumn, na desktopie 12; unikniesz zbyt wąskich modułów.
- Ustal hierarchię wizualną - ważniejsze elementy (nagłówki) mogą zajmować więcej kolumn lub łamać siatkę , mniej istotne powinny być utrzymane w modułach.
- Stosuj siatkę bazową dla typografii - wyrównanie lini tekstu do wspólnej "lini bazowej" ułatwia czytanie i nadaje rytm pionowy.
- Korzystaj z białej przestrzeni - nie zapełniaj każdego modułu, puste pola wzmacniają akcenty i poprawiają czytelność.
- Łącz różne siatki, gdy to uzasadnione np. kolumnową dla treści i modularną dla kart produktu na tej samej stronie.
- Trzymaj elementy optycznie wyrównane - jeśli grafika jest nietypowa , skorygój ją żeby wyglądała równo w kolumnie.
- Zmieniaj skalę modółów zamiast powiększać odstępy - lepiej poszerzyć kolumnę o jednostkę niż zwiększyć rynienkę poza siatkę bazową.
Dokumentuj wyjątkowe złamania, każde świadome odejście od siatki opisz w guideline-ach, by zespół wiedział, kiedy i dlaczego wolno tak zrobić.

Generowanie Siatek - w trakcie egzaminu nie można użyć siatkomatu więc warto się nauczyć robić siatki

w tych przypadkach marginesy od zewnątrz zachowałam 10 mm

tu mamy jeszcze inną siiatkę

Grafiki izometryczne są fajne do przedstawiania danych:

Dioramy:

obrazek stworzony z kilku nakładających się na siebie kształtów, jest złożony z warstw

10-15 mm grubość ramki

Stroke to path - pamiętajmy świadomie tego używać i że jest to częsty błąd
warto w outline sprawdzać jak wyglądają linie, jak je laser zobaczy.

Praca Domowa:

Dokończyć Dioramę

zad1.

Wybierz swój ulubiony cytat (z książki, filmu, piosenki). Zaprojektuj plakat w formacie A4, używając maksymalnie dwóch krojów pisma. TYLKO napisów. 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.

zad 2.

Monogram Ślubny "Kod i Płótno" (zadanie domowe) 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ść.

Zad. 3:

Zaproszenie Ślubne "Kod i Płótno" (zadanie domowe) 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.

4.–

Temat artykułu: „Jak technologia wspiera rozwój kompetencji cyfrowych”– Format: dwie strony A4 (poziomo lub pionowo)– Materiały:Logo projektu „PAKT dla Kobiet” (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 wyboruTeskt: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 kolumnieDodaj podpisy (10 pt) pod każdym obrazkiemStylistyka i typografiaUż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

Grawer - czarne wypełnienie
Wycięcie - Czerwony kontur

Skróty:

Shift + 3 chowa Grid

Linki:

https://excalidraw.com/#room=d9cc5a99172486394073,6xZUD1SfYtn281d5sFmMsA Excalidraw na dziś :)

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

Logowanie do PDK

https://pdk.robisz.to/ghost/

https://pdk.robisz.to

https://wiki.robisz.to/

https://www.facebook.com/watch/live/?ref=watch_permalink&v=2597946377141393

discord - kontakt