Projektowanie strony internetowej może być trudnym procesem. Znalezienie inspiracji dla projektu, który jest zarówno estetyczny, jak i funkcjonalny, nie zawsze jest proste.

Utrzymanie spójnego stylu w różnych właściwościach i stronach internetowych może jeszcze bardziej utrudnić sprawę. Jest to szczególnie ważne po uruchomieniu witryny, gdy może pracować nad nią wiele zespołów.

W tym momencie przewodnik po stylu projektowania stron internetowych może być naprawdę przydatny.

Co To jest przewodnik po stylu projektowania stron internetowych?

Przewodnik po stylu projektowania stron internetowych szczegółowo opisuje wygląd każdego elementu strony internetowej. Przewodnik po stylach nie polega na tworzeniu dowodów projektu dla każdego szablonu strony, ale raczej na bardziej konkretnych komponentach, takich jak typografia, kolory i wypełnienia.

Po co tworzyć Przewodnik po stylu?

Tworzenie przewodnika po stylu projektu pomoże Ci zachować spójny styl w całej witrynie, a także zewnętrznych właściwościach, takich jak profile w mediach społecznościowych.

Przewodniki po stylach stają się szczególnie przydatne, gdy wiele zespołów pracuje nad Twoją witryną. Na przykład możesz mieć agencję budującą nowe strony. Dając im swój przewodnik po stylu, możesz mieć pewność, że projekt nowych stron będzie zgodny z resztą Twojej witryny.

Przykłady przewodników stylu projektowania

Rzućmy okiem na niektóre istniejące Przewodniki stylu projektowania stron internetowych. Dowiesz się o różnych podejściach, które możesz zastosować, a także o niektórych wspólnych elementach, które zawiera większość przewodników po stylach.

Oto dwa przewodniki po stylu projektowania stron internetowych, którym przyjrzymy się bliżej:

  • Google Material Design
  • Biblioteka Wzorców MailChimp
The areas covered in Google's Material Design guidelines
Obszary objęte wytycznymi Google dotyczącymi projektowania materiałów

Patrząc na projektowanie materiałów, możemy zobaczyć następujące główne obszary zawarte w przewodniku stylu:

  • Ruch
  • Styl (zawiera kolor, ikony, obrazy, typografię, pisanie)
  • Layout
  • Komponenty (takie jak przyciski, karty, listy i karty)
  • Wzory
  • Rozwój i komunikacja
  • Usability
  • Platformy
MailChimp's Pattern Library guidelines
Wytyczne Biblioteki wzorców MailChimp

Biblioteka wzorców MailChimp obejmuje następujące obszary:

  • System Siatki
  • Typografia
  • Elementy Formularza
  • Nawigacja
  • Tabele
  • Listy
  • Listwy
  • Statystyki / Dane
  • Informacje zwrotne
  • Dialogi
  • Freddicons
  • Klasy Pomocnicze

Są to zarówno kompleksowe przewodniki po stylach, jak i pewne wspólne elementy między nimi, takie jak typografia, ikony, układy/siatki i Komponenty.

Nie będziemy omawiać wszystkiego, co zawiera Biblioteka wzorców Material Design i MailChimp, ale zamiast tego wyszczególnimy ważne elementy, które należy uwzględnić w większości przewodników po stylach.

Co uwzględnić w Przewodniku po stylu

Właśnie widziałeś kilka przykładów przewodników po stylach projektowania stron internetowych i wspólnych elementów, które zawierają. Omówimy teraz bardziej szczegółowo niektóre wspólne elementy.

1. Typografia

Nie lekceważ znaczenia typografii. Dla niektórych osób typ jest najważniejszym aspektem projektowania strony internetowej. Powinieneś poświęcić sporo czasu na uzyskanie tej części przewodnika po stylu. Możesz przeczytać o tym, co badania mówią o stylizacji tekstu na swojej stronie internetowej, jeśli chcesz zagłębić się w typografię głębiej.

