وب همیشه در حال بصری تر شدن است. محتوای وب هم بسیار ارزشمند است، اما بهتر است آن محتوا در یک بسته بسته بندی جذاب ارائه شود تا متمایز باشد. گاهی پیش می آید که ما برای جذاب تر کردن سایت خود تلاش زیادی می کنیم اما نا خواسته برخی از رنگ ها بر طراحی سایت ما تأثیر منفی می گذارند.
برای طراحان متخصص این کار مشکل خاصی نیست آن ها کاملاً در تئوری رنگ و روانشناسی رنگ غرق هستند. اما در مورد افرادی که می خواند وب سایت خود را با طبیعت بصری بسازند، این چگونه است؟ درست است که مقالات و مطالب زیادی در مورد چگونگی استفاده از رنگ ها در طراحی وب سایت ها وجود دارد اما گاهی ممکن است با یک انتخاب رنگ غلط یک فاجعه بزرگ رخ دهد. شما باید رنگی را برای وب سایت خود انتخاب کنید که هم در طراحی وب سایت شما برای دکستاپ، هم در طراحی وب سایت موبایلی شما درست عمل کند. در انتخاب رنگ یک وب سایت شناختن رنگ هایی که باید از آن ها اجتناب کنید بسیار مهم تر از رنگ هایی است که باید آن ها را انتخاب کنید.
با این اوصاف از چه رنگ هایی باید در طراحی صفحات وب سایت خود اجتناب کنیم؟
مشکی خالص
بیایید با سیاه شروع کنیم، آن هم سیاه خالص چیزی که در HTML به عنوان #000000 کد گذاری شده است. این رنگ باعث غافلگیر شدن کاربر می شود. صفحات شما نباید به گونه ای باشند که گویی مشکی همه جا را فرا گرفته است. مثلاً نباید متن و اکثر صفحات وب به گونه ای باشد که گویی لباس سیاه بر تن دارد یا آسمان شب سایت را پوشانده است.
البته، مشکی خالص چیزی است که شما در طراحی کم تر به آن فکر می کنید. در حقیقت رنگ #000000 یا مشکی خالص در واقع یک رنگ غیر طبیعی بوده و در طبیعت وجود ندارد. رنگ سیاه خالص نیاز به جذب همه طیف های نور دارد و این به سادگی در طبیعت اتفاق نمی افتد. رنگ های طبیعی بیشتر ترکیب شده و آرام تر هستند.
بنابراین، سیاه خالص چیزی نیست که چشمان ما به دیدن آن عادت داشته باشد و رنگی خشن است. البته ممکن است در برخی مقالات بخوانید که رنگ سیاه برجسته و جذاب است. سپس با خود بگویید چرا از آن در طراحی وب استفاده نکنیم؟ یا در مقالات روانشناسی رنگ ها بر ارتباط آن با زرق و برق، پیچیدگی، قدرت و اقتدار تأکید کنند. اما آیا این مقالات وقتی استفاده از رنگ سیاه را تشویق می کنند، اشتباه می کنند؟
آن ها اصلاً اشتباه نمیکنند رنگ مشکی می تواند برای برانگیختن برخی تداعی های مثبت قدرتمند در ذهن افراد استفاده شود. اما نکته کلیدی این است که از رنگ مشکی استفاده کنید که مشکی خالص نباشد. از آن جایی که سیاه خالص یک رنگ طبیعی نیست، پردازش آن برای مغز دشوار تر است. رنگ مشکی خود را از #000000 به #111111 یا یک خاکستری بسیار تیره مشابه افزایش دهید و همچنان از مزایای چشم نواز رنگ مشکی بدون اینکه فشار زیادی بر مغز بازدیدکنندگان وارد کنید بهره مند شوید.
رنگ های نئونی نیز، در عین حال که چشم نواز هستند، تمایل دارند که مغز مخاطب را تحت تأثیر قرار دهند و این بر طراحی وب سایت شما اثر منفی خواهد گذاشت. رنگ های نئونی به عنوان رنگ هایی که در طبیعت ظاهر نمی شوند، برای مغز نا آشنا هستند و پردازش آن ها نسبت به رنگ های طبیعی و ترکیبی سخت تر است.
شما می توانید رنگ های نئونی خیره کننده را در برجستگی های گرافیکی استفاده کنید تا به جای عناصر رابط، محتوای بصری شما برجسته شوند. شما می توانید از آن ها برای جذب مخاطب به گرافیک سایت و جلب توجه بازدیدکنندگان به قسمت هایی از صفحه که اطلاعات کلیدی در آن قرار دارند، استفاده کنید. در حقیقت شما باید رنگ های نئونی را از پسزمینه هایی که متن روی آن قرار میگیرد، مانند پس زمینه متن اصلی، نوار های کناری، نوار های پیمایش، دکمه ها و غیره دور نگه دارید.
شما می توانید از رنگ های طبیعی تر و با ترکیب ملایم تر که برای چشم راحت تر هستند، به عنوان پس زمینه محتوای متنی خود استفاده کنید. رنگ های نئونی به عنوان متن یا پسزمینه متن، چشم ها را خسته میکنند. استفاده نادرست از این رنگ ها می تواند یک تصور منفی نا خودآگاه از وب سایت شما و آنچه که ارائه می دهید به جای بگذارد. احتمالاً این چیزی نیست که شما بخواهید و قطعا می خواهید بازدید کننده صفحه شما را با احساس مثبت در مورد کسب و کارتان ترک کند.
یک قانون کلی برای طراحی سایت پرهیز از رنگ هایی است که در کدنویسی HTML دارای افراط در طیف رنگی هستند مانند صفر و Fs که می توانند اثر منفی بگذارند. شما باید پس زمینه متن و خود متن آن ها را کمی از رنگ های کاملاً خالص غیرطبیعی دور کنید، تا پردازش آن ها برای ذهن آسان تر شوند و تأثیر مطلوب تری بر بازدیدکنندگان شما بگذارد.
ترکیبات رنگ با کنتراست بیش از حد بالا
علاوه بر پرهیز از رنگ های بیش از حد خالص، باید مراقب ترکیب های خاصی از رنگ ها نیز باشید. مثلاً ترکیب قرمز و سبز جزء اصلی فصل کریسمس هستند، اما ترکیب رنگ های قرمز و سبز می تواند تأثیرات منفی بر طراحی سایت شما بگذارد. پرهیز از ترکیب این دو رنگ آن قدر مهم است که ضرب المثلی در بین طراحان وجود دارد که می گوید: “قرمز و سبز هرگز نباید باهم دیده شوند، مگر با وجود رنگی بین آن ها”.
این اجتناب از استفاده از رنگ سبز و قرمز به دلیل پردازش متفاوت مغز بین این دو رنگ است. قرمز به عنوان گرم ترین رنگ ثبت می شود و فعالیت مغز را تحریک می کند. به عبارتی قرمز مغز را تحریک می کند و رنگی است که به سرعت توجه ما را به خود جلب می کند.
از سوی دیگر، سبز به عنوان یک رنگ سرد شناخته می شود و مغز را آرام می کند. کنار هم قرار دادن این دو رنگ، مغز را در موقعیت نا خوشایندی از پردازش تصویر قرار می دهد. ترکیب این رنگ ها به طور همزمان سعی می کند مغز را تحریک و آرام کند و این کار مغز را در تضاد می گذارد. پس ترکیب قرمز و سبز برای ایجاد یک تصور مطلوب خوب نیست.
استفاده از رنگ های قرمز و سبز در کنار هم در طراحی سایت میتواند ناخودآگاه تصور منفی در ذهن بازدید کننده به جای بگذارد که ربطی به محتوای ما ندارد و این تصور منفی ناشی از ناراحتی درونی پردازش رنگ های متضاد است.
ترکیب رنگ های قرمز و سبز مشکل دیگری نیز از نظر فرهنگی دارد، در دنیای غرب، مردم عادت دارند رنگ قرمز را با توقف یا “No”، و سبز را با برو یا “Yes” مرتبط کنند. این امر مجدداً، مغز را با مجموعه ای متناقض از ورودی ها روبرو می کند که باعث ناراحتی مغز می شود. زمانی که مغز ناراحت باشد، احساس ناراحتی را به فرد هم منتقل می کند و این اصلاً چیزی نیست که ما می خواهیم.
ترکیب رنگی دیگری نیز وجو دارد که به اندازه تضاد شدید میان رنگ سبز و قرمز نیست، اما همین اصل در مورد ترکیب قرمز و آبی نیز وجود دارد. در ترکیب قرمز و آبی نیز بین یک رنگ بسیار گرم و رنگ بسیار سرد تضاد ایجاد می شود.
همچنین تا حدود کم تری نیز برای هر ترکیبی از رنگهای ثانویه، یعنی بنفش، سبز یا نارنجی نیز این مشکلات صدق میکند. رنگ های ثانویه که ترکیبی از رنگ های اصلی هستند (بنفش ترکیبی از قرمز و آبی، سبز ترکیبی از آبی و زرد، نارنجی ترکیبی از زرد و قرمز است) نیز به سادگی با هم ترکیب نمیشوند. هر یک از این ترکیب ها به تنهایی آن قدر قوی هستند که مغز نمیتواند به راحتی آن را پردازش کند.
ترکیبات رنگی با کنتراست بسیار کم
با این حال، این بدان معنا نیست که شما باید فقط از رنگ هایی استفاده کنید که از نظر رنگ و محدوده سایه یکسان هستند. اگر شما در این مسیر نیز بیش از حد پیش بروید، مشکلات دیگری را برای بازدیدکنندگان خود ایجاد می کنید.
قرار دادن متن هایی با رنگ و سایه روشن بر روی پسزمینه های روشن مانند سفید، صورتی، زرد، آبی روشن و یاسی میتواند تشخیص متن را برای بازدیدکنندگان سخت کند. همین امر در مورد متن تیره روی پس زمینه تیره، مانند قرمز، آبی تیره و سرخابی روی مشکی نیز صدق می کند.
سایر ترکیبات رنگی منفی در طراحی سایت عبارتند از: زرد روی سبز و سبز روی زرد، پسزمینه قرمز یا مشکی با متن آبی و سرخابی و این چنین رنگ ها. این ترکیب ها نه تنها این خطر را دارند که بازدیدکنندگان مبتلا به کوررنگی اصلاً متن آن ها را نبیند، بلکه بازدیدکنندگان غیر کور رنگ نیز برای خواندن متن باید زحمت زیادی بکشند و ممکن است عصبانی شوند.
ما در اینجا در مورد تأثیرات ناخودآگاه بر مخاطب صحبت نمی کنیم، بلکه در مورد مواقعی صحبت می کنیم که با خطا های آگاهانه مخاطب از شما عصبانی می شود. مانند همین قسمت که با استفاده از رنگ های منفی در طراحی سایتتان شما خواندن مطالب وب سایت را برای آن ها سخت کرده اید. این خطا ها در متن هایی که بر روی تصاویر قرار می دهید، مانند تصاویر هدر بزرگ در بالای صفحه نیز شایع اند. همیشه در همان ابتدا مطمئن شوید که تمام متن روی تصاویر هدر شما با وضوح کامل خوانده می شود.
پس زمینه های چند رنگ
همین هشدار ها برای استفاده از بافت های چند رنگ و استفاده از گرادیان (یک عنصر گرافیکی که در آن رنگ یا تیرگی پس زمینه به تدریج از یک قسمت پس زمینه به قسمت دیگر تغییر می کند) در طراحی وب سایت نیز صدق می کند. بهتر است از استفاده از گرادیان ها برای چندین بلوک متنی در یک صفحه خودداری کنید. همچنین از استفاده از گرادیانی که شامل رنگ متن شما باشد خودداری کنید تا متن شما در فراز و نشیب های رنگی آن گم نشود.
توجه داشته باشید که همیشه متن خود را در کادر ها یا در قسمت های واضح پسزمینه و با رعایت فضای کافی از سایر عناصر بصری قرار دهید تا متن شما به وضوح برجسته شود. رعایت این اصول به مخاطبین شما کمک می کند، که با صفحات شما به خوبی ارتباط بگیرند.
نتیجه:
انتخاب رنگ های درست و بدون بار منفی در طراحی یک وب سایت به وضوح بیش از انتخاب رنگ های مورد علاقه تان اهمیت دارد. زیرا ممکن است رنگ هایی که شما دوست دارید مورد علاقه همه نباشند.
رنگ، ابزار بسیار قدرتمندی برای جذب مخاطب و هدایت او به سمت هدف اصلی سایت است. اگر رنگ ها با دقت استفاده شوند، میتوانند به حرکت بازدیدکنندگان به سمت هدف شما کمک بسیار زیادی کنند. اگر با بی دقت از رنگ ها استفاده کنید، ممکن است بازدیدکنندگان با احساس مبهم و ناراحت در مورد کسب و کار شما مواجه شوند یا حتی از شما عصبانی شده و به سرعت سایت شما را ترک کنند.
هنگام انتخاب رنگ ها نیز بر روی رنگ هایی متمرکز کنید که درک آن ها برای مغز انسان آسان هستند. اگر به یادگیری در مورد نحوه انتخاب رنگ هایی که به خوبی با هم کار میکنند ادامه دهید و رنگ های صحیح را به خوبی با عناصر دیگر ترکیب کنید، یک سایت موفق و جذاب طراحی خواهید کرد.
در طول تاریخ بشریت، نقاشان و سایر هنرمندان به دلیل توانایی در دستکاری رنگ ها، شهرت جهانی کسب کرده اند. در دوران مدرن، این شکل هنری اکنون بسیاری از برنامه های تجاری جدید را در بر می گیرد، ابتدا در تبلیغات و اکنون در طراحی وب که موضوع امروز ماست. با عمق تقریباً بی نهایت، مهارت استفاده از رنگ در بلوک های وب سایت می تواند بی وقفه بهبود یافته و تصفیه شود. ما اصول تئوری رنگ و طرح رنگ برای طراحی سایت را بررسی خواهیم کرد، سپس تأثیرات احساسی برخی از رنگ ها را بررسی خواهیم کرد.
مفاهیم رنگ برای انتخاب بلوک رنگ
موضوع رنگ می تواند به تنهایی یک کتاب کامل را پر کند، بنابراین ما در اینجا به آنچه مربوط به انتخاب بلوک رنگ برای طراحی UI است می پردازیم. ما می توانیم تئوری رنگ را با توجه به طراحی UI وب به سه قسمت تقسیم کنیم:
کنتراست: هر سایه رنگ دارای یک رنگ مخالف است، یک “قوس کمدی” که کنتراست آن بسیار بیشتر از هر رنگ دیگری است. برای یافتن عکس هر رنگ خاص می توانید از دایره رنگ زیر استفاده کنید. به سادگی رنگ را در انتهای مخالف دایره قرار دهید.
مکمل: رنگ ها همیشه با یکدیگر در تضاد نیستند: رنگ های مکمل یکدیگر را کامل می کنند و برعکس تضاد بهترین حالت را به نمایش می گذارند. این ها رنگ های مخالف یکدیگر روی چرخ رنگ هستند، به عنوان مثال، رنگ مکمل بنفش، سبز است.
روانشناسی رنگ: هر رنگ حالات خاصی را ایجاد می کند که شامل رنگ های گرم و روشن (قرمز، نارنجی، زرد) به کاربر انرژی می دهد و آن ها را هوشیار تر می کند، در حالی که سایه های سرد تیره (سبز، آبی، بنفش) سرد تر و آرام تر هستند. CNN برای بالا بردن سطح هوشیاری، از یک بنر قرمز در نوار بالایی خود استفاده می کند، یک تصمیم رنگی متناسب با محتوای اخبار جدید سایت.
تئوری رنگ در طراحی وب چیزی فراتر از یک تزئین بصری است، می تواند تأثیرات تغییر دهنده بازی را بر روی تجارت شما بگذارد.
روانشناسی رنگ: پیامد های احساسی رنگ و انتخاب بلوک رنگ
ارتباط بین احساسات و رنگ ها قابل انکار نیست. در واقع، نژاد بشر از قرون وسطی تأثیر روانی رنگ را ثبت کرده است. به طور طبیعی، هر طراح وب می خواهد این را نیز مهار کند، زیرا رنگ های مناسب باعث ایجاد روحیه و جو مناسب برای سایت شما می شوند. لطفا توجه داشته باشید که فرهنگ های مختلف در سراسر جهان رنگ ها را متفاوت می بینند. ما جنبه های عاطفی را توصیف می کنیم که بیشترین ارتباط را با کلیت دارند.
قرمز
پیامد های احساسی: قدرت، اهمیت، جوانی
محرک ترین رنگ قرمز است. قرمز آنقدر انرژی دهنده است که برای افزایش گردش خون استفاده شده است. قرمز نشان دهنده شور و قدرت، رنگی است که بیشترین توجه را به خود جلب می کند؛ به همین دلیل معمولاً برای هشدار ها و اخطار های مهم مورد استفاده قرار می گیرد.
رنگ قرمز برای وب سایت No Way NSA بسیار مناسب است، هدف آن ایجاد زنگ خطر برای تهدید ادعا شده توسط NSA است. استفاده از رنگ قرمز در قسمت اول سایت تک صفحه ای بسیار هوشمندانه است زیرا توجه را به پیام اصلی جلب می کند در حالی که از نظر فیزیولوژیکی مردم را به “خارج شدن از منطقه خطر” با پیمایش به سمت پایین ترغیب می کند. این البته فقط باعث می شود کاربر با محتوای بیشتری درگیر شود.
با این حال، این می تواند علیه شما مؤثر باشد، زیرا قرمز می تواند خشم یا حداقل تحریک بیش از حد را تحریک کند. اگر می خواهید فضای آرام تری داشته باشید، آن را با کمترین میزان (یا حداقل در سایه روشن) استفاده کنید یا اصلاً از آن استفاده نکنید.
نارنجی
پیامد های احساسی: دوستی، انرژی، منحصر به فرد بودن
نارنجی به عنوان کم رنگ ترین رنگ های گرم، منحصر به فرد همه کاره است. به عنوان یک رنگ اصلی می تواند جذاب و انرژی زا باشد و به عنوان یک رنگ ثانویه نیز این خصوصیات را به روشی محجوب حفظ می کند. نارنجی همچنین به ایجاد احساس حرکت و انرژی کمک می کند.
جدا از اینکه بخشی از سبک برند باشد، نارنجی با سایت خوش قلب و کارتونی فانتا به خوبی کار می کند. این رنگ ضمن حفظ آشنایی، خلاقیت را نشان می دهد.
رنگ زرد
پیامد های احساسی: شادی، اشتیاق، قدمت (سایه های تیره)
زرد یکی از رنگ های متنوع تر است که به سایه بستگی دارد. زرد روشن بدون شدت قرمز، پر انرژی ترین رنگ است. سایه های میانی زرد احساس راحتی می دهند در حالی که هنوز با نشاط اند. سایه های تیره (از جمله طلا) می توانند تصور قدمت را به وجود آورند و هوای بی انتها، خرد و کنجکاوی را به وجود آورند.
در مثال بالا از آژانس طراحی وب Flash Media، سایه تیره رنگ زرد انرژی، کنجکاوی و اقتدار را به وجود می آورد. این برای شرکتی که از نظر ارزش مشاوره و مهارت خود رشد می کند بسیار منطقی است.
رنگ سبز فاصله بین رنگ های گرم و سرد را از بین می برد، گرچه بیشتر به رنگ سرد است. این بدان معنی است که رنگ سبز همان اثرات آرامش بخش آبی را دارد، اما هنوز برخی از کیفیت های انرژی زرد را حفظ می کند. به همین ترتیب، جو بسیار متعادل و پایداری ایجاد می کند. سایه های تیره بیشتر احساس پول / ثروت را ایجاد می کنند که می توانید با Ameritrade در بالا ببینید.
مانند زرد، معنای آبی بسته به سایه بسیار متفاوت است. همه بلوز ها به طور جهانی آرامش بخش و ایمن هستند، اما سایه های روشن تر دوستانه به نظر می رسند در حالی که تیره ترها خواب آلودتر به نظر می رسند. سایت های رسانه های اجتماعی مانند توییتر و فیس بوک از سایه های روشن و متوسط استفاده می کنند، در حالی که وب سایت های سازمانی رنگ سایه های تیره را از قدرت و قابلیت اطمینان ترجیح می دهند. در واقع بسته به نوع وبسایتتان رنگ آبی برای بلوک ها می تواند عالی یا افتضاح باشد.
Van Vliet & Trap، آژانس طراحی رویداد ها، هوشمندانه از رنگ آبی تیره استفاده می کند. با استفاده از رنگ آبی در گل ها، آن ها بصری به تخصص خود در طراحی گل اشاره می کنند در حالی که اعتماد و اطمینان را نیز از خود نشان می دهند. این کاملا منطقی است زیرا آن ها برنامه هایی مانند عروسی را که دارای دید زیاد (و تا حدودی اعصاب خرد کن) هستند برنامه ریزی می کنند.
رنگ بنفش
پیامد های احساسی: لوکس، عاشقانه (سایه روشن)، رمز و راز (سایه های تیره)
بنفش که از نظر تاریخی با سلطنت همراه است، رنگ لوکس بودن را حتی تا حد انحطاط حفظ می کند. بنفش به طور کلی تجمل و ثروت را نشان می دهد و آن را به یک انتخاب محبوب برای کالا های لوکس و مد (و حتی شکلات، مانند مثال Cadbury در بالا) تبدیل کرده است. سایه های روشن تر مانند اسطوخودوس (با رنگ صورتی) رمانتیک در نظر گرفته می شوند، در حالی که سایه های تیره لوکس و مرموز تر به نظر می رسند.
سیاه
پیامد های احساسی: قدرت، جنون، پیچیدگی
قوی ترین رنگ خنثی، سیاه تقریباً در همه وب سایت ها وجود دارد. بسته به رنگ های پشتیبانی کننده می تواند ویژگی های متفاوتی به خود بگیرد یا در صورت استفاده بیش از حد بر همه آن ها تسلط یابد. قدرت آن در میان خنثی بودن، آن را به رنگ انتخاب بلوک های طولانی متن تبدیل می کند، اما به عنوان یک رنگ اصلی می تواند احساس لک، پیچیدگی یا حتی بدی را ایجاد کند.
برای بیشتر بلوک های رنگ وب سایت ها، رنگ سیاه برای ایجاد یک احساس فوری از پیچیدگی و بی انتها استفاده می شود. احساس ظرافت به ویژه هنگامی که با قلم سفید ترکیب شده و در برابر یک طرح مینیمالیستی قرار می گیرد و به خوبی احساس می شود، همانطور که می توانید در زیر سایت Bose “رویا و رسیدن” را ببینید.
سفید
پیامد های احساسی: تمیزی، فضیلت، سادگی
سفید در اکثر فرهنگ ها بیشترین ارتباط را با فضیلت، خلوص و برائت دارد. سایت های مینیمالیست و ساده انگار اغلب از آن به عنوان پس زمینه استفاده می کنند. با جلب توجه کمتری از همه رنگ ها، رنگ سفید بهترین رنگ برای برجسته کردن رنگ های دیگر صفحه است.
این به ویژه برای وب سایت هنرمند Kaloian Toshev که برنده عوام است، به خوبی کار می کند. پس زمینه سفید در حالی که هاله ای از ظرافت گالری هنری ایجاد می کند، توجه او را به آثار هنری پر جنب و جوش جلب می کند.
خاکستری
ترویج می کند: بی طرفی، رسمیت
در حالی که در برخی شرایط خاص ممکن است ملموس یا غم انگیز به نظر برسد، اما رنگ خاکستری یک انتخاب محبوب برای رنگ بلوک ها است برای این که سنتی یا حرفه ای به نظر برسید. با این حال، یکی از بزرگترین مزایای خاکستری در تغییر رنگ این است- تغییر سایه می تواند ترکیبی از خواص سفید و سیاه را به شما ارائه دهد، ابزاری قدرتمند در دستان ماهر.
پس زمینه خاکستری awwwards هنگامی که با رنگ های روشن تر جفت می شود و در یک UI مسطح ارائه می شود بسیار مدرن تر از حالت خواب آلود است.
عاجی
پیامد های احساسی: راحتی، ظرافت، سادگی
از نظر عاطفی، عاجی (و کرم) تغییرات جزئی روی رنگ سفید است.
عاجی نسبت به رنگ سفید گرمتر (یا کمتر استریل) دیده می شود و باعث آرامش بیشتر آن می شود در حالی که هنوز جنبه های مینیمالیستی و مکمل دیگری را از خود نشان می دهد. از عاج باید به جای رنگ سفید استفاده شود تا کنتراست بین آن و رنگ های تیره تر شود. برای هنر موجود در سایت قهوه من، یک شاخه نارنجی / قهوه ای به زمینه کرم (که به نظر می رسد مایل به خاکستری است) اضافه می شود تا حس گرما ایجاد کند.
طرح بلوک های رنگ
هر سایت دارای یک طرح رنگ است، رنگ های اصلی که برای بلوک های اصلی وبسایتتان استفاده می کند. همانطور که در مورد آن بحث کردیم، استفاده مکرر از این رنگ ها به طور ناخودآگاه بر ذهن و روحیه کاربر تأثیر می گذارد، بنابراین آن ها را به خوبی انتخاب کنید. اگرچه روش های مختلفی برای ترکیب رنگ ها با هم وجود دارد، اما ما به 3 مورد موفق و رایج خواهیم پرداخت:
سه گانه: سه گانه ابتدایی ترین و متعادل ترین سه ساختار است. با استفاده از احساسات و مکمل ها، اما از کنتراست پیچیده تر، ساختار سه گانه ایمن ترین و مطمئن ترین طرح است. در چرخ رنگی 12 مرحله ای، هر سه رنگ واقع در 120 درجه از یکدیگر را انتخاب کنید: یک رنگ برای پس زمینه و دو رنگ برای محتوا و پیمایش.
ترکیب مکمل: طرح بعدی کمی پیچیده تر می شود، اما اگر به خوبی انجام شود می تواند مناسب باشد. این مفهوم از چهار رنگ استفاده می کند: دو جفت متضاد و دو جفت مکمل.
متشابه: سر انجام طرح مشابهی وجود دارد که منحصراً روی رنگ های مکمل متمرکز است. این یکی واقعاً نشاط رنگ های انتخاب شده برای بلوک ها را برجسته می کند، به عنوان مثال، یک طرح مشابه قرمز نارنجی و زرد بسیار پرانرژی و سرزنده به نظر می رسد. در حالی که کشیدن این طرح نسبتاً آسان است، این ترفند در تصمیم گیری برای استفاده از رنگ و نشاط رنگ است، زیرا اغراق آمیز خواهد بود.
آنچه که ما در مورد آن صحبت کردیم، فقط مبانی چگونگی افزایش تئوری رنگ در طراحی رابط کاربری شما است، اما محدودیتی در نحوه عمیق رفتن با رنگ در سایت خود وجود ندارد. اگر می خواهید بیشتر بدانید، می توانید این موضوع را در Smashing Magazine بررسی کنید که چگونه بلوک های رنگ خود را انتخاب کنید.
ابزار های کمکی برای انتخاب بلوک های رنگ
خوشبختانه، ابزار های زیادی وجود دارد که به شما کمک می کنند تئوری رنگ را عملی کنید. این پالت های رنگی از پیش ساخته شده را بررسی کنید تا نیازی به شروع از ابتدا نباشد.
Adobe Color CC – این ابزار قبلاً با نام Kuler شناخته می شد، یکی از معتبر ترین ابزار های کمک رنگ موجود است.
Paletton– اگر به ابزاری برای سرعت یا سهولت استفاده ساده نیاز دارید، این حداقل ابزار می تواند به شما کمک کند. عالی برای مبتدیان
Flat UI Color Picker – در حالی که فقط برای طراحی های UI تخت است، این ابزار همچنان یک ابزار مفید و مناسب برای انتخاب بلوک رنگ است.
سخن آخر
درک اساسی در مورد استفاده از رنگ یک شرط اساسی برای طراحی وب است. همانطور که قبلاً توضیح دادیم، رنگ ها وزن اضافی زیادی را به همراه دارند که گاهی اوقات مورد توجه قرار نمی گیرند. مهم نیست که چه رنگ هایی را برای بلوک انتخاب می کنید، آن ها تأثیر مشخصی در طراحی دارند- از برقراری ارتباط با کنتراست یا تشابه، تا برانگیختن احساسات دقیق.
یکی از مهم ترین مواردی که در هنگام طراحی وب سایت باید به آن توجه کنید، استفاده از رنگ هاست. اگر وقت تان را صرف انتخاب رنگ های تصادفی کنید، نتایج خوبی به دست نمی آورید. انتخاب ضعیف رنگ حتی می تواند بر قابلیت استفاده کلی سایت شما تاثیر منفی بگذارد. به همین دلیل طراحی رنگ بسیار مهم است.
خوشبختانه چندین ترفند وجود دارد که می توانید با استفاده از آن ها بهترین رنگ را برای وب سایت خود انتخاب کنید. در این مقاله ما در مورد اهمیت انتخاب رنگ وب سایت صحبت خواهیم کرد و در سه مرحله به شما کمک می کنیم تا رنگ های مناسب وب سایت خود را انتخاب کنید.
چرا رنگ ها در طراحی وب سایت اهمیت دارند؟
شما ممکن است رنگ ها را فقط یک عنصر پس زمینه برای وب سایت هایی که استفاده می کنید و ایجاد می کنید بدانید.
پالت رنگی مناسب می تواند به افزایش خوانایی کمک کند: رنگ هایی که انتخاب می کنید، نقش قابل توجهی در مورد خوانایی محتوا دارند.
رنگ های متضاد می توانند عناصر اساسی را برجسته کنند: استفاده از تضادهای رنگی برنامه ریزی شده، می تواند به برجسته شدن عناصر کمک کند. به عنوان مثال Calls-to-Action معمولاً دارای رنگ های پررنگ است تا توجه شما را جلب کند.
رنگ های مکمل زیبا هستند: استفاده از پالت رنگی متناسب و دلپذیر چشم کاربر را خسته نمی کند و برای او جذاب است.
رنگ ها می توانند به بخشی به یاد ماندنی از برند شما تبدیل شوند: برخی از رنگ ها مانند پس زمینه قرمز کوکاکولا به یاد ماندنی شد اند.
چگونه رنگ های مناسب برای طراحی وب سایت خود انتخاب کنیم؟
نکاتی که می خواهیم در مورد آن صحبت کنیم، در مورد انواع طراحی نه فقط وب سایت ها کاربرد دارند. اگر می خواهید بیشتر یاد بگیرید، باید به مفاهیم کنتراست، مکمل و سرزندگی در طراحی بپردازید.
مرحله 1: یک رنگ غالب برای طراحی خود انتخاب کنید
تقریباً همه وب سایت ها از یک رنگ غالب استفاده می کنند. یک مثال عالی برای این مرحله، فیسبوکاست که از رنگ آبی به طور عمده در سراسر سایت استفاده کرده است.
این مسئله تنبلی نیست؛ بلکه استفاده از همان رنگ برای عناصر اصلی وب سایت شما، به ایجاد تجربه بهتر کمک می کند. از همه مهم تر، زمانی که یک رنگ اصلی انتخاب کردید، ایجاد یک پالت رنگ بسیار ساده تر خواهد شد. به هر حال، شما به طور تصادفی رنگ انتخاب نمی کنید، بلکه گزینه هایی را انتخاب می کنید که با رنگ اصلی شما مرتبط باشند.
این که چه رنگی را به عنوان رنگ غالب خود انتخاب می کنید یک سلیقه کاملا شخصی است. اما خوب است بدانید که افراد رنگ های مختلف را با احساسات و اعمال خاص مرتبط می کنند.
سبز: بیشتر اوقات از رنگ سبز برای انعکاس سلامتی و طبیعت استفاده می شود.
قرمز: رنگ قرمز یک رنگ پر انرژی است که برند ها معمولاً از این رنگ برای تحریک به خرید، استفاده می کنند. زیرا رنگ قرمز نوعی احساس ضرورت برای خرید ایجاد می کند.
آبی: این رنگ احساس اطمینان و امنیت را القا می کند.
مرحله 2: رنگ های مشابه با رنگ اصلی خود را پیدا کنید
وقتی رنگ اصلی را انتخاب کردید، وقت آن است که رنگ های ثانویه متناسب را انتخاب کنید. یکی از روش های انجام این کار، یافتن رنگ های مشابه است. این ها رنگ هایی شبیه سایه اصلی هستند که می توانید از آن ها برای ایجاد تن رنگی درخشان تر استفاده کنید.
در بیشتر موارد ما توصیه می کنیم که از حداقل یک تن رنگی مشابه در کل طراحی استفاده کنید. بهترین راه برای انتخاب این تن رنگ ها، استفاده از ابزار رنگ (color wheel tool) است.
استفاده از ابزار رنگ به شما در یافتن رنگ های مشابه کمک می کند. کافی است رنگ اصلی خود را پیدا کنید و به دنبال رنگ های مشابه با آن باشید.
هر ابزار رنگی آنلاین کد های HEX و RGB خاصی را در اختیارتان قرار می دهد که می توانید از آن ها برای پیاده سازی رنگ های انتخابی در وب سایت خود استفاده کنید.
مرحله 3: به دنبال رنگ های متضاد باشید تا عناصر مهم را برجسته نشان دهید
در تئوری رنگ، سایه هایی با کنتراست بالا را رنگ های مکمل می نامند. برای یافتن رنگی که رنگ اصلی شما را تکمیل کند، فقط نگاهی به سمت مخالف دقیق چرخ رنگ بیندازید:
رنگ های مکمل میزان کنتراست بالایی را ارائه می دهند. به همین دلیل می توانند تاثیر بصری قوی ای ایجاد کنند. اگر می خواهید پالت خود را گسترش دهید، می توانید از دو رنگ مجاور مکمل تن اصلی خود استفاده کنید. با این کار سه مکمل برای انتخاب خواهید داشت. به عنوان مثال، اگر رنگ آبی تیره را به عنوان رنگ اصلی خود انتخاب کنید، رنگ های مکمل شما: نارنجی، زرد و سایه تیره تر از نارنجی خواهد بود.
نتیجه گیری
وقتی صحبت از طراحی وب می شود، رنگ ها اهمیت بالایی پیدا می کنند. حتی اگر صفحات شما جذاب باشد، باید مطمئن شوید که هر عنصر توجه بازدید کنندگان را جلب می کند، بنابراین از رنگ های مناسب استفاده کنید. نحوه ترکیب رنگ های شما روی واگنش های مثبت کاربران شما تاثیر می گذارد.
برای انتخاب رنگ مناسب برای وب سایت خود، مراحل زیر را دنبال کنید:
برای طراحی های خود یک رنگ غالب انتخاب کنید.
رنگ هایی پیدا کنید که رنگ اصلی شما را تکمیل کنند.
برای برجسته سازی عناصر مهم، به دنبال رنگ هایی باشید که با تن اصلی رنگ شما تضاد داشته باشند.
امیدوارم مطلب نحوه انتخاب رنگ مناسب سایت برایتان مفید باشد. موفق و پیروز باشید.🙂🌹
