Jeśli mężczyźni są z Marsa, a kobiety z Wenus, projektanci i deweloperzy są zdecydowanie z różnych planet!

To prawda! Wielu programistów ma problemy, jeśli chodzi o projektowanie i odwrotnie. Jeśli jesteś programistą, który chce poprawić swoje umiejętności projektowe, Czytaj dalej!

Podstawowe zasady i elementy projektowania

Przed jazdą na rowerze trzeba najpierw nauczyć się chodzić, prawda? Poznajmy więc niektóre z podstawowych zasad projektowania, które możesz włączyć do swojego projektu WordPress!

Spis treści

  1. Hierarchia
  2. Skład
  3. Punkt Ogniskowy
  4. Kolory
  5. Typografia
  6. Przepływ
  7. Wyrównanie
  8. Ostatnia uwaga dla deweloperów

Hierarchia

Hierarchia wizualna to prezentacja elementów i funkcji projektu na stronie internetowej w sposób, który implikuje względne znaczenie. Hierarchia wizualna wpływa również na kolejność, w jakiej ludzkie oko postrzega to, co widzi. Zwykle osiąga się to poprzez wizualny kontrast, rozmiar lub rozmieszczenie elementów.

WSKAZÓWKA DLA PROGRAMISTÓW: Tworzenie wizualnej hierarchii powinno być dla ciebie łatwe, ponieważ jako programista jesteś zapalonym organizatorem-przynajmniej jeśli chodzi o kod. Podejmij to zadanie tak, jakbyś tworzył strukturę HTML (najlepszym przykładem jest hierarchia nagłówków, z <h1> jest najważniejszym <h2> następnym, znasz wiertło.).
Zrób listę wszystkich elementów na swojej stronie internetowej. Oznacz każdy z” poziomem ” o znaczeniu gdzieś na kartce papieru (to tylko dla oczu). Na przykład twój nagłówek/hasło jest zwykle najważniejszą rzeczą, którą użytkownik powinien zobaczyć na stronie docelowej. Niech będzie lvl 1. Drugą najważniejszą rzeczą powinien być przycisk CTA – to jest Twój element lvl2 i tak dalej. Spraw, aby elementy wyższego poziomu wyróżniały się wizualnie, a reszta zawartości (4 lvl lub poniżej) była mniej przyciągająca wzrok.

Poniższa infografika pokazuje niektóre ze sposobów tworzenia wizualnej hierarchii. Tylko pamiętaj, nie przesadzaj i nie mieszaj wszystkiego!

Ways to achieve visual hierarchy in WordPress design
Sposoby osiągnięcia hierarchii wizualnej

Hierarchia wizualna może dotyczyć elementów tego samego typu, co ma miejsce w przypadku nagłówków w HTML. Na przykład, możesz mieć przycisk do silniejszych i słabszych działań (takich jak” Kup teraz “i” Czytaj więcej”), jeśli po prostu stylizujesz je nieco inaczej.

Basic design tips for WordPress developers - creating hierarchy of the same element using different styling
Tworzenie hierarchii wizualnej przy użyciu różnych stylów na tym samym elemencie

Zauważ, że małe rzeczy, takie jak zmiana rozmiaru i koloru obramowania lub zmiana wagi i stylu czcionki, mogą mieć duże znaczenie. To wszystko są super łatwe rzeczy do zrobienia w CSS.

Skład

Skład strony internetowej to rozmieszczenie i organizacja elementów projektu zgodnie z podstawowymi zasadami sztuki i projektowania stron internetowych.

Tworzenie zrównoważonych kompozycji jest łatwiejsze przy stosowaniu zasady tercji.

Zasada tercji zakłada, że obraz powinien być wyobrażony jako podzielony na dziewięć równych części przez dwie równo rozmieszczone linie poziome i dwie równo rozmieszczone linie pionowe. Najważniejsze elementy kompozycji powinny być umieszczone jak najbliżej przecięć tych linii.

Applying the rule of thirds in WordPress web design
Zastosowanie zasady tercji do stworzenia bardziej dynamicznej kompozycji

Zastosowanie zasady tercji tworzy więcej energii i lepszy przepływ do kompozycji niż po prostu centrowanie punktu skupienia.

Równowaga

Równowaga to zasada projektowania, która określa, jak równomiernie rozprowadzić elementy wizualne. Nasze mózgi postrzegają zrównoważone projekty jako stabilne i spokojne, podczas gdy brak równowagi sprawia, że czujemy się nieswojo i niewygodnie. Niezrównoważony projekt może stanowić silniejszą deklarację, ale wymaga to wysoko wykwalifikowanego projektanta, aby to zrobić w odpowiedni sposób. W większości przypadków powinieneś dążyć do równowagi.