Istnieje kilka kluczowych obszarów, na których powinieneś się skupić podczas definiowania reguł dla typu witryny. Przejrzymy teraz każdą z nich szczegółowo.

Rodziny czcionek

Istnieją dwa typy rodziny czcionek:

  • Nazwy rodowe czcionek takie jak “Times New Roman” i “Courier”
  • Generyczne rodziny czcionek, takie jak “serif” i “sans-serif”

Wybór rodziny czcionek może być prawdziwym wyzwaniem, ponieważ sama liczba dostępnych czcionek może być dość zniechęcająca. Wybór czcionek staje się jeszcze większym wyzwaniem po rozpoczęciu łączenia wielu rodzin czcionek. Na szczęście dostępne są pewne zasoby, które mogą w tym pomóc.

Google Fonts to narzędzie, które sprawia, że niektóre świetnie wyglądające czcionki są dostępne za darmo. Chyba, że nigdy wcześniej nie korzystałeś z internetu (jak to czytasz?!), wtedy z pewnością zobaczyłbyś czcionki takie jak “Open Sans” i “Roboto”; dwa z najpopularniejszych czcionek Google.

Google Fonts
Google Fonts

Google Fonts sprawia, że filtrowanie ich czcionek jest dość łatwe, ale sparowanie czcionek może być nadal trudne, np. wybór różnych czcionek dla nagłówka i tekstu. Jeśli masz problemy z połączeniem dwóch czcionek Google, możesz użyć zasobów, takich jak para czcionek lub fonts.greatsimple.io.

Istnieją źródła darmowych czcionek inne niż Google Fonts. Typekit firmy Adobe oferuje szeroką gamę bardzo wysokiej jakości czcionek. Mają darmową wersję, a także płatną warstwę, do której musisz tylko uaktualnić, jeśli chcesz jedną z ich czcionek premium lub masz witrynę o dużym natężeniu ruchu.

Adobe Typekit
Adobe Typekit

Możesz także użyć wielu darmowych bibliotek czcionek, które są dostępne do wyszukiwania czcionek. Upewnij się, że sprawdzasz licencję czcionek, których używasz, aby upewnić się, że są one odpowiednie, np. licencja komercyjna, jeśli używasz ich do strony internetowej, która generuje dochód.

Rozmiary czcionek

Rozmiar różnych elementów typograficznych w Twoim projekcie może mieć ogromny wpływ na ogólny charakter strony internetowej, a także jej czytelność. Brak jasnych wytycznych może spowodować, że strona internetowa będzie wyglądać niespójnie i nieprofesjonalnie.

Osobiście widziałem strony internetowe, na których kopia jest stylizowana inaczej od jednego akapitu do drugiego i nie wyglądała dobrze. Warto też pamiętać, że wybór rozmiaru poszczególnych elementów typograficznych jest dość trudny, więc nie pozostawiaj go innym.

Będziesz chciał zdefiniować elementy tekstowe, dla których będziesz ustawiał wytyczne. Co najmniej powinny to być różne rozmiary nagłówków (H1, H2, H3 itd.), a także elementy akapitu.

Możesz użyć narzędzi, takich jak Skala tekstu lub skala modularna, aby pomóc w określeniu proporcji tekstu. Działają one za pomocą współczynników do obliczenia, jak duże powinny być różne elementy tekstu.

Use tools like Modularscale to choose the sizes of various typographic elements
Użyj narzędzi takich jak Modularscale, aby wybrać rozmiary różnych elementów typograficznych

Waga czcionki

Aby zachować spójność, należy zdefiniować wagę czcionki dla różnych elementów typograficznych w całym projekcie. Należy upewnić się, że używasz wagi czcionki do rozróżniania różnych elementów typograficznych nie bez powodu.

Wysokość linii / rytm pionowy

