Projekt strony internetowej w Figmie pozwala zobaczyć wygląd i działanie witryny, zanim ktokolwiek zacznie ją programować. Poprawki na tym etapie są znacznie szybsze i tańsze niż zmiany w gotowym kodzie, dlatego warto przeprowadzić go starannie, zgodnie z zasadami projektowania UX i UI.
Stronę można przygotować na dwa sposoby: kupić gotowy szablon i wdrożyć go, na przykład w WordPressie, albo zaprojektować serwis od podstaw, według potrzeb firmy i jej klientów, a następnie wdrożyć w wybranej technologii. Firmom, którym zależy na skutecznej stronie, zwykle lepiej służy drugie rozwiązanie. Daje pełną elastyczność i pozwala zastosować rozwiązania, które realnie odpowiadają na potrzeby użytkowników.
Poniżej opisujemy, jak wygląda ten proces krok po kroku i co warto przygotować po stronie klienta. Towarzyszymy Ci na każdym etapie: od pierwszych pytań o cele strony aż po sprawdzenie, czy gotowa witryna została wdrożona zgodnie z projektem.
Etap 1: cele strony i struktura podstron
Prace zaczynamy od kluczowych pytań. Do czego ma służyć strona, kto z niej korzysta i jakie działanie ma wykonać odwiedzający? Odpowiedzi decydują o liczbie podstron i ich układzie.
Następnie powstaje mapa strony, czyli hierarchiczna lista podstron, na przykład: strona główna, usługi, realizacje, blog i kontakt. Na tym etapie ustalamy również adresy podstron.
Etap 2: strategia SEO i słowa kluczowe
Zanim powstanie makieta, ustalamy, jakich fraz użytkownicy szukają w wyszukiwarce, aby struktura strony odpowiadała na ich pytania. Wspólnie z agencją SEO, z którą współpracuje Twoja firma, wybieramy słowa kluczowe najważniejsze dla marki, a dla każdej podstrony przygotowujemy meta tytuł, meta opis i słowa dodatkowe.
Decyzje opieramy na danych. Google Search Console pokazuje frazy, po których strona jest już wyświetlana w wynikach wyszukiwania. Google Analytics pokazuje, jak użytkownicy poruszają się po witrynie i które podstrony przyciągają ruch. Planer słów kluczowych w Google Ads informuje, ile osób szuka danej frazy. Dzięki temu nazwy podstron, nagłówki i adresy dobieramy świadomie, a nie na podstawie domysłów.
Etap 3: makieta UX
Makieta UX to szkic układu strony, jeszcze bez kolorów i zdjęć. Pokazuje kolejność sekcji, miejsce przycisków oraz przewidywaną długość treści. Pozwala sprawdzić, jak strona będzie działać, jaką ścieżką przejdzie klient i czy szybko znajdzie potrzebne informacje. Dlatego jest najlepszym momentem na zmianę koncepcji.
Etap 4: copywriting
Jeszcze przed projektem graficznym przygotowujemy treści. Teksty są spójne z głosem marki, oparte na ustalonych wcześniej słowach kluczowych i dopasowane do układu makiety. Dzięki temu projekt graficzny powstaje na prawdziwych tekstach, a nie na zastępczych, więc długość nagłówków i akapitów jest od początku realna.
Etap 5: projekt strony internetowej w Figmie – warstwa graficzna
Jeśli firma ma brandbook, na jego podstawie tworzymy design system, czyli zbiór ustalonych zasad: kolorów, fontów, odstępów, zaokrągleń, przycisków i komponentów. To on gwarantuje spójność wszystkich widoków.
Jeśli brandbooka nie ma, zaczynamy od moodboardu. Po jego akceptacji proponujemy palety kolorystyczne i dobór fontów, a następnie budujemy rozbudowany design system.
Kolejny krok to projekt graficzny jednej do trzech wybranych podstron. Projektujemy w nich kolejne sekcje w ustalonym charakterze i stylu.
Pracujemy w programie Figma, który umożliwia pracę zespołową: komentarze i uwagi nanosisz bezpośrednio przy konkretnym elemencie projektu. Dzięki temu praca przebiega sprawnie, w ciągłym kontakcie z Tobą, a nie w długich wiadomościach e-mail.
Po akceptacji tego etapu projektujemy wszystkie pozostałe widoki, na przykład:
- stronę główną
- listę usług
- szablon pojedynczej usługi
- stronę „O nas”
- stronę kontaktową
- stronę podziękowania po wysłaniu wiadomości
- menu i stopkę
- politykę prywatności
Dobrze przygotowany projekt w Figmie opiera się na stylach. Style tekstu określają rozmiar i krój nagłówków oraz akapitów. Style kolorów pilnują, żeby każdy element miał kolor z palety marki. Zmienne odstępów zapewniają jednakowe marginesy w całej witrynie. Gdy zmieniasz kolor przycisku w stylu, zmienia się on na każdej podstronie, więc poprawki zajmują minuty, a nie godziny. Taki porządek ułatwia też późniejszą rozbudowę serwisu o kolejne podstrony.
Projektujemy widoki na komputer i telefon, dzięki czemu strona dobrze wygląda na każdym ekranie, a deweloper dokładnie wie, jak wdrożyć ją na mniejszych urządzeniach. Projektujemy również animacje i interakcje elementów.
Po prezentacji projektu zbieramy Twoje uwagi i wprowadzamy zmiany. Dopiero po akceptacji wszystkich widoków zaczyna się wdrożenie, dzięki czemu unikamy kosztownych zmian w kodzie.
Etap 6: wdrożenie i odbiór strony
Po akceptacji projektu możesz wybrać, kto zajmie się wdrożeniem:
- Astrotea. Współpracujemy z agencją Astrotea, która wdraża zaprojektowane przez nas strony na WordPressie. Ma ponad 10 lat doświadczenia w pracach deweloperskich na WordPressie i ponad 40 wdrożonych stron. Zajmuje się też administracją stron i wsparciem technicznym, więc po zakończeniu projektu pozostajesz pod stałą opieką.
- Inna agencja. Jeśli wolisz inną technologię lub masz własne preferencje, możemy polecić sprawdzoną agencję wdrożeniową.
- Twój deweloper. Możemy przekazać projekt Twojemu zespołowi programistów razem z gotowymi stylami, wymiarami i widokami na każdy ekran.
Niezależnie od wybranej drogi nie zostawiamy projektu bez opieki po przekazaniu plików. Gdy strona jest wdrożona, sprawdzamy ją okiem projektanta i porównujemy z projektem w Figmie. Zostawiamy komentarze, co zostało wykonane poprawnie, a co wymaga korekty, na przykład w odstępach, typografii, kolorach lub zachowaniu na tabletach i telefonach. Dzięki temu gotowa strona wygląda i działa tak, jak została zaprojektowana.
Ile trwa projektowanie strony
Czas zależy od liczby podstron i od gotowości treści. Orientacyjnie:
- landing page: 10 dni roboczych
- mała strona firmowa z 5–8 podstronami: 2 tygodnie robocze
- duży serwis: harmonogram ustalany indywidualnie
Co otrzymujesz po zakończeniu projektu
Po akceptacji dostajesz kompletny plik Figmy z widokami wszystkich podstron oraz zestawem stylów i komponentów. Jeśli zlecasz wdrożenie Astrotea, otrzymujesz także gotową stronę na WordPressie. Dzięki temu możesz w przyszłości rozwijać witrynę razem z innym projektantem lub programistą, bez zaczynania od nowa.
Najczęstsze pytania przed rozpoczęciem
Czy muszę mieć gotowe teksty?
Nie musisz, ale gotowy szkic bardzo przyspiesza pracę.
Czy mogę zmienić koncepcję w trakcie projektu?
Tak, jednak najtaniej robi się to na etapie makiety UX, czyli zanim powstanie projekt graficzny.
Czy potrzebuję brandbooka?
Nie. Jeśli firma go nie ma, zaczynamy od moodboardu, a następnie ustalamy palety kolorów i fonty.
Kto wdroży stronę?
Możesz wybrać agencję Astrotea, inną polecaną przez nas agencję albo własnego dewelopera, któremu przekażemy projekt.
Czy ocenicie, czy strona została wdrożona zgodnie z projektem?
Tak. Po wdrożeniu sprawdzamy stronę okiem projektanta i zostawiamy komentarze z uwagami do poprawy.
Dlaczego projekt strony internetowej w Figmie powstaje przed wdrożeniem
Projekt strony internetowej w Figmie to wspólny punkt odniesienia dla Ciebie, projektanta i dewelopera. Możesz zostawić komentarz przy konkretnym elemencie, a my widzimy dokładnie, czego dotyczy. Jeśli stronę wdraża zespół programistów, dostaje gotowe style i wymiary, więc praca idzie sprawniej.
Chcesz zamówić projekt strony internetowej w Figmie? Zajrzyj na stronę projektowania stron www albo opisz swój projekt. Omówimy zakres i wycenę.
