Veb dizaynında rəng: istifadəçidə düzgün emosiyaları necə oyatmaq olar
Veb dizaynında rəng: istifadəçidə düzgün emosiyaları necə oyatmaq olar
Anonim

Rəng istifadəçinin sayta emosional reaksiyasını müəyyən edir, hətta şəxsin özü bundan xəbərsizdir. Müəyyən hissləri oyatmaq üçün saytın fonunda və müxtəlif elementlərində hansı rənglərdən istifadə ediləcəyini və veb dizaynında rənglərin necə düzgün birləşdiriləcəyini aşağıda oxuyun.

Veb dizaynında rəng: istifadəçidə düzgün emosiyaları necə oyatmaq olar
Veb dizaynında rəng: istifadəçidə düzgün emosiyaları necə oyatmaq olar

Bəşər tarixi boyu usta rəssamlar rənglə işləmək bacarığına görə hamı tərəfindən tanınıblar. Müasir dünyada kommersiya və biznes məqsədləri üçün rəngləri necə birləşdirməyi bilən mütəxəssislər - reklam və veb dizaynında - eyni dərəcədə tanınırlar.

Rənglərdən istifadə etmək qabiliyyəti qeyri-müəyyən müddətə pompalana bilər. Bu, bir insana təsir etmək üçün real imkanlar uçurumudur.

Rəng nəzəriyyəsi və rəng sxeminin əsaslarını əhatə edəcəyik və sonra müəyyən rənglərin emosional təsiri haqqında danışacağıq.

Rəng nəzəriyyəsi

Bütün bir kitab rəng mövzusuna həsr oluna bilər, buna görə də biz onu bütövlükdə götürməyəcəyik, ancaq interfeys dizaynını hazırlayarkən istifadə edilə bilən faydalı məlumatlarla məhdudlaşırıq.

Rəng nəzəriyyəsini üç hissəyə bölmək olar:

Kontrast

Hər bir kölgənin əksi, belə desək, bu rəngin ən böyük kontrastını təşkil edən "nemesis" var. Belə bir rəng tapmaq üçün rəng çarxından istifadə edə bilərsiniz. Sadəcə dairənin əks tərəfində bir rəng seçin.

Rəng çarxı
Rəng çarxı

Əlavə

Bu rənglər həmişə bir-biri ilə ziddiyyət təşkil etmir. Tamamlayıcı rənglər ziddiyyətli olanlardan fərqli olaraq bir-birini vurğulayır. Rəng çarxında bu rənglər bir-birini izləyir, məsələn, lilacın tamamlayıcı rəngləri - mavi və çəhrayı.

Rezonans

Hər bir rəng müəyyən bir əhval-ruhiyyə yaradır. Parlaq isti rənglər (qırmızı, narıncı, sarı) insanı enerji ilə doldurur, onu oyadır, soyuq tünd çalarlar (yaşıl, mavi, bənövşəyi), əksinə, istirahət edir və sakitləşdirir.

Məsələn, oxucunu oyatmaq və həyəcanını artırmaq üçün qırmızı naviqasiya çubuğundan istifadə edirlər. Saytın spesifikliyini - sensasiyalı xəbərləri nəzərə alsaq, qırmızı məntiqli qərar kimi görünür.

BBC News
BBC News

Veb dizaynında rəng nəzəriyyəsi sadəcə bəzəkdən daha çox şeydir. Rəng saytınızın qavrayışını dəyişdirə və biznesinizdə mühüm rol oynaya bilər.

Rəngin emosional qəbulu

Rəng və duyğuların sıx qarşılıqlı əlaqəsini heç kim inkar etməyəcək. Və təbii ki, hər hansı bir veb-dizayner bu təsirdən istifadə edərək hər bir sayt üçün düzgün vibe yaratmaq istəyir.

Bir neçə araşdırmaya əsaslanaraq - vebsaytda yerləşdirilən təhlil və rənglər haqqında yazı - biz rənglərin emosiyalara necə təsir etdiyini və UX dizaynını yaratmağa kömək edəcəyini izah edəcəyik.

Dünyanın müxtəlif mədəniyyətlərinin rəngləri fərqli qəbul etdiyini xatırlamaq vacibdir. Biz Qərb mədəniyyətinə xas olan emosional assosiasiyaları təsvir edəcəyik.

Qırmızı

Ən stimullaşdırıcı rəng, o qədər enerjilidir ki, hətta qan təzyiqini artıra bilər. Qırmızı ehtiras və gücü təmsil edir və ən çox diqqət çəkən rəngdir, buna görə də tez-tez vacib xəbərdarlıqlar və elanlar üçün istifadə olunur.

Məsələn, qırmızı rəng, məqsədi qəbul edilən təhlükələrdən xəbərdar etmək olan sayt üçün çox uyğundur.

Ekran görüntüsü_2
Ekran görüntüsü_2

Səhifənin yuxarı hissəsində çoxlu qırmızı istifadə etmək əladır, çünki mesajınızdakı vacib məlumatlara diqqət çəkir. Eyni zamanda, insanlar qırmızı "təhlükə zonasını" tez tərk etməyə və aşağı sürüşməyə meyllidirlər. Bu isə öz növbəsində istifadəçiyə daha çox məzmun göstərməyə imkan verir.

Amma bu rəng sizə qarşı da işləyə bilər, çünki aqressiyaya və ya həddən artıq stimulyasiyaya səbəb ola bilər. Daha rahat bir atmosfer yaratmaq istəyirsinizsə, qırmızıdan orta dərəcədə istifadə etməyə çalışın və qırmızının daha açıq çalarlarını seçin.

Narıncı

İsti tonların ən sakiti kimi portağal müxtəlif duyğuları oyatmağa qadirdir. Əsas rəng kimi maraq doğura və canlandıra bilər, ikinci dərəcəli rəng kimi isə bu xüsusiyyətləri saxlaya bilir, lakin daha gözə çarpmayan bir şəkildə.

Fanta saytı
Fanta saytı

Bundan əlavə, portağal hərəkət və enerji hissi yaratmağa kömək edir. Məsələn, şirkətin cizgi filmi saytında gənclik və hərəkətə işarə edən gözəl görünür. Rəng kreativliklə əlaqələndirilir, eyni zamanda tanış brend hissini qoruyur.

Sarı

Bu, ən çox yönlü rənglərdən biridir və onun doğurduğu duyğular kölgədən daha çox asılıdır.

Parlaq sarı enerji əlavə edir, lakin qırmızıda mövcud olan kəskinlik və kəskinlik olmadan. Orta sarı çalarları hələ də canlandırarkən rahatlıq hissi oyadır. Tünd çalarlar (qızıl daxil olmaqla) qədimlik hissi verir, məkanı zamansızlıq, müdriklik və maraqla doldurur.

Flash Media
Flash Media

Məsələn, veb dizayn agentliyinin ana səhifəsində sarının tünd tonları enerji, maraq və səlahiyyət yayır. Bu rəng konsaltinqdən pul qazanan və peşəkarlığını vurğulamaq istəyən şirkətlər üçün əladır.

Yaşıl rəng

Yaşıl isti və soyuq çalarlar arasında körpüdür, baxmayaraq ki, daha çox soyuq olur. Bu o deməkdir ki, yaşıl mavinin rahatlaşdırıcı təsirinə malikdir, həm də sarıdan bir az enerjiyə malikdir.

Amerika ticarəti
Amerika ticarəti

Nəticədə çox balanslı və sabit bir atmosfer yaradır. Yaşılın daha tünd çalarları vebsayt kimi zənginlik və bolluq təəssüratı yaradır.

Mavi rəng

Sarı rəngdə olduğu kimi, mavinin təsiri rəngdən çox asılıdır. Mavinin bütün çalarları rahatlıq və təhlükəsizlik baxımından universaldır, lakin açıq tonlar dostluq, tünd tonlar isə kədərlə əlaqələndirilir.

Twitter və Facebook kimi sosial şəbəkələr mavinin daha açıq və orta çalarlarından istifadə edir, korporativ saytlar isə güc və etibarlılığın daha tünd çalarlarına üstünlük verirlər.

Tədbir dizayn agentliyi əla nümunədir. Mavi çiçəklərdən fon kimi istifadə edərək, onlar çiçəkçilik üzrə bilik və bacarıqlarına əyani şəkildə işarə vurdular, həm də etibarlılıq və inam hissi yaratdılar.

Van vliet və tələ
Van vliet və tələ

Toylar kimi vizualın çox vacib olduğu hadisələrlə işlədikləri üçün bu, böyük əhəmiyyət kəsb edir.

Bənövşəyi

Bənövşəyi rəng tarixən kral əzəməti ilə əlaqələndirilir, lüksə işarə edir. Bənövşəyi çalarları səxavət və bütövlükdə zənginliyi əks etdirir, onları moda və dəbdəbəli mallar (hətta brendin rəng seçimi kimi şokolad) üçün əla seçim edir.

Şəkil
Şəkil

Lavanda (çəhrayı toxunuşlu bənövşəyi) kimi daha açıq çalarlar romantik düşüncələri oyadır, tünd çalarlar isə daha qəşəng və sirli görünür.

Qara

Neytral rənglərin ən güclüsü, qara demək olar ki, hər hansı bir vebsaytda görünür. Onu müşayiət edən rənglərdən asılı olaraq müxtəlif assosiasiyalar doğura bilər və ya həddindən artıq istifadə edildikdə onlara hakim ola bilər.

Qara rəngin gücü və neytrallığı onu böyük mətn blokları üçün əla seçim edir, lakin əsas rəng kimi əsəbilik hissi yarada və ya hətta pisliklə əlaqələndirilə bilər.

Əksər saytlarda mürəkkəblik hissi yaratmaq üçün qara rəngdən istifadə olunur. Minimalist dizaynda ağ və qara rənglərin birləşməsi BOSE saytında olduğu kimi zəriflik və üslub təəssüratı yaradır.

Xəyal + çatmaq
Xəyal + çatmaq

Qərb mədəniyyətində ağ təmizlik, xeyirxahlıq və məsumluqla əlaqələndirilir. Bu rəng tez-tez minimalist və sadə veb saytların fonunda istifadə olunur.

Kloin Toşevin əsərləri ilə sayt
Kloin Toşevin əsərləri ilə sayt

Bundan əlavə, heç bir tək rəng ağ kimi digər rənglərə diqqət yetirməyə imkan verməyəcək. Məsələn, Awwwards-ın qalibi Kloin Toshev üçün onun bütün əsərləri ağ fonda düzülmüşdür ki, bu da yalnız illüstrasiyaları fərqləndirir və zərif qalereya təəssüratı yaradır.

Boz rəng

Bəzi hallarda, boz tutqun və kədərli bir atmosfer yarada bilsə də, hələ də peşəkar dizaynerlər tərəfindən tez-tez istifadə olunur.

Hər şey çalarlar haqqındadır: onları bir-birini əvəz etməklə, həm qara, həm də ağın yaratdığı bütün emosiyaları əldə edə bilərsiniz. Ümumiyyətlə, boz sağ əllərdə güclü bir vasitədir.

Awwwards
Awwwards

Dizayndakı daha parlaq rənglərlə birlikdə, boz fon müasir görünür və tutqun deyil, məsələn.

bej

Bej özü olduqca darıxdırıcı və ifadəsizdir, lakin bir əlamətdar xüsusiyyətə malikdir: bej onu əhatə edən çiçəklərin xarakterini alır. Buna görə də, təmkin ifadə etmək üçün nəzərdə tutulmayıbsa, bej fon və ya ikinci rəng kimi xidmət edir.

Tünd bej çalarları ənənə və torpaqlıq hissi yaradır, kağız kimi hisslər verir, açıq rənglər isə daha təravətli və müasir görünür.

Natamam
Natamam

Məsələn, bir restoran saytında adın ətrafındakı açıq bej rəngi və daha tünd kənarları restoranın ənənəvi mətbəxə təzə bir yanaşma olduğu təəssüratı yaradır.

Fil sümüyü

Fil sümüyü və krem, demək olar ki, ağ ilə eyni duyğuları oyadır. Bununla belə, fil sümüyü ağdan daha isti (və ya daha az sterildir), bu da minimalizmi qoruyarkən daha çox rahatlıq hissi yaradır.

Onun və tünd rənglər arasındakı kontrastı yumşaltmaq üçün ağ əvəzinə fil sümüyü istifadə edə bilərsiniz. Məsələn, saytda qəhvəyi-narıncı elementlər istilik hissini qorumaq üçün fil sümüyü fonunda (bozumtul görünür) yerləşdirilir.

Qəhvəmdə sənət
Qəhvəmdə sənət

Rəng spektri

Hər bir sayt daha çox yer doldurmaq üçün əsas rənglərdən istifadə edən rəng sxeminə malikdir. Daha əvvəl dediyimiz kimi, bu rənglərdən istifadə insanın şüuruna və əhvalına əsasən şüuraltı təsir göstərir. Buna görə də onları diqqətlə seçin.

