A színt széles körben használják a tervezésben - lehetővé teszi a tartalom „újraélesztését” - szemantikai kapcsolatot hoz létre az elemek között, töltse meg a munkát érzelmekkel és hangulattal. A kezdő tervezők véletlenszerű színeket választanak, de vannak módok a színek értelmesebb felhasználására. Nézzünk meg 4 ilyen módszert, az egyszerűtől a bonyolultig elve szerint rendezve.

1. Használjon ismert skálát

A brandcolors.net weboldal több mint 500 híres márka színkombinációját tartalmazza. A Yandex, a Google, a Burger King minden termékében ugyanazt a palettát használja. Ezeket a márkákat és színeiket sokan ismerik és szeretik. Írja be a nevet a keresősávba vagy görgessen végig az oldalon, kattintson a kívánt márkára és színre: a kód a vágólapra kerül.

2. Válasszon egy kész professzionális palettát

A legegyszerűbb módja egy kész színkombináció készítése. Nem szükséges minden alkalommal újra feltalálni a kereket, mert a harmonikus kombinációk már régóta ismertek. Lépjen a colordrop.io oldalra, és válassza ki. Több száz professzionális 4 színpaletta található az oldalon. Miután kiválasztotta a kívántat, kattintson és másolja ki a színkódokat a jobb oldalon megnyíló panelről.

Ezen kívül a szolgáltatás 24 lapos kialakítású színből álló kész választékot tartalmaz. Kattintson a bal oldalon a „Flat Colors” név alatt, és vegye ki a kívánt árnyalat kódját.

3. Határozza meg a kívánt fénykép vagy kép színpalettáját

Ez a módszer egy kicsit bonyolultabb. De hatékonyabb is.

• A coolors.co weboldalon a bal felső panelen keresse meg a kamera ikont, és kattintson rá. Megnyílik egy képfeltöltési ablak.
• Kiválaszthat egy fényképet vagy képet a kívánt színsémával a számítógépéről, vagy bemásolhatja a hivatkozást egy üres oszlopba.
• A színkombinációt a szolgáltatás határozza meg (lent a feltöltött kép alatt).
• Megváltoztathatja a paletta egyes színeit, ha megjelöli őket, és kiválasztja a fénykép egy pontját, ahonnan a színt át kívánja venni.
• A „Collage” gomb elmenti a kapott palettát színkódokkal a számítógépen.
• Az „Auto” gomb új kombinációkat generál ugyanazon fénykép alapján.
• Kattintson az „Ok” gombra, és lépjen a webhely főoldalára a palettával való további munkához.

A webhely főoldala nem kevésbé funkcionális. Itt kiválaszthatja az egyes színek árnyalatait, vagy új palettát hozhat létre az egyes színek lecserélésével.

4. Hozzon létre saját színsémát online

Ha feltölt egy fotót ugyanarra a coolors.co oldalra, akkor nem csak a színkódot határozhatja meg, hanem saját kombinációkat is létrehozhat. Ehhez nyomja meg a szóköz billentyűt - a szolgáltatás automatikusan létrehozza az 5 szín kombinációját.

Minden színen 4 ikon gomb:

• Alternatív árnyalatok - Színárnyalatok (sötétebb és világosabb),
• Húzás (egy szín mozgatása jobbra vagy balra a palettán),
• Beállítás (Az árnyalat, a telítettség, a fényerő stb. beállítása),
• Zár (szín javítása).

Hogyan kezeljük a felhasználók figyelmét egy webhelyen? Hogyan válasszuk ki a megfelelő színeket egy weboldalhoz? Milyen alkalmazással lehet megtudni a színkódot egy versenytárs weboldalán? Ma a cikkben megvizsgáljuk.

Színsémák meghatározására szolgáló szolgáltatások

• color-hex.com – meghatározza, hogy mely színek jelenjenek meg az Ön színe mellett
• thestocks.im - makettek, videók, fotók, ikonok, betűtípusok összesítője.
• Az Eye Dropper egy olyan bővítmény a Google Chrome-hoz, amely lehetővé teszi, hogy egy szemcseppentővel megtudja bármely szín kódját az internet bármely oldalán.
• Adobe Color CC- Válasszon színkombinációt. Az Adobe Color CC segít, ha van képed, és fel szeretnéd tölteni annak elsődleges színeit. A program meghatároz egy 5 domináns szín palettát a képen, amely elmenthető és prezentációkban használható. Ingyen.
• A Colorzilla a Google Chrome és a Mozilla Firefox bővítménye, amely színválasztót, szemcseppentőt, css színátmenet-generátort és palettaböngésző eszközöket tartalmaz. Mindössze annyit kell tennie, hogy a szemcseppentőt a kívánt színre irányítja bármely webhelyen, és másolja a kódot.

Színválasztás

Tölts fel egy képet, és készíts belőle palettát.

• Coolors.co - egy forrás palettákból, amelyeket saját maga is létrehozhat, vagy kölcsönözhet a gyűjteményből

COLOURlovers - to színrajongók közössége, akik megosztják a palettákat, színeket, háttereket és grafikus sablonokat. Vannak színtrendek a belső terekből, magazinokból, weboldalakból és még az utcai divatból is. A „Tallózás” részben megtalálhatja a szerző színeit és palettáit, valamint letöltheti prezentációjának hátterét.

Hogyan válasszunk színt egy weboldalhoz

Egy könyvet nem lehet megítélni a borítója alapján, de egy weboldalt a dizájn alapján igen. Az emberek hajlamosak a termékeket és webhelyeket megjelenésük alapján értékelni és megítélni, még azelőtt, hogy megértenék a funkcionalitásukat és előnyeiket.

A márkaépítésben a színeknek közvetlenebb jelentése van, mint az általános értelemben. Ezeket néhány szóban össze lehet foglalni, ezért álljon itt egy lista:

• Fekete. Megbízható, kifinomult és tapasztalt. Luxuscikkek reklámozására használják.
• Fehér. Egyszerű, nyugodt és tiszta.
• Piros. Magabiztosság, fiatalság és hatalom. Gyakran használják a teljes értékesítéshez.
• Narancs. Barátságos, meleg és energikus. Felhívást hoz létre: regisztráljon, vásároljon vagy adjon el.
• Sárga. Boldogság, optimizmus és melegség. Általában arra használják, hogy felhívják a figyelmet egy kijelzőre.
• Zöld. Béke, növekedés és egészség. A marketingben kikapcsolódásra használják.
• Kék. Bizalom, biztonság és stabilitás. Általában bankok és vállalkozások számára használják.
• Lila/lila. Luxus, kreatív és bölcs. Gyakran használják a szépségápolási és öregedésgátló termékek iparában.
• Rózsaszín. Romantikus és nőies. Nőknek és fiatal lányoknak szánt termékek népszerűsítésére szolgál.

Fekete

A színnek számos jelentése van. Tragikus helyzetekhez kötődik. Minden attól függ, hogyan használod, és milyen színek vannak hozzá. A fekete jól passzol minden más színhez, így tökéletes háttérnek. A tervezők gyakran használják kontrasztok létrehozására.

fehér

A szín a tisztaságot és az ártatlanságot, valamint a teljességet és a tisztaságot jelzi. A fehéret gyakran egy üres papírlaphoz társítják, ami új ötletek generálására ösztönzi az embereket. A túl sok fehér azonban az elszigeteltség és az üresség érzését okozhatja. A tervezés során a fehéret általában háttérszínként használják, különösen azoknál az erőforrásoknál, ahol az olvashatóság fontos szerepet játszik.

Piros

A szín általában szenvedélyes, erős vagy agresszív érzésekkel jár. Jó és rossz állapotokat egyaránt szimbolizál, beleértve a szeretetet, a bizalmat, a szenvedélyt és a haragot. A tervezésben a piros szín használata hatékony módja a felhasználók figyelmének felkeltésének.

narancs

Energikus és meleg szín, amely izgalmat kelt. A tervezők színt használnak, amikor cselekvésre van szükségük.

Sárga

A boldogság színe, a napsütést, az örömöt és a melegséget szimbolizálja. A sárgát a legvilágosabb színnek tartják, és ennek van az egyik legerőteljesebb pszichológiai jelentése. Azok a felhasználók, akik sárga színeket látnak a dizájnban, ihletettnek és magabiztosnak érezhetik magukat. Ne feledje azonban, hogy a túl sok sárga negatív reakciókat, például szorongást vagy félelmet okozhat.

Zöld

Gyakran nevezik a természet, az egyensúly és a harmónia színének. A zöld megnyugtató és megújító érzéseket hoz. Ez is a növekedés és a tapasztalatlanság jele. Pozitívabb energiája van, mint a legtöbb más színnek, de néha a materializmussal társul. A zöld tónusú dizájn ideális a természettel kapcsolatos termékekhez.

Kék

A bizalom színe. Általában megbízhatóságot mutat és megnyugtat.

Lila

Régóta a gazdagsághoz köthető, mivel sok király lila köpenyt viselt, ezért hasznos bizonyos luxustermékek képviseletében. Ez egyben a rejtély és a varázslat színe is. A vörös és a kék energiáját keveri, így egyensúlyban van az erő és a stabilitás között. A nagy koncentrációjú szín elvonhatja a felhasználók figyelmét.

Rózsaszín

Az érzékenység és a romantika színe. A rózsaszín sokkal lágyabb, mint a piros, így a feltétel nélküli szeretet érzését kelti. A rózsaszín nagyon erősen kötődik a nőiességhez, így hatásos szín lehet, ha a célközönség főleg lányok.

Barna

A tervezők általában a barnát használják háttérszínként, különféle árnyalatokban, a nagyon világostól a mélyig. Melegség és kényelem érzését kelti. Ezenkívül a tapasztalat és az önbizalom demonstrálására is használható.

A szín hatása az áruvásárlásra

A vizsgálatot Észak-Amerikában végezték.

Kedvenc színek

Legkevésbé kedvenc színek

Színes modellek

• CMYK: Cián (kék), Magenta (vöröses), Sárga (sárga) és Kulcs ("kulcs" - fekete). Vagyis ez a modell három alapszínből és feketéből áll, ami lehetővé teszi sötétebb árnyalatok létrehozását. Festészetben és nyomtatásban használják.
• RGB modellek: piros, zöld, kék - piros, zöld, kék. Számítógépekben, televíziókban és egyéb elektronikus eszközökben használják

Egyszínű

Egy színen alapul, különböző árnyalatokkal. A monokróm paletta mindig nyerő választás, mivel nehéz hibázni és kellemetlen színvilágot létrehozni.

Analóg színek

Hasonló harmónia létrehozásához használjon olyan színeket, amelyek a színkörön egymás mellett helyezkednek el.

Kiegészítő

A kiegészítő séma a színkörön egymással szemben elhelyezkedő színek kombinációja. Ez a séma az analóg és a monokromatikus ellentéte, mivel nagy kontraszt elérését célozza. Például egy kék alapon lévő narancssárga gombot nehéz kihagyni bármely felületről.

A szín az egyik legfontosabb elem a tervezők munkájában. De mint koncepciót elég nehéz lehet elsajátítani: a paletta sokféle kombinációja miatt sokszor nehéz eldönteni, hogyan tervezzük meg a legjobban a weboldalak és alkalmazások felületét. Korábban közzétettük a választott és . Ma pedig szeretnénk kiterjeszteni a témát Nick Babich Essential Color Tools for UX Designers című cikkének fordításával a blogon.

A jegyzet tartalmazza a legjobb színválasztási szolgáltatások listáját a webhelyekhez és az UX-tervezéshez, amelyek segítségével sok időt takaríthat meg. Ezeken a projekteken keresztül megtanulhatja:

• honnan meríthet ihletet;
• hogyan hozhat létre saját palettát;
• hogyan lehet a tervezést hozzáférhetővé tenni a színlátássérült emberek számára.

1. Inspirációt keresni

A természet színei

Meríts a körülötted lévő világból. Nincs más dolgod, mint körülnézni. Divatos ruhák, könyvborítók, belsőépítészet... annyi csodálatos dolog van körülötted. De a legjobb színkombinációk a természet színei. Rögzítsen egy gyönyörű pillanatot, és próbálja meg létrehozni saját válogatását egy adott kép alapján.

A legjobb színkombinációk a természetben találhatók. Bármelyik fotóról színsémát kaphat

Behance

Ebben a népszerű szolgáltatásban érdekes munkákat találhat, amelyek a szakterületük igazi szakembereinek legjobb online portfólióiban szerepelnek. Ez az oldal is remek ihletforrás. A projektek új, méltó példáinak megtekintéséhez egyszerűen válassza ki a kívánt színt.

Dribbble Colors

A Dribbble az egyik legjobb, ami hasznos lesz a felhasználói felület létrehozásakor. Ha vizuálisan szeretné megérteni, hogy mások hogyan használtak egy adott színt, keresse fel a dribbble.com/colors webhelyet, és adja meg a kívánt értéket.

Amikor színt választ egy webhelyhez, itt állíthatja be annak minimális százalékát - kísérletezzen például, próbáljon meg 30% kéket beállítani.

Próbálja meg beállítani egy adott szín minimális százalékát a Dribbble-ben

Tervezési inspiráció

A Designspiration elsősorban azok számára hasznos eszköz, akiknek már van ötleteik a színkombinációkra, és szeretnének példákat látni ilyen kombinációkra. Válasszon 1-5 opciót, és megtalálja a megadott paramétereknek megfelelő képeket.

