کاوشگران صنعت پارس آرین کاوشگران صنعت پارس آرین 15 نکته برای انتخاب بهترین رنگ در وبسایت ( آموزش هارمونی رنگ ) به زبان ساده | دانلود پروژه رایگان و تازه های تکنولوژی و کامپیوتر
۰

۱۵ نکته برای انتخاب بهترین رنگ در وبسایت ( آموزش هارمونی رنگ ) به زبان ساده

color-wheelاز سری آموزش های طراحی وب سایت , این پست رو برای آموزش رنگ های مناسب برای دیزاین حرفه ای و هارمونی رنگ یک وب سایت  انتخاب کرده ام …

تا اینجا آموزش های متنوعی برای کدنویسی , سئو و … در سایت قرار دادم که با استقبال خوبی مواجه شد . اما ایمیل های زیادی به دستم می رسید مبنی بر اینکه از چه رنگ هایی برای جذابیت بیشتر سایت استفاده کنیم تا دیزاین حرفه ای تر و User Friendly تر داشته باشیم .

همان طور که میدانید یک وب سایت حرفه ای باید دارای اجزای مختلف حرفه ای باشد که یکی از اصلی ترین آن , انتخاب بهترین رنگ و هارمونی رنگ ها می باشد .

حتما تا به حال به سایت هایی برخورده اید که در یک نگاه شمارو جذب و شاید بر عکس در یک نگاه چشم شمارو خسته کند . یکی از عوامل جذب بازدید میتواند همین رنگ ها باشد .

آیا شما حاضرید مطالب یک سایتی که از رنگ های بسیار غلظت بالا استفاده میکند را مطالعه کنید ؟ سریعا چشم شما خسته و در نتیجه صفحه را می بندید .

در این پست سعی دارم آموزش و ترفند های کامل و جامعی در مورد رنگ ها بنویسم تا با استفاده از این نکات , دیزاین حرفه ای تر و جذاب تر داشته باشید .

شروع آموزش :

کدنویس ها میدانند که شیوه های استفاده از رنگ ها در css و حتا html  به چند دسته Keywords , Hex , Rgb , Hsl تقسیم میشود . من در این آموزش روش Hex را که تقریبا ۹۹% کدنویس ها از آن استفاده میکنند و البته بسیار استاندارد هم هست را انتخاب کرده ام .

روش Hex , بهترین روش برای رنگ ها میباشد که از ۳ عدد ۲ تایی ( در کل ۶ عدد ) تشکیل شده است که هر عدد بازه ای از ۰ تا F را دارا میباشد ( این اعداد هگزا دسیمال هستند یعنی ۱۶ تایی ( از ۰ تا ۹ و A تا F )) و ترتیب قرار گرفتن آنها به صورت RGB هست .

یعنی برای داشتن رنگ قرمز , کافیست R را تا آخر باز کنیم و G , B را ببندیم . یعنی = FF0000

color-wheel

برای داشتن بهترین هارمونی رنگ بین اجزای وب سایت , باید نکات زیر را رعایت فرمایید :

۱ – بهترین رنگ برای BackGround سایت , رنگ های روشن از جمله سفید می باشد . تا حدالمقدور از رنگ های تیره مثل سیاه برای BackGround استفاده نکنید . اگر هم مجبور به استفاده از رنگ های تیره در پشت زمینه هستید , کمی از غلظت آن کم کنید .

به عنوان مثال برای رنگ سیاه که داریم :

۲
۳
۴
۵
۶
۷
۸
body{
    background-color:#000000;
}

از چند درجه روشن تر , یعنی کد زیر استفاده نمایید.

۲
۳
۴
۵
۶
۷
۸
body{
    background-color:#333333;
}

 

۲ – رنگ های سیاه و سفید از رنگ های خنثی هستند , یعنی تقریبا جزو رنگ به حساب نمی آیند . با توجه به این نکته , سعی کنید از حداقل یک و حداکثر ۲ رنگ در طراحی وب سایت خود استفاده نمایید .

این رنگ ها باید در تناقض باهم باشند . یعنی اگر از ۲ رنگ اصلی استفاده میکنید , یکی از این دو رنگ سرد و دیگری گرم باشد .

رنگ های گرم  : قرمز، صورتی، زرد، طلایی و نارنجی

رنگ های سرد : آبی، سبز، بنفش , فیروزه ای و نقره ای

نکته : رنگ های بنفش و ارغوانی و سوسنی , هم از جمله رنگ های سرد هستند و هم گرم …

به عنوان مثال – بهترین ترکیب های رنگی شامل : ( آبی – زرد ) , ( قرمز – سبز ) و ….

۳ – از تونالیته ی رنگ ها بسیار استفاده کنید , مخصوصا اگر از یک رنگ اصلی استفاده میکنید . به عنوان مثال اگر از آبی استفاده میکنید , تونالیته ی آن شامل رنگ های آبی فیروزه ای , آبی کهربایی , آبی نفتی , آبی آسمونی و … میشود .

۴ – تضاد رنگ بین پشت زمینه و نوشته های زمینه , بسیار زیاد و بالاترین کنتراست رو باهم داشته باشند .

به عنوان نمونه :

bg-fg-test

 

در بالا , عکس سمت چپ دارای بهترین هارمونی رنگ میباشد و کلمه vahid , کاملا از پشت زمینه مجزا شده اما در عکس سمت راست , چون پشت زمینه و همچنین کلمه vahid دارای غلظت رنگ آبی بالا هستند , با هم تضاد ندارند و در نتیجه کلمه vahid بسیار سخت قابل رویت می باشد .

۵ – تا جایی که امکان دارد برای نوشته های سایت از تونالیته ی رنگ های سیاه و سفید استفاده نمایید . منظور از تونالیته این رنگ ها , رنگ های زیر می باشد :

۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
#۰۰۰۰۰۰
#۱۱۱۱۱۱
#۲۲۲۲۲۲
#۳۳۳۳۳۳
#۴۴۴۴۴۴
#۵۵۵۵۵۵
#۶۶۶۶۶۶
#۷۷۷۷۷۷
#۸۸۸۸۸۸
#۹۹۹۹۹۹
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee
#ffffff

 

۶ – از ۳ رنگ قرمز , آبی و سبز روشن کمتر استفاده نمایید . چون بعد از نگاه کردن زیاد به این رنگ ها چشم کاربر خسته و طبیعتا باعث از دست دادن کاربر میشوید .

۷ – رنگ های قرمز , زرد و نارجی از رنگ های اشتها برانگیز هستند . پس مسلما برای سایت هایی با مزمون خوراکی , بهتر است از این رنگ ها استفاده شود.

۸ – یکی از مهمترین مسائل در انتخاب رنگ برای وب سایت , نوع کاربری آن وب سایت می باشد . رنگ ها باید المانی از کاربری سایت را دارا باشند.

به عنوان مثال برای سایت های کشاورزی , از دو رنگ سبز ( گیاه ) و قهوه ای ( خاک ) استفاده میشود یا مثلا برای یک سایت محصولات دریای از رنگ آبی ( دریا ) استفاده میشود .

۹ – حتما اگر در سایت خود لوگو شرکت و عکس هایی برای اسلاید شو استفاده میکنید , تمامی عکس ها , لوگو و دیزاین سایت بر اساس همان رنگ اصلی باشند .

به عنوان مثال اگر لوگو شرکت قرمز رنگ و یا دارای درصد بالایی رنگ قرمز است , دیزاین کل سایت را بر اساس رنگ قرمز طراحی کنید و همچنین برای اسلاید شو از عکس هایی استفاده نمایید که درصد بالایی از تونالیته رنگ قرمز در آنها بکار رفته است.

۱۰ – از ۱۶,۷۷۷,۲۱۶ رنگ موجود , فقط ۲۱۶ رنگ به صورت Safe Color هستند . Safe Color به رنگ هایی میگویند که در قدیمیترین کامپیوتر و مانیتور ها هم به درستی قابل نمایش می باشند. پس بهتر با توجه به گونه ی زیاد کارت های گرافیکی قدیمی و جدید موجود در دنیا , بیشتر از این ۲۱۶ رنگ استفاده نمایید .

فرمول به دست آوردن این رنگ ها به این صورت می باشد که باید دو به دو رنگ ها بر ۳ بخشپذیر باشند ( ۰ هم قابل قبول می باشد )

مثلا : #۳۳۶۶۹۹ , #۰۰ffcc , ffff66 و به همین طریق …

۱۱ – در وب سایت خود از فضای سفید ( White Space ) بسیار زیاد استفاده نمایید . یعنی فاصله بین باکس ها زیاد باشد و همچنین بیشتر از رنگ سفید استفاده نمایید . حرفه ای ترین دیزاین های روز دنیا از سال ۲۰۱۱ تا به الان ( ۲۰۱۴ ) بر همین اساس می باشد . به عنوان نمونه , سایت Apple.com

۱۲ – اصولا مهمترین مکان در هر وب سایتی را با یک رنگ گرم و یا سرد با غلظت بالا مشخص میکنند تا به طور کامل از تمامی اجزای دیگر سایت متمایز شود .

به عنوان نمونه , NavBar یا همان نوار افقی راهنما که در بالای بیشتر سایت ها موجود می باشد را به عنوان مکان مهم سایت در نظر میگیریم .

۱۳ – تمامی صفحات یک وب سایت باید از یک الگوی رنگ استفاده کنند و به هیچ عنوان دیزاین یا رنگ آمیزی هر صفحه ( Page )  با هم متفاوت نباشند .

۱۴ – سایت color scheme designer نیز یکی از بهترین سایت‌هایی است که در زمینه انتخاب طرح رنگ سایت به شما کمک زیادی می‌تواند بکند.

۱۵ – رنگ های معمول و رایج و تاثیر آنها در طراحی وب سایت (به طور کلی ) :

•    قرمز : انرژی ، شور ، هیجان و قدرت
•    آبی : خنکی ، معنویت ، آزادی ، بردباری ، وفاداری ، صلح ، اعتماد
•    زرد : نور ، خوش بینی ، شادی ، روشنایی و لذت
•    سبز : زندگی ، طبیعی ، سلامت ، ثروت ، رفاه
•    نارنجی : دوستی ، گرما ، انرژی ، بازیگوشی ، شجاعت
•    بنفش : خرد ، پختگی ، جشن
•    رنگ سفید : خلوض ، تمیزی ، جوانی ، صلح
•    سیاه و سفید : قدرت ، ظرافت ، مکانی پر از رمز
•    خاکستری : امنیت ، بلوغ ، قابلیت اطمینان
•    صورتی : عشق زنانه
•    قهوه ای : آسایش ، استحکام ، ثبات و اعتبار

بدیهی است که میتوانید با توجه به نوع سایت خود , از رنگ مخصوص آن که در بالا قرار گرفته است استفاده نمایید .

نکته مهم : بیشتر مطالب بالا به صورت علمی و بخشی از آن تجربیات اینجانب می باشد .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *