Layout to układ, plan lub sposób rozmieszczenia elementów na określonej powierzchni. Znaczenie tego słowa zależy jednak od branży. W web designie oznacza strukturę strony lub aplikacji, w scrapbookingu – ozdobioną stronę opowiadającą historię, a w programach CAD – obszar przygotowania dokumentacji technicznej do wydruku.

Co to jest layout?

Angielskie słowo layout można przełożyć jako układ, rozplanowanie albo aranżację. Wspólnym mianownikiem wszystkich zastosowań jest zaplanowanie położenia elementów względem siebie oraz określenie, jak odbiorca ma je odczytywać lub wykorzystywać.

Dlatego layout nie ma jednej, uniwersalnej definicji technicznej. Ten sam termin może opisywać stronę internetową, kompozycję zdjęć i dekoracji albo przestrzeń roboczą służącą do przygotowania rysunku technicznego.

Dziedzina Czym jest layout? Główny cel
Web design Układ elementów strony lub interfejsu Przejrzysta nawigacja i wygodne korzystanie
Scrapbooking Ozdobiona, zwykle pojedyncza strona pamiątkowa Opowiedzenie historii za pomocą zdjęć, tekstu i dekoracji
Inżynieria i CAD Przestrzeń papieru lub moduł do tworzenia dokumentacji Przygotowanie rysunku do wydruku albo zapisu w PDF

Layout w web designie i UI/UX

W projektowaniu stron internetowych layout określa rozmieszczenie treści, nawigacji, grafik i elementów interaktywnych. Odpowiada za to, czy użytkownik szybko rozpoznaje strukturę witryny, wie, gdzie znaleźć informacje i potrafi wykonać zaplanowane działanie.

Typowy layout strony może składać się z kilku podstawowych obszarów:

  • Header – górna część strony z logo, menu, wyszukiwarką lub innymi elementami nawigacji.
  • Content – główny obszar zawierający tekst, zdjęcia, produkty, formularze albo multimedia.
  • Sidebar – panel boczny z dodatkowymi informacjami, filtrami, linkami lub menu.
  • Footer – stopka z danymi kontaktowymi, linkami informacyjnymi i informacjami formalnymi.

Na layout wpływają także typografia, kolory, odstępy, szerokość kolumn, hierarchia nagłówków i rozmieszczenie przycisków. UI, czyli interfejs użytkownika, dotyczy wyglądu oraz sposobu prezentacji tych elementów. UX odnosi się do doświadczenia użytkownika, a więc do tego, czy układ jest zrozumiały, wygodny i przewidywalny.

Istotną cechą współczesnego layoutu jest responsywność. Responsywny układ dopasowuje się do szerokości ekranu komputera, tabletu i telefonu. Kolumny mogą zmieniać położenie, menu może przyjmować uproszczoną formę, a elementy interaktywne powinny pozostać czytelne i łatwe do użycia.

Przeczytaj również: Co to mockup? Zastosowanie i rodzaje w projektowaniu graficznym

Layout strony nie jest tym samym co Cumulative Layout Shift (CLS). CLS to wskaźnik stabilności wizualnej, który mierzy nieoczekiwane przesunięcia elementów podczas ładowania witryny. Ocena CLS może dotyczyć jakości layoutu, ale nie stanowi definicji samego pojęcia.

LO, czyli layout w scrapbookingu

W scrapbookingu skrót LO pochodzi od angielskiego layout. Oznacza pojedynczą ozdobioną stronę, która zwykle tworzy zamkniętą kompozycję i opowiada konkretną historię. Może przedstawiać rodzinne wydarzenie, podróż, ważną osobę, zwierzę albo dowolne wspomnienie.

Najczęściej spotykany format to 30 × 30 cm. Taki rozmiar pozwala wyeksponować zdjęcie, dodać tytuł, krótki opis oraz dekoracje. Stosuje się również format 20 × 20 cm, mniejsze kartki, układy prostokątne i kompozycje składane z dwóch stron.

Przeczytaj też: Jakie są najważniejsze zasady projektowania graficznego?

Podstawowe elementy scrapbookowego layoutu to:

  • Zdjęcia – zwykle stanowią główny punkt kompozycji i wyznaczają temat pracy.
  • Journaling – krótki zapis autora, opisujący wydarzenie, emocje, miejsce lub datę.
  • Tytuł – hasło albo motto podkreślające znaczenie przedstawionej historii.
  • Dekoracje i pamiątki – między innymi koronki, wstążki, guziki, bilety, foldery lub inne drobne przedmioty związane z wydarzeniem.

Ważne jest zachowanie równowagi między ozdobami a zdjęciem. Tło i dodatki powinny wspierać opowieść, a nie przesłaniać najważniejszego elementu. Przykładowy LO może przedstawiać wakacje nad morzem, zawierać fotografię, datę, kilka zdań wspomnień oraz bilet lub niewielką pamiątkę z podróży.

Layout w AutoCAD i SketchUp

W programach CAD słowo Layout oznacza zwykle przestrzeń lub moduł służący do przygotowania dokumentacji technicznej. Nie jest to miejsce do modelowania bryły 3D. Model powstaje w przestrzeni modelu, natomiast layout służy do umieszczenia jego widoków na kartce i przygotowania materiału do wydruku.

W AutoCAD Layout można tworzyć rzutnie, czyli obszary pokazujące wybrany widok modelu w określonej skali. Na arkuszu umieszcza się także elementy, które nie należą do samego modelu, ale są potrzebne w dokumentacji:

  • ramki arkusza i tabelki z danymi rysunku,
  • rzuty, przekroje i inne widoki modelu,
  • wymiary, opisy, legendy oraz uwagi,
  • ustawienia skali, grubości linii i stylu wydruku.

Przestrzeń papieru odwzorowuje wygląd końcowego arkusza. Dzięki niej można sprawdzić, czy rysunek mieści się w obszarze wydruku, ma właściwą skalę i pozostaje czytelny po zapisaniu do PDF albo przeniesieniu na papier.

Podobną funkcję pełni SketchUp LayOut. Program pobiera sceny i widoki z modelu 3D stworzonego w SketchUp, a następnie umieszcza je na stronach o wybranym formacie. Pozwala dodać wymiary, opisy, symbole, przekroje i kolejne arkusze dokumentacji. Po zmianie modelu widoki mogą zostać zaktualizowane, dzięki czemu nie trzeba przygotowywać całego rysunku od początku.

Polecamy: Jak stworzyć profesjonalny mockup strony?

Najprościej rozróżnić te narzędzia tak: model 3D opisuje projekt w przestrzeni, a layout przedstawia jego wybrane ujęcia na płaskiej kartce. Rezultatem może być dokumentacja techniczna, zestaw arkuszy, wydruk lub plik PDF.

Layout zawsze oznacza zaplanowany układ elementów, ale jego zastosowanie wynika z kontekstu. Na stronie internetowej porządkuje treść i prowadzi użytkownika, w scrapbookingu buduje kompozycję wspomnienia, a w CAD pomaga przekształcić model lub widoki techniczne w czytelną dokumentację.