Jak uzyskać profesjonalny wygląd z kolorem
Co sprawia, że wygląd projektu jest skoordynowany, zaplanowany i profesjonalny? Odpowiedź brzmi: "kolor" .
Nie każdy projekt wymaga nijakiego korporacyjnego niebieskiego, aby wyglądać profesjonalnie. Planowanie kolorów oznacza stworzenie ram, które opisują, które kolory użyć i jak z nich korzystać.
Kolor jest najbardziej śliskim elementem projektu. "Dobry" kolor jest tak ściśle związany z nieuchwytnymi rzeczami, takimi jak osobisty gust i intuicja, a także z względami technicznymi, takimi jak kontrast i kalibracja monitora.
Ale kolor ma kluczowe znaczenie dla zawartości . Jeśli uważasz, że strona jest na tyle ważna, aby poświęcić czas na dopracowanie, czytelnicy prawdopodobnie uznają ją za wystarczająco ważną, aby poświęcić czas na czytanie. Dobre wybory kolorystyczne sprawiają, że tak się dzieje.
W tym artykule opiszemy kilka technik, aby uzyskać piękne palety kolorów dla twoich projektów internetowych.
Najlepszym sposobem, aby witryna wyglądała nieplanowo, jest losowe wybieranie jej kolorów.
Nawet jeśli odwiedzający przeglądają stronę główną witryny po raz pierwszy, kolory wpływają na ich stosunek do treści . Czy ta strona jest ekscytująca? Pocieszające? Śmiały? Mdłe? Polityczny? Formalny?
Kolor wpływa na to, jak ludzie interpretują to, co widzą, tak samo jak typografia.
Znalezienie właściwych kolorów nie jest łatwe, ale proces może być systematyczny.
Dobra strategia projektowania obejmuje schemat kolorów (tj. Zakres kolorów wybranych do przekazania nastroju lub wiadomości) i układ tego schematu.
Powiedzmy, że zostałeś poproszony o zaprojektowanie profesjonalnej strony internetowej. (I to może bardzo dobrze przerodzić się w grę z piciem: strzelaj za każdym razem, gdy klient używa słowa "profesjonalny", "czysty" lub "nowoczesny". Dwa zdjęcia do "Podoba mi się ta druga strona." Skopiuj ją. ").
Kolorystyka zależy od szczególnego charakteru strony internetowej. Na przykład zarówno banki, jak i kwiaciarnie mogą mieć profesjonalnie wyglądające witryny.
Ale ludzie mogą być mniej skłonni do kupowania kwiatów ze strony internetowej, która jest niebieska i szara. I wyobraź sobie stronę Bank of America w kolorze liliowym i żółto-zielonym.
"Profesjonalny" projekt mówi odwiedzającym, że znaleźli stronę, która poważnie traktuje jej temat, nawet jeśli ten temat jest lekki. Niezależnie od odcieni i wartości, "profesjonalny" oznacza skoordynowany, zaplanowany i przemyślany .
Idź w skali szarości
Najlepszym sposobem pracy z kolorem jest rozpoczęcie bez żadnego.
Usunięcie koloru z projektu ujawnia podstawowe problemy, którymi należy się zająć, zanim zacznie się zastanawiać, który odcień czapki działa najlepiej. Jeśli wzór nie wydaje się być czarno-biały, nadszedł czas na zmiany.
Czy każda strona ma wyraźny cel? Czy przewodnik po projektowaniu czyta zawartość? Czy treści są fascynujące, inspirujące lub informacyjne? Czy nagłówki są jasne? Czy linki kontrastują z innym tekstem? Kolor poprawia te efekty, ale problemy z układem, rodzajem i organizacją nie mogą być rozwiązane tylko przez kolor .
Aby przeprojektować, najpierw wyssać kolor. Prosta akurat przemycie nasyconych prawyborów naprawdę pokazuje, gdzie znajduje się strona internetowa. (Właściwie powinieneś zacząć przeprojektowanie przez ponowną ocenę swoich celów i treści, ale to już inna historia).
Czasami usunięcie koloru jest rozwiązaniem samo w sobie .
Kiedyś pracowałem z firmą zajmującą się projektowaniem stron internetowych w celu przeprojektowania własnej strony internetowej. Właściciele byli osobiście zainteresowani projektem i chcieli go naprawić. Ale jeśli myślisz, że projektowanie dla siebie jest trudne, spróbuj to zrobić przez komitet. Na koniec cała trójka wpatrywała się w zrzut ekranu z dziewiątego projektu godzin po kilku drinkach.
Nagle spłaszczyłem warstwy Photoshopa i uderzyłem "Desaturate" zmieniając żywy, miedziany i marynarski wzór w odcienie szarości. Ku zaskoczeniu wszystkich, zadziałało.
Pod koniec tygodnia mieliśmy "ciepły" szary kolor z czerwonymi akcentami. Wiedzieliśmy, że mamy zwycięzcę, gdy poprzedni klienci komplementowali je w nowym wyglądzie, a kolejne zgłoszenia pochodziły od potencjalnych klientów.
Przeanalizuj swój schemat kolorów za pomocą testu "zeza" Photoshopa :
- Wykonaj zrzuty ekranu z co najmniej trzech stron ze swojej witryny. Otwórz je w Photoshopie.
- Powiel warstwę tła na każdym zrzucie ekranu ( Layer → Duplicate Layer lub Command + J na komputerze Mac lub Control + J w systemie Windows).
- Zastosuj rozmycie gaussowskie o wielkości około 10 pikseli do nowych warstw.
- Idź do Obraz → Dopasowania → Posterize . Użyj 8 do 12 poziomów lub przejdź do Filtruj → Pikseli → Mozaika . Użyj od 15 do 30 pikseli.
To pokazuje, które kolory są naprawdę dominujące. Bardziej dominujące kolory, tym bardziej schemat jest odciśnięty w umyśle gościa.
Gdy układ strony i organizacja działają bez kolorów, nadszedł czas, aby wybrać paletę. Ale który? A ile użyć?
Wyrównaj swoje barwy
Kolor ma trzy właściwości: odcień, nasycenie i wartość (czasami nazywane lekkością).
Nasycenie jest tym, jak bogaty jest odcień: kolory neonowe są bardzo nasycone, a pastele są mniej nasycone.
Wartość oznacza, jak jasny jest kolor (tj. Jak blisko czerni lub bieli).
Odcień odnosi się do części tęczy, do której należy kolor, np. Czerwonego lub zielonego; to własność, którą ludzie podchodzą.
Nic nie zabija schematu kolorów, jak zderzające się barwy. Projekt może mieć sto odcieni jednego odcienia, od pastelowego do neonowego, i wciąż wyglądać tak, jak zaplanowano. Ale jeśli odcienie są zmieszane w niewłaściwy sposób, schemat rozpada się.
Jednym ze sposobów uniknięcia zderzenia jest oddzielenie ich trzecim kolorem. Bufor czerni, szarości lub bieli jest najbezpieczniejszy, ponieważ skala szarości jest neutralna od odcienia: można koordynować dowolną część tęczy za pomocą czerni, bieli i szarości.
Drugim rozwiązaniem jest użycie odcieni w różnych proporcjach . Jeśli schemat kolorów ma, powiedzmy, fioletowy i brązowy, to projekt może mieć wiele odcieni brązu z kilkoma jasnymi fioletowymi refleksami.
Inną opcją jest zmiana wartości. Czysty niebieski i jasny cyjan tworzą taką kombinację, ale granatowy (granatowy) i jasnobłękitny (błękit nieba) kontrastują wystarczająco, aby się nawzajem wyłączyć. Czerwone i fioletowe mogą być na tyle różne, aby nie zderzyć się, ale wystarczająco blisko, aby nie wyglądać celowo. Jasnoczerwony (różowy) i ciemny fiolet przynoszą rozróżnienie.
Niestety, unikanie złej kombinacji kolorów nie jest tym samym, co wybranie dobrego. Kolorystyka powiodła się nie wtedy, gdy jesteś zadowolony, ale gdy twoja publiczność czuje się komfortowo.
Odkryj wielkie schematy
Skąd biorą się świetne schematy kolorów? Z setkami kolorów i tysiącami kombinacji, jak decydujesz?
Projektanci małych statycznych stron internetowych powinni czerpać kolory z treści . To zwykle oznacza zdjęcia.
Projekt ośmiostronnej strony internetowej, którą niedawno zbudowałem, był zwieńczony skomplikowanym metalowym rusztowaniem ustawionym na tle nieba. Ustawiając narzędzie kroplomierza programu Photoshop na średnią 5 × 5, próbowałem najciemniejszych i najjaśniejszych części nieba i nadawałem paskowi bocznemu, liniom, nagłówkom i stopce te kilka odcieni.
Kiedy klient zapytał, jak udało nam się zaprojektować stronę tak dobrze - i tak szybko - nasza odpowiedź brzmiała: "To właśnie robimy". Ale kolor już tam był. Po prostu musiałem to poszukać.
Podczas gdy zdjęcia pracują na szybkie strony internetowe, projektanci większych i bardziej dynamicznych stron internetowych powinni szukać inspiracji od swoich odbiorców .
Doskonałym wskaźnikiem atrakcyjności kolorów dla odbiorców jest ich codzienne ubranie. Dowiedz się, co użytkownicy noszą, a dowiesz się, jakie kolory sprawiają, że są wygodne. Jeśli twoja strona jest poświęcona sportom ligowym, dowiedz się, co ludzie noszą w grach, a nie na co dzień.
Jeśli masz dość szczęścia, aby uzyskać zdjęcia swoich docelowych odbiorców, obejrzyj je masowo; chcesz przeciętnego tłumu. Ale jeśli zdjęcia nie są dostępne, idź na zakupy.
Projektanci odzieży, którzy mogą pozostać w biznesie, mają doskonały wyczucie koloru dla każdego nastroju i stylu życia. To nie musi być 5th Avenue haute couture. Wyszukiwarka Google dla "sklepów kempingowych", "ubrań dziecięcych", "nart i strojów kąpielowych" oraz "codziennego życia" ujawni wiele dobrych kombinacji kolorów.
Ludzie noszą ubrania zgodnie z ich gustami. Jeśli użyjesz kolorów, które lubią, poczują się bardziej komfortowo na swojej stronie.
Użyj tekstury
Nieznaczne różnice barwy, nasycenia lub wartości tworzą tekstury .
Tekstury monochromatyczne (tj. Tekstury o jednym odcieniu) i wzory zapewniają subtelny wymiar większości stron internetowych bez konfliktów.
Proste tła tekstur są w szczególności łatwe do zbudowania:
- Zrób zdjęcie wewnętrznej ściany lub czegoś, co jest puste, ale jest szorstkie.
- Otwórz go w Photoshopie.
- Zduplikuj warstwę tła i nazwij ją "teksturą 1."
- Wypełnij warstwę tła kolorami z twojego schematu kolorów.
- Ustaw tryb mieszania warstwy "tekstury 1" na "" Miękkie światło ", a jego krycie na 30%.
- Wypróbuj w swojej witrynie. Jeśli nie wygląda to prawidłowo, graj z nieprzezroczystością warstwy.
Nazwa warstwy jest przemyślana. Możesz odtwarzać więcej niż jedno zdjęcie, ale unikaj podawania nazw warstw, takich jak "tekstura ściany" lub "tekstura papieru". Chcesz skupić się na wpływie na swojej stronie internetowej, a nie na skąd pochodzi.
Tworzenie dobrego programu
Dobry schemat kolorów ma pewne cechy. Pomyśl o tym jako o strukturze lub zestawie wytycznych, aby zachować spójność projektu. Schemat powinien:
- Wymień od dwóch do pięciu kolorów, które działają dobrze razem,
- Opisz, jak daleko projekt może różnić się od tych odcieni,
- Konto dla odcieni każdego odcienia,
- Działają dobrze na czarno-białe.
Oto przykład:
Projektant zaczął od wyboru głównie ciepłych odcieni, które były właściwe. Nie było logiki, tylko niejasny cel "jesieni" i jej intuicja.
W programie Photoshop dwie warstwy zapewniały odcienie czerni i bieli. Tryb mieszania każdej warstwy został ustawiony na "Miękkie światło". Czysta czerń była zbyt ciemna dla koloru najbardziej po prawej stronie, więc dopasowano nieprzezroczystość czarnej warstwy.
Aby zunifikować kolory, utworzono nową warstwę i wypełniono ją czystą czerwienią. Tryb mieszania został ustawiony na "Kolor", a jego stopień krycia na około 40%. (Uwaga: kolejność warstw jest bardzo ważna, kolory zmieniają się, jeśli warstwa "odcień" jest ustawiona poniżej warstw czarno-białych).
Dało to projektantowi 15 kolorów do wyboru. Wybrała cztery, które miały wiele odcieni i odcieni. Tutaj kolory są ustawione na biały.
Wariacje są ważne, więc projektant eksperymentował. Jak wyglądałyby kolory w stosunku do czerni? Co się stanie, jeśli delikatnie ich zasłonimy?
Co by było, gdybyśmy je całkowicie zmienili? Używanie obrazu → Dopasowania → Barwa / Nasycenie na warstwie "zabarwienia" tworzy wyraźny brak jesieni, ale kolory są nadal skoordynowane. Być może tę paletę można wykorzystać na Wielkanoc.
Efektem końcowym jest schemat kolorów: odniesienie, które zapewnia różne (ale nie zbyt różne) odcienie i gamę odcieni, które dobrze ze sobą współpracują. Pobierz przykładowy plik.
Użyj Framework
Czy jutrzejsza grafika, zdjęcia i ikony będą współgrać z dzisiejszą kolorystyką? Jakie obrazy będą potrzebne na stronie w ciągu sześciu dni, sześciu tygodni lub sześciu miesięcy? Trudno powiedzieć, ale treść jest częścią twojego schematu kolorów .
Problem można rozwiązać, wykonując zdjęcia zgodnie ze schematem kolorów lub wykonując schemat kolorów podążając za obrazami.
Egzekwowanie schematu kolorów, nawet ze zdjęciami, to świetny sposób na uzyskanie jednolitego wyglądu na wszystkich stronach .
Najłatwiejszym rozwiązaniem jest znalezienie zdjęć pasujących do twojego schematu. Pamiętaj, że schemat kolorów pozwala na poruszanie się w pomieszczeniu: tak długo, jak ważne są kolory obrazu, obraz powinien działać. Wiele witryn ze zdjęciami pozwala na wyszukiwanie według kolorów (co oznacza odcień: zazwyczaj są to prymitywy, takie jak czerwony, zielony i niebieski).
Jeśli obraz nie pasuje do twojego schematu kolorów, nadaj mu odcień:
- Otwórz obraz w Photoshopie.
- Utwórz nową warstwę. Ustaw tryb mieszania na "Kolor".
- Wypełnij tę warstwę jednym z kolorów z palety, najlepiej tym, który najbardziej pasuje do obrazu.
- Ustaw krycie warstwy kolorów na 50%.
- Graj z kryciem, dopóki nie uzyskasz równowagi między oryginalnym kolorem obrazu a paletą kolorów witryny.
- Ta technika działa na zdjęcia, ilustracje i ikony - wszystko na podstawie pikseli. (Jeśli nie jesteś właścicielem obrazu, przed jego modyfikacją musisz uzyskać pozwolenie. Możesz poprawić jego wygląd na swojej stronie internetowej, ale wciąż możesz korzystać z cudzej sztuki).
Szukam profesjonalisty
Żaden zestaw kolorów nie wygląda "profesjonalnie" . Zamiast tego musisz postępować zgodnie z procesem, aby osiągnąć skoordynowane, zaplanowane odczucie.
Niezależnie od tego, na czym polega strona, publiczność będzie wiedziała, że traktuje to poważnie.
Wskazówki
- Kiedy myślisz, że masz dobry schemat kolorów, wypróbuj go przez co najmniej tydzień. Ocena koloru wymaga intuicji, która buduje się w czasie. Daj sobie czas, aby w pełni zaabsorbować osobowość systemu.
- Kiedy myślisz, że masz dobry schemat kolorów, nie pozwól, by przestał działać. Gusta Twoich gości, jak twoje, zmieniają się z biegiem czasu. Zanotuj, aby przejrzeć kolory po czterech miesiącach. Zapytaj, czy nadal są odpowiednie? Jeśli nie, co się zmieniło? Jakie czynniki wpłyną na twoje dostosowanie?
- Używaj oszczędnie kolorów. Powiew przyciągający gości przyciągnie turystów, ale jeśli zobaczą to wszędzie, będą błąkać się bez celu.
- Niektórzy uważają, że schematy kolorów mają wąski zakres. Daj trochę swobody, aby nadać swoim projektom większą głębię.
- Unikaj czystych barw podstawowych, takich jak czerwony, zielony, niebieski i żółty. Daj im odcień prawdziwej postaci: czerwony, ale nieco fioletowy, niebieski z odrobiną zieleni, "ciepły" żółty z pomarańczowym odcieniem.
- Upewnij się, że kolory działają, gdy są wyblakłe. Jeśli wybierzesz czerwony, pamiętaj, że jasno czerwony może być kobiecy, a ciemny czerwony może wyglądać jak rdza lub krew. Żółty przechodzi od wyblakłego światła słonecznego do ciemnobrązowego. Ciemnoniebieski jest tajemniczy, a jasnoniebieski jest spokojny - lub elektryczny, jeśli go przesycić.
- Użytkownicy komputerów Mac, ustaw swój ekran. Przejdź do "Preferencji systemowych" i kliknij "Uniwersalny dostęp". Ustaw wyświetlacz na "Użyj skali szarości". Jest to przydatne, gdy masz ochotę na film noir.
- Bez względu na to, jak aktywna jest Twoja witryna, użyj neutralnego tła. Czarny, biały i szary sprawdzają się w prawie każdym odcieniu.
- Jeśli chcesz, aby mały tekst (na przykład 14 punktów lub mniej) pasował do dużego pola koloru, tekst powinien być o kilka odcieni ciemniejszy niż normalnie. To zrównoważy liczniki światła wewnątrz znaków.
- Użyj więcej odcieni o mniejszej barwie.
- To, co "wygląda dobrze" jest intuicyjne. Ale intuicja to walka pomiędzy twoim ego, twoją publicznością i autorytetem ludzi finansujących projekt.
- Użyj wyciszonych tła, aby wyróżnić treści:
Napisany wyłącznie dla WDD przez Ben Gremillion . Jest niezależnym projektantem stron internetowych, który dowiedział się, że nieelastyczność terminu jest odwrotnie proporcjonalna do liczby funkcji wymaganych w ostatniej chwili.
Jak tworzyć udane schematy kolorów? Co działa, a co nie działa?