10 طرح رنگ وب سایت پرطرفدار برای سال 2021
- دوشنبه, ۲۲ آذر ۱۴۰۰، ۰۴:۴۲ ب.ظ
هنگام طراحی سایت باید به نکات زیادی توجه کرد. شما فقط باید یک طرح ایجاد کنید، معماری سایت خود را تنظیم کنید، یک فراخوان برای اقدام (CTA) راه اندازی کنید، یک نام دامنه انتخاب کنید و چند چیز را مشخص کنید.
با این حال، طرح رنگ یک وب سایت کاربرد اغلب با تأخیر در نظر گرفته می شود.
بسیاری از صاحبان سایت به انتخاب یک پالت رنگ وب سایت فکری نمی کنند یا اصلا فکر نمی کنند، چه رسد به طرح های رنگی پرطرفدار. آنها فکر می کنند، "رنگ واقعا چقدر برای وب سایت من مهم است؟"
خوب، انتخاب رنگ وب سایت شما بیشتر از آنچه فکر می کنید بر بازدیدکنندگان تأثیر می گذارد. این می تواند یک راه قدرتمند برای برانگیختن احساسات خاص و ایجاد انگیزه در بازدیدکنندگان برای انتخاب باشد.
در واقع، تحقیقات نشان می‌دهد که مردم در عرض ۹۰ ثانیه پس از قرار گرفتن در معرض یک محصول، قضاوت می‌کنند و ۹۰ درصد این قضاوت صرفاً بر اساس رنگ انجام می‌شود. انتخاب رنگ مناسب بر درک خوانندگان از وب سایت و برند شما تأثیر می گذارد.
هنگامی که به خوبی انجام می شود، می توانید خوانایی محتوای خود را افزایش دهید، درک مطلب را افزایش دهید و یادگیری را بهبود بخشید.
رنگ یکی از مهم ترین عواملی است که به وب سایت شما اعتبار می بخشد. به گفته HubSpot، تقریبا نیمی از مردم طراحی وب سایت را به عنوان مهم ترین عامل در تعیین اعتبار یک شرکت ذکر می کنند.
برای طراحی وب سایت خود به کمک نیاز دارید؟
همین امروز برای طراحی وب سایت یا وبلاگ کمک بگیرید.
شروع کنید
دانشگاه تورنتو مطالعه جالبی در مورد رنگ ها و نحوه درک افراد از رنگ ها انجام داده است. آنها به این نتیجه رسیدند که اکثر مردم ترکیب رنگ های ساده را ترجیح می دهند.
در بیشتر موارد، تنها دو یا سه رنگ به عنوان جذاب تلقی می شدند. به همین دلیل است که چسبیدن به یک پالت رنگ برای موفقیت سایت شما و در نهایت موفقیت کسب و کار شما بسیار مهم است.
اما بیش از 10 میلیون رنگ برای انتخاب وجود دارد. به معنای واقعی کلمه بسیار زیاد است. چگونه می توانید تصمیم بگیرید که کدام رنگ وب سایت برای برند شما بهترین است؟
چه در حال طراحی یک سایت جدید از ابتدا باشید یا یک وب سایت موجود که نیاز به بهبود دارد، به جای درستی آمده اید.
این راهنما به شما نشان می دهد که کدام پالت رنگی مرسوم است، بنابراین می توانید رنگ هایی را پیدا کنید که برای برند وب سایت شما مناسب هستند و با رنگ هایی مطابقت دارند که می خواهید مشتریان شما احساس کنند. بیایید به مثالی از یک سایت واقعی نگاه کنیم و برخی از کدهای رنگ دقیق را برای مرجع شما فهرست کنیم.
1. لحن ملایم
رنگ های ملایم قطعا در سال 2020 ترند هستند. Creations Namale یک برند جواهرات مستقر در کانادا است. در اینجا یک اسکرین شات از lookbook 2020 از صفحه اصلی وب سایت است.
رنگ ها کم صدا، مجلل و بسیار جذاب هستند. این انتخاب عالی برای برندهایی در صنعت مد است که جواهرات می فروشند. رنگ های ساده به خوبی با هم هماهنگ می شوند و تصویر جواهرات را برجسته می کنند.
علاوه بر طرح رنگی ساده ای که در این سایت استفاده می شود، طرح بندی نیز همین رویکرد را دارد. فضای خالی به صفحه اجازه تنفس می دهد. در طول این راهنما، متوجه خواهید شد که استفاده از فضای منفی به اندازه رنگ هایی که استفاده می کنید مهم است.
همانطور که می بینید متن حداقلی وجود دارد. بالاخره آنها یک برند جواهرات هستند. آنها مجبور نیستند برای انتقال پیام خود به متن زیادی تکیه کنند و به هر حال مخاطب آن را نمی خواهد.
رنگ‌های ملایم حس تجمل و پیچیدگی را القا می‌کنند. روی صورتت نیست
به جای اینکه تا آنجایی که ممکن است محصولات را در یک صفحه جمع کند، سایت به آنها نزدیک می شود. این به بازدیدکنندگان اجازه می دهد تا هر محصول را یک به یک تجربه کنند. رنگ با پشتیبانی و برجسته کردن تصاویر بدون ایجاد مزاحمت به آنها کمک می کند.
Creations Namale از نسخه کمتر اشباع شده سبز و قهوه ای (دو رنگ زمینی) استفاده می کند. Desaturation یعنی گرفتن رنگ معمولی و خاموش کردن آن. این به برند کمک می کند پیام درست را منتقل کند و توجه را از محصولات خود منحرف نکند.
اگر علاقه مند به استفاده از این رنگ ها در وب سایت خود هستید، کد رنگ ها در زیر آمده است.
2. خاکستری ساده، مایل به سفید و قرمز پاپ
انتخاب رنگ های متنوع همیشه ضروری نیست. پالت رنگی وب‌سایتی که از سایه‌های خاکستری و گاهی اوقات رنگ‌های اصلی برای برجسته کردن چیزی استفاده می‌کند، کمتر حواس‌پرتی را ایجاد می‌کند و به مخاطبان اجازه می‌دهد تا روی آنچه برای شما مهم است تمرکز کنند.
این صفحه را از نمونه کارهای طارق اسماعیل ببینید. طارق یک طراح با تجربه است، بنابراین جای تعجب نیست که او یک طرح و رنگ بندی قدرتمند و در عین حال ساده را برای وب سایت خود انتخاب کرده است.
متن بیشتری در صفحه وجود دارد، اما هنوز هم ساده و آسان برای خواندن است.
طارق به جای استفاده از رنگ سفید خالص، رنگ کمی مایل به سفید را برای ترکیب با پالت خاکستری و قرمز انتخاب کرد. این رنگ سفید به خصوص به شما می آید زیرا در تصاویر این صفحه پیراهن سفید پوشیده اید.
یک اشاره ظریف قرمز در متن در واقع ظاهر را کامل می کند و صفحه ای را که می تواند خسته کننده باشد برجسته می کند.
این کد رنگی است که در سایت طارق استفاده شده است.
اگر به دنبال پالت رنگی هستید که با صفحات حرفه ای، ساده و متن کمی بیشتر به خوبی کار کند، این گزینه عالی است که باید در نظر بگیرید.
3. گرادیان آبی و سبز با متن سفید
Stripe یک گزینه نرم افزار پردازش پرداخت محبوب برای شرکت های تجارت الکترونیک است. به عنوان یک برند فناوری، Stripe باید با آخرین روندهای فناوری همراه باشد. اما آنها همچنین دارای طرح های رنگی وب سایت مد روز هستند.
قبل از اینکه نگاهی به ظاهر وب سایت آنها در امروز داشته باشید، نگاهی به ظاهر سایت آنها در سال 2013 یعنی شش سال پیش بیندازید.
آیا با این طراحی مشکلی دارید؟ در ظاهر، کمی خسته کننده و کسل کننده به نظر می رسد. هیچ چیز واقعاً از نظر بصری جذاب نیست.
اما استرایپ تنظیماتی را انجام داد. پالت رنگ کنونی از تکنیک گرادیان استفاده می‌کند. خودت را بررسی کن
این صفحه آبی‌های زنده را با رنگ‌های فیروزه‌ای روشن و زیبا با رنگ‌های سبز haepo ترکیب می‌کند تا پس‌زمینه‌ای پویا با متن سفید ظاهر شود.
Stripe از یک مقیاس گرادیان استفاده می کند تا رنگ آبی بسیار ساده را با رنگ های دیگر ترکیب کند تا بافت بیشتری برای پس زمینه ایجاد کند.
تفاوت سایت 2013 با سایت 2020 شب و روز است. حتی اگر دو صفحه اصلی را بدون اطلاع از سال مشاهده کرده باشید، میتوانید صفحه جدید را شناسایی کنید.
اگر وب سایت شما در حال حاضر قدیمی است و شبیه یک سایت Stripe مربوط به سال 2013 است، یک گرادیان رنگ اضافه کنید تا به پالت خود ظاهر مدرن تری ببخشید.
4. رنگ های نارنجی و قرمز را عقب نشینی کنید
رنگ های یکپارچهسازی با سیستمعامل در سال 2020 ترند هستند. بسیاری از برندهای معروف از رنگ های محبوب دهه 1970، 80 و 90 در وب سایت های خود استفاده می کنند. اما آنها به آنها یک پیچ و تاب مدرن می دهند.
با ترکیب عناصر رترو با حس مدرن، می توانید جان تازه ای به روندهای قدیمی بدهید. آنها همچنین می توانند احساسات خاص و آشنا را در مخاطب شما برانگیزند، مهم نیست که چه زمانی بزرگ شده اند.
این یک مقدار تناقض است. چگونه یکپارچهسازی با سیستمعامل و مدرن به طور همزمان امکان پذیر است؟
نگاهی به وب سایت Spotify بیندازید.
این رنگ‌های گرم نارنجی و قرمز حالتی رترو دارند، اما طراحی خود بسیار شیک است و از مقیاس گرادیان برای ترکیب رنگ‌ها استفاده می‌کند.
می توانید از بازاریابی نسلی برای تقسیم بندی مخاطبان هدف خود استفاده کنید. این مهم است که بدانید با طرح رنگ وب سایت خود چه چیزی را هدف قرار می دهید. این چیزی بیش از انتخاب طرح های صورتی برای زنان و طرح های آبی برای مردان است.
Spotify این رنگ را انتخاب کرد زیرا می دانست برخی از مخاطبانش افرادی هستند که در دهه 70 و 80 بزرگ شده اند. آنها همچنین می دانند که این رنگ ها برای نسل جوان تر مد هستند.
5. صورتی ملایم، صورتی روشن، مشکی جت
Cowboy با فروش دوچرخه های برقی خود در یک وب سایت مدرن و کمی صورتی، این برند را متمایز می کند. کلمات "کابویی" و "صورتی" معمولاً با هم ادغام نمی شوند، اما طراحی شیک و مد روز این وب سایت برای محصولاتی که به فروش می رساند عالی است.
رنگ صورتی ملایم پس زمینه باعث می شود دوچرخه جت مشکی برجسته شود و در مرکز توجه قرار گیرد. دوچرخه کابوی با افزودن لهجه‌های صورتی روشن در مکان‌های ظریف اطراف صفحه، یک پالت رنگی مدرن و امروزی را تکمیل می‌کند.
علیرغم مفاهیم زنانه صورتی، کابوی ها کاربرانی از هر جنسیت را هدف قرار می دهند. در عوض، آن را با مشکی جفت کنید تا صدایی سرگرم کننده، مد روز و اجتماعی ایجاد کنید.
اگر از این طرح خوشتان می آید و احساس می کنید که به وب سایت شما حسی مدرن می دهد، می توانید هنگام انتخاب طرح رنگ از کدهای رنگی زیر به عنوان مرجع استفاده کنید.
6. خاکستری، زرد ملایم، آبی عمیق
QED Group یک شرکت توسعه سازمانی مستقر در جمهوری چک است که مشتاق به کارگیری مفاهیم در روانشناسی و اقتصاد رفتاری است.
گروه QED فرهنگ و توانمندی شرکت را می شناسد، بنابراین خوب است که یک وب سایت شیک داشته باشید که از ترکیب رنگ های منحصر به فرد به روش های هوشمندانه استفاده کند.
در نگاه اول، پالت رنگ صفحه اصلی آنها کمی شلوغ تر از نمونه های دیگری است که تا کنون به آنها نگاه کرده ایم. اما آنها هنوز هم با این طراحی مد روز کار خوبی انجام می دهند.
به طور کلی، رنگ‌های زرد، آبی و بنفش را به‌عنوان رنگ‌های سخت خوانا و محجوب تصور می‌کنید. میتوانید با استفاده از رنگ خاکستری روشن و ملایم برای پس‌زمینه، رنگ متضاد روشن‌تری به سیلوئت میانی اضافه کنید.
اگر می خواهید ظاهری معاصر در این رنگ های زرد ملایم همراه با خاکستری و آبی تیره داشته باشید، کد رنگ های زیر را بررسی کنید.
7. رنگ زمینی بسیار روشن
برچسب "Olymp" Konstantopoulos SA زیتون یونانی می فروشد. شرکت کاربرد بنابراین، رنگ های خاکی، به ویژه سایه های سبز نزدیک به رنگ زیتونی، برای یک وب سایت مناسب هستند.
طرح و طراحی این صفحه اصلی بسیار ساده است. انتخاب رنگ اصلی در اینجا، البته سبز زیتونی است. اما همانطور که می بینید بسیار کم استفاده می شود.
برداشتی تازه از یک طرح رنگی کلاسیک و در عین حال موثر. به جای استفاده بیش از حد از اشباع دیوار به دیوار سبز تیره، پس‌زمینه خاکستری ملایم، تصاویر، متن و رنگ‌ها را برجسته می‌کند.
اگر دقت کنید، می بینید که برگ های سبز خاموشی در پس زمینه وجود دارد. این به شما کمک می کند متن و لوگوی سبز رنگ خود را برجسته و جلب توجه کنید.
برای مشاغلی که با غذای سالم، گیاهان و کشاورزی سروکار دارند، پالت رنگ Earth Hue یک انتخاب عالی است. به این کدهای رنگ سبز، خاکستری و قهوه ای روشن مراجعه کنید تا ظاهری مشابه در وب سایت خود داشته باشید.
اگر محصول دارای رنگ قابل شناسایی باشد می توان عملیات مشابهی را انجام داد. با پس‌زمینه خاکستری روشن و رنگ کپی خاکستری تیره شروع کنید و کمی رنگ برجسته به آن اضافه کنید. این یک نقطه شروع خوب برای یک طرح رنگی ساده و نه خیلی به هم ریخته است که یک لیفت سریع صورت را با یک رنگ اصلی مشخص و یک رنگ برجسته مکمل ارائه می دهد.
8. رنگ های قرمز زیاد، بی صدا و متعادل
اگر به تمام طرح‌های رنگی وب‌سایت مرسوم که تا کنون به آن پرداخته‌ایم نگاهی بیندازید، متوجه رنگ قرمز محبوب خواهید شد که به ندرت استفاده می‌شود.
زیرا قرمز یکی از قدرتمندترین و در عین حال چالش برانگیزترین رنگ ها برای استفاده در یک وب سایت است. قرمز می تواند بسیار زیاد باشد زیرا به راحتی توجه خواننده را جلب می کند. با این حال، هنگامی که به درستی استفاده شود، می تواند یک راه عالی برای افزایش علاقه به وب سایت شما باشد.
یکی از راه‌های موثر برای استفاده از رنگ قرمز، استفاده از یک لمس ملایم برای رنگ دادن به چیزهایی به کوچکی چند کلمه کلیدی متن است (نمونه کار طارق اسماعیل در شماره 2 را به خاطر دارید؟).
راه دیگر این است که یک رنگ ملایم تر را با قرمز ترکیب کنید. این یک تاکتیک طرح رنگ پیشرفته تر از آنچه در وب سایت طارق دیده ام است.
چندی پیش، آژانس برندسازی خلاق 5/4 حصار را با رنگ‌های قرمز روشن و برنزه و فیروزه‌ای بی‌صدا برای بسیاری از وب‌سایت‌های خود تکان داد.
قرمز در اینجا کارهای سنگین زیادی را انجام می دهد و آبی-سبز خاموش به عنوان یک رنگ برجسته پشتیبانی می شود. اگر در کنار این قرمز، زرد روشن، آبی روشن و نارنجی روشن را انتخاب می کردم، خیلی زیاده روی می کردم.
اما این رنگ ملایم کاملا با قرمز ست می شود. این قرمز واقعاً با این برند همخوانی دارد. روشن، جسور و توجه زیادی به موضوع خلاقیت دارد.
بنابراین، اگر می خواهید رنگ بندی خود را مدرن و جسورانه کنید، توصیه می کنیم از این کدهای رنگی همراه با قرمز در وب سایت خود استفاده کنید.
با قرمز زیاد بزرگ نشوید. می‌خواهید از رنگ‌های ملایم زیادی استفاده کنید تا در عین حال که ظاهری مد روز به‌دست می‌آورید، به صفحه‌تان کمک می‌کند نفس بکشد.
9. پاستیل های آینده نگر و رنگ های اصلی
این لیست بدون مثال Anton & Irene کامل نخواهد بود. اینها طراحان حرفه ای هستند که در نیویورک مستقر هستند. آنها در تمام جنبه های طراحی از جمله محصولات دیجیتال تخصص دارند.
و آنها یک کلاس استاد مطلق در مورد پاستیل و مقدماتی برگزار کردند.
یکی از بهترین چیزهایی که در مورد رنگ بندی این وب سایت وجود دارد، احساس آینده نگرانه آن است. انتخاب لباس آنتون و ایرنه بسیار دور است. این یک انتخاب جسورانه است، اما گاهی اوقات جسورانه ترین انتخاب بیشترین بازده را دارد. در اینجا آنها بدون از دست دادن جذابیت خود از ترکیب های پر زرق و برق استفاده می کنند.
این سایت از رنگ های بیشتری نسبت به نمونه های دیگری که تاکنون دیده ام استفاده می کند، اما به ندرت از آن استفاده می شود، بنابراین صفحات نامرتب یا جذاب نیستند. این در تصاویری که استفاده می کنند نیز منعکس می شود. آنتون رنگ های متضاد بنفش و نارنجی می پوشد و ایرن آبی و زرد می پوشد. آنها متضاد ناقص هستند (مقابل آبی نارنجی و متضاد بنفش زرد است). اما در کل خوب کار می کنند.
اگر به دنبال یک چرخش هنری در طرح رنگ وب سایت خود هستید، این ترکیب های مختلف رنگ های دقیق را امتحان کنید.
10. مشکی روی سیاه روی سیاه
تقریباً در هر وب‌سایتی که تاکنون دیده‌ایم مقداری رنگ سیاه دیده‌ایم، اما به ندرت همیشه از آن استفاده می‌کنیم. معمولاً برای متن رزرو می شود، نه یکی از رنگ ها یا پس زمینه های پیش فرض.
اما این بدان معنا نیست که نمی توانید از رنگ مشکی تیره بیشتری در طرح رنگ وب سایت خود استفاده کنید. این به نشان دادن احساس کلاس، تجمل و حرفه ای بودن کمک می کند، به خصوص در هنگام استفاده از رنگ های مختلف مشکی مانند:
آن را در وب سایت JYBH بررسی کنید. ترکیب سایه‌های مختلف مشکی، افکت گرادیان را که قبلاً در نمونه‌های دیگر دیده بودیم، به شما می‌دهد. درجه بندی مشکی سنگین به سایت ظاهری مرموز و جسورانه می بخشد.
این شرکت یک تولید کننده لباس فرانسوی است که لباس و لوازم جانبی لوکس را برای مردان و زنان می فروشد. مانند مد، مشکی رنگی جاودانه برای طراحی وب است. در طول سال ها محبوب بوده است و در سال 2020 و پس از آن همچنان محبوب خواهد بود.
با این حال، اگر می خواهید وب سایت خود را تیره کنید، از سایه های مختلف مانند مثال بالا برای افزودن عمق و بافت استفاده کنید. رنگ مشکی تکی صاف و ساده به نظر می رسد.
