رنگ و احساس : هر رنگ در طراحی وب چه معنای دارد؟

هر رنگ انتخاب شده در وب سایت ها داستانی را بیان می کنند.


مهدخت یافتیان ۳۳ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۱۷ام تیر , ۱۳۹۲ 35712 بازدید

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

رنگ ها و احساس ها - webtarget.ir

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

آیا می دانید که رنگ ها معنای بیشتریبه همراه دارند؟

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

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

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

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

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

رنگ های گرم شادابی و راحتی را القا می کنند.این رنگ ها باعث می شوند فضا کوچکتر به نظر برسدزیرا تن رنگ های گرم باعث ایجاد حس راحتی در افراد می شود. رنگ های گرم باعث فعال شدن عکس العمل های مغز می شود و احساس هیجان ، عشق و در بعضی مواقع عصبانیت را القا میکند.

در فضا های خیلی بزرگ استفاده زیاد از رنگ های گرم باعث ابهت فضا می شود و با رنگ های خنثی هم تطابق دارد.

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

رنگ های سرد باعث ایجاد اثرات منفعل( غیر فعال) در مغز می شود که باعث ایجاد احساس رضایت، آرامش و عدم فعالیت می شود.

قرمز

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

رنگ ها و احساس ها - webtarget.ir

چکیده خصوصیات رنگ قرمز:

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

سبز

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

رنگ سبز یکی دیگر از رنگ های اولیه است .این رنگ یکی از آرامش بخش ترین رنگ ها است که دارای سایه های خنثی است.

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

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

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

چکیده خصوصیات رنگ سبز:

  • زرد- سبز بیماری و اختلاف را القا می کند.
  • سبز تیره جاه طلبی، کامیابیرا القا می کند.
  • سبز متمایل به آبی سلامتی و ثبات را القا می کند.
  • سبز زیتونی نماد صلح و هارمونیرا القا می کند.

آبی

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

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

آبی به آب و آسمان نیز ارتباط دارد که به وب سایت شما حس طبیعت را میدهد.

رنگ ها و احساس ها - webtarget.ir

رنگ های آبی به ندرت در موضوعات مربوط به مواد غذایی و بسته بندی غذا ها استفاده می شوند زیرا بعضی از مطالعات نشان داده است که تاثیر آرامشی که از این رنگ گرفته می شود جلوی اشتهای افراد را می گیرد.

چکیده خصوصیات رنگ آبی :

  • آبی روشن سلامتی، عمق، ثبات و ایمان را القا میکند .
  • آبی تیره تر دانش ، قدرت ، اعتماد و کمال را القا می کند.

بنفش

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

چکیده خصوصیات رنگ بنفش

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

زرد

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

چکیده خصوصیات رنگ زرد:

  • رنگ زرد روشن برای القای حس خطر و ترس است.
  • رنگ زرد تیره تر برای القای شادی ، لذت و تازگی است.

نارنجی

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

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

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

  • زرد- نارنجی یا نارنجی طلایی حس پرستیژ و خرد را القا می کند.
  • قرمز – نارنجی حس لذت، انرژی و سلامتی و آرزو را القا می کند.
  • نارنجی تیره به معنی تغییر و عدم اطمینان است.

قهوه ای و رنگ های خنثی

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

رنگ ها و احساس ها - webtarget.ir

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

چکیده خصوصیت رنگ قهوه ای

  • قهوه ای خیلی کمرنگ برای القای آرامش، پاکی، ظرافت است.
  • قهوه ای کمرنگ ( میانه) خستگی، کسلی و حفاظت را القا می کند
  • قهوه ای تیره استحکام، راحتی و تجربه را القا می کنند.

سیاه و سفید

رنگ ها و احساس ها - webtarget.ir

رنگ ها و احساس ها - webtarget.ir

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

سفید معمولا مذمون تمیزی، پاکی و کمال را القا می کند. رنگ مشکی معنی قدرت ، رمز آلود بودن و ظرافت را منتقل میکند. بعضی اوقات معنی ترس و نا شناخته بودن را هم میدهد.

رنگ ها و احساس ها - webtarget.ir

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

چکیده خصوصیت رنگ ها ی سفید و مشکی:

  • سفید، تمیزی، پاکی و رهایی ر القا می کند.
  • سیاه، قدرت، ظرافت و رمزآلودگی را القا می کند.
  • توسی آرامش و بی تمایلی را القا می کند.

و در انتها:

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

منبع



نویسنده / مترجم : مهدخت یافتیان

4 سال است به عنوان مدیر پروژه در زمینه طراحی وب سایت فعالیت دارم و مطالب و ترجمه های بسیاری در این رابطه تهیه کردم.


۳۳ دیدگاه برای این نوشته ثبت شده است


  1. رامتین
    ۱۷ تیر ۱۳۹۲

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




    • مهدخت یافتیان
      ۱۸ تیر ۱۳۹۲

      خوشحالم که خوشتون اومده




  2. مجتبی
    ۱۸ تیر ۱۳۹۲

    ممنون!
    برای گرافیست ها خوبه ولی من هرکاری می کنم نمی تونم خودمو گرافیست بدونم.




    • مهدخت یافتیان
      ۱۸ تیر ۱۳۹۲

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




      • مهدی شکری
        ۱ اردیبهشت ۱۳۹۳

        شما فکر می کنید بهتره که طراح و برنامه نویس از هم جدا باشند یا اینکه یک نفر می تونه هر دو کار رو انجام بده؟




  3. حسین
    ۱۸ تیر ۱۳۹۲

    سلام
    خیلی ممنون از مقاله خوبتون
    موفق باشید




    • مهدخت یافتیان
      ۱۸ تیر ۱۳۹۲

      خوشحالم که خوشتون اومده




  4. رها
    ۱۸ تیر ۱۳۹۲

    خسته نباشید
    ممنون و متشکرم بخاطر اموزش زیبا و کاملتون




  5. reza
    ۱۸ تیر ۱۳۹۲

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




  6. 41i R3Z4
    ۱۹ تیر ۱۳۹۲

    سلام
    دمت گرم کلی به فیض بردیم




  7. مهرناز
    ۱۹ تیر ۱۳۹۲

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




    • مهدخت یافتیان
      ۲۰ تیر ۱۳۹۲

      سلام، خوشحالم از مقاله خوشتون اومده
      سایت های دینامیک و داینامیک یک معنی دارند به معنی وب سایت های پویا که می توان از طریق پنل مدیریت، محتوای آنها را به روز نمود.
      سایت های استاتیک ، سایت های هستند که دارای صفحات ثابت هستند یعنی محتوای آنها را باید از درون کد های Html ویرایش نمود و پنل مدیریت ندارند.




  8. سعید
    ۱۹ تیر ۱۳۹۲

    خیلی وقت بود دنبال یه مطلب خوب و جامع تو این موضوع بودم.
    مچکرم.




  9. رها
    ۲۰ تیر ۱۳۹۲

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




  10. parand
    ۳ مرداد ۱۳۹۲

    very very good..
    thanks a lot…




  11. ramazan
    ۵ مرداد ۱۳۹۲

    کارتون عالیه .




  12. محمد تقی زاده
    ۱۰ مرداد ۱۳۹۲

    سلام
    مطلب بسیار مفیدی بود
    بسیار ممنون




  13. شکوفه
    ۱۰ شهریور ۱۳۹۲

    خیلی جالب بود
    ممنون




  14. Ali
    ۲۶ شهریور ۱۳۹۲

    سلام واقعا ممنونم بابت مطلب
    یه سوال داشتم برای سایت بازی آنلاین چه رنگ هایی مناسبه؟ممنون میشم جواب بدین
    teragame.ir




  15. Amir
    ۲۸ شهریور ۱۳۹۲

    جالب بود مرسی‌




  16. شهر دیجی
    ۱۶ آبان ۱۳۹۲

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




  17. علی حاجیلویی
    ۲۳ آذر ۱۳۹۲

    درود
    مقاله مفید و متفاوتی بود.
    موفق باشید




  18. ایمان
    ۲۴ آذر ۱۳۹۲

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




  19. علیرضا
    ۲۶ آذر ۱۳۹۲

    سلام .
    میخواستم از شما کمک بگیرم برای دیباگ و تکمیل کردن یک اسکریپت .

    ممنون میشم من رو ادد کنید تا در این مورد با شما صحبت کنم .




  20. محمد
    ۲ بهمن ۱۳۹۲

    سلام خسته نباشید واقعا نمیشه به این سایتای خوب سر زدو نظر نذاشت واقعا عای سایتتون




  21. محمد
    ۲ بهمن ۱۳۹۲

    معذرت میخوام :) عالیه




  22. alireza madadi
    ۱۳ تیر ۱۳۹۳

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




  23. محمد
    ۱۰ شهریور ۱۳۹۳

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




  24. طراحی وب سایت
    ۳۰ فروردین ۱۳۹۴

    مطلب خوبی بود ممنون




  25. جواد بابایی
    ۱۷ مهر ۱۳۹۴

    سلام
    من یه سوال دارم برای طراحی سایت برای اینکه بتونم بهتر و بیشتر موفق باشم
    بهتر است که با چه ابزاری سراغ طراحی سایت برم؟
    منظورم این هست که چه زبان و ابزاری برای طراحی
    سایت بهتره؟




  26. پویا پایور
    ۲۲ آبان ۱۳۹۴

    ضمن سپاس فراوان از سرکار خانم یافتیان
    «مضمون» صحیح است و نه «مذمون»!




  27. حسن
    ۵ تیر ۱۳۹۵

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



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.