7 zasad dla schematów kolorów stron internetowych

7 zasad tworzenia schematów kolorów stron internetowychW brandingu i projektowaniu stron internetowych kolory naprawdę mają znaczenie.


Dlaczego?

Badania pokazują, że 62–90% decyzji o zakupie w trybie natychmiastowym są napędzane wyłącznie postrzeganiem kolorów.

Wybór odpowiedniej kolorystyki witryny sprawia, że ​​jest ona niezapomniana, godna zaufania, atrakcyjna i zyskowna. Pierwsze wrażenie jest wszystkim.

Budując witrynę, należy dokładnie rozważyć, które kolory dodać do schematu kolorów i dlaczego. Różne kolory będą wysyłać różne wiadomości do użytkowników, zmieniając ich rozumienie witryny, nawet jeśli nie było to zamierzone.

Nie masz pojęcia, od czego zacząć? Wykonaj poniższe kroki, aby utworzyć schemat kolorów witryny i unikaj największych błędów projektowych.

Przeciętny użytkownik ma okres uwagi 8 sekund. Tak długo musisz ich przekonać, aby kontynuowali przeglądanie Twojej witryny.

Wybór odpowiedniego schematu kolorów do projektowania stron internetowych pomoże przyciągnąć uwagę użytkowników kolorami, ostrymi elementami nawigacyjnymi i niezapomnianym brandingiem.

Oto od czego zacząć…

Contents

7 kroków do stworzenia własnego schematu kolorów witryny

1. Znajdź swój podstawowy kolor

Możliwe, że już wybrałeś swój podstawowy kolor. Jeśli masz logo lub jakiekolwiek istniejące logo, istnieje prawdopodobnie jeden główny kolor, który dominuje w projektach. To kolor, z którym twoja marka będzie kojarzona – kolor podstawowy.

Jeśli nie jesteś blisko ostatecznej decyzji, weź ten quiz aby dowiedzieć się, jakie są opcje, przeprowadzić badania rynku i korzystać z witryn takich jak Dryblować lub Behance trochę inspiracji.

Możesz także przeglądać ta lista palet kodów szesnastkowych niektórych z najbardziej znanych marek na świecie, aby poszerzyć swoją pulę pomysłów.

Kiedy natrafisz na szczególnie przyjemny dla oka projekt lub obraz, nie wahaj się użyć próbnika kolorów, aby pobrać kod szesnastkowy i dodać go do listy ulubionych. ColorZilla wydaje się być popularnym narzędziem. A jeśli używasz Chrome jako głównej przeglądarki, zajrzyj do Rozszerzenie przeglądarki Eye Dropper ponieważ jest to jedno z najlepszych narzędzi na rynku.

2. Zdecyduj o liczbie kolorów (zalecane: 3)

Po ustaleniu podstawowego koloru następnym krokiem jest decyzja, ile innych kolorów dodasz do mieszanki.

Zazwyczaj zaleca się stosowanie kombinacji trzech kolorów. Triadyczna kolorystyka, który składa się z trzech kolorów rozmieszczonych równomiernie wokół koła kolorów, jest dobrym punktem wyjścia. Triadyczna paleta może być dość dramatyczna, jeśli zawiera trzy podstawowe żywe kolory, więc projektanci często wybierają kombinację odcieni wtórnych.

Istnieje również reguła starego projektanta, która może być pomocna przy stosowaniu schematu kolorów do projektu witryny. Jest znany jako Reguła 60-30-10.

Reguła 60-30-10 zaleca, aby nie używać równych ilości wybranych kolorów, ale raczej podzielić je na procenty i zastosować odpowiednio. Dobrym przykładem tej zasady w praktyce jest garnitur męski: marynarka i spodnie mają około 60% wyglądu, koszula stanowi kolejne 30%, a krawat 10%.

3. W razie potrzeby użyj kolorów dodatkowych

Dopasowywanie kolorów wtórnych do kolorów głównych marek może być trudnością, ale nie rozpaczaj! W Internecie dostępnych jest wiele inteligentnych bezpłatnych narzędzi, które znacznie ułatwią to zadanie. Na przykład możesz udać się do ColorSpace, wprowadź kod szesnastkowy wybranego koloru i usiądź! (Więcej narzędzi generatora palet kolorów poniżej …)

Po co dodawać kolory wtórne? Czasami projekt wymaga więcej niż kilku podstawowych kolorów. Jest to szczególnie prawdziwe w przypadku witryn wypełnionych treścią i stronami docelowymi – produktami, materiałami aktywacyjnymi, zasobami do pobrania itp.

Mailchimp ma obszerny i przemyślany schemat witryny dla wszystkich swoich markowych treści.
Na przykład, Mailchimp ma szeroki i przemyślany schemat witryny dla wszystkich swoich markowych treści.

Możliwość wizualnego oddzielania nagłówków, pasków bocznych, podpisów, przycisków i innych elementów zwiększa współczynnik konwersji i poprawia komfort użytkowania.

Jeśli jesteś w tej łodzi, warto rozważyć dodanie różnych odcieni i odcieni głównych kolorów zamiast poszukiwania dodatkowych. Czasami najlepszą strategią jest prostota.

4. Nie zapomnij o swoich neutralnych kolorach (biały, czarny szary)

Będziesz potrzebować neutralnych kolorów dla tekstu, aby stworzyć kontrast dla ważnych elementów lub jako kolory tła.

Funkcja neutralnego koloru w nowoczesnym projektowaniu stron internetowych jest bardzo podobna do białej przestrzeni – aby dać użytkownikom przerwę i dać im czas na lepsze przetworzenie i uszeregowanie pod względem ważności informacji na stronie.

Dobrym pomysłem jest posiadanie jednego ciemnego i jednego jasnego neutralnego koloru do różnych zastosowań. Najczęstsze neutralne kolory to biały, czarny i szary. Możesz również użyć odcieni dominujących kolorów jako neutralnych, chociaż harmonizacja jest nieco trudniejsza.

Wskazówki dotyczące marki Spotify
Na przykład, Spotify oferuje cztery możliwe wersje swojego logo, z jasną instrukcją używania czarnego logo na jasnym tle i białego na ciemnym tle.

Jeśli szukasz pomysłów, wróć do Dryblować lub Designspiration i użyj wyszukiwania kolorów, aby zobaczyć, co robią inni.

5. Dodaj kolory podstawowe, drugorzędne i neutralne w następujących miejscach:

Jak zabierasz się do stosowania schematu kolorów witryny? Jakie kolory idą gdzie i dlaczego?

  • Kolory podstawowe przejdź do „hotspotów” na swojej stronie internetowej. Powinieneś używać tych odważnych, żywych kolorów, aby przyciągnąć uwagę użytkowników i zachęcić ich do działania. Przyciski wezwania do działania, nagłówki, ikony świadczeń, formularze pobierania i inne ważne informacje powinny być wyróżnione za pomocą kolorów podstawowych.
  • Kolory wtórne służą do podkreślenia mniej ważnych informacji na stronie, takich jak dodatkowe przyciski, podtytuły, aktywne elementy menu, tła lub treści pomocnicze, takie jak FAQ i referencje.
  • Neutralne kolory najprawdopodobniej zostanie użyty do tekstu i tła, ale może się przydać w szczególnie kolorowych sekcjach strony, aby pomóc go stonować i ponownie ustawić ostrość.

6. Przeprowadź proces kilka razy

Kiedy w końcu opracujesz swoją paletę kolorów, przetestuj ją w różnych scenariuszach. Czy to będzie działać w druku? Co się stanie, jeśli zdecydujesz się na linię produktów? Czy ma to wpływ na użytkowników, których się spodziewałeś?

Ten proces najlepiej przejść kilka razy i utworzyć kilka różnych palet kolorów. Jeśli jeden nie spełni wszystkich twoich wymagań, będziesz miał plan B..

7. Burza mózgów w razie potrzeby

