Biorąc pod uwagę schemat kolorów, jak zastosować do projektu strony internetowej?

22

Właśnie dlatego jest coś konkretnego do omówienia, powiedzmy, że mam ten schemat kolorów:

paleta kolorów wiosennych tonów

Źródło

Istnieje wiele artykułów na temat wybierania spójnego schematu kolorów opartego na kolorach komplementarnych, kolorach monochromatycznych itp. Jednak gdy mam już zestaw kolorów, jak zdecydować, który kolor jest nagłówkiem, który jest linkiem, a który jest tłem i tekst. Nawet jeśli zdecyduję, że chcę mieć światło na ciemności lub ciemność na schemacie światła, umieszczenie reszty kolorów na ekranie może nadal sprawiać, że strona będzie wyglądać brzydko.

Czy istnieją ogólne zasady lub ogólne wytyczne, które pomagają zdecydować, które kolory wybrać?

Shahbaz
źródło
2
Odpowiedź jest taka, że ​​wybierasz je na podstawie tego, co ładnie wygląda i osiąga cele projektowe. Niestety, nie ma na to formuły.
DA01
Cóż, @ DA01 już to powiedział, a ponadto nie można zastosować danego schematu kolorów na żadnej stronie internetowej. Raczej decydujesz o kolorystyce zgodnie ze stroną internetową.
ikartik90
1
Świetne pytanie! Niestety ten obraz ma teraz 404.
Animesh
Dla tych, którzy zastanawiają się, odtworzyłem schemat kolorów z martwego linku powyżej. Pobieranie kodów kolorów z odpowiedzi i komentarzy daje mi tę paletę: color.adobe.com/create/color-wheel/...
springload

Odpowiedzi:

13

Widzę wielu ludzi komentujących takie rzeczy jak „nie ma właściwej odpowiedzi”, z którymi (w pewnym sensie) się nie zgadzam ... Z pewnością jest co najmniej jedna poprawna odpowiedź, może kilka i jestem pewien, że jest też kilka błędnych odpowiedzi, dobry projekt polega na znalezieniu najlepszego możliwego rozwiązania w oparciu o dostępne zasoby i czas. Z pewnością takie rozwiązanie przeważy kilka alternatyw. Dałeś nam paletę kolorów na potrzeby dyskusji, więc zrobię to i odpowiem na twoje pytanie na podstawie dostarczonej palety kolorów. (Biorąc pod uwagę, że nie widziałem układu, z którym pracujesz, nadal będzie dość szeroki, ale będziesz musiał wykonać pewien proces).

Tak więc pierwszymi kolorami, które lubię wybierać podczas tworzenia schematu kolorów w projekcie internetowym, są tło ciała i główny kolor tekstu. Zazwyczaj dobrym pomysłem jest wybranie dwóch najbardziej kontrastujących kolorów, aby wypełnić te role, a twoja przykładowa paleta nie jest wyjątkiem, więc w tym przypadku kolory to # DEE1DD i # 28363D. Teraz musimy zdecydować, którego użyć dla tekstu, a który dla tła, aw większości przypadków staram się użyć jaśniejszego koloru tła i ciemniejszego dla tekstu. Przeprowadzono wiele badań, które wykazały, że łatwiej odczytać ciemny kolor na jasnym kolorze niż jasny kolor na ciemnym, więc generalnie to domyślnie, chyba że istnieje powód ciemniejszego wyglądu (np. Robisz stronę internetową dla heavy metalu zespół czy coś ... założę się, że tutaj tak nie jest). Więc,

Następnie chcę przejść do tego, co uważam za następny najważniejszy element, jakim są hiperłącza. Chcesz kolor wystarczająco kontrastujący z tłem, aby nie był trudny do odczytania, ale także wystarczająco kontrastujący z tekstem, aby był zauważalny. W tym przykładzie większość jaśniejszych zieleni będzie nieczytelna na jasnym tle, więc najbardziej oczywistą odpowiedzią jest # 2F575D.

Następnie wspomniałeś o nagłówku, który musiał zostać pokolorowany, i znów musimy go kontrastować z tłem. W trosce o minimalizm próbuję ponownie użyć kolorów, które już użyłem w ciele, aw tym przypadku kolor tekstu jest prawdopodobnie zbyt ciemny, aby wypełnić dużą ilość miejsca, więc chciałbym wybrać # 2F575D i dla wszystkie powyższe powody użyłbym koloru tła # DEE1DD Aby wypełnić dowolny tekst lub linki w nagłówku.

