Makieta + system siatki w Figma

Makieta + system siatki w Figma

Skoro masz już stylowy brief, czas przenieść Twoją wizję na ekran – ale jeszcze nie jako kod, tylko jako makietę.
Makieta to szkic wyglądu strony: pokazuje układ, hierarchię elementów, proporcje i strukturę. W tej lekcji przygotujesz własną – najlepiej w Figma, ale możesz użyć też Adobe XD, Sketch lub nawet kartki papieru.

1. Po co tworzyć makietę?

Makieta pozwala:

• zobaczyć cały projekt przed kodowaniem,
• przetestować układ i kompozycję,
• zdecydować o kolejności sekcji i typografii,
• uniknąć późniejszych przeróbek w kodzie.

Nie musisz być grafikiem. To nie design końcowy, tylko wizualna mapa layoutu.

2. Wybór narzędzia – Figma (zalecana)

Figma to darmowe, przeglądarkowe narzędzie do projektowania UI.
Zarejestruj się i utwórz nowy plik (New Design File), a następnie:

1. Dodaj nową ramkę (Frame) – kliknij „F” lub wybierz z lewego panelu,
2. Wybierz rozmiar – np. „Desktop 1440”, „Tablet” lub „Phone”,
3. Podziel stronę na sekcje (nagłówek, hero, usługi, stopka itd.),
4. Dodaj prostokąty, teksty, ikony – jako placeholdery elementów HTML.

3. Dodaj system siatki (Grid)

Siatka pomaga zachować równe marginesy, odstępy i spójność layoutu.
W Figma kliknij na wybrany frame, a następnie w panelu „Layout grid”:

• Dodaj siatkę typu „Columns”,
• Ustaw np. 12 kolumn, gutter: 20px, margin: 120px,
• To odpowiada klasycznemu systemowi siatki z CSS Grid lub Bootstrapem.

Dzięki temu wiesz, jak rozmieścić np. nagłówki, teksty, zdjęcia w kolumnach – zanim zaczniesz pisać kod.

4. Użyj komponentów – nawet uproszczonych

W Figma możesz tworzyć komponenty (buttony, karty, inputy), nawet jeśli to tylko kolorowy prostokąt i tekst.
To dobre ćwiczenie przed stworzeniem tych elementów w HTML/CSS.
Używaj fontów i kolorów zgodnych z Twoim briefem!

5. Eksport i organizacja

Twoja makieta powinna zawierać:

• Układ całej strony – sekcje od góry do dołu
• Widok dla desktopu (opcjonalnie też mobile/tablet)
• Wizualny pomysł na przyciski, nagłówki, teksty, spacing

Makieta nie musi być piękna – musi być czytelna i zgodna z briefem.
Jeśli chcesz, możesz eksportować ją jako PNG/JPG i mieć obok podczas pisania kodu.

Alternatywa: papier lub inny program

Jeśli nie używasz Figma – możesz stworzyć układ ręcznie, np. rysując na kartce układ strony.
Najważniejsze, byś miał gotową koncepcję – z proporcjami, nagłówkami, miejscem na przyciski i treści.

Efekt końcowy

Po tej lekcji masz:

• makietę strony z podziałem na sekcje,
• określoną siatkę (grid layout),
• użyte kolory i typografię z briefu,
• zarys komponentów UI, które zbudujesz w HTML/CSS.

Co dalej?

W kolejnej lekcji zrobimy listę komponentów HTML/CSS, które trzeba zaprojektować i zakodować – opartą na Twojej makiecie i briefie.