اصول طراحی آماتور

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

با وجود اینکه اصولِ رنگی‌رنگی و 3-بعدی سال 2006 کهنه شده ولی همچنان خیلی از پست/محتواهایی که می‌بینم دنباله‌روی همون قواعد و مواردن. مثلا تابلوی مغازه‌ها، یا پاورپوینت‌های همکلاسی‌هام که تو کلاس ارائه می‌دن.

دو مورد البته مهم هست که دوست دارم بگم:

1. معمولا دلیل اهمیت ندادن به طراحی اینه که طرف بیشتر ترجیح می‌ده وقتش رو پای خود محتوا بکنه تا ظاهرش، که تا یه جدی منطقیه. مثلا واسه یه ارائه کلاسی نیاز نیست خیلی درگیر طراحی بشین چون در هر صورت همه مجبورن بشینن و بهتون گوش بدن و ارائه‌اتون رو نگاه کنن. اما همیشه اینجوری نیست و وقتی پای جذب کردن مخاطب در میونه، ظاهر به اندازه محتوا (و چه بسا بیشتر!) مهمه. چون اون کشش اولیه‌ای که ایجاد می‌کنه اولین تعامل مخاطب با محتواست. واسه همینه که یه آدم آشغال خوش‌لباس معمولا تعداد آدمای دور و برش بیشتر از یه آدم نسبتا اخلاق‌مدارِ بدلباسه.
2. به نظرم تو خیلی موارد، این کلیشه‌ای بودن خودش لازمه جلورفتن کار و جدی جلوه دادن اون مسئله اس. مثلا توی ادارات، مدارس، بانک و موسسات. چیزی که من حس می‌کنم اینه که همین 20 سال عقب بودن از اصول طراحی، خودش یه نشونه جدی بودن اون مسئله اس. البته که فکر نمی‌کنم عمدی باشه؛ یعنی طرف واقعا ایده‌ای از طراحی نداره و از روی "نتونستن" هست که ظاهر اطلاعیه، اعلانیه، آگهی، ... آدمو یاد ویندوز XP می‌اندازه.

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

1. پایه ها

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

1. مقیاس (scale یا proportions): یعنی اینکه اندازه اجزایی که دارین همخونی داشته باشن. مثلا وقتی دارین نقاشی یه آدم رو می‌کشین کله‌اش از پاهاش بزرگتر نباشه، یا توی یه پوستر اندازه فونتِ تیتر از اندازه فونت یه پاراگراف کوچیکتر نباشه. در کل اینکه از نسبتِ اندازه اجزا آگاه باشین.
2. سلسه مراتب (hierarchy): یعنی اجزای طرحتون بتونن تو یه ساختار عمودی دسته‌بندی بشن. مثلا تو همین مثاله اول مقدمه رو نوشتم، یه پله عمیق تر اولین مورد ("پایه ها") رو نوشتم، خود این اولین مورد پنج تا مورد داره که این دومی‌اشه! یه ساختار درختی و عین اسمش، سلسله‌وار. در کل اینکه از نسبتِ عمودیِ اجزا آگاه باشین.
3. تعادل (balance): این مورد با بعدی‌اش دو روی یه سکه‌ان. تعادل یعنی اینکه همه اجزا در عین تفاوت‌هایی که دارن، یه سری خصایص بنیادی رو به مشترک داشته باشن. یعنی همه اجزا توزیعِ وزن/رنگ/بافت/فضا/اندازه/... متناسبی داشته باشن. یه نمونه خیلی ضایع از این مورد تقارن هست، مثلا تو عکاسی یا نقاشی، اوجِ تعادل! مثلا حین قاب‌بندیِ یه عکس، سه تا سوژه رو بندازیم نیمه چپ ولی نیمه راست فقط فضای خالی باشه، خوب نیست. یا یه فیلمی که یه ساعت اولیش خیلی حوصله‌سربره ولی یه ساعت دومش کلی اتفاق و هیجان داره، تعادل رو رعایت نکرده. اگه من به مثال زدن از این مورد ادامه بدم هم تعادل رو رعایت نکردم چون داره طولانی می‌شه پس بریم بعدی.
4. تضاد (contrast): گفتیم که این مورد با قبلی‌اش دو روی سکه‌ان. این مورد می‌گه در عین حال که همه اجزا یه کلیاتی رو با هم مشترک هستن، باید به تفاوت‌هاشون هم به اندازه کافی اهمیت داده بشه. مثلا اگه داری داستان می‌نویسی تنها تفاوت شخصیت‌هات نباید تفاوت اسم‌هاشون باشه! می‌شه مثلا روی تفاوت‌هاشون توی سلیقه غذایی، لباس پوشیدن و لحن حرف زدن تاکید کرد. این تنوع باعث پویایی می‌شه، و باعث این می‌شه که مخاطب اجزا رو با هم اشتباه نگیره و گم نکنه؛ در نتیجه هر عضوِ طرح هم به تنهایی هدف کوچیکِ مستقل خودشو دنبال می‌کنه و هم در کنار سایر اجزا هدف بزرگتری که کل طرح داره رو.
   از تضاد می‌شه برای مهم جلوه دادن عناصر هم استفاده کرد. مثلا اگه اکثر عناصر یه فرم ثبت نامِ یه صفحه وب روشن هستن، می‌شه اون دکمه آخرِ "ثبت نام" رو یه رنگ مثلا سبز تیره انتخاب کرد که بیشتر به چشم بیاد.
