Opanowanie złotego współczynnika projektowania

Twój projekt wygląda prawie w porządku, ale coś się wydaje. Odstępy wydają się niezręczne. Proporcje nie działają. Dostosowujesz marginesy i wyściółkę, ale to dokuczliwe poczucie nierównowagi pozostaje. Brakującym elementem może być złoty współczynnik.

Ta matematyczna zasada prowadzi wielki projekt od stuleci. I nasze oczy naturalnie wolą te specyficzne współczynniki. Większość projektantów pomija złote wskaźniki lub niewłaściwie je stosować z powodu tego, jak trudno jest pękać. Jednak dzięki konstruktorowi stron, takiej jak Divi 5, możesz zastosować doskonałe proporcje bez złożonych obliczeń.

Dowiedzmy się więcej.

Jaki jest złoty współczynnik?

Złoty stosunek jest w przybliżeniu równy

1.618.

Skąd to się wzięło? Otrzymujesz ten numer, gdy podzielicie linię na dwie części, gdzie dłuższa część podzielona przez krótszą część równa się całej linii podzielonej przez dłuższą część.

Możesz obliczyć złoty współczynnik za pomocą sekwencji Fibonacciego. Zacznij od 0 i 1. Dodaj je, aby uzyskać 1. Następnie dodaj 1 i 1, aby uzyskać 2. Dodaj dwa ostatnie liczby: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Kiedy podzielisz większą liczbę według poprzedniej liczby, zbliżasz się do 1.618.

Ten stosunek pojawia się wszędzie w naturze. Podążają za nią spirale nasion słonecznika. Skorupy Nautilus rosną przy użyciu tych proporcji. Nawet twoja twarz prawdopodobnie jest zgodna z pomiarami złotego współczynnika między twoimi funkcjami. Kiedy coś jest zgodne z tym stosunkiem, twój mózg rozpoznaje go jako naturalnie przyjemny.

Zdjęcia dzięki uprzejmości: Lucas i Dynamic Wang na Unsplash i Milena Carolina Dos Santos Mangueira

Symbol φ (PHI) reprezentuje unikalny współczynnik matematyczny, który starożytni Grecy odkryli około 300 p.n.e. Nazywali to „boską proporcją”, wierząc, że ujawniła to specjalną równowagę wizualną i piękno.

Dlaczego to ma znaczenie: od starych budynków po projektowanie stron internetowych

Grecy zastosowali ten stosunek do świątyni Partenon, a egipskie piramidy podążają za tymi pomiarami. Artyści tacy jak Leonardo da Vinci studiowali te proporcje przez lata. Da Vinci narysował słynny „witruwiański mężczyzna”, pokazujący złote współczynniki w ludzkim ciele.

Obraz reprezentacyjny

Ugruntowani projektanci nadal tego używają. Logo Apple wykorzystuje proporcje złotego współczynnika. Dawne logo ptaków na Twitterze było zgodne z tymi pomiarami. Magazyny umieszczają ważną zawartość w plamach złotego współczynnika zamiast w centrum.

Zdjęcia dzięki uprzejmości: szeroko

Naukowcy badali, dlaczego ludzie lubią kształty złotego współczynnika. Skany mózgu wykazują większą aktywność w obszarach przyjemności, gdy ludzie patrzą na prostokąty złotych współczynników. Jest to nieodłącznie związane z ludźmi, ponieważ dzieje się tak we wszystkich kulturach i wiekach.

Twój mózg przetwarza te proporcje szybciej niż inne wskaźniki, co oznacza lepsze wrażenia użytkownika. Kiedy proporcje stron internetowych są zbyt daleko od 1.618, goście czują się nieswojo i wychodzą wcześniej.

Stosunek stwarza równowagę, nie będąc doskonale. Idealna symetria może wyglądać nudno na stronach internetowych. Złoty współczynnik zapewnia wystarczającą asymetrię, aby stworzyć wizualne zainteresowanie przy jednoczesnym zachowaniu czystego, profesjonalnego wyglądu użytkowników.

Dlaczego twoje projekty czują się „wyłączone” (i jak to naprawiają wskaźniki)

Właśnie spędziłeś godziny na doskonaleniu układu. Kolory są w sam raz. Czcionki działają razem. Ale coś wciąż się czuje. Pasek boczny wydaje się zbyt szeroki. Nagłówek wygląda na nieco ciasno. Obszar treści nie przepływa z resztą.

To powszechne doświadczenie. Wielu projektantów dostosowuje rozmiary na podstawie tego, co wydaje się właściwe. Być może ustawiłeś główną zawartość na 70 procent, a pasek boczny na 30 procent. Te liczby brzmią rozsądnie, ale nie zawsze wyglądają naturalnie.

Nasze oczy szukają równowagi i znajomych wzorów. Kiedy proporcje nie są odpowiednie, cały projekt wydaje się niezręczny, nawet jeśli nie możesz wyjaśnić, dlaczego. To może nie być wielki błąd, po prostu mały szczegół, który cię niepokoi.