Wreszcie omawiam nieistotne elementy projektu, takie jak stany najechania, i mamy jeszcze kilka różnych zieleni do wyboru. Znów to prawdopodobnie musi kontrastować z tłem, ponieważ linki nie znikają po najechaniu na nie, więc jeśli masz skłonność do korzystania z # 658B6F ...

I ... Voila! Masz teraz (podstawowy) schemat kolorów 4. Mam nadzieję, że ten proces pomoże ci tak samo jak mi :)!

JamiePatt
źródło
3

Witryna, do której linkujesz, pokazuje, jak używać tych kolorów:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Zwykle rozpryskuję swój własny kolor w projekcie - nawet jeśli wiem, że są nieco błędne - przynajmniej mam w przybliżeniu dwa jednolite kolory lub przynajmniej jeden. Następnie, kiedy opracowałem swój pomysł, biorę swój podstawowy kolor (ten, którego najczęściej używałem) i dodam go do koła kolorów. W ten sposób zastępuję inne kolory. Albo próbuję znaleźć obrazy, które mają większość moich oryginalnych kolorów.

Czytałem artykuły, które mówią, zrób zdjęcie i zaprojektuj swoją pracę na podstawie tych kolorów, nie mogę tego zrobić. Tworzę własny projekt z myślą o co najmniej jednym kolorze, a następnie stosuję techniki teorii kolorów

mam nadzieję, że to pomoże

aurel
źródło
> Witryna, do której prowadzisz link, pokazuje, jak używać tych kolorów: Tak, to moje pytanie, jaki jest „algorytm” do samodzielnego zrozumienia tego?
Shahbaz
Nie sądzę, że jest jeden. Na przykład, gdybym musiał dodać te kolory do tej witryny, nie ustawiłbym ich w ten sposób. Na przykład sposób, w jaki użyli kolorów tutaj lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/…, jest moim zdaniem okropny, chociaż kolory są bardzo ładne, ale - moim zdaniem - źle ustawione. Więc musisz bawić się kolorami. Nie sądzę, że istnieje sposób mechaniczny - jeśli tak, polecam, abyś bawił się swoimi projektami i nie używaj go!
aurel
3

Nie ma formuły na to, co należy wziąć, co powinno być tłem i tak dalej, dlatego projektowanie jest sztuką.

Normalnie zrobię wiele prób z zestawem kolorów, które mam, na przykład, który kolor czcionki lepiej wygląda na którym tle.

Istnieje jednak ogólna zasada, która polega na kontrastowaniu używanych kolorów, większość ludzi powie, że to zdrowy rozsądek, na przykład jasna czcionka z ciemnym kolorem tła. Może się wtedy pojawić, w jaki sposób określasz kolor dla podskładników, takich jak skrzynki alarmowe, nawigacja i tak dalej.

Widzę, że powinieneś mieć gotową strukturę witryny, a następnie musisz określić, które są twoją główną treścią, w jaki sposób chcesz ją zaprezentować. Może bardziej miękki kolor podskładników, który nie wymaga natychmiastowej uwagi.

Skąd wiesz, czy to dobrze, czy nie? Łatwo, jak tylko powiesz „To jest miłe”, wtedy jest dobrze. Zawsze pomaga zdobyć drugie zdanie od innych ludzi.

Podsumowując, próbuj z kombinacją kolorów, nie trzymaj się tylko jednego, a możesz być zaskoczony kompozycją, którą możesz osiągnąć na końcu.

@Color Combination: Połączenie dostarczone przez stronę internetową jest wystarczająco dobre na początek.

Nicholas TJ
źródło
2

Przypomina mi się czas, kiedy moja pierwsza żona i ja otrzymaliśmy duży płócienny panel i kilka tubek z farbą akrylową. Kładziemy płótno na podłodze i bezcelowo tryskamy po nim przypadkowymi kolorami. Pozostawiliśmy do wyschnięcia, a następnie zawiesiliśmy nad kominkiem. Z czasem kilku gości skomentowało, jak cudownie to wygląda i pomyślało, że to drogie dzieło sztuki ... to znaczy, dopóki nie powiedzieliśmy im, jak zostało namalowane. Wszystko zależy od widza.

Opowiadając tę ​​historię, muszę powiedzieć, że zgadzam się, że istnieją niezgodne kombinacje kolorów, co jest brzydkie dla większości widzów. Nie ma ich jednak dużo. Nie sądzę, że powinieneś zbytnio stresować się, żeby to zrobić dobrze . Zawartość witryny może nadrobić wiele złych wyborów kolorystycznych. Treść zawsze przebije projekt.

Brad Iverson
źródło