Piękne schematy kolorów nie są tak trudne do zdobycia, gdy wiesz, gdzie szukać. Oto lista przydatnych narzędzi, które poprowadzą Cię w poszukiwaniu najlepszych kombinacji kolorów witryny.

  1. ColorSpace – ta strona może wygenerować cały schemat kolorów na podstawie kodu szesnastkowego jednego wybranego koloru.
  2. Adobe Color – to narzędzie Adobe jest oparte na koncepcji koła kolorów i umożliwia opracowanie dowolnego schematu kolorów witryny za pomocą kilku kliknięć. Możesz również przesłać obraz, aby wyodrębnić kody kolorów, przeciągając i upuszczając plik do narzędzia.
  3. Paletton – Paletton to kolejne przyjazne dla użytkownika narzędzie do generowania pięknych schematów kolorów bez wiedzy technicznej lub projektowej.
  4. Chłodnice – to narzędzie jest naprawdę przydatne do testowania współpracy różnych kolorów. Dzięki interfejsowi przeciągania i upuszczania możesz przesuwać kolory i sprawdzać, czy kolidują ze sobą, czy współpracują ze sobą.
  5. ColorSpire – inny generator schematów kolorów witryny.
  6. Koło kolorów Canva – to bezpłatne narzędzie jest bardzo przyjazne dla użytkownika i może pomóc zrozumieć, które kolory razem świetnie wyglądają, a które kombinacje kolorów są nie do przyjęcia. Ponadto istnieje wiele treści edukacyjnych, które odpowiedzą na wszelkie pytania dotyczące teorii kolorów i koła kolorów.

Najczęściej zadawane pytania:

1. Dlaczego schemat kolorów witryny jest ważny?

Wpływ koloru na ludzki mózg to prawdziwe zjawisko. Niezależnie od tego, czy świadomie odczuwamy jego skutki, czy nie, kolory mają duży wpływ na to, jak nasz mózg przetwarza informacje i otaczający nas świat.

Nauka wykazała czerwony może zwiększyć krążenie, a niebieski uspokaja.

Na przykład w 2000 roku, Glasgow wprowadzone niebieskie oświetlenie uliczne poprawiające krajobraz miasta, co przypadkowo doprowadziło do zauważalnego zmniejszenia liczby przestępstw na obszarach oświetlonych przez niebieskie światła. podobnie, Tokijska kolej Yamanote Linia zdecydowała się zainstalować niebieskie światła na końcach peronów pociągów, aby zmniejszyć liczbę samobójstw. W rezultacie samobójstwa na tych stacjach spadły o 74%.

To prawdopodobnie wyjaśnia, dlaczego większość marek medycznych i farmaceutycznych wybiera kolor niebieski jako podstawowy kolor.

Jedno jest pewne: przy prawidłowym stosowaniu kolory mogą mieć nad nami wielką władzę. I właśnie dlatego wybór odpowiedniej kolorystyki witryny jest tak ważny.

Łącząc różne kolory i odcienie, możemy tworzyć palety kolorów, które wnoszą harmonię do projektu, wywołują pożądane emocje, wpływają na nastroje użytkowników i kształtują ich postrzeganie marki.

2. Jakie emocje są związane z różnymi kolorami?

Istnieje cała dziedzina nauki poświęcona badaniu wpływu koloru na ludzkie zachowanie – nazywa się to psychologią koloru. Przez wiele eksperymenty i badania, naukowcy ustalili, że kolory rzeczywiście wywołują emocje: niektórzy sprawiają, że jesteśmy szczęśliwi, czujni lub zrelaksowani, podczas gdy inni czerpią ciemniejsze uczucia i mogą wywoływać u nas lęk.

w rzeczywistości, 85% kupujących powiedziało kupują produkty wyłącznie na podstawie koloru.

Wybierając odpowiednią paletę kolorów dla swojej witryny, możesz zmienić sposób, w jaki ludzie myślą o Twojej marce i generować trwałe emocje, które będą kierować decyzjami zakupowymi konsumentów.

Ale od czego zacząć?

Oto sześć głównych kolory, które wywołują wyjątkową reakcję emocjonalną w przeglądających:

Czerwony

Czerwony symbolizuje znaczenie, pasję i agresję. Pomyśl o czerwonym dywanie, sercu jako symbolu miłości lub znaku stop. Wymaga uwagi i jeśli chodzi o design, należy go używać oszczędnie, aby nie przytłoczyć ani nie męczyć widza.

Vodafone.
Źródło obrazu: Vodafone.

Pomarańczowy

Pomarańczowy kojarzy się z energią, zabawą i niskimi cenami. Użycie koloru pomarańczowego w projektowaniu stron internetowych może wydobyć młodość marki, a nawet przyciągnąć uwagę kupujących.

easyGroup
Źródło obrazu: easyGroup.

Żółty

Jako kolor słońca, żółty może odgrywać rolę szczęścia i zabawy. Ale aktywuje również obszar lękowy w mózgu, dlatego należy go stosować ostrożnie i w różnych odcieniach.

Gąsienica
Źródło obrazu: Gąsienica.

Zielony

Kolor natury, zielony ma silny związek ze zdrowiem, dobrobytem i inicjatywami przyjaznymi dla środowiska. Pięknie nadaje się do wszelkiego rodzaju produktów ekologicznych lub naturalnych oraz marek skupionych na plenerze i przyrodzie.

Starbucks
Źródło obrazu: Starbucks.

niebieski

Kolor niebieski natychmiast budzi zaufanie i budzi poczucie bezpieczeństwa. Ponadto wykazano, że działa uspokajająco na mózg, więc wydaje się również zachęcający i przyjazny. Będąc tak wszechstronnym i żywym, niebieski jest jednym z najpopularniejszych wyborów kolorów wśród projektantów stron internetowych.

NHS
Źródło obrazu: NHS.

Purpurowy

Fioletowy to kolor tantiem. Często kojarzony z elegancją, tajemnicą i kreatywnością, jest to kolor wybierany przez marki, które szukają luksusu lub luksusu lub chcą stworzyć bardziej zmysłowy urok dzięki projektowi strony internetowej.

Cadbury
Źródło obrazu: Cadbury.

Myślenie o tym, które kolory podstawowe i dodatkowe należy zastosować w schemacie kolorów witryny, pozwoli Ci wpłynąć na to, jak ludzie myślą o Twojej witrynie i marce.

3. Co powinienem wiedzieć o różnicach płci i wieku?

Najlepiej działające witryny mają jedną wspólną cechę – znają swoją grupę docelową. Niezależnie od tego, czy są to badania rynku, czy wieloletnie doświadczenie w branży, powinieneś być w stanie powiedzieć, do kogo chcesz się zwrócić. Dlaczego? Ponieważ kolory, wybory projektowe, typografia i ton głosu mają różny wpływ na różne dane demograficzne.

I to nie tylko różne dane demograficzne, które inaczej postrzegają kolory. Okazuje się, że mężczyźni i kobiety też wolą różne kolory.

W badaniu z 2012 r, prawie 2000 mężczyzn i kobiet zostało zapytanych, czy wolą fioletowy, niebieski, zielony, żółty, pomarańczowy, czerwony czy różowy.

42% mężczyzn stwierdziło, że ich ulubionym kolorem jest niebieski, a następnie zielony (25%) i fioletowy (12%). Kobiety twierdziły również, że preferowanym kolorem jest niebieski (29%), a następnie fioletowy (27%) i zielony (19%).

Wykres kołowy: ulubione kolory ludzkości
Wykres kołowy: ulubione kolory ludzkości.

Chociaż subtelna, różnica w preferencjach kolorystycznych między mężczyznami i kobietami może mieć znaczący wpływ na sukces marki. To nie wszystko. Podczas tworzenia schematu kolorów witryny, który odpowiada obu płciom, ważne jest również, aby wziąć pod uwagę najmniej ulubione kolory.

Jakie kolory preferują różne płcie?

Jakie kolory preferują różne płcie? Trochę Badania zostało zrobione w tym kierunku.

Tanie lub niedrogie kolory

Według tych badań, zarówno mężczyźni, jak i kobiety nie lubią brązowych i pomarańczowych. 17% kobiet umieściło również szary na liście trzech najmniej ulubionych kolorów. Co ciekawe, obie płcie uważają te same kolory za „tanie” lub „niedrogie”.

4. Jakie kolory zwracają największą uwagę?

Odpowiednie kombinacje kolorów są niezbędne w projektowaniu stron internetowych, ponieważ pomagają projektantom ustanowić wizualną hierarchię. Hierarchia wizualna z kolei pozwala użytkownikom niemal natychmiast rozróżnić podstawowe elementy i najpierw znaleźć najważniejsze informacje.

Muzeum Guggenheima
Na przykład Muzeum Guggenheima używa kolorów do podkreślenia różnych lokalizacji i wyróżnienia najważniejszych informacji na stronie.

Ale to nie tylko różne kombinacje kolorów, które dają strukturę projektu. Kolory mają oczywiście swoją własną hierarchię, która najlepiej określa wpływ, jaki każdy kolor wywiera na nasze emocje, zmysły i zachowanie.

Są odważne kolory czerwony, żółty lub pomarańczowy, które są praktycznie nie do pominięcia i wymagają naszej niepodzielnej uwagi. Są też słabsze kolory, takie jak szary, biały lub jasnoniebieski, które pomagają stworzyć kontrast i sprawiają, że ważne elementy wyskakują.

Projektanci uwielbiają używać odważnych kolorów, aby wyostrzyć nawigację i zapewnić bardziej intuicyjną obsługę. Poza tym można użyć odważnych kolorów, aby uzyskać spójność na różnych stronach i pomóc użytkownikom szybciej znaleźć to, czego potrzebują. Na przykład, użycie czerwonego koloru dla przycisków wezwania do działania w całej witrynie może zwiększyć współczynnik konwersji i uczynić projektowanie interfejsu użytkownika bardziej intuicyjnym.

5. Które branże preferują różne kolory?

Omówiliśmy już, jak ważna jest psychologia kolorów dla brandingu, tożsamości i projektu logo oraz jak każdy odcień ma inny wpływ psychologiczny na klienta.

Nic więc dziwnego, że różne branże preferują różne kolory, ponieważ starają się wywołać określone emocje i stworzyć powiązania branżowe.

W jednym badaniu przeanalizowano 520 logo w różnych branżach, aby ustalić, który sektor preferuje dany kolor. Wyniki zebrano w kolorową tabelę przedstawiającą 20 najlepszych marek w każdej branży i ich dominujące kolory.

6. Jak poprawić rozpoznawalność marki?

Kolor jest jednym z najważniejszych elementów niezapomnianej marki – obok typografii, nazwy marki i grafiki.

Wiemy, że nasze mózgi pragną informacji wizualnej. Tworzenie atrakcyjnych treści wizualnych, wykorzystujących odpowiednie kolory i przyjemny dla oka design, wzbudza zainteresowanie użytkowników i przyciąga ich uwagę na długo przed faktycznym przetworzeniem informacji. Mózg zajmuje kwadrans, aby mózg przetworzył sygnały wizualne, a średni czas koncentracji uwagi konsumenta wynosi zaledwie 8 sekund.

Zróbmy szybki eksperyment. Zamknij oczy i pomyśl o tych trzech markach: Milka Chocolate, IKEA i Carlsberg. Widziałeś kolory ich marek? Założę się, że twój mózg został natychmiast obsypany fioletowymi, niebiesko-żółtymi i zielonymi obrazami.

Milka
Źródło obrazu: Milka.

Badania wykazały, że kolor zwiększa rozpoznawalność marki o 80%. Z kolei budowanie lepszego rozpoznawalności marki pomaga firmom poznać ich znajomość. A im bardziej coś jest znajome, tym bardziej mu ufamy.

Studiowanie psychologii koloru może również pomóc Ci upewnić się, że Twoja marka jest kojarzona z odpowiednimi emocjami i stworzyć pozytywne nastroje wśród konsumentów.