Wysokość linii elementów typograficznych ma kluczowe znaczenie dla czytelności kopii, a także dla zachowania pionowego rytmu. Rytm pionowy jest trudny do utrzymania dzięki responsywnym witrynom internetowym, na przykład wysokości obrazów zmieniających rozmiar na różnych typach urządzeń. Pomimo wyzwań stojących przed responsywnymi stronami internetowymi, próba utrzymania pewnej formy pionowego rytmu pomoże uczynić twój projekt bardziej spójnym.

Będziesz chciał zdefiniować wysokość linii każdego z elementów typograficznych (H1, H2, H3, p), a także wypełnienia i marginesy, które utrzymują pożądany rytm pionowy.

2. Paleta Kolorów

Wybór odpowiednich kolorów jest kolejnym istotnym elementem projektu. Właściwy wybór koloru może wpłynąć na emocje, opinie i zachowanie odwiedzających.

Istnieje kilka teorii, na których kolory są najlepsze do wyboru, w tym Biologia / ewolucja, płeć i Walencja ekologiczna. Zrozumienie, dlaczego kolory mają taki efekt, może pomóc w stworzeniu witryny o wyższej konwersji, która czuje się “właściwa” dla użytkownika. Teoria koloru jest popularnym tematem i z tego powodu dostępnych jest wiele narzędzi, takich jak Paletton i Adobe Kuler.

Adobe Kuler color picking tool
Narzędzie do wybierania kolorów Adobe Kuler

Będziesz chciał zdefiniować wszystkie główne kolory, których będziesz używać (podstawowe, drugorzędne, trzeciorzędne i akcenty), a także jasny i ciemny odcień. Idealnie zdefiniujesz różne intensywności każdego koloru, a także kilka różnych odcieni między jasnym i ciemnym odcieniem.

Po zdefiniowaniu palety kolorów chcesz udzielić wskazówek, jak zastosować ją do projektu. Będziesz chciał określić kolory czcionek, kolory tła, elementy kotwicy i wszystko, co chcesz zachować spójność w całym projekcie.

Imagery

Wyobraźmy sobie dwa bardzo różne rodzaje obrazów: jeden to zdjęcie prawdziwej osoby w laptopie, drugi to kreskówka, wektorowy Obraz osoby. Oba są zupełnie inne, ale jeśli nie ustawiłeś żadnych zasad dotyczących typów obrazów, których chcesz użyć, osoby dokonujące zmian w Twojej witrynie mogą pomyśleć, że korzystanie z obu jest całkowicie w porządku.

Zdefiniowanie wytycznych dla obrazów może być nieco trudniejsze niż określenie czcionek i kolorów. Obrazy mogą być bardzo subiektywne; jednak nadal można zdefiniować cechy, takie jak ton, kolor, tematy, proporcje i jakość.

Przeczytaj, dlaczego ważne jest, aby Twoje polecane obrazy były prawidłowe.

3. Ikonografia

Wiele stron internetowych będzie zawierać ikony jakiegoś rodzaju. Jeśli twój jest taki, który ma, będziesz chciał dołączyć ikony do swojego przewodnika po stylu.

Jeśli ikony nie są niestandardowe i używasz gotowego zestawu ikon, włączenie ich do Przewodnika po stylu może być tak proste, jak podanie zestawu ikon, których chcesz użyć, rozmiarów, kolorów i miejsca ich użycia. Jeśli używasz niestandardowego zestawu ikon i być może będziesz wymagać utworzenia kolejnych niestandardowych ikon, musisz zdefiniować więcej reguł dla nich.

Google provides guidelines for Material Design icons
Google udostępnia wytyczne dotyczące ikon do projektowania materiałów

Możesz dowiedzieć się, jak szybko dodać Font Awesome icons do swojej witryny WordPress tutaj.

4. Odstępy