5. گشتالت (Gestalt، هاها): یه کلمه آلمانیه که معنی‌اش می‌شه "کلِ یکپارچه" (و نه، با مورد دوم "تعادل" یکی نیست، هرچند نزدیکن). این مورد بیشتر توی طرح‌های بصری معنی داره، مثلا عکاسی یا نقاشی و این رو می‌گه که با وجود هر تفاوت و فاصله‌ای که اجزا با هم دارن، باید یه کلیتِ مشخص داشته باشن و همگی عضوِ یه کل مشخص باشن مثلا حلقه‌های المپیک یا لوگوی آئودی؛ یه مثال خیلی ساده: فضای منفی. همه اجزای ازهم‌جداافتاده به علاوه همه فضاهای منفی یک شکل رو تصویر می‌کنن.

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

2. از سیاهِ سیاه و سفیدِ سفید استفاده نکنین

به جاش طیف‌های مات‌تری به کار ببرین تا طرحتون جلوه طبیعی‌تری داشته باشه. این بیشتر توی طراحی دیجیتا به کار می‌ره. همین ویرگول رو نگاه کنین، سفیدش سفیدِ سفید(FFFFFF#) نیست. سیاهی که تو تمِ تاریکش هست هم سیاهِ سیاه (000000#) نیست، که خوبه.

2.1. اصلا از سیاه و سفید استفاده نکنین!

اگه وقت و حوصله و دلیل کافی دارین اصلا بهتره که سیاه و سفید خنثی برای تم‌های تاریک و روشن‌اتون به کار نبرین. مثلا می‌شه به جای سفید از یه زرد خیلی روشن استفاده کرد(اونقدر روشن که کسی بهش نگه زرد) یا به جای سیاه از یه آبی سرمه‌ای خیلی تیره! مثلا تم تاریکِ تلگرام سیاه نداره بلکه یه آبیِ اشباع نشده خیلی تاریکه (یعنی saturation اش کمه و illumination اش کم)

2.2 از رنگ‌های موجود توی تصاویرتون استفاده کنین

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

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

واسه این کار می‌شه از color picker استفاده کرد که همه جا هم هست (از اینستاگرام تا paint و Canva)

3. تصمیم گیری

همه جزییات رو تحت نظر داشته باشین و عامدانه تصمیم بگیرین. شاید اول سخت به نظر بیاد ولی رعایت کردن حداقل‌ها زیاد سخت نیست. مثلا شاید حوصله نداشته باشین 100 تا فونت رو چک کنین تا ببینین کدوم به درد فلان پوستر می‌خوره، اما رعایت اینکه همه فونت‌های استفاده از یه خانواده باشن کار سختی نیست. یا مثلا اگه برای قاب‌بندی یه عکس نمی‌تونین تصمیم بگیرین از قرینگی استفاده کنین، راحته و خیلی جاها "کافی" هم هست. یا مثلا متن رو دقیقا وسط صفحه قرار بدین؛ یا مثلا واسه همه کلمات انگلیسی موجود تو یه مقاله فارسی یه فونت و سایز انتخاب کنین. فاصله نوشته‌ها از حاشیه چپ و راست صفحه رو مساوی بذارین، شدتِ گردیِ دکمه‌های یه صفحه وب رو هم اندازه بذارین(نه که یکی خیلی گرد باشه یکی خیلی تیز)، استایل نوشته‌ها رو در نظر داشته باشین(چی bold یا italic یا زیرخط‌دار باشه و چرا)، و امثالهم. از هیچ جزییاتی رد نشین؛ حتی اگه قراره یه تصمیم کلیشه‌ای بگیرین بهش آگاه باشین. در کل اینکه بدونین دارین چه کار می‌کنین و یه حداقل‌هایی رو رعایت کنین.

4. دو یا سه گروه رنگ داشته باشین

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

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

5. ریاضیات

اگه همیشه از ریاضی بدتون می‌اومد و ازش فراری بودید خبر بدیه، چون اینجا هم ولتون نمی‌کنه. همه نسبت‌های موجود باید رُند و محاسبه‌شده باشن. مثلا اگه اندازه فونت عنوان 48 و اندازه فونت نوشته اصلی 24، یه نسبت دو-به-یک هست(نکته: نسبت عجیب غریب هم استفاده نکنین مثلا 1 به 8.43). بنابراین برای نوشته‌ی کم‌اهمیت‌تر همین نسبت باید حفظ شه، مثلا زیرنویسِ عکس‌ها باید نصف 24 باشه (که می‌شه چند؟?). این مسئله برای همه اجزا صادقه : اندازه و وزن فونت، فاصله از حاشیه‌های صفحه، فاصله بین خطوط و بین حروف و بین کلمات و هر چیزی که می‌شه اندازه گرفت.

6. تیرگی = عمق

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

7. تنوع فونت

بیشتر از دو خانواده فونت باعث هرج و مرج و گیج شدن مخاطب می‌شه. می‌تونیم یکی از دو نوع خانواده فونت رو برای عنوان‌ها و دیگری رو برای متن‌ها بدنه استفاده کنیم. این مورد توی نوشتارهای انگلیسی با sans serif و serif هم استفاده می‌شه. یعنی متن‌های بدنه که طولانی‌تر هستن زبونه‌دار باشن که چشم راحت روی کلمات بلغزه(یعنی چشم "کلمه به کلمه" نخونه. بلکه چند کلمه چند کلمه از روش رد شه) و عناوین بدون زبونه باشن که مخاطب مجبور شه به تک‌تک کلمات توجه کنه. ما توی فارسی زبونه نداریم اما می‌شه فونت‌های کوچیک‌تر و به‌هم‌چسبیده‌تر و خواناتر رو برای متن بدنه انتخاب کرد.

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

** اصلاح! **

فرهاد گفت که اینجا رو برعکس نوشتم. یعنی توی متن نوشتم "متن‌های بدنه که طولانی‌تر هستن زبونه‌دار باشن".

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

فکر میکنم بهتره به جای اینکه نوشته‌ها رو تغییر بدم تا همخونی داشته باشن، این رو اضافه کنم:

1. قانونی در کار نیست. حداکثر پیشنهادن.

2. توقعی نیست که پیشنهاد اجرا و درنظر گرفته بشه.

3. هدف کلی اینه که عنوان "کلمه کلمه" خونده بشه و برای چشمِ خواننده سرعت‌گیر باشه؛ ولی برای بدنه متن اینجوری نباشه و چشم راحت بلغزه و "عبارت عبارت" یا چند کلمه به چند کلمه متن رو بخونه. یه نمونه دیگه هم محض اطمینان می‌ذارم:

8. ساده رو بکن تو پیچیده، پیچیده رو تو ساده

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

هر دو مورد تو این عکس هست. بالا سمت چپ کلمه Canva خیلی رنگ‌ووارنگه و gradient داره پس روی زمینه سفید و ساده قرار داده شده. در مقابل اون Thanks for 15 billion designs! روی یه زمینه‌ی عجیب غریبه و طراحی متنش کاملا سفید و ساده اس. اینجوری هم عمق ایجاد می‌شه هم خوانایی بالاتر می‌شه و هم کنتراست خوبی بین متن و زمینه‌اش درست می‌شه.

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

پاورقی اینکه احتمالا اگه تو عنوان پست از کلمه "دیزاین" استفاده می‌کردم حرفه‌ای‌تر به نظر می‌رسید ولی همینیه که هست.

امیدوارم به درد بخوره؛ خوش بگذره.