A Designspirationben különböző színkombinációs példákat találhat

Tineye Multicolr

A Tineye Multicolr színillesztési szolgáltatás segítségével meghatározhatja a kép kívánt gammáját, és még mindegyik százalékos arányát (arányát) is beállíthatja. Az oldal a Flickr 20 millió Creative Commons-fotóját tartalmazó adatbázissal van integrálva. Ez határozottan az egyik leggyorsabb módja a tökéletes paletta megtalálásának.

Colorzilla

A ColorZilla egy bővítmény a Chrome és a Mozilla Firefox böngészőkbe való telepítéshez. Olyan eszközöket tartalmaz, mint a pipetta, a palettaböngészés, a létrehozás és egyebek.

A ColorZilla bővítmény elérhető Chrome-ban és Firefoxban

Shutterstock Spectrum

Az egyik legjobb módja annak, hogy elképzeljük, hogyan fog kinézni egy színséma, ha megnézzük a megfelelő képeket. A legtöbb olyan megoldás, amely színválasztékot kínál a webhelyek kialakításához, tartalmazza ezt a funkciót, de a Shutterstock Spectrum hihetetlenül felhasználóbarát felülettel és előnézettel rendelkezik, amelyek valóban hasznosak lehetnek.

Ezenkívül nem lesz szüksége előfizetésre, mivel elég lesz a kép előzetes értékelése (annak ellenére, hogy van rajta „vízjel”).

W3Schools

Nemrég a blog áttekintette a W3Schools válogatását. Rengeteg információ gyűjtött össze a témával kapcsolatban, kezdve a nevüktől/színkódjaiktól, a paletták kombinálásának elméletén át a különböző formátumok leírásáig: HEX, RGB, CMYK, HWB, stb. generátorok, átalakítók és hasonló „miniszolgáltatások”. Összességében érdekes nézni.

2. Hozzon létre egy színpalettát

Material Design Color Tool

A Material Design Color Tool lehetővé teszi színsémák létrehozását, megosztását, valamint egy hozzávetőleges felhasználói felület megtekintését a kiválasztáshoz. Egyik hasznos funkciója bármely színkombináció hozzáférhetőségi szintjének mérése.

Hűtők

A Coolors többszínű paletta létrehozására szolgáló webhely. Csak rögzítsen egy adott színt, és nyomja meg a szóköz billentyűt. Az eszköz azért is jó, mert egynél több eredményt kapunk, de csak a kezdeti adatok módosításával több lehetőséget is generálhatunk.

Színséma a Coolosban fotó alapján

Adobe Color CC

Az Adobe Color CC (korábban Kuler) színegyeztető szolgáltatás ma már igen népszerű. Ingyenesen elérhető az interneten, de van deszekor verziója is. Ezzel a webalkalmazással elkészítheti saját palettáját a színkör segítségével:

Vagy kaphat egy bizonyos eredményt a kész képből:

Weboldal színeinek kiválasztása kép alapján

Több száz kész kombináció található itt, keresd őket a „Megtekintés” részben:

Ha az asztali verziót használja, egy kattintással exportálhatja a létrehozott színrendszert az InDesign, Photoshop és Illustrator programba.

Paletton

Gyakran hasonlítják össze az előző Adobe Color CC-vel, mivel a tervek nagyon hasonlóak. Az egyetlen különbség az, hogy a Palettonban nem korlátozódik öt paraméterre, hanem kísérletezhet további interfész hangokkal.

Ezen kívül meg lehet nézni. Másokkal együtt az alkalmazás lehetővé teszi, hogy bárhol dolgozzon, egyszerűen az okostelefon használatával. A színpaletták létrehozásának/exportálásának közvetlen feladatai mellett itt választhatja ki a képekből az adott színt, vagy használhatja az alapvető beállításokat.

3. A paletta hozzáférhetővé tétele

Manapság a színlátási zavarok sokkal gyakoribbak, mint gondolnánk. A világon körülbelül 285 millió ember tapasztal látásproblémákat. Mindig ellenőrizze, hogy az Ön által választott elérhető-e az ilyen felhasználók számára.

WebAIM színkontraszt-ellenőrző

Egyes hangok jól passzolnak egymáshoz, míg mások éppen ellenkezőleg. Rengeteg projekt bukott meg az A/A teszten, és ez tény. Nagyon fontos ellenőrizni a felület látványtervét és a tónusok kontrasztját, különösen, ha sok szöveg van az oldalon. Ebből a célból használja a webhely színeinek kiválasztásakor.

A WebAIM Color Contrast Checker egy webalapú eszköz, amely hexadecimális értékben ellenőrzi a színkódokat.

Hűtők

Ezt a szolgáltatást fentebb már említettük. A Coolors többek között abban is segít, hogy kitalált palettáján ellenőrizze a színvakságot.

A színvakság típusa az ábrán

A Normál mód helyett válassza ki a szimulálni kívánt látásprobléma típusát. Ennek eredményeként pontosan meg fogja érteni, hogy az a személy, aki nem tud különbséget tenni bizonyos színek között, hogyan fogja látni a dizájnt.

Így lát egy palettát a protanomáliás ember

NoCoffee Vision Simulator Chrome-hoz

A NoCoffee Vision Simulator webhely használatával megtekintheti, hogy a színvak vagy gyengénlátó emberek hogyan érzékelnek bizonyos weboldalakat. Például, ha megadja az „Achromatopsia” paramétert a „Színhiány” részben, a weboldal szürkén jelenik meg.

Így néz ki egy CNN projekt egy deuteranopiás ember számára.

Következtetés

A cikkben említett weboldalak színegyeztetési és UX tervezési szolgáltatásai minden bizonnyal segítenek egy érdekes és hatékony paletta megtalálásában. De ne feledje: a legjobb módja annak, hogy megtanuljon csodálatos palettákat készíteni, ha sokat gyakorol és kísérletez.

A weboldal színsémájának kiválasztása nehéznek tűnhet, különösen akkor, ha nem ismeri a színkombinációkat:

Ha minden jól megy, webhelye harmonikusan fog kinézni. Ha nem, horrorfilm stílusú képet kapsz!

Ha egyáltalán kerüli a színek használatát a webhelyén, az unalmasnak tűnik, és gyorsan feledésbe merül. Ha túlzásba viszi a színeket, a webhely ragacsosnak tűnik.

Ki kell választania a megfelelő sablont és színpalettát jövőbeli webhelyéhez. Ez a két feladat lehet talán a legnehezebb egy weboldal készítésekor.

Ha csak néhány szabályt ismer, kevésbé lesz nehéz kiválasztani a színeket.

A cikk elolvasása után megtudhatja, hogyan:

• Válassza ki webhelyének és személyes márkájának legmegfelelőbb színét;
• Hogyan kombináljuk a tónusokat a harmonikus színséma érdekében;
• Válassza ki a legmegfelelőbb háttérszínt;
• Csak szükség esetén használjon színes ékezeteket.

Hogyan befolyásolja a szín a webhely és a márka megítélését?

Ha megkérlek, hogy a Coca-Colára gondolj, mi jutna elsőként eszedbe? Valószínűleg a piros Coca-Cola logó felbukkan a képzeletében:

Elég nehéz erre az italra gondolni, és nem társítani a vörös színhez. A vörös olyan erősen kötődik a márkához, hogy ugyanolyan fontos, mint maga a híres ital.

A piros szín a színsémában két fontos üzenetet közvetít:

1. Az élénkpiros címkék kiemelkednek a szódafolyosón lévő többi közül.
2. Minden szín bizonyos érzelmeket vált ki. Amikor vöröset látunk, tudatalatti szinten izgatottság, szerelem és szenvedély érzése támad bennünk. A Coca-Cola ezeket az érzéseket akarja kiváltani italaival:

Ha a megfelelő színsémát választja weboldalához, akkor nem csak látványossá teszi azt, hanem egy emlékezetes márkát is létrehozhat.

A vásárlók 85%-a elismeri, hogy a termék megvásárlásának fő oka annak színe volt.

A márkafelismerés 80%-kal nő színek használatakor.

3 lépés a színek helyes használatához a webhelyen

A weboldal tervezésénél a következőkre van szüksége:

• Válasszon domináns színt a márkájához;
• Válasszon több kiemelő árnyalatot a színséma létrehozásához;
• Háttérszín kiválasztása a teljes terv létrehozásához.

1. Az uralkodó szín kiválasztása

A márkája domináns színe a vörös, mint a Coca-Cola? Segít kiváltani a szükséges érzelmeket az erőforrás látogatóiban, az izgalom, a szerelem és a szenvedély érzését váltja ki az emberekben.

Ez a szín az első dolog, ami eszébe jut az embereknek, ha az Ön cégére gondolnak. Ha már van logója, győződjön meg arról, hogy az tartalmazza a márka elsődleges színét.

Hogyan válasszuk ki a megfelelő színt

A nagy cégek nem véletlenül választanak ilyen vagy olyan színvilágot weboldalukhoz. Ez egy tudatos választás, amely része a márkaépítésnek és a marketingnek.

Mindegyik szín vonzza a saját vásárlói csoportját, sőt választásukat is befolyásolhatja:

Piros-narancs, fekete és élénkkék vonzzák az impulzív vásárlókat. Ezek a színsémák gyakran megtalálhatók a gyorséttermi láncokban, ruhaüzletekben és akciós akciókban.

A sötétkék és a türkiz korlátozott pénzösszeggel vonzza a vásárlókat. Ezek a színek megtalálhatók a bankokban és a nagy áruházakban.

A málna, az azúrkék és a rózsaszín vonzza a klasszikus vásárlókat. Ruhaboltokban forgalmazzák.

A kívánt ügyfelek vonzásához használjon különböző színek kombinációit.

Speciálisan készítettünk egy vizuális infografikát a színsémák kiválasztásához, hogy megkönnyítsük a márkája domináns színének kiválasztását:

Milyen színt használjon a weboldalán?

A zöld a gazdagságot, az egészséget, a nyugalmat és a természetet jelképezi. Ezt a színt a szem a legkönnyebben érzékeli, és ennek eredményeként ellazul. A zöld a második legkedveltebb szín mind a férfiak, mind a nők számára.

A sárga a fiatalság, az optimizmus és a vidámság szimbóluma. Gyakran használják a figyelem felkeltésére. A sárga is feszültséget okozhat, ezért kis mennyiségben használja.

A narancs a barátságossággal, az izgalommal és a kreativitással társul. Serkenti az emberek aktivitását. Például arra ösztönöz, hogy vásároljon egy terméket vagy iratkozzon fel hírlevélre. Ez a szín vonzza az impulzív vásárlókat.

A piros a szenvedélyt, az izgalmat, az energiát és a veszélyt szimbolizálja. Gyakran használják arra, hogy az emberek felfogásában sürgető vásárlási igényt keltsenek. Erős érzelmi reakciókat vált ki. Az éttermekben étvágyfokozásra használják.

A rózsaszín nőies, édes, ártatlan és romantikus. Gyakran használják magánszolgáltatások és termékek lányoknak és nőknek kínálására.

A lila a nagyság, a gazdagság, a siker és a bölcsesség szimbóluma. Gyakran előfordul a kozmetikumokban. Nyugtató hatással van az emberekre.

A kék a megbízhatóság, biztonság, stabilitás, béke és nyugalom jelzője. Gyakran használják bankok és nagyvállalatok. A kék szín a legkellemesebb mind a férfiak, mind a nők számára.

A szürke színösszeállításban a semlegességet, az egyszerűséget, a nyugalmat és a logikát képviseli. A technológiához, a gyártáshoz, a precizitáshoz, az ellenőrzéshez, a hozzáértéshez és még a tapasztalathoz is kapcsolódik.

A fekete a hatás, a luxus, az élmény és az elegancia színe. Gyakran luxuscikkek népszerűsítésére használják, professzionalizmussal, erővel és precizitással társul.

Fiatal és energikus vásárlók a célközönsége? Vagy tapasztaltabb emberek szilárd keresettel? Terméke (szolgáltatása) inkább férfiaknak vagy nőknek szól? Csak egy bizonyos korosztály számára alkalmas?

Nem minden szín alkalmas vállalkozása bemutatására. Például ha jógaszőnyeget árul, lila ( gazdagság és nagyság) és a fekete (erő és luxus) nem a legjobb választás. A zöld illik hozzád ( egészség, béke), szürke ( egyszerűség, nyugalom), kék ( béke, nyugalom), vagy talán még piros ( szenvedély, energia).

A férfiak és a nők színérzékelésének különbségei

Kiknek szól a webhelye elsősorban, férfiaknak vagy nőknek? Vagy esetleg mindkettő?

Világos és tompa színsémák a webhelyhez

A férfiak az élénk színeket részesítik előnyben, míg a nők a tompa színeket.

A kísérlet kimutatta, hogy általában a férfiak és a nők egyformán reagálnak a világos és sötét árnyalatokra. De kiderült, hogy a nők jobban vonzódnak a tompa árnyalatok felé, a férfiak pedig a világos árnyalatok felé.

Akromatikus színek

Általános szabály, hogy a férfiak jobban szeretik az akromatikus színeket, mint a nők. Az akromatikus színek a fehér, a fekete és a szürke minden árnyalata.

Világos és sötét árnyalatok

A nők a világos árnyalatokat részesítik előnyben. Ennek oka bizonyos színek fokozott érzékelése.

Nők

Kék, lila, zöld.

Narancs, barna, szürke.

Férfiak

A legkedveltebb színek: kék, zöld, fekete.

Legkevésbé kedvelt színek: barna, narancs, lila.

A férfiaknak, nőknek vagy mindkettőnek tetsző színek kombinálásával és használatával befolyásolhatja a márkával kapcsolatos tudatalatti felfogásukat.

A színséma kutatások szerint a férfiak és a nők egyaránt szeretik a zöldet és a kéket. Mindketten nem szeretik a narancsot és a barnát. Ha mind a férfiak, mind a nők figyelmét fel akarja hívni, akkor a kéket vagy a zöldet kell használnia fő színként.

A márka vagy termék színválasztása attól is függhet, hogy az ügyfelek milyen benyomást szeretnének kelteni másokban.

Az emberek gyakran vásárolnak bizonyos termékeket vagy szolgáltatásokat, hogy sajátos benyomást keltsenek másokban.

Sok döntés azt tükrözi, hogy az ember mit gondol magáról, és hogyan szeretne megjelenni mások előtt. Ez az, ami eszébe jut, ha mások erre a személyre gondolnak:

Tehát ha azt szeretné, hogy a természetet szerető emberek megvásárolják a termékét, használjon zöldet a HTML színsémájában. Szeretne olyan embereket vonzani, akik fiatalnak és magabiztosnak érzik magukat? Használj sárgát. Ha olyan emberek iránt érdeklődik, akik előkelőnek és gazdagnak akarnak kinézni, használjon feketét.

Most már világos?

Gondoljon az ideális célközönségre. Hogyan akar megjelenni mások előtt?

Igen, ez hatással van a pszichológiára. De ezt meg kell értened egy sikeres márka létrehozásához.

Hogyan használjunk fő színt a webhelyen

Most, hogy eldöntötte webhelye fő színét, meg kell értenie, hogyan kell helyesen használni. A színek sok figyelmet vonzanak, ezért ne próbálja mindenhol használni, ahol csak lehet.

Csak azokon a helyeken használja a domináns színt, ahol fel akarja hívni a felhasználók figyelmét, vagy konkrét cselekvésre ösztönzi őket.

Például hívjon fel egy telefonszámot, töltse ki az űrlapot, iratkozzon fel a frissítésekre stb.

Az uralkodó színnek fel kell hívnia a figyelmet, kiemelve azokat a részleteket, amelyekre fel szeretné hívni a felhasználók figyelmét:

Hol használja a domináns színt az oldalon?

• logó;
• Menüfülek;
• "Hívógomb;
• Fontos információ;
• Címek és címek;
• Gombok.

2. Kiemelő színek kiválasztása

Ahhoz, hogy a design érdekesebbé és professzionálisabbá váljon, a webhelyhez kész hangsúlyos színsémákat kell használnia. Kiemelhetik webhelyének fontos részeit: idézőjeleket, gombokat vagy alcímeket.

Sokan félnek több színt egyszerre használni, mert nem mindig intuitív, hogy jól passzolnak-e egymáshoz. Az emberek azt gondolják, hogy ahhoz, hogy megtanulják kombinálni őket, nemcsak alaposan tanulmányozni kell a színelméletet, hanem sok hibát is el kell követni.

Mindenki számára elérhető egyszerűbb módszer. Ez egy színillesztő program, amely segít a színsémák kiválasztásában, ahogy a profik teszik!

Hogyan válasszunk ki egy programot kiemelő színek kiválasztásához

Miután kiválasztotta a domináns színt, már nem is lehetne egyszerűbb a kiemelő színek kiválasztása olyan programokkal, mint az Adobe Color CC Tool:

Íme egy rövid útmutató, amely megmutatja, hogyan hozhat létre színsémát kétféle módon:

1. Az uralkodó szín alapján

1. lépés: Először is találja meg az uralkodó szín kódját. Például a ColorPicker.com webhelyen. A színkód közvetlenül a színpaletta négyzet feletti téglalapban látható.

Miután kimásolta a kódot a ColorPicker.com webhelyről, illessze be a " NEM X» Adobe Color eszköz. Ügyeljen arra, hogy a középső oszlopba illessze be a kódot:

Illessze be a webhelye domináns színének kódját a KÖZÉPEN található mezőbe.

A szín megadása után az Adobe Color megjeleníti azt a képernyőn más kiegészítő színekkel együtt.

2. lépés. A bal felső sarokban egy téglalap látható a következő színsémákkal:

• Következetes;
• Monokróm;
• Háromszög alakú;
• Kiegészítő;
• Összetett;
• Shades.

Válasszon egy színsémát

Kísérletezzen különböző színsémákkal, hogy megtudja, melyik a megfelelő az Ön számára. A program által javasolt összes szín jól passzol egymáshoz.

3. lépés Tegye színsémáját még átgondoltabbá az egyik színválasztó mozgatásával.

Fontos, hogy ne mozgassa a középen található rövid mutatót, hogy a domináns szín állandó maradjon:

A CMS és a webhelykészítők lehetővé teszik színkódok beszúrását ( HEX) a webhely bármely részének kiemeléséhez:

Másolja ki a színkódokat ( HEX) a webhely színsémájához.

1. Kedvenc fotód alapján

Néha könnyebb színes megoldásokat keresni az interneten, és ihletet meríteni belőlük.

Az Adobe Color-ba tetszőleges fényképet tölthet fel, amely alapján a program automatikusan színsémát generál.

1. lépés: Töltsön fel egy fényképet:

Kép feltöltéséhez kattintson a kamera ikonra.

2. lépés: Válasszon egyet az öt szín közül:

• Színes;
• Fényes;
• Tompa;
• Telített;
• Sötét.

Kísérletezzen a színhangulatokkal, hogy megtudja, melyik illik leginkább hozzád:

Válasszon színhangulatot.

3. lépés: Tegye még átgondoltabbá a színsémát úgy, hogy az egyik színválasztót áthelyezi a képen:

Mozgassa a mutatókat, ha más kiegészítő színeket szeretne kiválasztani.

4. lépés: A javasolt színpaletta a kép alatt található. Így válasszon színsémát webdizájnjához.

A kódok megtekintéséhez ( HEX) színeket, kattintson a jobb felső sarokban található színkörre:

Kattintson a színkörre a színkódok megtekintéséhez:
Másolja ki a színkódokat ( HEX) a színösszeállításhoz.

Hol helyezzük el a segédszíneket

A kiegészítő színekkel kiemelt oldalrészletek nem a fő hangsúlyok. De még mindig kiemelkednek. Használhat például segédszíneket alcímek, további gombok, párbeszédpanelek kiemelésére, a háttér kitöltésére stb.

Válasszon egy vagy két kiegészítő színt. Ha több van belőlük, akkor a felhasználóknak nehéz lesz egy dologra összpontosítani:

Hol használjon támogató színeket a webhelyén?

• Aktív menü gomb;
• Alcímek;
• A másodlagos információk kiemelése.

1. Háttérszín kiválasztása

Volt már, hogy festeni kellett a falakat otthonában?

Ha igen, akkor van némi tapasztalata, és tudja, hogy a színséma kiválasztása nem egyszerű.

A színnek elég nyugodtnak kell lennie, hogy órákig a szobában maradhasson, és a szín ne nyomjon el. Ugyanakkor nem szeretné, hogy a szín fakó legyen, és a szoba kórházi legyen.

Webhelye háttérszínének kiválasztása nem sokban különbözik a szobafesték kiválasztásától!

Hogyan válasszuk ki a megfelelő háttérszínt

Ha festéket választana egy modern ruhaüzlethez és egy vidéki házhoz, ugyanazt a színt választaná?
Nyilvánvalóan nem. Ez a két szoba különböző célokat szolgál.

Például egy ruhaüzlet esetében jobb élénk színeket használni, hogy felhívják a vásárlók figyelmét a ruhatartókra. Szükséges, hogy a falak színe ellentétben álljon a ruhás polcok színével, hogy a vásárlók az üzletbe belépve azonnal megértsék, mire kell figyelniük.

És összehasonlításképpen: amikor megérkezik vidéki házába, valószínűleg kikapcsolódást tervez. Azt szeretné, ha a falak színe és otthona dizájnja nyugtató és ellazító hatású lenne.

Webhelye háttérszíne attól függ, hogy mit szeretne észrevenni a felhasználóknak.

Egyszerűen fogalmazva, a háttérszín közvetlenül függ a webhely létrehozásakor kitűzött céltól.

1. típus – Sok tartalommal vagy e-kereskedelemmel rendelkező források

Észrevette, hogy az információs források és az online áruházak gyakran fehér vagy semleges színsémát használnak webhelyeiken?

Mindez azért van, mert ezeknek a forrásoknak az a célja, hogy ötleteket vagy termékeket népszerűsítsenek.

Ilyen esetekben a webhely kialakítása helyett a termékre vagy szolgáltatásra kell összpontosítani. A háttérszín csak egy alap a tartalom vizuálisabbá és olvashatóbbá tételéhez.