Jednostka 7 / 11

Układ i kompozycja: układ, siatka i hierarchia wizualna

Zyski:

  • Możliwość stworzenia użytecznego układu z zasadami hierarchii wizualnej, wyrównania, siatki, odstępów i punktów centralnych
  • Tworzenie wizualizacji ze spacjami na tekst i tworzenie tekstu edytowalnego oraz precyzyjne umieszczanie w programie do projektowania
  • Możliwość zapobiegania ryzyku przycięcia i odpadków poprzez zastosowanie zasad formatu, takich jak bezpieczny obszar i spad drukowania

Różnica między pięknym obrazem a działającym projektem polega często na układzie: rozmieszczeniu elementów na stronie. Układ określa, gdzie na plakacie w pierwszej kolejności kieruje się wzrok, czy tekst „dycha” na karcie w mediach społecznościowych i w jaki sposób informacje przepływają w broszurze. Na tym module nauczymy się zasad kompozycji (układania elementów w całość) oraz tego, gdzie sztuczna inteligencja jest w tym procesie pomocna, a gdzie ograniczona. Krytyczny fakt: sztuczna inteligencja tworzy wizualizacje, ale dokładny układ jest w rękach projektanta w programie do projektowania.

Dlaczego sztuczna inteligencja nie może sama stworzyć układu?

Sztuczna inteligencja tworzy całościowy, „dobrze wyglądający” obraz; ale układ projektu wymaga precyzji w pikselach, edytowalnego tekstu, wyrównania i stałych odstępów. Nie można przesunąć tekstu, dokładnie wyrównać logo ani zmierzyć marginesu na obrazie wygenerowanym przez sztuczną inteligencję. Profesjonalny przebieg wygląda następująco: wygeneruj tło/elementy wizualne za pomocą sztucznej inteligencji, skonfiguruj układ (tekst, logo, wyrównanie) w programie do projektowania. AI daje ci pomysł na surowiec i kompozycję; Dokładne umiejscowienie jest Twoją decyzją.

Podstawowe zasady kompozycji

  • Hierarchia wizualna: Układanie elementów według ważności. Oko najpierw kieruje się do największego/kontrastowego elementu. Ustalono kolejność nagłówka > podtytułu > treści > szczegółu.
  • Wyrównanie: Układanie elementów według niewidzialnych linii; Zapobiega bałaganowi i daje poczucie porządku.
  • Siatka: System dzielący stronę na niewidoczne kolumny i wiersze; Zapewnia spójne rozmieszczenie elementów.
  • Białe znaki (spacja ujemna): pusta przestrzeń między elementami; Dzięki temu projekt „oddycha” i jest czytelny. Mało miejsca = ciasno i amatorsko.
  • Bilans: Rozkład ciężaru wizualnego; Może być symetryczny (cichy) lub asymetryczny (dynamiczny).
  • Kontrast: Kierowanie uwagi różnicą w rozmiarze, kolorze lub grubości.
  • Punkt centralny: pierwsze miejsce, na które trafia wzrok; trzeba projektować świadomie.
Wskazówka: podczas tworzenia obrazów powiedz „zostaw miejsce na tekst” (np. „górna trzecia część jest pusta, gładka”) w odpowiedzi na monit. Dzięki temu nie utkniesz później przy dodawaniu tekstu do wizualizacji AI i będziesz mógł ustalić hierarchię.

Skonfiguruj układ krok po kroku

  1. Określ cel: Co powinien robić ten projekt? (ogłoszenie, sprzedaż, informacja). Określa kolejność priorytetów.
  2. Spis treści: jaki jest tytuł, tekst alternatywny, obraz, logo, połączenie (przycisk/CTA)?
  3. Ustal hierarchię: umieść najważniejszy element w najsilniejszej pozycji i rozmiarze.
  4. Wybierz siatkę: Określ strukturę słupa, w której wyrównasz elementy.
  5. Generuj obraz za pomocą AI: Wygeneruj tło/element o odpowiednich proporcjach, z miejscem na tekst.
  6. Wyrównaj w programie do projektowania: Wyrównaj tekst, logo, połączenie; ustaw spacje.
  7. Test: Przybliż, spójrz z daleka, sprawdź, gdzie najpierw kieruje się wzrok.