To może wydawać się dużo pracy dla czegoś tak podstawowego jak schemat kolorów witryny, ale jest to istotny krok w procesie projektowania witryny. Aby mieć wpływ na to, jak użytkownicy postrzegają i postrzegają Twoją markę, musimy lepiej zrozumieć związek między kolorami a emocjami.

7. Jakie są neutralne kolory?

Czy potrafisz stworzyć atrakcyjny projekt strony internetowej bez użycia koloru? Odpowiedź brzmi tak, ale to wymaga dobrego zrozumienia innych elementów projektu, takich jak typografia, siatka i układ, aby przyciągnąć uwagę odwiedzających.

Czarno-biały projekt strony internetowej jest znany jako monochromatyczny schemat kolorów. Połączenie czerni i bieli to bezpieczny zakład – są to dwa kolory, które nigdy nie wyjdą z mody. Jednak monochromatyczny schemat kolorów może być oparty na dowolnym kolorze, pod warunkiem, że pochodzi od jednego odcienia i jest rozszerzony za pomocą odcieni, odcieni i tonów.

Dobrze wykonana monochromatyczna konstrukcja sprawia, że ​​strona internetowa wyróżnia się jako wyrafinowana, elegancka i ponadczasowa.

Studio z ofertą specjalną
Oto przykład monochromatycznego schematu kolorów który używa czerwonego jako podstawowego odcienia.

Z drugiej strony uzyskanie odpowiedzi emocjonalnej od odwiedzających może być wyzwaniem. Pozbawione kolorów monochromatyczne projekty internetowe pozbawione są też osobowości i emocji. Projektanci muszą kreatywnie myśleć o tworzeniu atrakcyjnych funkcji przeglądania, gdy wybierają monochromatyczny schemat kolorów.

Badania nad minimalizmem w pokazach projektowania stron internetowych celowe i konsekwentne stosowanie koloru akcentu w całym projekcie pomaga podkreślić najważniejsze informacje i motywuje użytkowników do działania.

W jednym badaniu przeanalizowano 520 logo
W jednym badaniu przeanalizowano 520 logo.

Niebieski, czerwony i zielony to trzy dominujące kolory, które pojawiają się w prawie każdej branży.

Jednak jest jeden wyjątek, który dotyczy koloru niebieskiego. Według badaczy żywności, kiedy ludzie szukali żywności, nauczyli się unikać toksycznych lub zepsutych przedmiotów, które często były niebieskie, czarne lub fioletowe. Kiedy jedzenie barwione na niebiesko podaje się badanym, tracą apetyt.

Jeśli każda inna marka w Twojej branży używa tych samych kolorów, wyróżnienie się i zbudowanie rozpoznawalnej marki może wydawać się niemożliwe. Dlatego ważne jest, aby skompilować szerszą kolorystykę, która będzie miała zastosowanie do wszystkich materiałów brandingowych i marketingowych, zamiast wybierać prostą kombinację kolorów podstawowych i wtórnych.

8. Czy są jakieś przykłady dobrych schematów kolorów witryny?

Tam są! Oto 20 przykładów inspirujących kolorystykę witryny.

1. Jasny kolor akcentu

Crescosa
Źródło obrazu: Crescosa.

Użycie koloru akcentu w schemacie kolorów witryny to jeden z najskuteczniejszych sposobów skierowania uwagi użytkownika na najważniejsze fragmenty informacji na stronie. W poniższym przykładzie trzy odważne kolory – żółty, fioletowy i czerwony – służą do wyróżnienia podstawowych usług i stworzenia niezapomnianej koncepcji.

2. Jasny, ale zrównoważony schemat kolorów

Sztorm doskonały
Źródło obrazu: Sztorm doskonały.

Ta kolorystyka witryny równoważy dwa żywe kolory, używając jaskrawej czerwieni jako koloru akcentującego.

Odkryj bardziej jasne akcenty kolorystyczne na Adobe Color.

3. Świeży i ekologicznie wyglądający schemat kolorów

Calem
Źródło obrazu: Calem.