Przestrzeń negatywna

Biała spacja jest ważną częścią strategii układu. Włączenie negatywnej przestrzeni do projektu pomaga zmniejszyć hałas wizualny, zwiększyć czytelność i przynieść równowagę.
Użyj marginesów i wypełnień na elementach projektu, aby dodać negatywną przestrzeń.

Dodając ujemną przestrzeń wokół elementu można podkreślić ten element. Spójrz na stronę wyszukiwania Google. Ma wyśrodkowane logo i mnóstwo negatywnej przestrzeni wokół niego. Po prostu nie możesz przegapić punktu tej strony.

Design tips for developers, a good example of negative space usage
Korzystanie z negatywnej przestrzeni sprawia, że Twoje treści wyróżniają się

Teraz porównaj to z tym.

design tips for wordpress developers - bad example - not using negative space
Przykład złego projektu ze zbyt małą przestrzenią negatywną

Ta strona jest zła na tak wielu poziomach, ale jedną z najgorszych rzeczy na tej stronie jest to, że jest tak zagracona treścią, że nie możesz nawet na nią spojrzeć.

Punkt Ogniskowy

Punkt ogniskowy lub focus strony internetowej to miejsce na twojej stronie, które przyciąga największą uwagę. Powinien to być najważniejszy element Twojej strony lub posta WordPress. Twoja strona powinna zawsze mieć jeden wyraźny punkt centralny (mam na myśli, wystarczy spojrzeć na stronę główną Google). Maksymalnie dwa lub trzy punkty skupienia, na większych płótnach, w zależności od projektu i funkcjonalności witryny (liczba potencjalnych elementów CTA).  Spraw, aby zbyt wiele elementów wyróżniało się, a skończysz z kompletnym bałaganem, takim jak na tej stronie. Jeśli jesteś epileptykiem nie otwieraj tego linku.

PRO wskazówka: w przypadku obrazów i niecentrowanych stron internetowych użyj zasady trzeciej, aby umieścić punkt skupienia we właściwym miejscu. Photoshop crop tool rysuje linie dla Ciebie.

Rule of thirds in WordPress design - Photoshop crop tool
Narzędzie Crop w Photoshopie automatycznie rysuje linie dla Ciebie

Zauważ, jak najważniejsze elementy tego obrazu (twarz bohatera i logo firmy) znajdują się na przecięciu linii tworzących trzecie. To jest dokładnie tam, gdzie powinien być punkt centralny.

Kolor

Kolor jest niezwykle ważnym podstawowym elementem projektu. Omówienie teorii koloru i psychologii koloru może zająć całe semestry w szkołach projektowania, ale nie martw się, będziemy to robić krótko.

Najważniejszą rzeczą, którą musisz wiedzieć, jest to, jak stworzyć paletę kolorów dla swojego projektu internetowego.

Oto kilka wskazówek:

  • Wybierz kolor podstawowy dla swojego projektu.
  • Wybierz dwie warianty podstawowego koloru (Zwykle jaśniejszy i ciemniejszy odcień podstawowego koloru), aby pomóc ci uzyskać głębię i uzyskać profesjonalny wygląd.
  • Wybierz drugi kolor. Upewnij się, że uzupełnia (lub kontrastuje) twój podstawowy kolor.
  • Wybierz również dwa warianty swojego dodatkowego koloru.
  • Dodaj neutralne (białe, szare, czarne).
  • Nigdy nie używaj pełnego krycia w kolorze czarnym lub białym. To zbyt trudne dla oka.
  • Użycie 3 kolorów akcentu jest dopuszczalne w niektórych przypadkach. Używanie 4 lub więcej jest prawie zawsze naprawdę złym pomysłem. Nie spraw, aby Twoja strona wyglądała tak!

Większość motywów WordPress ma wbudowaną opcję wyboru kolorów podstawowych i drugorzędnych. Oznacza to, że po wybraniu koloru podstawowego kolor niektórych elementów i zazwyczaj części układu zmieni się automatycznie. Aby uzyskać bardziej szczegółowy projekt, dodaj warianty koloru podstawowego i wtórnego i użyj ich do niestandardowych detali.

Użyj neutralnych lub wariantów koloru wtórnego dla elementów o mniejszym znaczeniu w hierarchii wizualnej.

PRO wskazówka: Hack drogę do idealnej palety kolorów za pomocą kalkulatora kolorów. Ta prosta, ale niesamowita aplikacja pozwoli Ci wybrać harmonię w oparciu o początkowy wybór koloru.

Color Calculator helps you to choose the best colors for your WordPress design
Wybierz harmonie kolorów z łatwością za pomocą kalkulatora kolorów

Inne schludne narzędzia do wybierania palety kolorów to paleta materiałów Google i aplikacja color tool. Użyj palety materiałów, aby wybrać kolor podstawowy i jego warianty odcieni oraz użyj kalkulatora kolorów do tworzenia harmonii. Jeśli chcesz dowiedzieć się więcej o wykorzystaniu kolorów w projektowaniu interfejsu użytkownika, najlepszym miejscem do odwiedzenia jest projektowanie materiałów.

Przepływ

Przepływ lub ruch wizualny służy do prowadzenia oczu widza przez sztukę. Staranna kompozycja elementów projektu (linie, kształty, obrazy, typografia i negatywna przestrzeń) tworzy przepływ.

W projektowaniu stron internetowych dobry przepływ jest nieco trudny do wykonania, ponieważ większość elementów projektowania stron internetowych, takich jak bloki tekstowe, nawigacje, suwaki itp. wizualnie przerwij ruch oka. To dlatego, że są w kształcie prostokąta, który jest najbardziej nudny kształt, nawiasem mówiąc.

Zazwyczaj (w kulturach zachodnich) nasze oczy zaczynają oglądać stronę od lewego górnego rogu. Dlatego najczęstszymi typami przepływu w projektowaniu stron internetowych są przepływ F i przepływ Z.

Z flow vs F flow design tips for WordPress developers
Z vs f flow na tematy z repozytorium WordPress

Wskazówka dla deweloperów: nie stresuj się zbytnio przepływem – po prostu pamiętaj, gdzie jest punkt centralny i jak oko widza do niego dociera. Znajdź dobry motyw WordPress z wstępnie zaprojektowanymi układami, które pomogą Ci w ogólnej kompozycji.

Typografia

Typografia jest sztuką i techniką układania typu, aby język pisany był czytelny, czytelny i atrakcyjny po wyświetleniu, mówi Wikipedia.

Nie wdając się w zbyt wiele szczegółów, oto, co musisz wiedzieć:

  1. Gdzie znaleźć czcionki
  2. Jak wybrać czcionkę
  3. Jak sparować czcionki
  4. Jak przesłać niestandardową czcionkę do witryny WordPress

Gdzie można znaleźć dobre czcionki?

Może ktoś czeka za krzakiem? Żeby ich złapać, trzeba wiedzieć, gdzie szukać. Pierwszym miejscem, do którego wszyscy idą, jest katalog Google Fonts.

Sprawdź, jak korzystać z katalogu czcionek Google z WordPress i BuddyPress.

Jeśli nie chcesz używać Google fonts jak wszyscy inni, istnieje wiele więcej bibliotek czcionek do odwiedzenia:

https://www.fontfabric.com/

https://www.fontsquirrel.com/

https://www.1001fonts.com/

https://www.dafont.com/

https://fontlibrary.org/

Jak wybrać idealną czcionkę dla swojej strony internetowej?

To sztuka sama w sobie, ale oto kilka sugestii:

  • Wybierz czcionkę zgodnie z estetyką i nastrojem Twojej marki. Oczywiście nie pomyślałbyś o użyciu Comic sans, jeśli tworzysz stronę internetową firmy prawniczej. W rzeczywistości, nie używaj Comic sans w ogóle. Nawet jeśli robisz komiksy.

Oto kilka innych czcionek, których projektanci uwielbiają nienawidzić i których prawdopodobnie nie powinieneś używać na żadnej stronie internetowej. Wyjątkiem jest tu Helvetica. Projektanci nienawidzą go tylko dlatego, że jest zbyt dobry i są zazdrośni. Papirus, z drugiej strony, jest” zdecydowanie nigdy nie używać ” wszech czasów ulubionym.

  • Ogólnie rzecz biorąc, używaj czcionek bezszeryfowych dla nagłówków i czcionek bezszeryfowych dla treści.
  • Używaj czcionek odręcznych w ekstremalnym umiarze i tylko jako elementów projektu lub dekoracji. Nigdy nie używaj ich do swoich treści.
  • W przypadku treści wybierz czytelne, Nie dekoracyjne czcionki.
  • Nie mieszaj zbyt wielu krojów pisma i typów czcionek na stronie. Dwa to zwykle więcej niż wystarczy.
  • Możesz zdecydować się na użycie tylko jednego kroju na swojej stronie. Jeśli tak jest, zdecydowanie sugeruję eksperymentowanie z różnymi gramaturami i stylami czcionek.

Jeśli jesteś zainteresowany czytaniem dużo więcej o dobieraniu czcionek, proponuję ten stary dobry artykuł.

Jak wybrać parę czcionek do mojego projektu WordPress?

Dam ci 2 wskazówki, jak wybrać parę czcionek, które dobrze ze sobą współgrają:

  1. Użyj tej samej rodziny czcionek. W przeciwieństwie do rodzin ludzkich, rodziny czcionek dogadują się ze sobą bardzo dobrze.
  2. Wybierz dwa kontrastujące, ale komplementarne wizualnie krojniki, jeden serif i jeden sans-serif. Ustal hierarchię czcionek i użyj jednej czcionki dla nagłówków (które byłyby Bezszeryfowe w 99 procentach czasu), a drugiej dla treści.

Aby się zainspirować, sprawdź te 30 wspaniałych kombinacji czcionek.

Jak zainstalować czcionki do WordPress

Dodawanie czcionek do motywu WordPress jest dość prostym procesem dla każdego programisty.

Najpierw prześlij przykład-czcionka.ttf plik w swoim (dziecko!) theme ‘ s directory using a File Manager.

Następnie połącz plik czcionki z motywem podrzędnym styl.css korzystanie z reguły CSS @ font-face.

Ładowanie gist 3e90ec56afd201da8814301ef5e4054d

Jesteś skończony!

Jeśli potrzebujesz pomocy, sprawdź ten szczegółowy przewodnik przesyłania niestandardowych czcionek do witryny WordPress.

Jak zawsze, istnieje wiele narzędzi i wtyczek do typografii WordPress, które pomogą Ci to zrobić.

Wskazówka bonusowa: być może zastanawiasz się, jaka jest różnica między krojem pisma a czcionką. W teorii krojem pisma jest w rzeczywistości rodzina czcionek. Czcionka to określony rozmiar, waga i styl kroju pisma. Jednak nikt już nie używa słowa krój oprócz szykownych projektantów. Uczyń to częścią swojego słownictwa, jeśli chcesz przeniknąć do ich wewnętrznych kręgów.

Wyrównanie

Wyrównanie to zasada projektowania, którą prawdopodobnie znasz. Wiesz … użyłeś wyrównania w Wordzie, znasz właściwość CSS text-align, używałeś jej na studiach…

Tak jak twoja szkolna ukochana, zasada wyrównywania jest czymś więcej niż na pierwszy rzut oka. Na początek, to nie tylko właściwość tekstowa. O nie, nie! Marginesy i wypełnienia to również przykłady wyrównania, które znasz.

Pamiętaj, projektanci uwielbiają wyrównywać wszystko. W rzeczywistości najlepszym sposobem na wykrycie złego lub leniwego projektanta jest sprawdzenie, czy wszystkie elementy jego projektu są idealnie i symetrycznie wyrównane, czy nie.
Wyrównanie pomaga w organizowaniu elementów względem linii lub marginesu.  Zazwyczaj margines jest niewidoczny i implikowany przez sposób ułożenia projektu.

Istnieją dwa podstawowe typy zasad wyrównywania: wyrównanie krawędzi i wyrównanie środka.

Wyrównanie krawędzi pozycjonuje elementy względem marginesu dopasowanego do ich zewnętrznych krawędzi, podczas gdy Wyrównanie środka umieszcza elementy projektu tak, aby ustawiały się ze sobą na osiach środkowych.

Edge and center alignment in WordPress design - tips for developers
Wyrównanie krawędzi i środka w projekcie

Wskazówki dla programistów: najprostszym sposobem na wyrównanie elementów w witrynie WordPress jest użycie kreatorów stron. Jeśli bardziej lubisz CSS,nie zapomnij dostosować ustawień marginesów i wypełnień układu. Wyrównaj elementy w lewo lub w prawo za pomocą właściwości CSS float.

Ostatnia uwaga dla deweloperów

Bądźmy prawdziwi. Wynajęcie profesjonalnego projektanta, który przygotuje niesamowity projekt, jest w większości przypadków wypróbowanym i przetestowanym sposobem. Mogą zrobić wszystko kreatywne (ponad)myślenie za Ciebie, podczas gdy ty skupiasz się na swoich mocnych stronach-kodzie i funkcjonalności. Mimo to od czasu do czasu możesz znaleźć się w marynacie projektowej i właśnie wtedy na ratunek przychodzi znajomość podstawowych zasad projektowania. Trening wzroku i percepcji wzrokowej niewątpliwie ułatwi pracę i pozwoli od razu rozpoznać dobry lub zły projekt. W końcu nie chcielibyśmy, aby tandetna kombinacja kolorów zrujnowała całą twoją ciężką pracę za kulisami.

Czy uważasz, że programiści powinni znać podstawowe zasady projektowania? Czy kiedykolwiek znalazłeś się w “projektowym ogórku”? Podziel się swoimi doświadczeniami, chciałbym usłyszeć od ciebie!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…