Full Site Editing i Design System, narzędzia do samodzielnego tworzenia stron i landingów

Stworzenie skutecznej kampanii reklamowej lub wprowadzenie nowych produktów na rynek wymaga odpowiednio zaprojektowanej strony internetowej lub landing page. Niestety zmusza to nas najczęściej do współpracy z programistami i projektantami, co wydłuża czas tworzenia strony oraz znacząco zwiększa koszty. Problem ten znika wraz z wprowadzeniem w wersji 5.8 WordPressa nowej funkcjonalności Full Site Editor (FSE), gdzie stworzenie wysokiej jakości landing page, czy wprowadzenie zmian na stronie stało się znacznie łatwiejsze i dostępne nawet dla użytkowników bez doświadczenia w programowaniu. Jeśli dodamy do tego Design System, który pozwala na tworzenie spójnych i skalowalnych produktów cyfrowych, okazuje się, że na wyciągnięcie ręki mamy gotowe rozwiązanie do wdrażania serwisów internetowych, zapewniające efektywność procesu i spójność projektu. Jeśli sam wstęp Was zaintrygował to koniecznie zapiszcie się na nasz webinar, podczas którego zobaczycie, jak faktycznie działa FSE. Jeśli najpierw chcecie dowiedzieć się więcej, czas na zagłębienie się w szczegóły…

Czym jest Full Site Editing?

FSE to nowe podejście, które wprowadza możliwość tworzenia i modyfikowania szablonów stron internetowych przy użyciu tzw. bloków, czyli elementów wizualnych, które mogą być edytowane i dodawane dzięki prostemu przeciąganiu ich na miejsce. Pozwala to szybko, intuicyjnie i w prosty sposób dostosować wygląd całych postów i stron.

W przypadku tradycyjnego sposobu edycji strony internetowej, np. przy pomocy edytora Gutenberg, użytkownik może zmieniać wyłącznie poszczególne części szablonów, takie jak: nagłówki, treści, czy stopki. Do zmian szablonów niezbędne jest posiadanie odpowiedniej wiedzy lub współpraca z programistami front-end.

Najważniejsze zalety FSE:

• Zaawansowany edytor bloków, który pozwala tworzyć i modyfikować różnorodne elementy na stronie, takie jak: nagłówki, stopki, sekcje, kolumny, obrazy, teksty i wiele innych. Bloki stanowią podstawową jednostkę konstrukcyjną stron w FSE i można swobodnie zmieniać ich wygląd.
• Tworzenie i edycja szablonów definiujących strukturę i wygląd stron opartych na blokach. Dzięki temu możliwe stało się stosowanie szablonów w wielu stronach i zapewnienie im spójnego wyglądu oraz układu.
• Możliwość tworzenia globalnych stylów − takich jak: czcionki, kolory, marginesy, tła itp., które można zastosować do różnych elementów na stronie. Użycie globalnych stylów zapewnia stronom jednolity design i spójny wygląd.
• Narzędzie Customizer, które umożliwia nie tylko edycję szablonów stron, globalnych stylów oraz bloków w jednym miejscu, ale także podgląd wprowadzanych zmian w czasie rzeczywistym, co znacznie ułatwia proces projektowania i modyfikacji witryny.

Packard Bell wraca po latach. Acer zmienia dawną markę komputerową w lifestyle’owy brand

Jak powstaje strona oparta na Full Site Edytorze?

Gotowy projekt strony jest rozkładany na elementy składowe (tzw. patterny), na podstawie których definiowane są poszczególne sekcje, a następnie składane całe strony.

A skoro mowa o projekcie strony, to na scenę wkracza Design System.

Czym jest Design System?

Design System koncentruje się na tworzeniu spójnych i konsekwentnych wzorców, czyli bibliotek elementów interfejsu użytkownika, takich jak: kolorystyka, typografia, ikony, przyciski, formularze i inne, a także zasad, które opisują, jak te elementy powinny być używane i łączone ze sobą w sposób pozwalający zachować spójność stylu.

Idea Design Systemu jest podobna do założeń Brand Booka, jednak Design System służy do projektowania i rozwijania produktów cyfrowych.

Tworząc Design System konkretnej strony zaczyna się od najprostszych elementów, takich jak kształty, kolory, typografia, czy ikony, stanowiących fundament projektu. Na ich podstawie powstają prostsze komponenty – przyciski, pola tekstowe i formularze, a następnie paski nawigacyjne, karty i sekcje. Z nich z kolei tworzone są szablony, czyli układy stron, w których zdefiniowane zostają relacje pomiędzy różnymi komponentami.

Końcowym efektem projektu jest strona budowana w oparciu o szablony, komponenty i elementy z zachowaniem zdefiniowanych przez Design System relacji pomiędzy nimi.

Dla kogo jest Design System?

Design System jest niezbędny w każdej organizacji, która chce zapewnić spójność i konsekwencję w projektowaniu swoich produktów cyfrowych, a także zmniejszyć koszty ich rozwijania. Sprawdzi się w małych organizacjach jak i dużych korporacjach, firmach technologicznych, e-commerce’ach czy startupach. Szczególnie przydatny będzie w organizacjach, które pracują w wielu zespołach, by uniknąć niespójności projektowej i zoptymalizować prace. Design System sprawdzi się, gdy zaczynamy tworzyć stronę lub produkt cyfrowy, ale też gdy mamy już gotowy produkt i musimy go zmienić.

Korzyści płynące z wdrożenia Design Systemu

Twarde dane wskazują, że Design System faktycznie pozwala oszczędzić czas i pieniądze. Według badania przeprowadzonego przez Adobe, korzystanie z Design Systemu może skrócić czas dostarczania projektów o 52%. Airbnb po wdrożeniu swojego design systemu „DLS” (Design Language System) oszczędziło czas projektantów o 30% dzięki reużywalnym komponentom i jednolitym zasadom projekowania. Shopify podaje, że ich design system „Polaris” pozwolił na 95% redukcję czasu potrzebnego do tworzenia interfejsów użytkowania. Design System pozwala na stworzenie spójnego wizerunku marki – dzięki niemu każdy członek zespołu wie, jak dane elementy na stronie powinny wyglądać, co dodatkowo ułatwia wykonywanie codzinnych obowiązków. Co więcej, dzięki Design Systemowi skalowanie i adaptowanie strony czy produktu jest dużo łatwiejsze i szybsze – mamy wiele gotowych elementów, nie musimy na bieżąco projektować kolejnych, a zmiany mogą być wdrożone bez zaangażowania projektanta czy dewelopera.

Design System i FSE w WordPressie

Dzięki wykorzystaniu FSE i Design Systemu użytkownicy mogą tworzyć spójne i estetyczne strony internetowe zgodne z identyfikacją wizualną marki, bez potrzeby instalowania dodatkowych wtyczek, czy angażowania programistów. Oba narzędzia pozwalają na dokładne określenie i swobodne korzystanie z elementów takich jak kolory, czcionki, czy układy graficzne, które są podstawą spójnego wyglądu każdej strony.

Jednym zdaniem, FSE działa najlepiej, gdy projekt i jego komponenty, które będą wykorzystywane na stronie są przemyślane i dobrze zaprojektowane, dlatego właśnie Design System jest niezbędny gdy tworzymy strony czy produkty cyfrowe.

FSE i Design System w marketingu

FSE (Full Site Editing) i Design System to cenne narzędzia dla twórców treści i specjalistów ds. marketingu. Globalne style, szablony stron i niestandardowe bloki umożliwiają zachowanie konsekwentnego wyglądu strony internetowej, co nie tylko wzmacnia wizerunek marki, ale także buduje zaufanie klientów.

Poza tym, FSE i Design System pozwalają tworzyć i edytować strony internetowe w bardziej intuicyjny sposób, bez konieczności angażowania programistów. Tym bardziej, że odpowiednio skonfigurowane szablony stron i bloki tematyczne umożliwiają szybkie tworzenie nowych treści, wprowadzanie zmian i aktualizacji na stronie, a globalne style ułatwiają ich spójne formatowanie.

FSE pozwala tworzyć niestandardowe bloki i układy, dostosowywać treści do różnych grup docelowych oraz testować różne warianty i kampanie umożliwiając lepsze dopasowanie komunikacji do oczekiwań oraz potrzeb klientów, co ma pozytywny wpływ na skuteczność działań marketingowych. Z kolei Design System zapewnia skalowalność i łatwość zarządzania projektami marketingowymi. Pozwala tworzyć zestawy wstępnie zdefiniowanych komponentów, stylów i szablonów, które można potem wykorzystać w różnych kampaniach i projektach przy zachowaniu spójności wizualnej oraz użytkowej pomiędzy różnymi materiałami marketingowymi i budując rozpoznawalność marki.

FSE i Design System pozwalają też w prosty i szybki sposób optymalizować strony internetowe pod kątem działań marketingowych. Jeśli z wyników kampanii wnioskujemy, że coś nie do końca działa tak, jak byśmy tego chcieli, możemy zareagować od razu i nanieść potrzebne zmiany na stronie.

Podsumowanie

Full Site Editing i Design System to narzędzia, które idealnie się uzupełniają. FSE umożliwia łatwe i szybkie tworzenie stron, korzystając z gotowych bloków, podczas gdy Design System zapewnia spójność i skalowalność projektu. Razem umożliwiają tworzenie wysokiej jakości stron internetowych, które są łatwe w utrzymaniu i rozbudowie. Jeśli chcesz dowiedzieć się więcej o FSE i Design System, zapraszamy na webinar, który odbędzie się 11.09, o 10:00. Więcej szczegółów znajdziesz tutaj.

Warto jednak pamiętać, że o ile FSE i Design System oferują większą elastyczność i wygodę w tworzeniu oraz edycji stron internetowych i landingów, nie zastąpią programisty, który jest niezbędny w przypadku bardziej złożonych funkcjonalności, ani projektanta, gdy chcemy zdefiniować globalne style czy zadbać o spójność witryny na początkowym etapie.

 

Autorki:

Aleksandra Strelczuk, UI team leader (Kreatik)

W Kreatiku zajmuje się nadzorem prac kreatywnych wszystkich grafików oraz sama prowadzi kluczowe projekty, realizując zarówno strony internetowe, jak i projekty brandingowe. Entuzjastka odważnych rozwiązań graficznych, baczna obserwatorka trendów. Jej tajną bronią jest połączenie wysoko rozwiniętego poczucia estetyki z wiedzą na temat mechanizmów działania ludzkiego umysłu i emocji. Jej celem jest tworzenie projektów poprzez znajdowanie rozwiązań zarówno cieszących oko, jak i funkcjonalnych dla użytkownika.

Agata Kędzierska-Zawisza, senior marketing manager (White Label Coders)

Zajmuje się tworzeniem strategii marek i wdrażaniem ich w życie. Zarządzanie projektami i organizowanie kreatywnych zespołów to dla niej chleb powszedni. Pasjonatka WordPressa i tworzenia wartościowych treści. Przygodę z marketingiem rozpoczęła 10 lat temu z pasji do tworzenia strategii marek oraz szukania intrygujących i skutecznych sposobów ich promocji. W marketingu łączy kreatywność z dobrą organizacją i planowaniem czasu. Na co dzień zaraża pozytywną energią i nietuzinkowym poczuciem humoru, nie ma dla niej rzeczy niemożliwych.

 

Artykuł reklamowy powstały we współpracy z WhiteLabelCoders.