ساخت قالب های متوازن زیبا با طراحی نامتقارن

نظرتون درباره طراحی نامتقارن چیه؟ همین سوال ساده کلی بحث بین طراح ها بوجود آورده. طراحی نامتقارن یکی از پیچیده ترین روشهاست اما اگه کسی بتونه خوب اجراش کنه طراحی زیبا و چشم نوازی از آب درمیاد.
از نظر لغوی، نامتقارن یعنی هر چیزی که تقارن نداشته باشه یا دو طرفش با هم برابر نباشن. پس اونطور که بعضی ها فکر میکنند، نامتقارن بودن یه چیز دلیل بر نامتوازن بودنش نیست. طراح ها میتونن از طراحی نامتقارن استفاده کنند و توازن و هماهنگی بین دو طرف طراحی بوجود بیارن، بدون اینکه دو طرف قرینه هم باشند. اگه علاقه مندید بدونید چطور میشه این کارو انجام داد با این مقاله از دارکوب همراه باشید.

چرا بی­ تقارنی؟

عدم تقارن میتونه یکی از مؤثرترین مفاهیم طراحی به شمار بیاد. این روش جالب هم جلب توجه میکنه و هم بیننده رو به فکر میندازه.
چون استفاده ازش یکم به مهارت نیاز داره بعضی از طراح ها از انجام کارهایی که کاملا بی­ تقارن­ اند خودداری میکنند. اما شما خودتونو از این تجربه محروم نکنید. هر طراحی از عهده این مدل طراحی برمیاد، فقط کافیه با برنامه پیش برید.
بهتره با ترکیب و هماهنگ کردن مفاهیم متقارن و نامتقارنِ یک پروژه طراحی شروع کنید. اگه طراحی رو به بخش های کوچیکتر بشکنید، میبنید که بعضی از قسمتها مدلهای مختلفی از توازن رو نشون میدن. (مثلا پنل های سایتهای پارالاکس یا طراحی تصویر روی پارچه)
به این هم فکر کنید که چرا میخواهید از طراحی نامتقارن استفاده کنید. اگه بدونید میخواهید با تصاویر چی کار کنید، میتونید بهترین بهره رو از روشهای موجود ببرید. عدم تقارن فعال و چشم گیره. هر چند ممکنه سنگین باشه اما در عوض طبیعیه. فقط باید به حس خودتون اعتماد کنید و هر کاری به نظرتون درسته انجام بدید.
دستیابی به توازن جادو میخواد. طراحی غیرمتقارن خوب توازن داره و در نتیجه هیچ کدوم از اجزا برای بقیه سنگینی نمی­کنه. برای بوجود آوردن این توازن میتونید وجود عناصر رو با فضای خالی جبران کنید، با حرکت حس تأکید ایجاد کنید، وزن رو بشناسید و با رنگ تمرکز رو به سمت خاصی بکشید و برای ساماندهی و ایجاد تراز از گرید استفاده کنید.

1- استفاده از فضای خالی

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

2- تأکید بر حرکت

فرض کنید یه چرخ داره از یه تپه به سمت پایین حرکت میکنه. وقتی بهش نگاه کنید فورا متوجه حرکتش میشید. طراحی حرکت به روش نامتقارن هم همین حس رو ایجاد میکنه.

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

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

3- رنگ و تمرکز

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

4- گرید

با اینکه تو طراحی نامتقارن دیگه با استفاده از گرید تصاویر متقارن درست نمیکنیم ولی همچنان گرید بخش مهمی از پروسه طراحی رو شامل میشه. استفاده از گرید در طراحی نامتقارن میتونه برای ایجاد توازن و سازماندهی طراحی بهتون کمک کنه.
همونطور که برای سایر کارها جای تک تک عناصر رو روی گرید مشخص میکنید، در طراحی نامتقارن هم همین کارو انجام بدید.
گرید رو بعنوان مقیاس در نظر بگیرید – اگه یه عنصر به یه سمت اضافه کردید باید در سمت دیگه هم یه چیزی بذارید تا اثر اون رو خنثی کنه. برای ایجاد بی­تقارنی تعداد ستونهای گرید رو فرد در نظر بگیرید؛ در یه سمت گرید عناصری رو بذارید که با عرض ستون برابر باشند و در سمت دیگه عرض عناصر دو برابر باشه (یعنی هر عنصر دو ستون رو بگیره).
میتونید با استفاده از گرید عناصر متقارن و نامتقارن رو با هم ترکیب کنید و در عین حال یه طراحی سازماندهی شده و مرتب داشته باشید. مثلا وقتی در وسط صفحه نمایشگر یه متن راست چین شده داشته باشید خودش یه عدم تقارنه. اما در کنار همین بی تقارنی میتونید فهرست بالا و پایین صفحه و متن اصلی رو در یک خط منظم قرار بدید.

5- وزن ایجاد کنید

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

نتیجه

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