انتخاب رنگ در طراحی سایت و تاثیر آن در جذب کاربر

چرخ رنگ در طراحی قالب وردپرس

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

بیشتر بخوانید: آموزش ارزیابی و بررسی تعامل کاربران در وردپرس با Google Analytics

نمونه‌ای از اصول و قواعد رنگ در چرخ رنگ

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

مهم‌ترین مفاهیم چرخ رنگ در طراحی قالب وردپرس

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

رنگ‌های اصلی

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

رنگ‌های ثانویه

اگر دورنگ اصلی قرمز و آبی را باهم ترکیب کنیم، چه رنگی دیده می‌شود؟ بنفش. درست است بنفش یکرنگ ثانویه است. رنگ‌های ثانویه از ترکیب رنگ‌های اولیه ایجاد می‌شوند. رنگ‌های اولیه مدنظر ما رنگ‌های مدل RGB هستند.

رنگ‌های ترکیبی

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

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

رنگ‌های مکمل

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

رنگ‌های مشابه

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

بیشتر بخوانید: معرفی بهترین افزونه های صفحات فرود وردپرس 2022 

مدل رنگ در طراحی قالب وردپرس

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

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

بیشتر بخوانید: افزونه ویژگی های پیشرفته محصولات ووکامرس Jc Woocommerce Advanced Attributes

مدل رنگ RGB

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

رنگ‌های اصلی در این مدل قرمز سبز و آبی هستند. نام مدل هم برگرفته از حروف اول این کلمات در زبان انگلیسی است. محدوده هر رنگ در این مدل ۲۵۶ واحد است که به آن سطح روشنایی رنگ هم میگویند. البته شما این مقدار را به‌صورت ۰-۲۵۵ در سیلدرهای رنگ تجربه می‌کنید. هرزمانی که به کاهش این مقدار در یک سیلدر بپردازد رنگ نتیجه، متفاوت خواهد شد. همچنین با تنظیم سه سیلدر رنگی در همین محدوده رنگ‌های جدیدی را تجربه خواهید کرد.

مثلاً رنگ قرمز در سیلدرهای سه‌گانه مدل رنگ RGB به این صورت خواهد بود.

Red=  R: 255   G: 0   B: 0

Red=  (۲۵۵، ۰، ۰)

مدل رنگ HEX

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

مثلاً رنگ قرمز در مدل رنگ HEX به این صورت خواهد بود.

#FF0000

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

# FF 00 00

خب در ابتدا هم گفتم می‌توانید به‌سادگی علامت # را از مفهوم رنگ اختصاصی خود جدا کنید. میدانید که در بیان همه رنگ‌ها این مدل رنگی از همین علامت استفاده می‌کنیم. ولی نکته مهم تقسیم ۶ کاراکتر باقی‌مانده به سه قسمت است. در مدل رنگ RGB هم شما با سه سیلدر، متغیر رنگ را تعریف می‌کردید. بله این سه متغیر مدل رنگ HEX همان متغیرهای RGB هستند و دقیقاً هم به همان ترتیب.وقتی شما از مدل رنگ HEX استفاده می‌کنید گستره اعداد شما بر مبنای هگزادیسمال اعلام می‌شود. این گستره با علائم زیر معرفی می‌شود.

۰ , ۱ , ۲ , ۳ , ۴ , ۵ , ۶ , ۷ , ۸ , ۹ , F , E , D , C , B , A

اگر نخواهیم وارد مفاهیم مبنای عددی هگزادیسمال بشویم، صریحاً باید بگویم: پس عبارت FF معادل عدد ۲۵۵ در مدل رنگ RGB است. صفر هم که معادل همان صفر است. حالا اگر شما بخواهید رنگ سبز را در مدل رنگ HEX تعریف کنید کافی است به‌صورت زیر بنویسید

#۰۰FF00

بیشتر بخوانید: فیلتر پیشرفته با افزونه YITH WooCommerce Ajax Product Filter Premium

ابزار کار پیشنهادی مدل رنگ

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

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

بیشتر بخوانید: افزونه Super Carousel | افزونه سوپر کاروسل – ایجاد اسلایدر پیشرفته و ریسپانسیو