پث‌وایز

هنر، طراحی و عکاسی · ۱۲ درس‌ها

اصول طراحی بصری (Visual Design Fundamentals)

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

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

آخرش می‌تونی

یاد گرفتن دیدن

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

  1. سلسله‌مراتب بصری (Visual Hierarchy): اول به چی نگاه می‌کنم؟

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

  2. کنتراست: چیزهای متفاوت رو واقعاً متفاوت کن

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

  3. هم‌ترازی و نزدیکی

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

چیدمان

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

  1. فضای خالی و یه سیستم فاصله‌گذاری

    فضای خالی ابزاره، نه اسراف. می‌فهمی چه کاری برای صفحه می‌کنه و به‌جای فاصله‌های دل‌بخواهی، چندتا پله‌ی ثابت می‌ذاری که همه‌جا از همون‌ها استفاده کنی.

  2. گرید و تعادل

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

  3. ترکیب‌بندی و نقطه‌ی کانونی (Focal Point)

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

رنگ و فونت

رنگ و فونت رو عمدی انتخاب کن، نه با حال‌وهوا، و مطمئن شو نتیجه‌ش رو همه واقعاً می‌تونن بخونن.

  1. تئوری رنگ: فام، اشباع و روشنایی (Color Theory: HSL)

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

  2. ساختن یه پالت

    «این رنگ‌ها رو دوست دارم» رو تبدیل می‌کنی به یه مجموعه‌ی کوچیک کارراه‌انداز: یه رنگ برند، دو تا خنثی، یه رنگ تأکید، که با قانون ۶۰-۳۰-۱۰ پخش می‌شن و با نسبت کنتراست خوانا چک می‌شن.

  3. تایپوگرافی‌ای که خوب خونده می‌شه

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

تمرین

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

  1. چطور یه طرح رو نقد کنی

    «یه جاش می‌لنگه» رو تبدیل می‌کنی به چیزی که بشه درستش کرد. چهار قدم: توصیف کن چی هست، هدف رو بگو، بگو چی خوب کار می‌کنه، بعد همون یه تغییری رو بگو که بیشتر از همه مهمه.

  2. یه پوستر بساز، قدم به قدم

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

  3. ده اشتباه رایج طراحی و چک‌لیست بازبینی (Design Mistakes & Audit Checklist)

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

فقط نخونش، نگهش دار

پث‌وایز هر ایده رو درست قبل از اینکه فراموشش کنی با یه سؤال کوتاه برمی‌گردونه. رایگان روی اندروید و وب، به فارسی و انگلیسی.

Cafe Bazaar Myket باز کردن نسخه‌ی وب