نحوه انتخاب بهترین طرح های رنگی وب سایت (2022)
نحوه انتخاب رنگ برای وب سایت
چه در حال ساختن نام تجاری سایت جدید خود از ابتدا هستید، یا در حال تجدید نظر در پالت وب سایت فعلی خود هستید، این راهنما به شما کمک می کند تا طرح رنگی مناسب را انتخاب کنید. ما شما را با بهترین رنگ ها برای وب سایت ها آشنا می کنیم و به شما کمک می کنیم رنگی را پیدا کنید که با شخصیت و سبک منحصر به فرد سایت شما مطابقت دارد.
به هر حال، رنگ جنبه عظیم برندسازی است. آیا تا به حال متوجه شده اید که تقریباً هر رستوران فست فود از رنگ قرمز و زرد در لوگوی خود استفاده می کند؟ به این دلیل است که اینها با هم گرسنگی و دوستی را تشویق می کنند. نارنجی به معنای سرگرم کننده و دوستانه است، آبی قابل اعتماد است، و سبز نشان دهنده طراوت و طبیعت است، در حالی که سیاه نشان دهنده تجمل یا ظرافت است.
پس میخواهید برندتان چه بگوید؟ برای یافتن بهترین رنگها برای وبسایتها و اینکه کدام یک باید شخصیت برند خود را بسازید، بخوانید.
همانطور که اشاره کردیم، رنگ ها می توانند احساسات خاصی را در بینایی ایجاد کنند. پشت روانشناسی رنگها چیزهای زیادی وجود دارد – میتوانید اینفوگرافیک موجود در این صفحه را برای باز کردن بستهبندیهای جالب برندهای مختلف و رنگهایی که استفاده میکنند و همچنین احساساتی که برانگیخته میشوند، بررسی کنید.
ممکن است فکر کنید که رنگها بر شما تأثیر نمیگذارند، اما از دیدن تفاوتی که انتخاب رنگ میتواند در نتیجه شرکت ایجاد کند، شگفتزده میشوید. در واقع، 85 درصد از مردم ادعا کردند که رنگ تأثیر عمده ای بر خرید آنها دارد.
وقتی برخی از شرکتها رنگهای دکمههای خود را آزمایش کردند، متوجه افزایش یا کاهش شدید در تبدیلهای خود شدند. به عنوان مثال، Beamax، شرکتی که صفحه نمایش های پروجکشن را تولید می کند، متوجه افزایش عظیم 53.1 درصدی کلیک روی پیوندهایی شد که قرمز بودند در مقابل پیوندهایی که آبی بودند.
و این فقط کلیک نیست – یک مطالعه انجام شده در مورد تأثیر ذهنی رنگ ها نشان داد که رنگ ها به طور متوسط 80٪ شناخت برند را افزایش می دهند. به عنوان مثال، به کوکاکولا فکر کنید، و احتمالا قوطی های قرمز پر جنب و جوش آن را تصور خواهید کرد.
با این حال، این را به این معنی نگیرید که قرمز پادشاه است، زیرا هیچ قانون واقعی برای این وجود ندارد. اگر سایت شما عمدتا قرمز است، دعوت به اقدام قرمز چندان برجسته نخواهد بود، بنابراین میخواهید تا زمانی که ترکیبی را پیدا کنید که برای شما مناسب باشد، با رنگها بازی کنید.
چگونه یک طرح رنگی برای وب سایت خود انتخاب کنید
ابتدا باید درک خوبی از آنچه می فروشید/ارائه می کنید به دست آورید. اگر میخواهید به تصویری باکیفیتتر و با کیفیتتر دست پیدا کنید، بنفش رنگ مورد علاقهتان است، زیرا مردم آن را با حق امتیاز، کیفیت بالا و جذابیت مرتبط میدانند.
با این حال، اگر به دنبال دستیابی به مخاطبان گستردهتری هستید، آبی رنگی آرامبخش و ملایم است که برای موضوعات حساستر، مانند مراقبتهای بهداشتی یا مالی، مناسب است.
رنگ اصلی را انتخاب کنید
بهترین راه برای تصمیم گیری در مورد رنگ اصلی این است که به حال و هوای محصول یا خدمات خود فکر کنید و رنگ هایی را که متناسب با آن رنگ هستند را مطالعه کنید تا رنگ مورد علاقه خود را پیدا کنید. در اینجا چند نمونه آورده شده است:
قرمز: کوکاکولا یا نینتندو – دلالت بر هیجان یا شادی دارد
نارنجی: Nickelodeon یا Fanta – به این معنی است که یک زمان دوستانه و سرگرم کننده در پیش است
زرد: نیکون یا مک دونالد – دلالت بر خوش بینی و شادی دارد
سبز: غذای کامل یا سیاره حیوانی – دلالت بر طراوت و طبیعت دارد
آبی: Walmart یا American Express – دلالت بر قابلیت اطمینان و اطمینان دارد
بنفش: Hallmark یا Cadbury – به برندی متمایز اشاره دارد که سابقه کیفیت دارد
قهوه ای: نسپرسو یا یو پی اس – به معنای محصولی قابل اعتماد است که می تواند توسط هر کسی استفاده شود
مشکی: شانل یا آدیداس – دلالت بر تجمل یا ظرافت دارد
سفید: اپل یا نایک – به محصولات شیک و کاربرپسند اشاره دارد
اگر از قبل یک لوگوی رنگی دارید، منطقی است که یک رنگ اصلی داشته باشید که با برند فعلی شما مطابقت داشته باشد. نام تجاری نینتندو بسیار قرمز است، و این در صفحه اصلی آنها مشاهده می شود.
رنگ نینتندو
این احتمالا سادهترین مرحله است، زیرا احتمالاً از قبل ایدهای دارید که میخواهید وبسایتتان چه رنگی باشد. فقط مطمئن شوید که کد هگز را ذخیره کرده اید!
رنگ های اضافی خود را انتخاب کنید
زمان آن رسیده است که رنگ های دیگری را که استفاده می کنید انتخاب کنید. یک نقطه شروع خوب در اینجا، در نظر گرفتن تعریف های رنگی است. هر رنگی مشابهی دارد که آن را “پاپ” می کند، و اینها به عنوان تعارف رنگ شناخته می شوند.
به عنوان مثال، یک دایره قرمز در پس زمینه سبز کمی بیشتر از یک دایره آبی در پس زمینه سبز ظاهر می شود. اما دایره آبی در پس زمینه نارنجی بسیار بهتر و واضح تر به نظر می رسد.
بنابراین اگر از یک وبسایت عمدتا سبز استفاده میکنید، ایده خوبی است که فراخوانهای قرمز رنگ را اجرا کنید، یا از قرمز برای برجسته کردن ویژگیهای مهمی که میخواهید چشم هر خوانندهای را به خود جلب کنید، استفاده کنید.
سعی کنید فقط یک یا دو رنگ در بالای رنگ اصلی خود داشته باشید. بیشتر از آن، و شما با درهم ریختگی دست و پنجه نرم خواهید کرد. اگر بازدیدکنندگان را با محرک های مختلف غرق کنید، هیچ چیز به خوبی برجسته نخواهد شد.
رنگ گوش
نمونه خوب استفاده از رنگ های اضافی سمعک برند Eargo است. رنگ اصلی آن نارنجی است، بنابراین از آبی کدرتر برای برجسته کردن این بخش مهم از وب سایت خود استفاده کرده است. با توجه به آنچه در مورد تعارفات رنگی می دانیم، می توانیم متوجه شویم که این آبی و نارنجی روشن چگونه در مقابل یکدیگر تضاد دارند. رنگ نارنجی همچنین باعث میشود عناصر مهمی مانند دکمه «افزودن به سبد خرید» و لوگو ظاهر شوند.
استفاده از چرخه رنگ به شما کمک می کند رنگ هایی را پیدا کنید که با هم کار می کنند. رنگ های مکمل دقیقاً در مقابل یکدیگر قرار دارند و سه رنگ اصلی روی نقاط مثلث قرار دارند.
رنگ پس زمینه را انتخاب کنید
این یک انتخاب مهم است، زیرا پسزمینه وبسایت شما از نظر تئوری فضای بیشتری را نسبت به هر رنگ دیگری اشغال میکند. با این حال، انتخاب آسانی است، زیرا واقعاً به دو گزینه خلاصه می شود.
برای تقویت برند خود، میتوانید به سراغ نسخهای خاموشتر از رنگ اصلی خود بروید. برای نمایش متن به یک پوشش سفید یا خاکستری روی پسزمینه نیاز دارد.از طرف دیگر، میتوانید تمام وبسایت را به رنگ سفید مایل به سفید درآورید که رایجتر است.
پس زمینه WBE
به وب سایت خودمان نگاه کنید تا ببینید یک پس زمینه خالی و خاکستری چه چیزی را برجسته می کند.
رنگ فونت را انتخاب کنید
آخرین توقف در سفر رنگارنگ شما این است که یک رنگ فونت را مشخص کنید. ممکن است انتخاب آسانی داشته باشید و رنگ مشکی را انتخاب کنید، اما در اینترنت جستجو کنید، و متوجه خواهید شد که حروف سیاه صرفاً آنقدر که فکر میکنید رایج نیستند.
یک حروف سیاه روی پسزمینه سفید میتواند منجر به خستگی چشم شود، زیرا تضاد 100٪ وجود دارد – و اگر خواندن وبسایت شما دشوار باشد، احتمال اینکه افراد روی آن کلیک کنند، بیشتر میشود.
در حالی که حروف رنگی واضح باید برای پیوندها و اطلاعات مهم در نظر گرفته شود، می توانید از رنگ خاکستری استفاده کنید تا ظاهری نرم تر و جذاب تر به وب سایت خود بدهید. فضای زیادی برای آزمایش وجود ندارد، اما می تواند ارزش رنگ آمیزی متن خود را برای آن لمس نهایی داشته باشد.
فونت پنگوئن
نگاهی گذرا به این صفحه در وبسایت Penguin Books نشان میدهد که آنها رنگ خاکستری ملایمتری را برای متن خود انتخاب کردهاند. این بسیار کمتر از کنتراست سیاه و سفید تهاجمی است و به شما اجازه می دهد حال و هوای ملایم تری داشته باشید.
نکاتی برای انتخاب رنگ وب سایت
در حال حاضر، متوجه خواهید شد که وب سایت شما از چه نوع رنگی استفاده خواهد کرد. در اینجا چند نکته اضافی برای زمانی که رنگ ها را در نظر می گیرید آورده شده است.
از اشباع ثابت استفاده کنید
یکی از کارهایی که می توانید برای تقویت برند خود انجام دهید، استفاده از رنگ های مختلف با اشباع مشابه است. اشباع روش دیگری برای بیان روشنایی رنگ است. نگاهی به استفاده شرکت نوشیدنی Innocent از رنگ بیندازید.
رنگ معصوم
در اینجا آنها دارای شش رنگ مختلف هستند، اما هیچ یک از آنها احساس نابسامانی یا کثیفی ندارند. این به این دلیل است که اشباع آنها به همان سطح کم می شود و باعث می شود احساس سازگاری داشته باشد.
از همان رنگ استفاده کنید، اما میزان اشباع را تغییر دهید
هنگامی که یک برند با یک رنگ خاص ارتباط قوی دارد، ممکن است نخواهد از آن منشعب شود. با این حال، تک رنگ بودن همه چیز می تواند کمی خسته کننده شود، بنابراین گرفتن رنگ اصلی و بازی با اشباع آن می تواند سرگرم کننده باشد.
رنگ های TechCrunch
هر پنج رنگ سبز مشابه هستند، اما سطوح روشنایی متفاوتی دارند. اینها جلوه های بصری صفحه را تغییر می دهند، در حالی که این ایده را تقویت می کنند که سبز روشن تر مترادف با TechCrunch است.
منابع مفید برای کمک به شما در پیدا کردن و انتخاب رنگ
اگر برای شروع به جستجوی رنگ ها آماده هستید، از کجا شروع می کنید؟ زمانی که یک چرخ رنگ به شما داده می شود، میخ زدن به یک سایه می تواند مشکل باشد. بیشتر اوقات، چیزی را انتخاب میکنید که کاملاً متفاوت به نظر میرسد
به همین دلیل است که ابزارهای تخصصی وجود دارد که به شما کمک می کند تا یک طرح رنگی برای وب سایت خود انتخاب کنید. یک مثال Coolors است – وب سایتی که به شما کمک می کند یک طرح رنگی از پیش ساخته شده را بگیرید و آن را در وب سایت خود پیاده سازی کنید.
رنگ ها
همچنین Color Safe، وبسایت دیگری که به شما امکان میدهد رنگها را بر اساس نوع تولید مرور کنید و به شما امکان میدهد قرمز یا سبز کامل را پیدا کنید.
رنگ ایمن
هنگامی که یک پالت را فرموله کردید، می توانید وب سایت خود را در checkmycolours.com وارد کنید، که وب سایت شما را تجزیه و تحلیل می کند و به شما بازخورد فنی می دهد که چگونه طرح رنگ شما برای کسانی که کور رنگی یا مانیتور ضعیفی دارند، موثر است.
نحوه انتخاب رنگ برای وب سایت:
در اینجا مراحلی وجود دارد که میمیتوانید خواهید انتخاب رنگ برای وب سایت خود انجام دهید:
رنگ اصلی را انتخاب کنید: رنگی را انتخاب کنید که با انرژی محصول یا خدمات شما سازگار باشد.
رنگ های اضافی خود را انتخاب کنید: یک یا دو رنگ اضافی را انتخاب کنید که مکمل رنگ اصلی شما باشد، در حالت ایده آل رنگ هایی که رنگ اصلی شما را “پاپ” می کنند.
رنگ پسزمینه را انتخاب کنید: رنگی را برای پسزمینه وبسایتتان انتخاب کنید – احتمالاً «تهاجمیتر» کمتر از رنگ اصلیتان.
یک رنگ فونت را انتخاب کنید: رنگی را برای متنی که قرار است در وب سایت شما قرار گیرد انتخاب کنید – به یاد داشته باشید که حروف سیاه و سفید یکدست کمیاب است و توصیه نمی شود.
و از استفاده از منابع مختلف آنلاین برای یافتن ترکیب رنگی عالی خود نترسید – در اطراف چیزهای زیادی وجود دارد که دندان هایتان را در آن فرو ببرید!