Ważne jest, aby dać elementy swojego projektu internetowego oddech pokoju. Przy określaniu górnych i dolnych marginesów i wyściółek, będziesz chciał wziąć pod uwagę swój rytm pionowy, jak wspomniano w sekcji typografii.

Określ dokładnie, ile miejsca powinien mieć każdy element. Będziesz zaskoczony, jak brudny i nieprofesjonalny projekt może zacząć wyglądać bez spójnych i celowych odstępów.

5. Layout

Jeśli masz zamiar tworzyć nowe strony, zdefiniuj Zasady dla nowych layoutów, co jest szczególnie ważne, jeśli nad tworzeniem strony pracuje więcej niż jedna osoba.

Na przykład strony internetowe, nad którymi pracowałem, umożliwiają administratorom tworzenie głównej treści w dowolnym formacie, który wybrali, często z czasem stają się niespójne i niechlujne. Strona może zaczynać się od wstępu do tego, czym jest strona, następnie przejść do FAQ, a następnie zakończyć wezwaniem do działania. Ktoś przychodzi i buduje kolejną stronę dla czegoś podobnego, ale ta strona ma inny układ, wprowadzenie, referencje, Często zadawane pytania, a następnie nie ma wezwania do działania.

Twój projekt powinien być strategiczny, najlepiej oparty na testach, a pozwolenie każdemu na zmianę tego projektu bez znajomości strategii stojącej za twoimi decyzjami może skończyć się nieprofesjonalną i słabo działającą stroną internetową.

6. Komponenty

Komponentami mogą być takie elementy jak przyciski, listy i pola tekstowe. Upewnij się, że tworzysz wytyczne dotyczące stylów Dla komponentów wspólnych dla Twojej witryny.

Style komponentów będą się składać z wielu już omówionych tematów, takich jak kolor, typografia i ikony, chociaż ważne jest, aby wyraźnie zdefiniować stylizację komponentów. Wyobraź sobie, jak szybko coś tak prostego jak style przycisków może stać się niespójne, od używanych kolorów, typografii, wypełnień i marginesów, po obramowania i cienie.

7. Animacje

Animacje lub przejścia funkcjonują obecnie na wielu stronach internetowych. Zamiast tylko eye candy, zapewniają praktyczne zastosowanie w zakresie doświadczenia użytkownika. Mikrointerakcje mogą być dobrym wykorzystaniem animacji do projektowania stron internetowych.

Nie zapomnij dodać animacji do przewodników po stylu. Aby ułatwić implementację animacji, możesz użyć biblioteki animacji CSS, takiej jak Animate.css i określ w swoim przewodniku po stylach, które klasy mają być używane i gdzie.

“Do’ s and Don ‘ts”

Coś, co można zauważyć w wytycznych dotyczących projektowania materiałów Google, to ich szerokie wykorzystanie nakazów i zakazów jako praktycznych przykładów. Zalecenia i zakazy są przydatne, aby upewnić się, że przekazałeś, jak wprowadzić przewodnik po stylu w życie.

Poniżej znajduje się przykład z wytycznych Google dotyczących projektowania materiałów. Jak widać, znacznie ułatwia zrozumienie pojęć, które mogą być trudne do wyjaśnienia za pomocą samego tekstu. Dodaj polecenia i zakazy do swojego przewodnika stylu, aby skuteczniej komunikować się.

Material Design's Do's and Don'ts
Wymagania i zakazy projektowania materiałów

Podsumowując

Teraz masz narzędzia, aby przejść i stworzyć swój własny przewodnik po stylu projektowania stron internetowych. Zastosuj w praktyce wskazówki tutaj, a będziesz mieć pewność, że przyszłe projekty internetowe wyglądają świetnie, mając spójny styl, bez względu na to, ile osób pracuje nad projektem.

Czy masz coś, co chcesz zawrzeć w swoim przewodniku po stylu projektowania stron internetowych, o którym nie wspomniano powyżej? Daj nam znać w komentarzach poniżej.

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…