Prawdziwym problemem jest często proporcja. Kiedy układy ignorują to, co wydaje się zrównoważone, twój mózg zauważa. Coś się czuje, nawet jeśli nie możesz położyć na nim palca.

Jak niewłaściwe wskaźniki sabotaż wrażenia użytkownika

Złe proporcje sprawiają, że wszystko wygląda dziwnie. Twój mózg oczekuje, że pewne kształty i rozmiary będą pasować do siebie. Wyobraź sobie sekcję bohatera, która zajmuje dokładnie połowę ekranu. Wygląda sztywno i niezręcznie.

Teraz rozważ taki, który wykorzystuje 43 procent lub 67 procent przestrzeni. To wygląda niezrównoważone i nieuporządkowane.

To może zaszkodzić Twojej witrynie. Ludzie decydują bardzo szybko, czy ufają temu, co widzą. Jeśli strona się wydaje, mogą pomyśleć, że Twoja firma jest niewiarygodna. Niechludzki design sprawia, że ​​ludzie wierzą, że Twoja praca nie jest dobra.

Złoty współczynnik może pomóc to naprawić. Zamiast tworzyć sekcję 70 procent bohatera, wypróbuj 61,8 procent, pozostawiając następną sekcję 38,2 procent.

Te liczby nie są losowe. Podążają za specjalnym wzorem o nazwie 1.618, który widzisz w naturze, jak w kwiatach i skorupach. Twoje oczy znają ten wzór i czują się spokojnie, kiedy go widzą.

Sztuką jest to, jak części odnoszą się do siebie. Wszystko jest właściwe, jeśli rozmiar nagłówka pasuje do obszaru treści za pomocą złotego współczynnika. Twoja stopka, menu i treść zaczynają pasować do siebie, zamiast wyglądać, jakby walczyli o przestrzeń.

Jak obliczyć proporcje złotego współczynnika

Nie potrzebujesz fantazyjnej matematyki. Pamiętaj tylko o 62 i 38. Liczby te sumują się do 100, więc działają jako odsetki.

Podziel dowolne miejsce, dając 62% większej części i 38% mniejszej części. Twoja witryna ma szerokość 1000 pikseli. Zrób główną zawartość 620 pikseli. Umieść pasek boczny na 380 pikseli. Idealny złoty stosunek.

Mam sekcję 500 pikseli. Twój główny obszar ma 310 pikseli. Reszta otrzymuje 190 pikseli.

Szybkie zasady dotyczące części stron internetowych

Sekcja bohatera powinna wziąć około 60% tego, co ludzie widzą jako pierwsze. Reszta trafia do głównego podglądu treści. Spraw, by karty 60% tak wysokie, jak są szerokie. Karta o szerokości 300 pikseli ma 180 pikseli wysokości.

Przyciski działają w ten sam sposób. Szerokość 100 pikseli oznacza wysokość 60 pikseli. Twoja kolumna tekstowa ma szerokość 600 pikseli. Przestań dodawać zawartość około 370 pikseli w dół. Następnie dodaj następną sekcję.

Czy to wygląda dobrze?

Cofnij się z ekranu. Części powinny teraz wydawać się zrównoważone. Oko płynie płynnie z sekcji do sekcji. Jeśli będziesz się patrzeć w jedno miejsce, proporcje mogą być wyłączone.

Popularne strony internetowe używają tych samych podziałów 62/38 wszędzie. Zaczniesz widzieć wzór, gdy wiesz, czego szukać. Matematyka pozostaje ukryta, ale harmonia wizualna natychmiast się wyróżnia.

Wspólne błędy złotego współczynnika popełniają projektanci

Większość projektantów wie, że istnieje złoty współczynnik i chce z niego korzystać. Tutaj często walczą.

Największym błędem jest losowe stosowanie wskaźników bez systemu. Używasz złotych współczynników dla swojego nagłówka, trzecie dla siatki treści i losowych wartości procentowych dla stopki. Wybierz jedno podejście i użyj go konsekwentnie w całym projekcie.

Wielu projektantów rundy 1.618 do łatwych liczb, takich jak 1,5 lub 1,7. Twój mózg zauważa różnicę między 62% a 60%, a ta niewielka luka wpływa na harmonię wizualną, nad którą pracujesz.

Innym powszechnym problemem są elementy współczynnika niedopasowania. Na przykład możesz stworzyć idealnie proporcjonalną sekcję bohatera, ale dodać galerię obrazów, która wykorzystuje zupełnie inne współczynniki odstępów. Wizualne rozłączenie przełamuje ustalony przepływ.

Niektórzy projektanci stosują złoty współczynnik do tekstu bez rozważania wygody czytania. Długość linii, która następuje po idealnych proporcjach matematycznych, może przekroczyć wygodną szerokość odczytu. Czytelność ma pierwszeństwo przed precyzją matematyczną.

Projektanci stron internetowych często pomijają reakcję. Proporcje komputerów stacjonarnych, które wyglądają na zrównoważone, mogą wydawać się ciasne lub rozciągnięte na mniejszych ekranach. Złote współczynniki potrzebują różnych aplikacji w rozmiarach urządzeń.

Wielu budowniczych stron domyślnie do arbitralnych układów, które ignorują proporcjonalną harmonię. Standardowe trzykolumnowe siatki wykorzystują podział 33/33/33 zamiast bardziej naturalnych współczynników.

Najbardziej ograniczającym błędem jest porzucenie podejścia po wstępnych próbach. Złote współczynniki działają najlepiej po zastosowaniu systematycznie w ramach struktury układu, a nie jako izolowane korekty.

Dlaczego wielu budowniczych stron ignoruje złote współczynniki?

Budowniczowie stron dorastali wokół myślenia programistów. Deweloperzy kochają liczby, które dzielą się czysto. Dwanaście kolumn, cztery sekcje, pięćdziesiąt pięćdziesiąt podziałów.

Wiele firm budowniczych naprawdę uważa, że ​​użytkownicy powinni kontrolować własne wybory projektowe. Nie chcą naciskać konkretnych teorii estetycznych na ludzi, którzy mogą preferować różne podejścia. Niektórzy projektanci nienawidzą złotego współczynnika i preferują inne systemy proporcji. Po co wymusić jedną zasadę matematyczną, gdy kreatywność rozwija się w opcjach?

Prawdziwy problem techniczny jest bardziej bałaganu niż filozofia projektowania. Złote współczynniki tworzą dziwne dziesiętne dziesiętne, które łamią starsze urządzenia. Spróbuj zbudować responsywną siatkę, w której jedna kolumna ma szerokość 61,8%. Czyste odsetki, takie jak 25% lub 33%, zachowują się przewidywalnie w każdym urządzeniu.

Większość firm budowniczych stron rozpoczęła jako rozwiązania techniczne, a nie narzędzia projektowe. Są zbudowane wokół systematycznych, logicznych układów, które działają niezawodnie.

Użytkownicy rzadko narzekają na proporcje. Narzekają na zepsute układy mobilne i powolne czasy ładowania. Priorytety firmy są zgodne z rzeczywistą opinią użytkownika, a nie teorię projektowania.

Niektórzy budowniczowie martwią się przytłaczającymi początkującymi. Nowi użytkownicy już stają przed dziesiątkami wyborów układu, a dodanie względy matematycznego może odstraszyć ludzi, którzy chcą po prostu czegoś czystego i profesjonalnego.

Budowanie doskonałych proporcji z Divi 5

Zanim zagłębiamy się w nitty, w tym, jak Divi 5 zmienia projekt złotego współczynnika z matematycznego bólu głowy w prostotę punktową i kliknięcia, weźmy krótki objazd i zrozumiemy, co sprawia, że ​​Divi jest wyborem dla projektantów WordPress, którzy chcą profesjonalnych wyników bez koszmaru kodowania.

Co to jest Divi?

Divi to konstruktor stron WordPress zaprojektowany dla osób, które dbają o projekt wizualny bez narażania funkcji.

Możesz przeciągnąć i upuszczać ponad 200 modułów, zmieniać tekst i wybrać nowe kolory. Wszystko dzieje się na twojej stronie, więc zobaczysz dokładnie, co zobaczą goście.

Temat jest pełen ponad 2000 gotowych układów. To nie są podstawowe szablony, ale pełne projekty restauracji, fotografów, konsultantów i dziesiątek innych firm. Wybierz taki, który pasuje do twojego stylu i stamtąd dostosuj.

Jeśli sprzedajesz produkty online, Divi zawiera ponad 20 modułów wykonanych specjalnie dla sklepów. Twoje strony produktów będą wyglądać profesjonalnie i faktycznie pomogą przekształcić przeglądarki w kupujących.

Buduj strony internetowe bez bólu głowy

Builder z motywami pozwala zaprojektować każdą część witryny. Możesz tworzyć niestandardowe nagłówki, które pasują do Twojej marki, budować unikalne układy blogów, a nawet sprawiają, że 404 strony wyglądają niesamowicie.

Divi Ai wnosi wygodę AI bezpośrednio do płótna projektowego. Możesz wygenerować tekst,

obrazy,

kod,

oraz całe sekcje stron przy użyciu AI Divi.

Możesz nawet edytować swoje istniejące zdjęcia, opisując tylko to, czego potrzebujesz.

Divi Quick Sites rozwiązuje największy problem, przed którymi stoją budownicze witryny: wpatrując się w pustą stronę, nie wiedząc od czego zacząć. Możesz wybierać spośród profesjonalnych witryn startowych, które mają profesjonalne szablony witryn, tworzone przez nasz zespół projektowy, oraz zawierają unikalne obrazy i dzieła sztuki, których nie znajdziesz nigdzie indziej.

