رفتن به مطلب
جامعه‌ی برنامه‌نویسان مُدرن ایران

طراحی و توسعه

  • نوشته‌
    9
  • دیدگاه
    5
  • مشاهده
    1,780

مشارکت‌کنندگان این وبلاگ

اصول طراحی: تضاد

تا کنون در مجموعه‌ی مقالات اصول طراحی، در مورد تعادل و رنگ صحبت کردیم. در این بخش این روند را با موضوع تضاد (Contrast) ادامه می‌دهیم. 

تضاد هنگامی رخ می‌دهد که دو عنصر در یک صفحه متفاوت باشند. به عنوان مثال، تضاد می‌تواند خودش را در رنگ‌های متنوع بین متن و رنگ پس زمینه نشان دهد. یا یک عنوان بزرگ و درشت در کنار یک فونت sans-serif برای متن بدنه باشد. یا میتواند تفاوت بین یک گرافیک بزرگ و یک گرافیک کوچک باشد و یا ترکیب یک بافت خشن با بافت ظریف که یک تضاد قابل توجهی ایجاد می‌کند. چشمان ما علاقه‌مند به دیدن تضاد هستند. نکته‌ی حائز اهمیتی که در رابطه با تضاد وجود دارد این است که تضاد باید کاملا چشم‌گیر و غیر جزئی باشد.

۱. تضاد از نظر چشمان ما جذاب است.

یکی از دلایل استفاده‌ی ما از تضاد، چه در چاپ و چه در وب، جلب کردن توجه مخاطب است. سایت Carsonified از تضاد جهت اثرگذاری استفاده می‌کند. این سایت از متن و عکس‌های درشت و بالعکس و ترکیب رنگ‌های متضاد بهره برده است.

Carsonified.png.4026adb544c1645b6480df1317412d07.png

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

michaelfreimuth23.jpg.0fae5ae70ddf4ee7f537c541fe0a9908.jpg

۲. تضاد به سازماندهی اطلاعات کمک می‌کند.

استفاده از تضاد نه تنها سبب جذابیت هر چه بیشتر طراحی می‌شود بلکه به هدف و سازماندهی اسناد وضوح بهتری می‌بخشد. در مجله‌ی منتشرشده در زیر، Studio8 از قوانین تضاد، تعادل (Balance) و مجاورت (Proximity) برای ایجاد صفحاتی غیر معمول و چشم‌گیر استفاده کرده است. عناوین درشت مشکی تضاد جالبی با متن ظریف روشن ایجاد کرده‌اند.

studio804.jpg.85eabb9594da430d084e41fbbc44a162.jpg

در ادامه‌ی مجله، Studio8 صفحات را به دو قسمت تقسیم کرده است که از لحاظ ظاهری کاملا متضاد هم هستند. هر صفحه اطلاعاتی را در مورد محصول‌های جداگانه‌ای می‌دهد که به هم مرتبط هستند. مفهوم این ارتباط توسط علامت '&' ادا شده است. 

Caviar.png.8a2789db02980a098277cdffd207b1a5.png

۳. تضاد سبب ایجاد تمرکز می‌شود.

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

ipod.png.4cfea8266ff3ba3d72c8c337f6272063.png

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

WineBottles.png.d84b055289a11e8647f363ef6e2dd100.png

مواردی که هنگام افزودن تضاد به طرح‌های خود باید به آن‌ها فکر کنید:

۱. چگونه تضاد را ایجاد میکنید؟ از طریق بافت، تایپوگرافی، رنگ یا شکل؟

۲. اگر می‌خواهید از طریق تایپوگرافی تضاد ایجاد کنید، کدامیک از فونت‌ها را استفاده می‌کنید؟ آیا آن‌ها بسیار متفاوت هستند یا فقط کمی با هم تفاوت دارند؟ گزینههای فونت خود را با دقت بررسی کنید اما به خاطر داشته باشید که متن قابل خواندن باشد.

۳. آیا تضاد به کار رفته، ایده‌ی طراحی شما را تقویت می‌کند؟

پی‌نوشت: مقالات و دوره‌های سایت Sitepoint پیشنهاد می‌شوند. با ایجاد حساب کاربری امکانات جذابی در اختیارتان قرار خواهد گرفت.

 

  • پسندیدن 3


1 دیدگاه


نظرهای پیشنهاد شده

نکات جالبی را ارائه دادید! 

در صورت امکان مقاله ای هم درباره همین تضادها درباره GUI در نرم افزارها با متریالهای Design Pattern چه در سیستم عامل های Personal Computer ویا سیستم عامل های Smart Phone ارائه بدید بی نهایت سپاسگزار خواهم شد!

به اشتراک گذاری این دیدگاه


لینک به دیدگاه
مهمان
افزودن دیدگاه

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...