Powiedzenie, że najpierw jemy oczami, jest trafne. Nasz mózg odbiera sygnał z oczu na długo zanim nasze kubki smakowe zaczną działać. Kolor jest często pierwszym elementem, który nasze oczy zauważają na temat produktu spożywczego, który z góry określa, w jaki sposób postrzegamy smak i smak tego, co będziemy jeść. W poniższym przykładzie widzimy, jak użycie naturalnego schematu kolorów, w którym dominują kolory żółty, biały i zielony, tworzy organiczny i świeży wygląd.

4. Earthy Tones

Uruchom buzza
Źródło obrazu: Uruchom buzza.

Ta kolorystyka witryny wykorzystuje neutralne tło, aby wydobyć brzoskwiniowy kolor produktu.

Odkryj więcej świeżych schematów kolorów na Adobe Color.

5. Spokojny i minimalistyczny schemat kolorów

Pracuj odpowiedzialnie
Źródło obrazu: Pracuj odpowiedzialnie.

Ta prosta kombinacja ziemistych, spokojnych kolorów tworzy relaksującą atmosferę i nadaje właściwy ton przekazowi witryny – przezwycięża stres i niepokój. To także przykład tego, jak ograniczona paleta kolorów może nadal mieć duży wpływ na nastrój i zachowanie użytkownika.

6. Elegancki i zrelaksowany schemat kolorów

Wgłębienie
Źródło obrazu: Wgłębienie.

Łącząc różne odcienie niebieskiego z pasującymi pastelami, ta elegancka kolorystyka witryny tworzy spokojną i marzycielską atmosferę.

Odkryj bardziej minimalistyczne schematy kolorów Adobe Color.

7. Schemat kolorów pastelowych i stonowanych

Wspólnik
Źródło obrazu: Wspólnik.

Wykorzystując delikatną pastelową kolorystykę, ten projekt strony internetowej sprawia wrażenie organicznego przepływu i struktury wizualnej. Jest przyjemny dla oka i dobrze wyważony, zachęcając odwiedzających do pozostania i kontynuowania przeglądania.

8. Miękki i zachęcający schemat kolorów

Cédric Pereira
Źródło obrazu: Cédric Pereira.

Ta kolorystyka witryny łączy kilka pastelowych kolorów, aby stworzyć delikatny i zachęcający wygląd.

Odkryj więcej pastelowych schematów kolorów na Adobe Color.

9. Żywy i odważny schemat kolorów

MA True Cannabis
Źródło obrazu: MA True Cannabis.

Pełen kolorów i energii, ta żywa paleta kolorów łączy jasnożółty i żywy niebieski, tworząc potężne połączenie. Dzięki żywej kolorystyce i ciekawym elementom projektu strona pozostawia długotrwałe wrażenie i cytrusowy smak.

10. Żywy kontrast

Projekt Dropbox
Źródło obrazu: Projekt Dropbox.

W tym schemacie kolorów zastosowano dwa żywe kolory, aby stworzyć efektowny kontrast.

Odkryj bardziej żywe schematy kolorów na Adobe Color.

11. Kolorowy i nowoczesny schemat kolorów

Potwierdzać
Źródło obrazu: Potwierdzać.

Ta strona nawiązuje do wyrafinowanego i nowoczesnego designu, łącząc produkty w jaskrawych kolorach z neutralnym tłem. Dzięki jednemu kolorowi akcentującemu przyciski CTA, projekt strony świetnie działa, prowadząc użytkownika do pożądanego działania.

12. Zabawa i zabawa

Twój plan, Twoja planeta
Źródło obrazu: Twój plan, Twoja planeta.

Łącząc wiele różnych kolorów i odcieni, ta strona internetowa przedstawia zabawny schemat kolorów, który wykorzystuje kolor do tworzenia kategorii informacji.

Odkryj bardziej kolorowe schematy kolorów na Adobe Color.

13. Monochromatyczny schemat kolorów

Revolve Studio
Źródło obrazu: Revolve Studio.

Grając teksturami i różnymi odcieniami czerni i szarości, ta paleta kolorów pomaga stworzyć tajemniczy, ale przystępny projekt strony internetowej. Brak koloru w tym projekcie internetowym zmusza odwiedzających do skupienia się na innych elementach, w tym na kopii, kształtach i efektach wizualnych.

14. Elegancki i spokojny

Mowellens
Źródło obrazu: Mowellens.

Gra z kilkoma odcieniami zieleni, ta strona internetowa tworzy głębię i wykorzystuje spokojną, czystą kolorystykę, aby utrzymać zaangażowanie użytkowników.

Odkryj więcej monochromatycznych schematów kolorów Adobe Color.

15. Żywy i ostry schemat kolorów

Jelenie wielkie oczy
Źródło obrazu: Jelenie wielkie oczy.

Ta ostra kolorystyka sprawia wrażenie pierwszego. Nie bojąc się prowadzić żywymi kolorami, projekt strony łączy różne odcienie, aby stworzyć wyraźny kontrast i przyciągnąć wzrok zwiedzającego – od głębokiego różu do zielonkawej zieleni i intensywnego niebieskiego, kolorystyka jest eklektyczna, ale zrównoważona.

16. Nie boję się odważnych kolorów

Color On Code
Źródło obrazu: Color On Code.

Dzięki wysokiemu kontrastowi i trzem żywym kolorom ta kolorystyka witryny robi odważne wrażenie.

Odkryj bardziej żywe schematy kolorów Adobe Color.

17. Elegancki i luksusowy schemat kolorów

Cher Ami
Źródło obrazu: Cher Ami.

Ta piękna kolorystyka podkreśla królewski, elegancki wygląd, łącząc ciemnoniebieski ze złotymi odcieniami. To klasyczna kolorystyka z nowoczesnym akcentem, który zapewnia potężne wrażenia wizualne i natychmiast pozycjonuje markę jako wysokiej klasy gracz.

18. Z odrobiną złota

Paola Krauze
Źródło obrazu: Paola Krauze.

Poniższy przykład pokazuje, jak rzucać na kolor, który ma silne skojarzenia kulturowe – w tym przypadku; złoto – może zmienić dynamikę całego projektu i sprawić, by wyglądał bardziej majestatycznie.

Odkryj bardziej eleganckie schematy kolorów na Adobe Color.

19. Korporacyjny, ale energiczny schemat kolorów

Bambusowy tłum
Źródło obrazu: Bambusowy tłum.

Opierając się na żywej, ale raczej tradycyjnej palecie kolorów, ten projekt strony internetowej budzi zaufanie, jednocześnie tworząc wrażenie nowoczesnej, przyszłościowej marki. Dzięki silnemu kontrastowi i dużej czytelności połączenie czerwieni i niebieskiego nadaje stronie dynamiczny i mocny klimat.

20. Tradycyjny, ale interesujący

Creddy
Źródło obrazu: Creddy.

Klasyczne połączenie czerwieni i niebieskiego ożywa w tym świetnym projekcie strony.

Odkryj więcej korporacyjnych schematów kolorów na Adobe Color.

Teraz już wiesz, jak samodzielnie zaprojektować schemat kolorów witryny

Prawda jest taka, że ​​nie musisz być projektantem, aby skompilować piękny schemat kolorów witryny. Dzięki szerokiemu zrozumieniu psychologii kolorów, podstawom teorii kolorów i arsenału pomocnych narzędzi możesz opracować paletę kolorów, która zapewni Twojej marce silną tożsamość wizualną.

Poświęć trochę czasu na zapoznanie się z kreatywnymi przykładami, przetestowanie różnych kombinacji kolorów i znalezienie uzupełniających się kolorów, które ładnie ze sobą współpracują. Świetny design jest względny – jeśli działa dla twojej marki, zwiększa zaangażowanie i zwiększa rozpoznawalność marki, to wszystko, co naprawdę ma znaczenie.

Teraz załóż czapkę od projektanta i zacznij eksperymentować z paletami kolorów!

Dołącz do naszego newslettera

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map