Lub pozwól Divi Ai zbudować niestandardowe układy na podstawie opisu firmy.

Ta witryna generowana przez AI to nie tylko szkielet. Będzie zawierał odpowiednie nagłówki, kopie i obrazy na twój opis. Możesz poprosić Divi AI o wygenerowanie wszystkich obrazów, użycie jednego z UNSPLASH lub użycie symboli zastępczych, abyś mógł je wymienić.

Możesz nawet wstępnie wybierać czcionki i kolory i pozwolić AI z nimi biegać. I oczywiście strony internetowe pozostają edytowalne, podobnie jak zwykłe strony internetowe, dzięki czemu możesz dostosować wszystko, czego potrzebujesz według gustu.

Zdobądź Divi

Divi 5: następny krok

Budowanie stron internetowych powinno wydawać się naturalne, jak szkicowanie pomysłów na papierze. Masz wizję, a twoje narzędzia powinny pomóc w ożywieniu jej bez przeszkód. Właśnie to skłoniło nas do całkowitego odbudowania Divi od podstaw.

Divi 5, dostępny dziś jako alfa i gotowy do użycia na nowych stronach internetowych , reprezentuje lata słuchania tego, czego potrzebujesz podczas tworzenia stron internetowych. To nie są dzwonki i gwizdy ani funkcje, których nikt tak naprawdę nie używa, ale prawdziwe ulepszenia, które sprawiają, że Twoja praca jest szybsza i przyjemniejsza. Utrzymaliśmy wszystko, co kochasz w Divi i przeszliśmy na wyższy poziom.

Odbudowaliśmy wszystko od zera za pomocą nowych narzędzi internetowych. Strony ładują się teraz szybciej, a sterowanie działają lepiej. Możesz zachować swoje projekty tak samo na całej witrynie bez dodatkowej pracy.

Co zostało ulepszone? Co nowego?

• Pełna przebudowa ramy pozbywa się starych skrótów. Wszystko działa na nowym kodzie blokowym, który ładuje się szybciej i działa lepiej.
• Edycja jednego kliknięcia pozwala kliknąć dowolną część strony, aby natychmiast ją edytować. Nigdy więcej polowania na małe ikony lub kopanie menu.
• Konfigurowalne punkty przerwania dają siedem rozmiarów ekranu do pracy zamiast trzech. Możesz zmienić każdy z nich, aby spełniał dokładne potrzeby.
• Obsługa jednostek zaawansowanych pozwala używać calc (), clamp (), min (), max () i wszystkich nowych jednostek CSS tuż w budowniczym.
• Zmienne projektowe pozwalają zapisać kolory, czcionki, rozmiary, obrazy, tekst i linki w jednym miejscu. Zmień je raz, a będą aktualizować wszędzie na Twojej witrynie.
• Presete opcji pozwalają zapisać i ponownie wykorzystać style dla granic, czcionek, cieni i odstępów. Działają one w różnych częściach Twojej witryny.
• Zagnieżdżone rzędy pozwalają umieścić rzędy w innych rzędach. Możesz budować złożone układy bez specjalnych sekcji.
• Grupy modułów łączą kilka modułów w jedną jednostkę. To sprawia, że ​​złożone układy są łatwiejsze w zarządzaniu. Możesz także tworzyć niestandardowe moduły.
• Multi Panel Workspace pozwala umieścić panele tam, gdzie chcesz. Możesz pracować z kilkoma otwartymi ustawieniami jednocześnie.
• Zarządzanie atrybutami zapewnia dokładną kontrolę podczas kopiowania, wklejania i resetowania stylów, treści i ustawień wstępnych między różnymi częściami.
• Tryb jasny/ciemny pozwala wybrać motyw, który jest łatwiejszy na oczy podczas pracy.
• Skalowanie na płótnie pozwala zmienić rozmiar obszaru pracy, aby zobaczyć, jak wygląda Twoja witryna na różnych ekranach. Nie trzeba przełączać trybów podglądu.
• Ulepszenia wydajności sprawiają, że strony ładują się szybciej, wyświetlają szybciej i są bardziej płynniejsze podczas budowania.

Wypróbuj Divi 5 już dziś

Divi 5 jest teraz dostępny dla nowych projektów stron internetowych. Odbudowaliśmy go od podstaw, aby Twój przepływ pracy był szybszy i łatwiejszy. Pobierz publiczną alfa i wypróbuj ją na następnej nowej stronie, aby zobaczyć ulepszenia. Jest bezpłatny dla wszystkich członków Divi, nowych i starych.

Sugerujemy używanie go tylko dla nowych witryn, jednocześnie ulepszając system migracji istniejących witryn Divi 4. Jeśli zaczynasz świeżo, teraz jest świetny czas na wypróbowanie zaktualizowanego interfejsu i lepszą wydajność.

Jak używać złotych współczynników za pomocą Divi 5

Wystarczy powiedzieć. Weźmy głębokie nurkowanie i zobaczmy, w jaki sposób możemy wdrożyć złote współczynniki w Twojej witrynie za pomocą Divi 5, a jeszcze lepiej, w jaki sposób można je znormalizować, abyś nie musiał się poruszać matematyką za każdym razem, gdy tworzysz nową sekcję lub stronę.

Zmienne projektowe pozwalają zapisać i ponownie używać wartości w całej witrynie. Tworzą one wizualną tożsamość witryny DNA. Divi 5 ma sześć rodzajów: kolory, czcionki, obrazy, struny tekstowe, linki i liczby. Każdy ma określoną rolę:

• Zmienne kolorów zawierają kolory marki, tła, kolory tekstowe i inne odcienie używane w całej witrynie.
• Zmienne czcionki utrzymują czcionki spójne dla nagłówków, tekstu ciała i elementów specjalnych.
• Zmienne obrazu przechowują wspólne grafiki, takie jak logo lub wzorce tła, aby łatwo użyć.
• Zmienne ciągów tekstowych Zapisz treści wielokrotnego użytku, takie jak hasła, kontakty i notatki prawne.
• Zmienne łącza przechowują adresy URL, których często używasz, takie jak media społecznościowe lub kluczowe strony.
• Zmienne liczbowe obsługują pomiary w pikselach, wartościach procentowych, EMS, REMS i jednostkach widokowych oraz działają z funkcjami CSS, takimi jak calc (), aby utrzymać proporcje na dowolnym ekranie.

Konfigurowanie zmiennych Złotego współczynnika

Otwórz deskę rozdzielczą Divi 5 i znajdź ikonę Menedżera zmiennego na lewym pasku bocznym.

Kliknij, aby otworzyć panel zmiennych. Dodaj swoje kolory, czcionki, obrazy, tekst i zmienne link.

Następnie przejdź do karty liczb, aby utworzyć zmienne złotego współczynnika. Zacznij od dodania tych zmiennych liczbowych:

Zmienne typograficzne

• Rozmiar H1: Zacisk (47px, 4,7 VW, 76px)
  • 47px minimum: nawet na najmniejszych telefonach (320px szerokości), twój H1 pozostaje wystarczająco duży, aby ustalić hierarchię. Cokolwiek mniejsze straci wpływ jako główny nagłówek.
  • 4.7 VW Wartość środkowa: Ta jednostka szerokości rzutni sprawia, że ​​skala tekstu płynnie. Przy szerokości ekranu 1000px, 4,7VW = 47px. Przy 1600px rośnie do 75px
  • 76px Maksimum: Otrzymujemy to poprzez pomnożenie 18px × 1,618 trzy razy (18 × 1,618 × 1,618 × 1,618 = 76,244px)
• Rozmiar H2: Zacisk (29px, 3,5 VW, 47px)
  • 29px minimum: utrzymuje H2 zauważalnie mniejszy niż H1 na telefonie komórkowym, jednocześnie czytelnym
  • Skalowanie 3,5 VW: proporcjonalnie mniejsze skalowanie niż H1 w celu utrzymania hierarchii
  • 47px maksimum: dokładnie 76px ÷ 1,618 = 47.122px
• Rozmiar H3: Clamp (18px, 2,9VW, 29px)
  • 18px minimum: pasuje do rozmiaru tekstu na telefon komórkowych, aby zapisać pionową przestrzeń
  • Skalowanie 2.9 VW: rośnie bardziej delikatnie niż większe nagłówki
  • Maksymalnie 29px: dokładnie 47px ÷ 1,618 = 29,124px
• Rozmiar H4: Zacisk (14px, 2,2 ww, 22,4px): Kontynuuj dzielenie ~ 29px ÷ 1,618 = 17,994px, ale ustawiamy minimum na 22,4px dla czytelności
• Rozmiar H5: Zacisk (13px, 1,8 ww, 18px): Nasz rozmiar czcionki podstawowej 18px idealnie pasuje do skali tutaj
• Rozmiar tekstu nadwozia: Zacisk (16px, 1,6 ww, 18px): standardowa podstawa 18px, z której wszystkie obliczenia wynikają

Funkcja Clamp () pozwala płynnie rozmiar tekstu między ekranami. Wymaga trzech wartości: najmniejszy rozmiar telefonów, środkowa wartość skalowania i największa dla komputerów stacjonarnych. Używamy szerokości rzutni (VW) w środku, ponieważ powoduje, że tekst rośnie stopniowo, gdy ekrany stają się większe. Żadnych nagłych skoków między rozmiarami.

Na komputerze trzymamy się doskonałych złotych współczynników. Ekrany mobilne wymagają drobnych korekt, aby czytelny tekst. Czyste obliczenia mogą sugerować 11px dla niektórych nagłówków, ale to wysiłek oczu odwiedzających. Ustawienie praktycznych minimów, takich jak 14px zachowuje harmonię wizualną złotego współczynnika, zapewniając jednocześnie wygodnie czytać Twoją treść. Relacje proporcjonalne pozostają nienaruszone; Właśnie nieco przesunęli się w górę, by czytelność.

Zmienne odstępów

Każda wartość mnoży poprzednią przez dokładnie 1.618:

• Space XS: Clamp (8px, 1vw, 10px)
  • Dlaczego baza 10px: Jest to najmniejsza wygodna wyściółka dotykowa na urządzeniach mobilnych. Mądrość branżowa zaleca minimalne cele dotykowe 44px i 10px wyściółki ze wszystkich stron, a treść Cię tam przyciąga. Mniejsze niż 10px sprawia, że ​​elementy są ciasne.
  • Dlaczego minimum 8px: na telefonach o szerokości 360px, nawet 10px może wydawać się zbyt przestronny. Spadamy do 8px, aby zmaksymalizować przestrzeń treści, jednocześnie utrzymując elementy możliwe do odróżnienia.
  • Dlaczego 1VW: proporcjonalnie rośnie odstępy i daje dokładnie 10px przy szerokości ekranu 1000px
• Przestrzeń Mała: Zacisk (13px, 1,6 VW, 16.18px): Idealny do wyściółki przycisków i odstępów pola.
• Medium kosmiczne: Clamp (21px, 2,6 VW, 26.18px): doskonały do ​​odstępu między pokrewnymi blokami treści.
• Space Large: Clamp (34px, 4,2VW, 42.36px): Tworzy miejsce oddechowe między głównymi sekcjami podczas skalowania z rozmiarem ekranu.
• Space XL: Clamp (55px, 6,8VW, 68,54px): Doskonały do ​​wyściółki górnej/dolnej na sekcjach bohaterów i głównych blokach funkcyjnych. Sekcje bohaterów potrzebują znacznej wyściółki nawet na telefonie komórkowym. Poniżej 50px treść bohatera jest ciasna na krawędziach.
• Space XXL: Clamp (89px, 11vw, 110,89px): Użyj oszczędnie. Może w przypadku specjalnych sekcji, które wymagają dramatycznego oddychania.

Zmienne układu

• Podstawowa szerokość kolumny: 61,803%
  • Jak to rozumiemy: podziel 1 przez 1,618 = 0,61803 (lub 61,803%)
  • Użyj tego w głównym obszarze treści w dowolnym układzie dwukolumnowym
• Wtórna szerokość kolumny: 38,197%
  • Użyj kolumny paska bocznego w tym samym rzędzie
  • Pochodzący z 100% - 61,803% = 38,197%
• Pojemnik Max szerokość: 1165px
  • Tekst staje się trudny do odczytania, gdy linie rozciągają się poza 72 znaki,
    • i zakładając 10px jako minimalny rozmiar tekstu, optymalna szerokość odczytu (720px) × Złoty współczynnik (1,618) = 1165px
  • Zastosuj do głównej sekcji lub wiersza, która zawiera Twoją treść
• Współczynnik złotej wysokości: calc (100% / 1,618)
  • Można to wykorzystać jako wartość na wysokościach dla grup modułów/modułów, takich jak obrazy, pudełka wezwania do działania, sekcje bohaterów, karty członków zespołu itp.
  • To stworzyłoby prostokąty zamiast kwadratów lub losowych kształtów. Twój mózg uważa te proporcje naturalnie atrakcyjne, jak doskonale oprawione zdjęcie.
  • Jak to zdobyć? Złoty współczynnik mówi, że jeśli szerokość = 1,618, to wysokość = 1. Więc jeśli szerokość = 100%, wówczas wysokość = 100%÷ 1,618 = 61,8%. Ta formuła robi to matematycznie automatycznie.

Zapisz te zmienne w menedżerze zmiennych Divi 5. Następnie użyj ich w dowolnym miejscu, klikając ikonę zmiennych obok pola szerokości, wysokości lub maksymalnej szerokości. Po początkowej konfiguracji nie jest potrzebna matematyka. Ponadto żadna z tych zmiennych etykiet nie jest ustalona; Możesz zamienić etykiety na coś, co ma sens.

Tworzenie sekcji bohatera ze złotymi wskaźnikami

Zbudujmy sekcję bohatera dla strony docelowej książki, zainspirowanej jednym z projektów kolekcji witryn startowych, wykorzystującym zmienne złotego współczynnika, które właśnie stworzyliśmy. I to jest zabawna część. Możesz wziąć te starannie obliczone zmienne i obserwować, jak wpływają one na sekcję prawdziwego bohatera.

Zacznij od utworzenia nowej sekcji w wizualnym budowniczym Divi 5. Ustaw wysokość za pomocą zmiennej wskaźnika wysokości złotej. To sprawia, że ​​twój mózg jest uznawany za przyjemny.

Dodaj swoją zmienną Space XL do górnej i dolnej wyściółki. Zapewnia to wystarczającą ilość pomieszczenia na urządzenia mobilne, jednocześnie odpowiednio rozszerzając się na komputery.

Dla tła sekcji masz dwie główne opcje przy użyciu zmiennych projektowych:

Opcja 1: Tło koloru solidnego

• Kliknij pole koloru tła i wybierz swoją podstawową zmienną kolorów z rozwijania. To utrzymuje sekcję bohatera zgodną z tożsamością marki. Jeśli twój podstawowy kolor jest zbyt lekki dla kontrastu tekstu, zamiast tego użyj swojej wtórnej zmiennej kolorów. Upewnij się, że jakikolwiek kolor, który wybierzesz, zapewnia wystarczający kontrast, aby Twój tekst pozostał czytelny. Nadążając za naszą inspiracją, dodamy gradient tła i podstawowych kolorów z 72% przystankiem i 90 °.

Opcja 2: Tło obrazu

• Zastosuj zmienną obrazu bohatera (jeśli ją utworzyłeś) za pomocą pola obrazu tła. Kliknij ikonę zmiennych obok ustawienia obrazu tła i wybierz zapisaną zmienną obrazu. Podczas korzystania z obrazów tła dodaj nakładkę do czytelności tekstu. Ustaw kolor nakładki na podstawową zmienną kolorów i dostosuj krycie do 40-60%. To przyciemnia obraz na tyle, aby biały tekst był chrupiący i czytelny.
• Możesz również użyć swojej wtórnej zmiennej kolorów do nakładki, jeśli lepiej kontrastuje wybrany obraz tła.

Tworzenie układu dwukolumnowego

Dodaj wiersz z dwiema kolumnami.

Ustaw szerokość lewej kolumny na podstawową zmienną szerokości kolumny i prawą kolumnę na wtórną zmienną szerokości kolumny. Włączymy również opcję „wyrównanie wysokości kolumn”. Następnie zostanie zastosowana zmienna szerokości maksymalnej kontenera, aby zawartość była czytelna na większych ekranach. Zapobiega to rozciąganiu linii tekstowych zbyt szerokich, szczególnie na szerszych ekranach.

Umożliwimy również „Użyj niestandardowej szerokości rynny” i ustawym ją na 1. Pomoże nam to wykorzystać odstępy złotego współczynnika między naszymi modułami.

Zastosuj zmienną średnią przestrzenną do prawej pierwszej kolumny i lewą wyściółkę drugiej kolumny, aby dodać przestrzeń oddechową między kolumnami. Stwarza to wystarczającą separację między kolumnami, nie sprawiając, że czują się odłączone.

Większa kolumna pomieści główną wiadomość i wezwanie do działania. Mniejsza kolumna może zawierać prosty obraz bohatera lub pozostać pusty dla czystego, ukierunkowanego tekstem.

Konfigurowanie typografii, która płynie

W głównej kolumnie dodaj dwa moduły nagłówka.

Ustaw pierwszy na H5 i zastosuj zmienną rozmiaru H5. W tym przykładzie ten moduł tekstowy zawiera treść „najlepiej sprzedający się autor”. Użyjemy również wtórnego koloru dla tego tekstu i zastosujemy wielki poziom czcionki. Zastosujemy również czcionkę ciała do tekstu, aby wyróżnić się i zwiększyć jego wagę do odważnego.

Ustaw drugi na H1 i zastosuj zmienną rozmiaru H1. To staje się twoim głównym nagłówkiem. W tym przykładzie użyjemy nazwy autora, który został dodany wcześniej, jako zmienną projektową. Jeśli brakuje Ci pomysłów, możesz użyć Divi AI, aby pomóc Ci z świetnym tekstem nagłówka.

Poniżej dodaj moduł tekstowy dla swojego akapitu pomocniczego. Zastosuj zmienną rozmiaru tekstu i zmienną kolorystyczną. Zachowaj to do 2-3 zdań, wyjaśniając Twoją podstawową propozycję wartości. W tym przykładzie dodamy krótkie wprowadzenie do naszego autora. Możesz także użyć Divi AI, aby pomóc Ci w kopii tutaj.

Space te elementy wykorzystujące twoje medium kosmiczne jako margines między nagłówkiem a akapitem.

Następnie dodaj moduł przycisku poniżej tekstu. Zastosuj swoje kolory. Używamy podstawowej zmiennej projektu kolorów i tekstu przycisku.

Dodaj swoją przestrzeń średnią zmienną do lewej i prawej wyściółki i przestrzeni małe do góry i dolne dla wymiarów przycisków. Stwarza to przycisk proporcjonalny do twojego tekstu, nie będąc zbyt dużym. Użyj dużej zmiennej przestrzeni jako górnego marginesu, aby oddzielić ją od akapitu.

Tekst przycisku powinien używać zmiennej rozmiaru tekstu, aby zachować spójność z tekstem akapitu. Zastosujemy również zmienną projektową przycisków, którą dodaliśmy wcześniej.

Stylowanie prawej kolumny

Prawa kolumna może pomieścić wszystko, od obrazu do formularza pokładowego. Jeśli używasz obrazu w mniejszej kolumnie, uprzejmie. Zdjęcie twojego zespołu, biura lub czystej ilustracji działa dobrze. Nie pomyśl o umieszczeniu obrazu: wyśrodkuj go normalnie w kolumnie. W tym przykładzie dołączymy zmienną projektowania obrazu najnowszej książki. A także dodaj cień po pudełku, aby wyróżnić się.

Dostosujemy również szerokość obrazu, aby wynosić około 90%, aby wyglądał bardziej wyrównany.

W celu konsultacji ze stronami internetowymi czasami pozostawienie odpowiedniej kolumny pustej tworzy czystszy, bardziej profesjonalny wygląd, który skupia się na Twojej wiadomości.

Wynik

Poniżej znajduje się wynik:

Użyj skalowania płótna Divi 5, aby przetestować wygląd swojego bohatera na różnych rozmiarach ekranu. Funkcje Clamp () w twoich zmiennych powinny automatycznie obsługiwać reakcję.

Chociaż zmienne złotego współczynnika zapewniają doskonałą proporcjonalną harmonię, możesz potrzebować drobnych korekt w oparciu o konkretną treść. Długie nagłówki mogą wymagać nieco mniejszego tekstu. Krótkie, mocne hasło mogą obsługiwać większe rozmiary. Niektóre style marki wymagają mocniejszych lub luźniejszych odstępów.

Piękno zmiennych projektowych polega na tym, że zmiany te wymagają tylko dwóch kliknięć. Otwórz menedżer zmiennych, dostosuj rozmiar H1 lub przestrzeń duża zmienna i obserwuj, jak zmiana ma zastosowanie natychmiast na całej witrynie.

Twój H1 powinien pozostać widoczny, ale czytelny na urządzeniach mobilnych (minimum 47 px). Twoje odstępy powinny wydawać się hojne, ale nie nadmierne w żadnym rozmiarze ekranu. Dwupolumny podział zapewnia klasyczny, profesjonalny układ, który działa dobrze dla firm usługowych, w których zaufanie i klarowność mają bardziej niż krzykliwe elementy projektowe.

Utrzymanie złotych współczynników w całym miejscu z ustawieniami grupowymi opcji

Zmienne projektowe obsługują liczby, ale ustawienia o grupie opcji zapewniają, że są one konsekwentnie używane w całej witrynie.

Zbuduj swoją pierwszą sekcję za pomocą stworzonych zmiennych. Dokładnie dobrze, odstęp i układ. Następnie kliknij ikonę wstępnie ustawioną obok każdej grupy stylizacji (typografia, odstępy, granica itp.) I zapisz je jako ustawienia o grupie opcji.

Stwarza to bloki projektowe wielokrotnego użytku, które już zawierają proporcje złotego współczynnika. Zamiast zaczynać od zera, zastosuj te ustawienia wstępne za każdym razem, gdy dodasz nową sekcję lub moduł.

Gdy trzeba dostosować proporcje w całej witrynie, zmień zmienną raz. Każde ustawienie za pomocą IT z nim natychmiast aktualizuje się na całej witrynie. Brak polowania na poszczególne strony, aby wprowadzić zmiany.

Twoje złote współczynniki pozostają spójne bez pracy ręcznej.

Matematyka do pięknego designu, Divi 5 ułatwia

To dokuczliwe uczucie, gdy układy wyglądają na „prawie w porządku”, ma sens. Nie byłeś wybredny: twój mózg poruszał proporcjonalne relacje, które się wydawały.

Złote współczynniki dają niezawodny punkt wyjścia, ale większość konstruktorów sprawia, że ​​robisz matematykę za każdym razem. Zmienne projektowe Divi 5 zmienia się całkowicie. Oblicz swoje proporcje 1,618 raz, zapisz je jako zmienne, a następnie kliknij, aby zastosować je w dowolnym miejscu na witrynie.

Chcesz dostosować odstępy na pięćdziesięciu stronach? Zmień jedną zmienną zamiast edytowania każdej strony indywidualnie. Chcesz spójną typografię, która jest zgodna z złotymi wskaźnikami? Ustaw swoje wartości Clamp () raz i obserwuj, jak doskonale skalują się na wszystkich urządzeniach.

Matematyka działa wszędzie, ale Divi 5 faktycznie sprawia, że ​​jest praktyczne konsekwentne używanie.