Praktyczne techniki kierowania okiem

Kompozycja jest właściwie sztuką kierowania okiem. Wzrok widza nie wędruje przypadkowo; Podąża za pewnymi znakami i dobry projektant świadomie z nich korzysta. Po pierwsze, rozmiar i kontrast: największy i najbardziej kontrastowy element przyciąga wzrok jako pierwszy, więc tam umieść najważniejszy przekaz. Drugi to linie wiodące: naturalne linie obrazu (ścieżka, zasięg ramienia, krawędź stołu) kierują wzrok w określone miejsce; Umieszczenie produktu lub tytułu w miejscu, gdzie kończą się te linie, zwiększa efekt. Po trzecie, podkreślenie przestrzeni: duża pusta przestrzeń wokół elementu sprawia, że ​​element ten się wyróżnia — samo słowo na zatłoczonej stronie ma potężną moc. Po czwarte, kierunek czytania: w większości kultur oko porusza się według wzoru „Z” lub „F” od lewego górnego rogu do prawego dolnego rogu; dlatego umieszczenie logo w lewym górnym rogu i wywołania (przycisku) w prawym dolnym rogu zapewnia intuicyjny przepływ. Podczas tworzenia tła za pomocą AI możesz zastosować następujące techniki: „kompozycja kierująca się od lewego dolnego rogu do prawego górnego rogu” lub „pojedynczy element w środku, szeroka przestrzeń wokół niego” itp. W ten sposób obraz staje się nie tylko piękny, ale także narzędziem przekazującym wiadomość we właściwej kolejności.

Format - szczególna uwaga

Każde medium rządzi się swoją zasadą: post na Instagramie 1:1 lub 4:5, historia 9:16, baner internetowy 16:9. Ważna jest koncepcja bezpiecznej strefy: ważne elementy należy trzymać od krawędzi, aby nie zostały przycięte lub pod elementami interfejsu (profil w historii, przyciski). W druku wymagany jest spad: aby lekko odsunąć wzór od krawędzi, aby uniknąć białych linii na marginesie cięcia.

trzy mini etui

Przypadek 1 — Oddychająca konstrukcja. Karta kampanii jednego z projektantów była ciasna; tytuł, tekst i logo zostały pomieszane. Odtworzył obraz z „górną trzecią pustą” i umieścił tekst w tej przestrzeni w hierarchii. Współczynnik klikalności znacząco wzrósł w grupie testowej; Pojawiła się „czytelna” informacja zwrotna.

Przypadek 2 – Błąd obszaru bezpiecznego. W projekcie opowieści ważne hasło znajdowało się na dole; Został ukryty pod przyciskiem „przewiń” w transmisji i się nie pojawił. Zgodnie z zasadą bezpiecznego obszaru hasło zostało umieszczone w górze i na środku. W kolejnej kampanii przekaz był jasny i nie wymagał żadnych przeróbek.

Przypadek 3 – Spad wydruku. Broszura została wydrukowana bez spadów; na krawędziach pojawiły się cienkie białe linie, a 300 sztuk zostało zezłomowanych (utracono około 1200 TL). W następnej pracy dodano do projektu 3 mm spad; Cięcie wyszło czyste.

Szablony do kopiowania

1) Generowanie rozstawionego tła dla tekstu:

Wygeneruj obraz tła dla projektu [medialnego]. Stosunek: [1:1 / 9:16 / 16:9]. Górna trzecia część powinna być gładka i pusta (dla tytułu). Ton marki: [przymiotniki]. Umieszczenie czytelnego tekstu/logo. Kolory odpowiadają palecie: [kolory].

2) Plan hierarchii:

Utwórz wizualny plan hierarchii dla poniższego projektu. Cel: [ogłoszenie/sprzedaż/informacja]. Elementy: [tytuł, tekst alternatywny, obraz, logo, objaśnienie]. Nadaj każdemu elementowi kolejność ważności, sugerowaną pozycję i względny rozmiar. Opisz ścieżkę, którą będzie podążać oko (ogniskowa → wtórna).

3) Zalecenia dotyczące siatki i wyrównania:

Zaproponuj prostą siatkę i schemat wyrównania dla następującej treści: [lista treści], współczynnik [x]. Ile kolumn zastosować, jak wyrównać elementy, ile miejsca (marginesu) zostawić? Zachowaj prostotę i równowagę.

4) Kontrola układu:

Oceń następujące stwierdzenie projektu pod względem kompozycji: czy hierarchia jest jasna, czy wyrównanie jest spójne, czy jest wystarczająco dużo białej przestrzeni, czy mieści się w bezpiecznej przestrzeni, czy punkt centralny jest jasny? Odpowiedz jako sugestia.Opis: [wklej]

Słaba zachęta/silna zachęta

Słabe: Zrób obraz banera rabatowego i powiedz 50%.

Wynik: AI zapisuje uszkodzone „50%”, elementy są ułożone losowo, nie można edytować tekstu; nie można używać.

Potężny: Stwórz obraz tła dla kampanii sprzedażowej: współczynnik 4:5, ciepłe, energetyczne odcienie, duża, gładka przestrzeń na tekst w lewym górnym rogu, produkt w prawym dolnym rogu. Umieszczenie czytelnego tekstu; Dopasuję tytuł, informację "50%" i przycisk w programie do projektowania.

Rezultat: edytowalne, hierarchiczne tło, które pozostawia miejsce na tekst.

Różnica: Silne podejście oddziela tekst od sztucznej inteligencji, planuje odstępy i proporcje, a układ pozostawia projektantowi.

Tabela zasad kompozycji

zasada

Co zapewnia

Praktyczna wskazówka

hierarchia

Kolejność czytania

Ustaw najważniejsze jako największe/kontrastowe

wyrównanie

poczucie porządku

Wyrównaj niewidoczne linie

siatka

Spójność

Użyj systemu kolumnowego

przestrzeń

Czytelność

Ucisk, zwolnij oddech

bezpieczny obszar

nie przycinanie

Trzymaj przedmioty od krawędzi

Krwawić

czysty druk

Przenosi krawędź o 3 mm

Typowe błędy

  • Drukowanie tekstu do AI: uszkodzony, nieedytowalny tekst; Dodaj tekst w programie do projektowania.
  • Nie pozostawiając miejsca: ciasny, amatorsko wyglądający projekt.
  • Brak hierarchii: wszystko ma ten sam rozmiar; Oko nie wie, dokąd iść.
  • Zapominanie o bezpiecznym obszarze: ważny element utknął pod interfejsem lub przycinaniem.
  • Pomijanie spadu: Białe krawędzie i odpady w druku.

Podsumowując

Układ to celowe rozmieszczenie elementów, które przekształca obraz w wykonalny projekt. Hierarchia, wyrównanie, siatka, przestrzeń, równowaga i kontrast to podstawowe zasady. AI tworzy tło i elementy wizualne, daje pomysły na kompozycję; ale układ precyzyjny co do piksela, edytowalny tekst i wyrównanie są w rękach projektanta w programie do projektowania. Udostępnianie miejsca na tekst, bezpieczne miejsce i spad wydruku to praktyczne zasady określające użyteczność wydruku.

Zadanie aplikacji

Wybierz medium i cel (np. post sprzedażowy na Instagramie). Zrób inwentarz treści, zrób plan hierarchii. Wygeneruj odpowiednio proporcjonalne tło z miejscem na tekst za pomocą AI. Następnie wyrównaj i umieść tytuł, tekst alternatywny, logo i objaśnienie w programie do projektowania (lub jako szkic na papierze). Sprawdź, gdzie najpierw kieruje się oko, przybliżając obraz i patrząc z daleka, i zanotuj to.

lista kontrolna

  • [ ] Ustaliłem cel i inwentarz treści.
  • [ ] Ustaliłem wizualny plan hierarchii.
  • [ ] Zrobiłem obraz z miejscem na tekst i odpowiednią proporcją.
  • [ ] Dopasowałem tekst i elementy w programie do projektowania.
  • [ ] Zaobserwowałem bezpieczny obszar i margines spadu (jeśli był to druk).
  • [ ] Zmniejszyłem go i przetestowałem punkt ostrości.