Rəngləri birləşdirməyin bir çox yolu olsa da, ən uğurlu və tez-tez istifadə olunan üç yol üzərində dayanacağıq.

Triada (üçlü harmoniya, üçbucaq)

Triada
Triada

Triada üç rəngdən ibarət əsas və ən balanslaşdırılmış sistemdir. O, rezonans və rəng tamamlayıcısından istifadə edir, lakin mürəkkəb kontrasta malik deyil, bu da triadanı ən etibarlı gamut edir.

12 rəngli çarxda bir-birindən 120 dərəcə aralı hər üçü seçin: biri ön plan üçün, ikisi isə məzmun və naviqasiya paneli üçün.

İkili tamamlayıcı sistem

İkili tamamlayıcı sistem
İkili tamamlayıcı sistem

Bu diapazonu həyata keçirmək daha çətindir, lakin sərfəli bir həll ola bilər. Dörd rəng istifadə olunur: iki ziddiyyətli və iki tamamlayıcı.

Bu layout əsasında möhtəşəm Florida Flourish səhifəsinin necə göründüyünü yoxlayın. Qırmızı və yaşıl rənglər bitkilərdə və mətn bloklarında ziddiyyət təşkil edir, mavi fon və narıncı səhra isə şəkli effektiv şəkildə tamamlayır.

Çiçəklənmək
Çiçəklənmək

Analoqlar (seriyalı sistem)

Analoqlar
Analoqlar

Bənzər rənglərin çeşidi əsasən tamamlayıcı çalarlardan istifadə edir. Bu, bəzi keyfiyyətləri xüsusilə aydın şəkildə vurğulamağa və müəyyən duyğuları oyatmağa imkan verir.

Məsələn, qırmızı, narıncı və sarı rənglərin birləşməsi enerji və canlılığı vurğulayır. Belə tərəzidən istifadə etmək çox sadədir, lakin hansı rənglərin birləşməyə daxil ediləcəyini seçmək çətindir. Onların təsiri şişirdilmiş olacaq, buna görə də yanıla bilməzsiniz.

Məsələn, veb-sayt dizaynında mavi, firuzəyi və yaşıl rənglərdən istifadə sakitlik və sakitlik mühiti yaratmışdır. Mühüm məqamları vurğulamaq üçün sarıdan necə istifadə edildiyinə diqqət yetirin.

Blinksale
Blinksale

Bunlar yalnız təsirli fərdi dizaynlar yaratmağa kömək edə biləcək rəng nəzəriyyəsinin əsaslarıdır və saytınızda rəng baxımından nə qədər irəli gedə biləcəyinizlə bağlı heç bir məhdudiyyət yoxdur.

Rəng Seçici Köməkçi Alətlər

Xoşbəxtlikdən, rəng nəzəriyyəsini praktikada tətbiq etməyə kömək edəcək bir neçə vasitə var. Öz palitranızı yaratmaq üçün sıfırdan başlamaq məcburiyyətində qalmamaq üçün bu palitraları sınayın:

  1. əvvəllər Adobe Kuler kimi tanınırdı. Bu, ən etibarlı rəng seçmə vasitələrindən biridir.
  2. … Rəngi mümkün qədər tez seçmək üçün sadə bir alət istəyirsinizsə, Paletton əladır.
  3. … İstifadəçi interfeysinin rəngini seçmək üçün əla vasitədir.

Bu alətlər sizin üçün işləmirsə, burada müxtəlif rəng seçici alətlər var.

Rəng və emosiya arasında birbaşa əlaqə

Unutmayın: istifadəçilər nadir hallarda fonun rəngini, naviqasiya panelini, fərdi detalları fərq edir və qiymətləndirirlər, lakin bu, rəngin onlara təsir göstərməməsi demək deyil. Sadəcə şüuraltı olaraq baş verir.

İstifadəçidə müəyyən emosiyalar yaranır, sayta və ya brendə münasibət formalaşır, o, müəyyən hərəkətlər edir: aşağı fırlanır, hərəkətə səbəb olan düymələrə klikləyir və ya əksinə, onlara fikir vermir. Və bütün bunlarda rəng böyük rol oynayır.

Veb dizaynında rəngdən istifadə etmək üçün hər hansı məsləhətləriniz varsa, şərhlərdə paylaşın.

Tövsiyə: