Jak myśleć o nowym projekcie w Divi 5 — system najpierw, strony potem

Kiedy po raz pierwszy otwierasz Divi 5 z myślą o nowym projekcie, pierwsza pokusa jest zawsze ta sama: kliknąć „nowa strona”, otworzyć builder i zacząć budować.

To naturalne. Builder jest dostępny od razu, szablony kuszą, a efekty widać szybko.

Problem polega na tym, że projekt zbudowany w ten sposób — od razu w stronach, bez przygotowania — po dwóch tygodniach zaczyna się rozjeżdżać. Kolor przycisku jest trochę inny na podstronie usługi niż na głównej. Font nagłówka wygląda podobnie w trzech miejscach, ale nie identycznie. Klient prosi o zmianę odcienia głównego koloru i zaczyna się polowanie po całym serwisie.

To nie jest problem złego projektowania. To jest problem złej kolejności.

Divi 5 zmienia kolejność pracy

W poprzednich wersjach Divi budowałeś strony. W Divi 5 najpierw budujesz system, a dopiero potem strony.

Ta różnica brzmi abstrakcyjnie, ale w praktyce jest bardzo konkretna.

System to zestaw decyzji projektowych zapisanych w jednym miejscu, które potem automatycznie obowiązują w całym serwisie. Kolory brandu zdefiniowane raz jako Design Variables trafiają do każdego elementu który z nich korzysta. Typografia ustawiona globalnie trzyma spójność bez ręcznego pilnowania. Nagłówek i stopka zbudowane w Theme Builderze pojawiają się na każdej stronie automatycznie.

Efekt jest taki, że im więcej czasu włożysz w system na początku, tym mniej roboty masz przy budowaniu stron. I tym łatwiej jest cokolwiek zmienić później.

Brzmi jak więcej pracy na starcie? Trochę tak. Ale to prace które i tak musisz wykonać — tylko w Divi 5 robi się je raz, a nie po kilkanaście razy w każdym module osobno.

Co się dzieje gdy pomijasz ten krok

Najłatwiej zrozumieć wartość systemu przez to, co się dzieje bez niego.

Budujesz stronę główną. Wybierasz kolor przycisku — wygląda dobrze. Budujesz podstronę usług. Tworzysz kolejny przycisk — tym razem ciut ciemniejszy, bo tak pasował do tła. Budujesz stronę kontakt. Kolejny przycisk — tym razem zaokrąglony bardziej, bo tak wyglądał ładniej.

Po miesiącu masz stronę z trzema różnymi przyciskami, które „wyglądają podobnie ale jednak nie tak samo”. Klient tego nie widzi na pierwszy rzut oka, ale czuje że coś jest nie tak.

Albo inny scenariusz:

projekt jest gotowy. Klient zmienia identyfikację wizualną i prosi o update koloru z granatowego na głęboki fiolet. Jeśli granat był wpisany ręcznie w 40 miejscach — aktualizujesz 40 miejsc. Jeśli był jedną zmienną w Design Variables — zmieniasz jedną wartość.

To jest ta różnica.

System w Divi 5 to cztery fundamenty

Zanim otworzysz pierwszy builder i zaczniesz budować właściwe strony, są cztery rzeczy które warto mieć gotowe.

Global Colors i Design Variables — tu definiujesz kolory brandu, czyli to co Divi 5 będzie „wiedział” o Twojej identyfikacji wizualnej. Nie chodzi o paletę estetyczną, chodzi o zmienne które będą zasilać cały serwis. Kolor główny, kolor akcentu, kolor tła, kolor tekstu. Kiedy to masz, przyciski, nagłówki i sekcje mogą z tych wartości korzystać automatycznie.

Typografia globalna — jeden wybór fontu nagłówków i jeden fontu treści, ustawione globalnie. Brzmi banalnie, ale właśnie ta decyzja decyduje o tym czy za miesiąc cały serwis wygląda spójnie, czy każda podstrona żyje własnym życiem typograficznym.

Theme Builder — nagłówek i stopka jako globalne szablony. Tutaj jest pułapka na wielu początkujących: budują nagłówek na stronie głównej, kopiują go na kolejne strony, a po tygodniu mają pięć wersji nagłówka które trzeba aktualizować osobno. W Theme Builderze budujesz go raz — i obowiązuje wszędzie.

Design System — Variables, Presets, Option Groups. To najbardziej zaawansowana część, ale też ta która najbardziej zmienia workflow przy większych projektach. Kiedy przyciski, karty i sekcje korzystają z presetów zamiast ręcznych ustawień, zmiana jednego presetu aktualizuje cały serwis.

Nie musisz opanować wszystkiego naraz. Ale warto wiedzieć że te cztery elementy istnieją i że są po to, żeby projekt był łatwiejszy — nie trudniejszy.

Jak wygląda praca w tej kolejności

W praktyce nowy projekt w Divi 5 zaczyna się tak:

Najpierw godzina lub dwie na konfigurację systemu. Wpisujesz kolory brandu do Design Variables. Wybierasz fonty globalnie. Budujesz nagłówek i stopkę w Theme Builderze. Definiujesz podstawowe presety przycisków.

Potem otwierasz builder i budujesz strony.

I tu dzieje się coś, czego nie czuć na screenshotach: praca idzie inaczej. Kolor przycisku nie jest decyzją do podjęcia przy każdym nowym module — on po prostu jest. Font nagłówka nie wymaga ustawiania — on działa. Nagłówek i stopka są gotowe zanim zaczniesz.

Zamiast podejmować setki małych decyzji projektowych przy każdej stronie, podejmujesz je raz na początku — i potem budujesz na ich podstawie.

Co znajdziesz w tym bloku

Kolejne artykuły w tym bloku przeprowadzą Cię przez każdy z czterech fundamentów osobno.

Zaczniesz od Global Colors — jak ustawić kolory brandu tak, żeby Divi 5 z nich korzystał automatycznie. Potem typografia globalna — prosta decyzja, duży efekt. Następnie Theme Builder — nagłówek, stopka i szablony stron zanim zaczniesz właściwe budowanie. Na końcu Design System — Variables, Presets i Option Groups w praktyce.

Każdy artykuł jest osobny i możesz wrócić do niego kiedy potrzebujesz. Ale jeśli zaczynasz nowy projekt, warto przejść przez nie po kolei.

Bo strony w Divi 5 buduje się szybko. System — tylko raz.