اصول اولیه رنگ شناسی در وب 1 :: یاقوت آرت

یاقوت آرت

عضویت در خبرنامه یاقوت
یاقوت در گوگل پلاس

آخرین نظرات
۰۳تیر

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

سال های بعد وقتی که داشتم به عنوان یک طراح وب تازه کار کار میکردم ٬ چیزهای مشابهی که قبلا گذرونده بودم رو یک بار دیگه تجربه کردم . موقع کار داخل یک تله ای از رنگ های بسیار زیاد افتادم که نمیشد از اونها دوری کرد . بله ، ‌رنگ های بسیار زیاد و تازه داستان به همین جا ختم نمیشد ! ترکیب اونها به روش غلط منجر به درست شدن رنگ های بی استفاده میشد .
من سعی کردم تلاش کنم و در مورد طرح های رنگی وب بیشتر یاد بگیرم که باعث شد اطلاعات بسیار بسیار جالبی در مورد تئوری رنگ پیدا کنم . من در مورد رنگ ها ٬ ته رنگ ها ٬ سایه ها ٬ نوا ها ٬ اشباع کردن و روشنایی مطالعه داشتم . رنگ های مشابه ٬ تک رنگ ها و رنگ های سه تایی ٬ رنگ های مکمل و بقیه طرح های رنگی ترکییبی از دیگر چیزایی بود که بهشون پرداختم .

در این آموزش قصد دارم که ۶ راه کارساز مطمئن که هیچ وقت غلط جواب نمیدهند رو با شما به اشتراک بذارم تا به یک فهم بنیادی هنگام کار کردن با رنگ ها وقتی که دارید یک وب رو طراحی میکنید دست پیدا کنید . دقت کنین که این ها قانون نیستند همونطور که وقتی وارد حرفه ای ها بشید کاملا مسیر دیگه ای رو برای درست کردن طرح های رنگی استفاده میکنین . با این وجود این ها نقاط شروع هستند ٬ یک سری راهکار های ایمن رو در این زمینه به شما معرفی کنم .

 

۱) طرح های رنگی در بوم نقاشی ، نه در برگه های رنگ

یکی از پایه ترین و اساسی ترین مسائلی که در طراحی وب مطرح میشه اینه که اصلا مهم نیست شما چه زمانی رو گذروندین تا یک طراحی بسیار زیبا و مورد پسند تهیه کنید .

محتوا !‌ بله درست شنیدید ،‌ طرح رنگی که شما استفاده میکنین هیچ وقت نباید برتری ایجاد کنه نسبت به محتوایی که وبسایت شما ارائه میده . در واقع مخاطب وبسایت در ضمنِ لذت بردن از طراحی شیک و عالی وبسایت باید از مطالب و محتوای ارائه شده استفاده کنه نه از طراحی شما پس به بیانی طراحی شما باید در بک گراند یا پشت زمینه وب باشه و به مطالب و محتوای وبسایت کمک کنه تا خودشون رو در روی بک گراند یا به تعبیری زمینه جلو وبسایت جا کنند .

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

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

اینجا میخوام یک ایده بسیار خوب بهتون پیشنهاد کنم . برای شروع یک طرح رو انتخاب کنید مثل عکس هایی که در این دو تصویر استفاده شدند ، یا هر مورد خاص دیگه ای که احساس میکنید میتونه سوژه طراحی وب شما باشه . طرحی که دوست دارین در وب ظاهر بشه رو جلوی خودتون قرار بدین و حالا بیرونش یا اطرافش رو طراحی کنید .

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

 

۲) شروع با یک پایه و اساس سیاه سفید ساده

در عالم ، رنگهای بسیار زیادی وجود دارند و به همین علت ترکیب رنگ های بسیار بسیار زیادی هم موجود هست که شما برای رنگ زمینه اصلی و رنگ متنی که استفاده می کنین میتونین ازشون بهره ببرین . به هر حال پیشنهاد من به شما اینه که با ساده ترین شروع کنید . به نظرتون ساده ترین کدوم رنگا میتونه باشه ؟‌
درست حدس زدید !‌ سفید یا خاکستری روشن برای پس زمینه و رنگ خاکستری تیره برای متن .
اگر شما به گزینش من از وبسایت های مشهور یا قالب ها و حتی تم ها توجه کنینمتوجه میشید که اکثریت اونها این واقعیت رو دارند که از رنگ خاکستری تیره برای متن روی بکگراند سفید یا خاکستری روشن استفاده کردند .

این اتفاق بی دلیل نیست . مهم ترین دلیلی که میتونم به اون اشاره کنم این هست که شما در این ترکیب رنگ تقریبا مطالعه مطالب رو برای بازدید کننده ها تضمین کردید . در واقع اجازه دادید متن و یا تصویر و یا هر سوژه دیگه ای که در نظر دارین به خوبی سر جای خودشون یعنی روی پس زمینه قرار بگیرند . به این تصویر توجه کنین :‌

اگه بخوام باهاتون روراست باشم به جرات میتونم بگم از رنگ سیاه محض برای متن دوری کنید به این خاطر که تجربه ثابت کرده رنگ خاکستری تیره قابلیت بهتری برای خوندن داره. اگر به کدهای رنگ تسلط داشته باشید میتونم اینو بهتون بگم که کد رنگ مناسب برای استفاده در متن از #۶۶۶۶۶۶‌ شروع میشه و تا #۳۳۳۳۳۳ ادامه پیدا میکنه .

برای رنگ پس زمینه میتونم بهتون بگم رنگ سفید محض یا کد رنگ FFFFFF# بهترین رنگ خواهد بود و برای طراحی رنگ پس زمینه بقیه المنت ها یا باکس ها یا فضاهای متنی از کد رنگ FFFFFF# تا کد رنگ CCCCCC# که رنگ خاکستری روشن رو به شما میده بهترین انتخاب خواهد بود .

 

۳) برای هایلایت فقط یک رنگ انتخاب کنید

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

برای اینکه منظورمو متوجه بشین بیاین هرچه سریعتر شروع کنیم : برای آغاز فقط یک رنگ دیگه به قالب سیاه سفید خودتون اضافه کنید . این رنگ رو برای هایلایت کردن یا به عبارتی هاور کردن لینک ها ، منو ها ، تیتر ها ، سر تیتر خبر ها ، دکمه ها و … در نظر بگیرید . این رنگ میتونه آبی ، سبز ، قرمز یا هر رنگ دیگه ای باشه .

به تصویر من دقت کنید . رنگ هایلایتتون رو با رها کردن یک باکس رنگی روی بک گراند اصلیتون بیشتر جلوه بدین . اندازه این باکس رو طوری انتخاب کنید که تموم قسمت های وب و تموم المنت های استفاده شده که رنگ های مختلفی دارند رو پوشش بده .حالا پنل رنگی فوتوشاپ رو باز کنید . یک چهارم کناری قسمت بالا ، در وسط اون کلیک کنید .

اسکرول موس رو حرکت بدین تا به رنگ دلخواهی برسین که فکر میکنین به طراحیتون میاد یا به عبارتی روی اون ست میشه .

در اینجا شما با سه رنگ پایه کار میکنین :‌رنگ پس زمینه ، رنگ متن و رنگ هایلایت . شما در آینده باید رنگ های بیشتری نسبت به یک رنگ هایلایت استفاده کنید ولی برای الان فقط بهش فکر کنید !‌ یک نوع درگیری ، یا کشمکش بین رنگ ها درست کردید .

اگه بخوام ساده توضیح بدم باید تلاش کنین اول رنگ هایلایت رو با رنگ پس زمینه ست کنین و بعد از اون با رنگ متن و دوباره چک کنین که با رنگ پس زمینه ست باشه . برای همین اضافه کردن هر رنگ دردسر های زیادی ایجاد میکنه و به همین خاطر بین رنگ ها دعوا میشه . ازونجا که متوجه شدید که سختی کار به چه علت هست بعد از اینکه کامل با این سه رنگ درگیر شدید و به نتیجه مطلوب رسیدید ، یک رنگ دیگه هم اضافه کنید تا پیچیدگی بیشتر رو حس کنین .

موقعی که داشتین با تغییر رنگ به نتیجه مطلوب میرسیدین اگه دقت کرده باشین رنگی به اسم Hue رو داشتین تغییر میدادین . حرف H نماد کلمه Hue هست که با بالا و پایین بردن اسکرول تغییر میکرد . پس الان کار کردن با رنگ hue رو یاد گرفتین

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


منبع

۷۲۷نمایش ۹۴/۰۴/۰۳

نظرات  (۲)

۰۸ تیر ۹۴ ، ۰۱:۲۳ امیرحسین عصمتی
سلام وبلاگ قشنگی داری و معلومه اهل هنری........
اگه وقت کردی وبلاگ مارو هم با نظری مزین کن......
http://goldengame.blog.ir
۱۱ تیر ۹۴ ، ۱۳:۵۸ مهدی علوی
سلام
نه خسته باشید!
خیلی هم خوب بود، ما که استفاده کردیم
البته در مورد رنگ متن که گفتید #000 نباشه، من خودم برای یه سایتی غیر از این رنگ انتخاب کرده بوده و اگر اشتباه نکنم رنگ #ccc بود
نکتش اینجا بود که خوانایی متن با این رنگ نسبت به سیاه خالص کمتر بود
تجربه خودم این هست که با توجه به فونت میشه گفت بهترین رنگ برای متن چی هست
بازم ممنون (:

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی