آموزش و طراحی وب سایت

آموزش و طراحی وب سایت

آموزش و طراحی وب سایت

آموزش و طراحی وب سایت

طبقه بندی موضوعی
۲۵تیر

آیا تا به حال به رنگ به عنوان یک اطلاعات مهم در طراحی وب سایت فکر کرده اید؟

همان طور که می دونیم متن ها، عکس ها و انیمیشن ها در اینترنت به عنوان محتوا در نظر گرفته می شوند، نظرتون در مورد رنگ چیه؟

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

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

این مقاله به شما در مورد ترکیب رنگها در یک وب سایت و چگونگی انتخاب رنگ ها کمک میکند

با ما همراه باشید


مبانی تئوری چرخه رنگ

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



چرخه رنگ معمولا به 12 رنگ تقسیم می شود.3 رنگ اصلی:زرد، آبی،قرمز.3 رنگ ثانویه سبز، بنفش،نارنجی و 6 رنگ سوم که مابین رنگ های اولیه و ثانویه قرار می گیرد.این سازماندهی به ما درک بهتری از چینش رنگ ها و استفاده درست از آنها را به ما میدهد

هارمونی و روند

یک عنصر اصلی در ایجاد تم های رنگی هارمونی رنگ می باشد.تم های رنگی در هر زمان در حال تغییر می باشند چون به رنگ ها به صورت یک مد نگاه می شود.برای مثال در دهه 50 در امریکا رنگ مد رنگ های اصلی آبی روشن، زرد روشن و قرمز روشن بود اما در دهه 60 رنگ مد خاکستری پاستلی بود و در دهه 70 و 80 رنگ نئون (قرمز )روشن شایع شده بود.
باید به یاد داشته باشیم که امروزه همانقدر که ایجاد رنگهای دیجیتالی آسان شده است به همان نسبت تعیین تم رنگی سخت تر می شود.



هارمونی های رنگ به شیوه های مختلفی ایجاد می شوند که البته تمامی این هارمونی ها سه قانون را در هنگام ایجاد شدنشان رعایت می کنند:


رنگ های مکمل



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

رنگ های مشابه



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

رنگ های سه تایی(Triadic)



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

RGB در مقالب دیگر حالات رنگ

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



رنگ های افزودنی در مقابل رنگ های کاهشی

رنگ های RGB به دلیل اینکه جزو رنگهای افزودنی می باشند بهترین گزینه برای استفاده در مانیتور می باشند ماهیت آنها بر اساس انتشار نور است همان کاری که در تلویزیون ها و مانیتور کامپیوتر ها انجام می دهند.رنگ های استفاده شده در RGB دارای نور بیشتر و دارای رنگ سفید می باشند.در واقع سیاه در RGB در معنای واقعی یعنی تهی از رنگ و سفید با حداکثر رنگ های ترکیبی به وجود آمده است.
CMYk مدل رنگ کاهشی می باشد.پرینتر برای ساخت سایه های از  رنگهای مختلفی از CMYK (فیروزه ای، ارغوانی، زرد، مشکی)  را با یکدیگر ترکیب می کند.هر چه رنگ های بیشتری استفاده شود رنگ ها تیره تر و به سمت مشکی می روند.
رنگ های پنتون یک لیست رنگ از یک شرکت خاص می باشند. رنگ های پنتون برای چاپ مواد ایجاد شد.شما لیست رنگ های پنتون را می توانید در کتاب رنگ پنتون ببینید.

تبدیل رنگ

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




نکات مقاله:
با خواندن قوانین بالا می توان گفت حالا شما دید بهتری برای انتخاب رنگ وب سایتتان دارید.با این حال هنوز هم رنگ های زیادی وجود داره که شما می تونید در هنگام طراحی وب سایت از اونها استفاده کنید.
در زیر چند نکته برای کمک به انتخاب رنگ و ایجاد خلاقیت در شما متذکر می شویم:
استفاده از منابع آن لاین:ابزارهای  Adobe Kuler و Color Explorer طرح های رنگی را در چهارچوب قوانین برای طراحان ایجاد می کند.

انتخاب مد رنگی مناسب :حتی ابزار رنگی فتوشاپ نیز ابزار مهمی برای انتخاب رنگ توسط طراحان برای یک وب سایت می باشد.در ابزار رنگی فتوشاپ فقط رنگ های مورد استفاده در وب را به شما نمی دهد توجه داشته باشید که حتما تیک "فقط رنگ وب" را زده باشید




زیبایی به معنای پخش کردن رنگ نیست:به یاد داشته باشید که متن باید خوانا باشد.رنگ نباید بیننده را منحرف کند مگر اینکه به خاطر موضوع خاصی و یا تاکید بر موضوعی از آن استفاده کنیم.

استفاده از فضای سفید: حتی اگر مکانی برای رنگ سفید وجود ندارد این مکان را بسازید تا چشم استراحت کند. رنگهای روشن یا متعدد می تونه آزار دهنده باشه

بررسی چرخه رنگ: برای انتخاب 2 یا سه رنگ به خوبی به چرخه رنگ RGB نگاه کنید و ترکیب رنگ ها را به خوبی بشناسید تا بتوانید یک طرح منحصر به فرد ایجاد کنید

هنگامی که با چرخه رنگ آشنا شدید شما باید بی وقفه به ترکیب رنگ ها و استفاده از آنها در پروژه هایتان بپردازید. بدین ترتیب بعد از مدنی ترکیبهای رنگی دلخواهتان را می یابید

اگر انتقاد یا پیشنهادی برای وبلاگ یا این پست دارید در قسمت نظرات همین پست بگین !!


۹۳/۰۴/۲۵ موافقین ۳ مخالفین ۰
م.شریعتی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

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