معمولاً موضوع کنتراست برای مبتدیان محفوظ است. کتاب‌ها می‌گویند “سیاه و سفید کنتراست دارند، قرمز و نارنجی ندارند” – اما چیزهای بسیار بیشتری در آن وجود دارد.
کتاب‌های مبتدی معمولاً فقط به تضاد رنگ می‌پردازند، اما تضاد اندازه و شکل چطور؟ اغلب ساده ترین راه برای تشخیص یک طراح آماتور از یک طراح حرفه ای این است که به استفاده آنها از کنتراست نگاه کنید.
ایجاد ساختاری با اهمیت با استفاده از اندازه، شکل و رنگ چیزی است که به صفحه تأثیر و خوانایی به خواننده می‌دهد.
در این پست، می‌خواهیم کنتراست را با جزئیات بررسی کنیم، تایپوگرافی بزرگ، اشکال بد بو، شکاف‌های واضح، تصاویر، و نحوه تطبیق آنها با یکدیگر با استفاده از کنتراست برای یک تجربه کاربری خوب را بررسی کنیم.
مقدمه ای بر کنتراست
کنتراست را می‌توان تعریف کرد به‌عنوان “ تفاوت در ویژگی های بصری که باعث می شود یک شی (یا نمایش آن در یک تصویر) از سایر اشیاء و پس زمینه متمایز شود. متفاوت از یکدیگر.»
برای طراحان در همه زمینه ها، به ویژه طراحان وب، تضاد ریشه تقریباً همه چیز است. ما دائماً در تلاش هستیم تا سلسله مراتب مهمی را ایجاد کنیم، افراد را به مناطق خاصی از یک صفحه بکشانیم و پیامی واضح و مختصر را در قلب کار خود منتقل کنیم. ایجاد روابط بین عناصر مختلف یک طراحی تقریباً مهمترین کاری است که می توانید انجام دهید. احتمالاً قبلاً این کار را بسیار انجام داده اید، آگاهانه یا نه.
نمونه‌های آشکار کنتراست سیاه و سفید، بزرگ و کوچک، سریع و آهسته، ضخیم و نازک هستند. متضادها ساده‌ترین راه برای درک کنتراست هستند، اما هنگام اعمال کنتراست در کار طراحی، هرگز کاملاً سیاه و سفید نیست. اگر تعجب می‌کردید، از آنجایی است که ضرب‌المثل در مورد «سیاه و سفید» بودن یک موقعیت می‌آید، که همچنین منجر به این می‌شود که چیزی «منطقه خاکستری» است. در طراحی، ما اغلب چیزهایی را با هم مقایسه می کنیم که متفاوت هستند، اما مخالف هم نیستند، به عنوان مثال یک H1 و یک h1، یا یک دکمه “افزودن به سبد خرید” و یک دکمه “بررسی کردن”. اینجاست که سطوح کنتراست بیشتری وارد عمل می شود.
بیایید نگاهی به انواع مختلف کنتراست و چند نمونه از نحوه استفاده از آنها در طراحی وب بیاندازیم.
کنتراست رنگ
متداول ترین مثال از همه، تقریباً همه چیز از اینجا شروع می شود. اگر دو رنگ با یکدیگر متفاوت باشند (مثلاً سیاه و سفید)، کنتراست بالایی دارند، در حالی که اگر بسیار شبیه (قرمز و نارنجی) باشند، کنتراست پایینی دارند.
TekRoc از کنتراست رنگی بسیار واضح در اینجا با قرار دادن تصویر روشن و پر جنب و جوش در بالای پس‌زمینه بسیار تاریک استفاده می‌کند. رنگ های نارنجی و آبی روشن به وضوح خودنمایی می کنند و چشم بلافاصله بیش از همه چیزهای دیگر در صفحه به سمت آنها کشیده می شود.
Tim Van Damme از تضاد رنگی در طراحی سایت GoWalla استفاده فوق العاده ای می کند. نه تنها حاشیه چند رنگ در بالای صفحه برجسته می‌شود و با متفاوت بودن از پس‌زمینه کم‌رنگ، جذابیت بصری ایجاد می‌کند، بلکه سایه‌های ریزش بسیار ظریف 1 پیکسلی را نیز به متن روی دکمه‌ها اضافه کرده است. نارنجی کمی تیره تر واقعا به ایجاد کنتراست بین متن سفید و پس زمینه نارنجی کمک می کند.
Envato استاد کنتراست ظریف است و احتمالاً می‌توان روند استفاده از حاشیه‌های 1px را بیش از هر کس دیگری به آن واگذار کرد. همه سایت های آنها دارای چندین حاشیه تک پیکسلی برای ایجاد کنتراست بین بخش ها هستند. در تصویر بالا، دو ناحیه محتوا را می‌توان تنها با فاصله یا یک خط تقسیم کرد، اما با استفاده از دو خط (یکی تاریک، یکی روشن) کنتراست ظریفی بین دو بخش ایجاد می‌کنند که بسیار مؤثر است.
کنتراست اندازه
متداول ترین شکل بعدی کنتراست استفاده از اندازه است. چیزی بزرگ در کنار چیز کوچک به طور کلی نشان می دهد که مورد بزرگتر بسیار مهمتر است. درست است، ما می گوییم که اندازه مهم است!
MadeByWater مجموعه طراحی جردن ویتانوف است. او از تضاد اندازه با تایپوگرافی بسیار بزرگ استفاده می کند تا فوراً نقل قولی از بروس لی را منتقل کند که مشخص می کند چرا او نام MadeByWater را برای خود انتخاب کرده است.
28Thiers یک بار مجلل جذاب در فرانسه است. وب سایت آنها از تضاد اندازه استفاده زیادی می کند تا توجه شما را فوراً به عکس بزرگ مارتینی با مواد مختلف اطراف آن جلب کند. فوراً مشخص می شود که این مهمترین عنصر در صفحه است و طراح از شما می خواهد که به آن تصویر نگاه کنید و با توجه به اینکه یک موسسه بسیار درجه یک است به فروش برسید.
SlideScreen از کنتراست اندازه در سایت خود استفاده های متعددی می کند. آنها علاوه بر اینکه محصول خود را با یک اسکرین شات بزرگ نمایش می دهند، از دکمه های بسیار بزرگ نیز برای فراخوانی اولیه خود استفاده می کنند. آنها از شما می خواهند که ویدیوی محصولشان را در عمل تماشا کنید و سپس از شما می خواهند که آن را دانلود کنید. اینها مهمترین عناصر صفحه هستند، بنابراین به طور قابل توجهی بزرگتر از سایر موارد اطراف آنها هستند.
تضاد شکل
تضاد شکل به این معنی است که چیزها را با تفاوت در شکل فیزیکی در مقایسه با سایر موارد موجود در صفحه قابل توجه کنید. در ابتدایی‌ترین سطح خود، می‌توان از آن در مواردی مانند افزودن گوشه‌های گرد به دکمه‌ها استفاده کرد، اما در سطوح شدیدتر می‌توان توجه بیشتری را به خود جلب کرد.
Anebstar از کنتراست شکل برای نمایش سه تصویر مهم در هدر استفاده می کند. از آنجایی که بیشتر چیزهای موجود در وب مستطیل شکل هستند، یکی از ساده ترین راه ها برای دستیابی به تضاد شکل، استفاده از دایره است. البته این مثال همچنین دارای کنتراست کمی در اندازه است، اما شما به وضوح می توانید ببینید که چگونه عناصر دایره ای از هر چیز دیگری در صفحه متمایز هستند.
Carbonmade یک سایت خیره کننده با ترکیبی واقعی از تصاویر زرق و برق دار و محتوای خوب ارائه شده است. یک دکمه ثبت نام ساده در اینجا کار می کرد، اما اندازه و تضاد رنگ احتمالاً آن را به اندازه کافی از پس زمینه شلوغ متمایز نمی کرد. افزودن یک اختاپوس دوستانه در پشت دکمه واقعاً به آن تفاوت در شکل می دهد تا چشم را مستقیماً به سمت آن بکشد.
WireframePlus از یک کنتراست شکل ساده اما بسیار مؤثر برای برجسته کردن قیمت خدمات خود استفاده می کند. آنها از شما می‌خواهند که محتوای آنها را بخوانید، اما مهمتر از همه، سعی می‌کنند با قرار دادن یک دایره بزرگ در پشت آن، شما را با قیمت عالی خود بفروشند.
کنتراست موقعیت
ایجاد کنتراست در موقعیت یابی روشی بسیار منظم برای ایجاد سلسله مراتبی از عناصر صرفاً با استفاده از ترازهای مختلف است. در زمان‌های اخیر، این تکنیک توسط افرادی مانند الیوت جی استاکز که در جدیدترین سایت نمونه کار خود تا حد زیادی از آن استفاده کردند، محبوب شده است.
Elliot Jay Stocks از یک شبکه دقیق برای تعریف تراز همه عناصر در سایت خود استفاده می کند. توجه به نواحی خاصی که به ترتیب به سمت چپ یا راست قرار می گیرند، جلب می شود. در این اسکرین شات خاص، پاراگراف مقدماتی واقعاً خودنمایی می‌کند، زیرا در سمت چپ قرار دارد، جایی که چشم ابتدا به دنبال خواندن چیزی است. این نوع هم‌ترازی، بسیاری از طراحان دیگر را در دوازده ماه گذشته «الهام‌بخش» کرده است تا طرح‌هایی با کنتراست موقعیتی با همان سبک ایجاد کنند.
SimpleBits برندی است که دن سدرهولم با آن کار می کند، ممکن است او را از پروژه هایی مانند Dribbbleبشناسید. الف>. در اولین برداشت سایت SimpleBits به نظر نمی رسد که کنتراست موقعیتی داشته باشد، اما وقتی شروع به پیمایش کنید، همه چیز مشخص می شود. در جایی که برخی از افراد از یک تصویر پس‌زمینه ثابت برای ایجاد جلوه‌ای شیک استفاده می‌کنند، دن لوگو و ناوبری خود را کاملاً در موقعیت خود ثابت کرده است به طوری که صرف نظر از اینکه به کجا بروید، همیشه در همان مکان روی صفحه باقی می‌مانند. این یک مثال عالی از کنتراست موقعیتی غیر استاندارد است.
SquaredEye فروشگاه طراحی است که توسط متیو اسمیت اداره می شود و صفحات مطالعه موردی در نمونه کار او استفاده فوق العاده ای از کنتراست موقعیت دارند. شما باید کل صفحه را ببینید تا واقعاً ایده را دریافت کنید، اما اساساً متیو به دقت موقعیت خاصی را برای هر بخش از صفحه ایجاد کرده است. این امر کنتراست فوق العاده ای را بین بخش ها ایجاد می کند و بدون ایجاد حواس پرتی، علاقه بصری زیادی را برای خواننده ایجاد می کند.
نتیجه گیری کنتراست
تضاد بسیار بیشتر از “روشن و تاریکی” وجود دارد – این یکی از مهم ترین اصول در طراحی است و تقریباً هرگز نمی توانید مقدار زیادی از آن داشته باشید، مشروط بر اینکه از آن به درستی استفاده کنید.
بردن طرح‌های خود به سطح بعدی به معنای یافتن واگن باند بعدی برای استفاده از گوشه‌های گرد و سایه‌ها برای همه چیز نیست، بلکه در مورد یافتن راه‌های بهتر و کارآمدتر برای برقراری ارتباط پیام در پشت است. طرح.
کاوش کنتراست با جزئیات و استفاده از آن تا حد امکان یکی از بهترین راه‌ها برای انجام این کار است.
نظر شما چیست؟ چقدر به کنتراست در طراحی های خود توجه می کنید؟ آیا این چیزی است که همیشه به آن فکر می کنید یا چیزی است که به طور طبیعی اتفاق می افتد؟
بدون دیدگاه