آموزش رایگان طراحی بصری - قسمت سوم: تعادل Balance

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

......

مقدمه ای بر تعادل:

کلمه "تعادل" در خیلی از نوشته‌ها استفاده میشه و کاربرد های زیادی هم داره؛ مثلا تعادل تو رژیم غذایی یا هم‌معنی با عدالت تو سیستم قضایی ویا حتی ایستادن روی دوپا! تعادل به‌طور معمول چیز خیلی خوبیه. برای همینه تو خیلی جاها هیچکس نمیخواد ذره‌ای از عدالت و تعادل غافل بشه.. همین مسئله تو طراحی هم صادقه. تعادل یکی از عوامل تعیین‌کننده میزان مطلوبیت طرح شماست.

تو دنیای فیزیکی، اجسامی که وزن یکسانی دارن، در یک مقیاس خاصی بین خودشون تعادل برقرار میکنن؛ اما تو طراحی میزان تعادل تحت‌تاثیر توزیع یکنواخت وزن بصریه! یعنی هرچقدر وزن‌بصری هدفمندتر تو صفحه پخش بشه، تعادل هم بیشتره =)


وزن بصری(Visual weight)

یک توپ بسکتبال و یک توپ بولینگ رو در نظر بگیرین. بر اساس اندازه‌ی نسبی هردو، انتظار میره وزنشون هم یکی باشه! درحالیکه تجربه ثابت‌کرده اینطور نیست و وزن یک توپ بولینگ خیلی سنگین‌تر از یک توپ بسکتباله.


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

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

وزن‌بصری در حقیقت همون وزنی از عنصر هست که مخاطب درک‌میکنه یا به اصطلاح لاتین Perceived weight که مقیاسی هست برای اندازه‌گیری میزان تفاوت یک عنصر در مقایسه با بقیه عناصر؛ البته از دید مخاطب!


عوامل موثر بر وزن بصری

وزن‌بصری میتونه با تغییر در فاکتورهایی مثل اندازه، رنگ، تضاد(کنتراست) و یا تراکم یک عنصر تغییر کنه!بیاین همه‌ی این عوامل رو برابر فرض کنیم. حالا می‌تونیم تاثیر هرکدوم از این عوامل رو بسنجیم(به تنهایی)

  • تغییرات وزن‌بصری بر اساس اندازه(مقدار): موثرترین عامل در میزان افزایش یا کاهش وزن‌بصری، اندازه‌س!همونطور که در تصویر پایین می‌بینید، مربع سمت چپ وزن بصری بیشتری نسبت به مربع سمت راست داره.


  • تغییرات وزن‌بصری بر اساس رنگ: رنگ نقش کمتری در تغییرات وزن‌بصری داره(نسبت به اندازه!) درک ما از رنگ در حقیقت تناسب رنگ اصلی یک شی با رنگ‌های اطرافش هست. در مثال زیر، مربع قرمز توجه مارو جلب میکنه چون وزن بصری بیشتری نسبت به مربع زرد داره. البته تو مثال بعدی می‌بینید که این مسئله همیشه هم صدق نمیکنه!


  • تغییرات وزن‌بصری بر اساس تضاد(کنتراست): با استفاده از همون مربع‌های رنگی مثل نمونه قبلی، می‌تونیم ببینیم که چطور کنتراست می‌تونه درک ما از رنگ رو به شدت تغییر بده. یه پس‌زمینه قرمز تیره باعث کاهش کنتراست برای مربع سمت چپ(مربع قرمز) و در مقابل، افزایش کنتراست برای مربع سمت راست(مربع زرد) میشه. که همین مسئله توجه مارو به سمت مربع سمت راست یا زرد جلب میکنه، نه؟


  • تغییرات وزن بصری بر اساس تراکم: با وجود اینکه اندازه، رنگ و کنتراست هر دو مربع برابره اما مربع راست به دلیل داشتن تراکم بیشتر نسبت به مربع چپ، وزن بصری بیشتری هم داره(perceived density).

در این مقاله می‌تونید در ارتباط با تاثیر فضای سفید بر تعادل بخونید( البته اگه فعلا نمیتونید با اصطلاحات انگلیسیش ارتباط بگیرید، هیچ اشکالی‌نداره! چرا که در چند هفته‌ی آینده ترجمه میشه و در صفحه‌مون قرار میدیم=) )

خب تا اینجا تو هرکدوم از این مثالها دیدیم که تغییرات جزئی در اندازه، رنگ، کنتراست یا تراکم چطور می‌تونه رو وزن‌بصری یک عنصر در صفحه‌ی شما تأثیر بذاره. در ادامه خواهیم‌دید، این فاکتورها می‌تونن برای ایجاد حس تعادل در طرح شما باهم ترکیب بشن یا نه؟ نظر شما چیست؟! =)


تعادل در مقابل تنش

بدون حضور عامل تعادل، تنش‌بصری به‌وجود میاد که براحتی می‌تونه بر نحوه‌ی درک دیگران از طرح ما تاثیر بذاره(منظور از تنش همون بی‌تعادلی یا عدم‌تعادله)

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

در طرح اصلی وزن بصری بطور مساوی بین هر دو بخش صفحه تقسیم شده.(اینجا رو ببینید)

نظر خیلی ها در مورد اینکه تصویر دوم بهتر از تصویر اوله، مثبته!؛ چون مغز ما تمایل و گرایش بیشتری به تعادل داره تا تنش. این به این معنی نیست که کلا نباید تنش ایجاد کرد، بلکه باید با احتیاط و هدفمند از ازش استفاده کرد.

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

در اینجا رنگ اصلی که نشون دهنده‌ی تنش یا عدم تعادله، نارنجیه. یه طراح ممکنه برای ایجاد تعادل یا تنش بصورت همزمان، مراحل زیرو طی کنه:

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


چهار نوع تعادل

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

  • تعادل به سبک متقارن یا رسمی(متداول): مثال‌های زیادی در طبیعت هستن که دلالت بر تقارن دارن مثل چهره ی انسان یا نقوش بال پروانه ها. تعادل متقارن (رسمی) با انعکاس‌دادن اشیاء در یک یا چند محور انجام میشه. در زیر مثالی از تقارن بازتابنده رو باهم میبینم که در اون دو جسم یکدیگر رو در یک محور عمودی بازتاب میدن.


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


  • تعادل به سبک غیرمتقارن یا غیر رسمی(غیرمتداول): عدم تقارن رو هم میتونیم تو طبیعت ببینیم مثل درختان یا سازه‌های سنگی. بر اساس تعریف کلمه "عدم تقارن" نشون‌دهنده عدم برقراری تقارنه. با این حال، تعادل رو میشه با عناصر نامتقارن هم ایجاد کرد.

در مقابل تقارن که ممکنه یه ذره یکنواخت باشه، میتونیم از عدم تقارن استفاده کنیم تا یک طراحی پویاتر و سرزنده تر داشته باشیم. در مثال بالا، ریکاردو مستر یک طراحی دلپذیر و منسجم با تعادل نامتقارن رو بهمون نشون میده.


  • تعادل شعاعی: تعادل شعاعی(یا دایره وی) زمانی بوجود میاد که عناصر نسبت به نقطه‌کانونی ظاهر میشن. از این روش میشه برای جلب‌توجه به مرکز طراحی هم استفاده‌کرد.

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


  • تعادل موزائیک: تعادل موزایک (یا اصطلاحا کریستالوگرافی) رو میتونیم "آشوب سازمان‌یافته" هم معنی‌کرد. این نوع تعادل از یک الگوی تکراری پیروی میکنه که سهم همه‌ی عناصر در اون برابره.

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


نتیجه گیری

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

هنگام طراحی یک طرح، یک قدم جلو برید و از خودتون بپرسید که آیا ترکیب کلی طرح حس تعادل داره یا نه؟!

اگر یک عنصر توجهی بیش از حد از مخاطب جذب میکنه و این خواسته ما نیست؛ پس با تغییر تو عواملی مثل اندازه، رنگ، کنتراست و تراکم میشه وزن‌بصری رو بصورت یکسان بین عناصر پخش کرد.

چهار نوع از تعادل در طراحی وجود داره که سه نوع از تقارن، نامتقارن و موزاییک در طراحی رابط کاربر متداول ترن؛ اما این نباید باعث بشه که شما تعادل شعاعی رو تو طراحیاتون امتحان نکنید. هر نوع از تعادل قابلیت ترکیب شدن با دیگری رو داره و این امر میتونه تولد یک طراحی سرزنده و خلاقانه رو سبب بشه!

***

و بله! این دفترم به اتمام رسید اما حکایت همچنان باقیه! اما چند نکته درادامه..

یک» من صرفا مترجم این مقاله هستم و مطلب اصلی رو میتونین در این لینک ببینید. و برای مطالعه بیشتر در این‌ زمینه میتونین به این لینک‌ها هم سر بزنید:

https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/

https://lisacharlotterost.de/2014/06/18/Tension-and-Balance-in-Graphic-Design/

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

سه» از آقای محمد شریفی، هم‌تیمی من، که در ویراست این مقاله کمکم کردن تشکر میکنم.

اگر فکر میکنین دوستان و همکارانتون به خوندن این مطلب علاقه دارن، براشون بفرستین! لطفا حتما نظراتتون، چه انتقاد و چه پیشنهاد، رو هم برامون بنویسید:) با آرزوی بهترین ها