Jak opracować schematy kolorów witryn internetowych, e-commerce lub aplikacji

Opracuj schematy kolorów witryn internetowych, e-commerce lub aplikacji

Udostępniliśmy sporo artykułów na temat znaczenia koloru w odniesieniu do marki. W przypadku witryny internetowej, witryny e-commerce lub aplikacji mobilnej lub internetowej jest to równie ważne. Kolory mają wpływ na:

  • Wstępne wrażenie marki i jej wartości – na przykład towary luksusowe często wykorzystują kolor czarny, czerwony oznacza podekscytowanie itp.
  • Decyzje zakupowe – o zaufaniu marki może decydować kontrast kolorystyczny. Delikatna kolorystyka może być bardziej kobieca i godna zaufania, ostre kontrasty mogą być pilniejsze i motywowane rabatami.
  • Użyteczność i doświadczenie użytkownika – kolory mają psychologiczny a także wpływ fizjologiczny, ułatwiając lub utrudniając nawigację po interfejsie użytkownika.

Jak ważny jest kolor?

  • 85% osób twierdziło, że kolor ma duży wpływ na to, co kupują.
  • Kolory zwiększają rozpoznawalność marki średnio o 80%.
  • Wrażenie kolorystyczne odpowiada za 60% akceptacji lub odrzucenia produktu.

Podczas określania schematu kolorów dla witryny internetowej, w załączonej infografice wyszczególniono kilka kroków:

  1. Kolor podstawowy – Wybierz kolor, który pasuje do energii Twojego produktu lub usługi.
  2. Kolory akcji – Brakuje tego na poniższej infografice, ale określenie głównego koloru akcji i drugorzędnego koloru akcji jest niezwykle pomocne. Uczy odbiorców, aby skupili się na określonych elementach interfejsu użytkownika w oparciu o kolor.
  3. Adodatkowe kolory – Wybierz dodatkowe kolory, które się uzupełniają twój podstawowy kolor, najlepiej kolory, które tworzą twój podstawowy kolor muzyka pop.
  4. Kolory tła – Wybierz kolor tła witryny – prawdopodobnie mniej agresywny niż kolor podstawowy. Pamiętaj również o trybie ciemnym i jasnym.. coraz więcej witryn zawiera schematy kolorów w trybie jasnym lub ciemnym.
  5. Kolory kroju pisma – Wybierz kolor tekstu, który ma się znaleźć na Twojej stronie – pamiętaj, że jednolity czarny krój pisma jest rzadki i nie jest polecany.

Na przykład moja firma Highbridge stworzył markę online dla producenta sukienek, który chciał stworzyć witrynę e-commerce skierowaną bezpośrednio do konsumenta, na której ludzie mogliby kup sukienki online. Rozumieliśmy naszą grupę docelową, wartość marki, a ponieważ marka była głównie cyfrowa, ale miała również fizyczny produkt, skupiliśmy się na schematach kolorystycznych, które dobrze sprawdzały się w druku (CMYK), paletach tkanin (Pantone), a także cyfrowe (RGB i Hex).

Testowanie schematu kolorów za pomocą badań rynku

Nasz proces wyboru schematu kolorów był intensywny.

  1. Przeprowadziliśmy badania marketingowe dotyczące serii podstawowych kolorów z naszą grupą docelową, które zredukowały nas do jednego koloru.
  2. Przeprowadziliśmy badania marketingowe dotyczące serii drugorzędnych i trzeciorzędnych kolorów z naszą grupą docelową, w której zawęziliśmy niektóre schematy kolorów.
  3. Wykonaliśmy makiety produktów (opakowania produktów, metki na szyję, zawieszki) oraz makiety e-commerce ze schematami kolorystycznymi i przekazaliśmy je klientowi oraz grupie docelowej w celu uzyskania informacji zwrotnej.
  4. Ponieważ ich marka była w dużej mierze uzależniona od sezonowości, dodaliśmy również sezonowe kolory. Może się to przydać w przypadku określonych kolekcji lub wizualizacji reklam i udostępnień w mediach społecznościowych.
  5. Przeszliśmy przez ten proces ponad pół tuzina razy, zanim zdecydowaliśmy się na ostateczny schemat.

schemat kolorów szafy 52

Podczas gdy kolory marki są jasnoróżowe i ciemnoszare, opracowaliśmy kolory akcji być cieniem zieleni. Zielony to kolor zorientowany na akcję, więc był to świetny wybór, aby przyciągnąć wzrok naszych użytkowników do elementów zorientowanych na akcję. Włączyliśmy odwrotność zieleni dla naszych działań drugorzędnych (zielona ramka z białym tłem i tekstem). Testujemy również ciemniejszy odcień zieleni w kolorze akcji dla akcji najechania kursorem.

Odkąd właśnie uruchomiliśmy witrynę, wprowadziliśmy śledzenie myszy i mapy popularności, aby obserwować elementy, które przyciągają odwiedzających i z którymi najczęściej wchodzą w interakcję, aby zapewnić, że mamy schemat kolorów, który nie tylko dobrze wygląda… ale działa dobrze.

Kolory, biała przestrzeń i charakterystyka elementów

Opracowanie schematu kolorów powinno zawsze odbywać się poprzez przetestowanie go w ogólnym interfejsie użytkownika, aby obserwować interakcje użytkowników. W powyższej witrynie uwzględniliśmy również bardzo specyficzne marginesy, dopełnienie, kontury, promienie obramowania, ikonografię i kroje pisma.

Dostarczyliśmy firmie pełny przewodnik po brandingu do wewnętrznej dystrybucji wszelkich materiałów marketingowych lub produktowych. Spójność marki ma kluczowe znaczenie dla tej firmy, ponieważ są nowi i nie mają w tej chwili żadnej świadomości w branży.

Oto powstała witryna e-commerce ze schematem kolorów

  • Closet52 - Kup sukienki online
  • Strona kolekcji Closet52
  • Strona produktu szafy 52

Odwiedź szafę52

Użyteczność kolorów i daltonizm

Nie zapomnij o testowaniu użyteczności pod kątem kontrastu kolorów w elementach witryny. Możesz przetestować swój schemat za pomocą Narzędzie do testowania dostępności stron internetowych. Dzięki naszej kolorystyce wiemy, że mamy pewne problemy z kontrastem, nad którymi będziemy pracować w przyszłości, a może nawet mamy kilka opcji dla naszych użytkowników. Co ciekawe, szanse na problemy z kolorami u naszej grupy docelowej są dość niskie.

Ślepota barw to niezdolność do dostrzegania różnic między niektórymi kolorami, które mogą rozróżnić użytkownicy bez kolorów. Ślepota barw wpływa na około pięć do ośmiu procent mężczyzn (około 10.5 miliona) i mniej niż jeden procent kobiet.

Usability.gov

Zespół WebsiteBuilderExpert przygotował tę infografikę i szczegółowy towarzyszący artykuł na temat Jak wybrać kolor dla swojej witryny? to jest niezwykle dokładne.

Jak wybrać schemat kolorów dla swojej witryny?