پث‌وایز

اصول طراحی بصری (Visual Design Fundamentals) · درس ۱۱ از ۱۲ · ۱۲ دقیقه

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

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

مرحله‌ی ۱

اول محتوا، همیشه

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

تست هر آیتم: اگه یه رهگذر فقط همین یه خط رو می‌خوند و هیچی دیگه، یه ذره به اومدن نزدیک‌تر می‌شد؟ اگه نه، مال سطح ۳ـه یا مال سطل آشغال.

هر چیزی که امید می‌خواست روش باشه

  تبادل کتاب
  یه کتاب بیار، یه کتاب ببر
  شنبه ۲۰ مهر، ۱۰ تا ۱۴
  فرهنگسرای مهر، طبقه‌ی دوم
  رایگان، بدون ثبت‌نام
  کتاب بچه‌ها هم قبوله
  شورایاری محله + لوگو
  چای و شیرینی
  یه جمله‌ی قشنگ درباره‌ی کتاب
  ما رو دنبال کنید

کم‌شده و رتبه‌بندی‌شده

  سطح ۱   تبادل کتاب
  سطح ۲   یه کتاب بیار، یه کتاب ببر
           شنبه ۲۰ مهر، ۱۰ تا ۱۴
           فرهنگسرای مهر، طبقه‌ی دوم
  سطح ۳   رایگان، بدون ثبت‌نام
           کتاب بچه‌ها هم قبوله
           شورایاری محله + لوگو

  حذف شد: جمله‌ی قشنگ، چای و شیرینی، «ما رو دنبال کنید».

خروجی

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

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

خودت رو امتحان کن

دوست امید اصرار داره «چای و شیرینی» بمونه، چون صمیمیه. جای این خط کجاست؟

  1. سطح ۱، چون گرم‌ترین چیز پوستره
  2. بیرون از پوستر، تو پیامی که برای آدم‌هایی که می‌پرسن می‌فرسته
  3. سطح ۲، کنار تاریخ و مکان
  4. سطح ۳، خاکستری و ته صفحه
جواب رو ببین

بیرون از پوستر، تو پیامی که برای آدم‌هایی که می‌پرسن می‌فرسته

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

مرحله‌ی ۲: سلسله‌مراتب، با عدد

  • سطح ۱، یه آیتم. «تبادل کتاب» با حدود ۱۲۰ پوینت. باید از اون‌ور خیابون خونده بشه.
  • سطح ۲، سه خط. چی کار کنی، کِی، کجا. حدود ۳۶ پوینت، تقریباً یک‌سوم عنوان.
  • سطح ۳، بقیه. ۱۶ پوینت خاکستری، برای کسی که همین‌الان وایستاده.
  • نسبت‌ها رو با درس ۱ چک کن: عنوان بیشتر از ۳ برابر سطح ۲ـه و سطح ۲ بیشتر از ۲ برابر سطح ۳. هر پرش شبیه تصمیمه، نه شبیه لغزش.
  • تست چشم نیمه‌باز. از فاصله‌ی یه دست، تنها لکه‌ی خوانا باید «تبادل کتاب» باشه. اگه لوگو هم از تاری جون سالم به در برد، یعنی بزرگه.
مرحله‌ی ۳  گرید و فاصله‌ها   (A3 عمودی)

  ۳ ستون · حاشیه ۳۲ میلی‌متر · فاصله‌ی ستون ۱۶
  پله‌های فاصله: ۸، ۲۴، ۴۸ میلی‌متر

  [۳۲]  حاشیه‌ی بالا
  تبادل کتاب                    ستون ۱ تا ۳
  [۸]
  یه کتاب بیار، یه کتاب ببر      ستون ۱ تا ۳
  [۴۸]
  شنبه ۲۰ مهر، ۱۰ تا ۱۴          ستون ۱ تا ۲
  [۸]
  فرهنگسرای مهر، طبقه‌ی دوم      ستون ۱ تا ۲
  [۴۸]
  رایگان، بدون ثبت‌نام           ستون ۱ تا ۲
  [۸]
  کتاب بچه‌ها هم قبوله           ستون ۱ تا ۲
  [۲۴]
  شورایاری محله                  ستون ۱ تا ۲
  لوگو، ۲۰ میلی‌متر               ستون ۳
  [۳۲]  حاشیه‌ی پایین

خروجی

یه لبه‌ی شروع برای همه‌ی خط‌ها. سه تا اندازه‌ی فاصله همه‌ی گروه‌بندی رو می‌سازن:
۸ داخل گروه، ۴۸ بین گروه‌ها، ۲۴ قبل از پانویس.
ستون ۳ از بالا تا پایین خالی می‌مونه. همون جای نفس کشیدنه.

هیچی اینجا چشمی گذاشته نشده. حاشیه و فاصله‌ها از نردبون درس ۴ میان و ستون‌ها از درس ۵. یادت باشه پوستر فارسیه، پس ستون ۱ سمت راسته و ستون خالی می‌افته سمت چپ.

خودت رو امتحان کن

خالی گذاشتن ستون سوم بیشتر به خوانا بودن عنوان از دو متری کمک می‌کنه تا پر کردنش با یه عکس.

جواب رو ببین

درست

درسته. فضای خالی یعنی پوستر نیمه‌کاره نیست؛ همون جاییه که به سطح ۱ اجازه می‌ده از دور دیده بشه. عکسی که برای پر کردن جا اضافه بشه با عنوان رقابت می‌کنه و معمولاً می‌شه قهرمان دوم، که دقیقاً اشتباه درس ۶ـه. ستون رو خالی بذار، یا بذار عنوان از روش رد بشه.

مرحله‌ی ۴: دو نقشه‌ی رنگ

نقشه‌ی الف: هر خط یه رنگ

عنوان آبی تیره، تاریخ قرمز، «رایگان» سبز، متن مشکی، پانویس خاکستری. پنج تا رنگ که همه دارن سر رنگ تأکید بودن می‌جنگن، پس هیچ‌کدوم نیست. سبز روی سفید حدود ۲ به ۱ در میاد، یعنی کلمه‌ای که بیشتر از همه می‌خواد خونده بشه، از دو متری سخت‌ترین کلمه‌ی پوستره.

نقشه‌ی ب: یکی به‌اضافه‌ی یکی

کاغذ شکستی، متن تقریباً مشکی، عنوان با یه آبی تیره. یه نارنجی گرم که یه بار استفاده می‌شه: یه برچسب توپر پشت «رایگان»، با متن سفید روش، چک‌شده بالای ۴٫۵ به ۱. این همون پالت درس ۸ـه و تقریباً ۶۰-۳۰-۱۰، بدون اینکه چیزی اندازه گرفته بشه.

خودت رو امتحان کن

یه همسایه به امید می‌گه پوستر کنار پوسترهای پررنگ مغازه‌ها ساده به نظر میاد. بهترین جواب چیه؟

  1. همون یه رنگ تأکید رو نگه دار و به‌جاش عنوان رو بزرگ‌تر کن
  2. یه عکس تمام‌صفحه پشت همه‌چی بذار که صفحه پر از رنگ بشه
  3. تیترها رو آبی کن و جزئیات رو سبز که تنوع بیشتر بشه
  4. به هر خط یه رنگ بده که پوستر بتونه با ویترین مغازه‌ها رقابت کنه
جواب رو ببین

همون یه رنگ تأکید رو نگه دار و به‌جاش عنوان رو بزرگ‌تر کن

درسته. روی یه تابلوی شلوغ، آرامش خودش کنتراسته. همه‌چی دور و برش داره داد می‌زنه، پس پوستری خونده می‌شه که یه عنوان خیلی بزرگ، یه رنگ تأکید و جای خالی واقعی داره.

مرحله‌ی ۵: مشخصات نهایی فونت

| نقش | اندازه | وزن | رنگ |

|---|---|---|---|

| عنوان | ۱۲۰ پوینت | بولد | آبی تیره |

| سطح ۲ | ۳۶ پوینت | معمولی | تقریباً مشکی |

| برچسب «رایگان» | ۲۸ پوینت | بولد | سفید روی نارنجی |

| سطح ۳ | ۱۶ پوینت | معمولی | خاکستری، چک‌شده روی ۴٫۵ به ۱ |

یه خانواده‌ی فونت، دو تا وزن. فاصله‌ی خط ۱٫۲ روی عنوان و ۱٫۷ روی بقیه، چون متن فارسیه.

خودت رو امتحان کن

هر تصمیم این پوستر رو به درسی که ازش اومده وصل کن

جواب رو ببین
  • عنوان بیشتر از سه برابر سطح ۲ـه → درس ۱: سلسله‌مراتب و نسبت اندازه
  • همه‌ی خط‌ها از یه لبه شروع می‌شن → درس ۳: هم‌ترازی
  • فاصله‌ها فقط ۸ و ۲۴ و ۴۸ میلی‌مترن → درس ۴: نردبون فاصله‌ها
  • نارنجی دقیقاً یه بار میاد → درس ۸: یه رنگ تأکید، ۶۰-۳۰-۱۰

مرحله‌ی ۶: پرداخت، پنج تا چک

  1. چشم‌هات رو تنگ کن

    فقط «تبادل کتاب» باید تو آزمون تاری دید (چشم نیمه‌باز) واضح بمونه. اگه لوگو یا برچسب نارنجی هم زیادی به چشم میان، اثرشون رو کم کن.

  2. چاپش کن و بزنش به دیوار

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

  3. عددها رو چک کن

    متن خاکستری سطح ۳ روی کاغذ شکستی، و سفید روی برچسب نارنجی. هر چی زیر ۴٫۵ به ۱ـه همین حالا تیره‌تر بشه، نه بعد از چاپ.

  4. فاصله‌ها رو بخون

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

  5. یه چیز دیگه هم کم کن

    تقریباً همیشه یه خط مونده که فقط برای خودت مهمه. پاکش کن، دوباره نگاه کن و ببین پوستر بدتر شد یا نه. معمولاً بهتر شده.

خودت رو امتحان کن

هر تصمیم مال کدوم مرحله‌ی ساختنه؟

  • تصمیم به اینکه جمله‌ی قشنگ کتاب لازم نیست
  • اینکه فقط «تبادل کتاب» سطح ۱ باشه
  • گذاشتن حاشیه‌ی ۳۲ میلی‌متری از هر چهار طرف
  • نگه داشتن نارنجی فقط برای کلمه‌ی «رایگان»
  • انتخاب وزن بولد و معمولی یه خانواده‌ی فونت
  • چاپ کردنش و دو متر عقب وایستادن
جواب رو ببین

۱ و ۲: محتوا و سلسله‌مراتب: تصمیم به اینکه جمله‌ی قشنگ کتاب لازم نیست, اینکه فقط «تبادل کتاب» سطح ۱ باشه

۳ و ۴: گرید و رنگ: گذاشتن حاشیه‌ی ۳۲ میلی‌متری از هر چهار طرف, نگه داشتن نارنجی فقط برای کلمه‌ی «رایگان»

۵ و ۶: فونت و پرداخت: انتخاب وزن بولد و معمولی یه خانواده‌ی فونت, چاپ کردنش و دو متر عقب وایستادن

مرور درس

  • مرحله‌ی ۱: هر آیتم رو بنویس، بعد کم کن و تو سه سطح رتبه‌بندی کن. قبل از باز کردن هر نرم‌افزاری.
  • مرحله‌ی ۲: به هر سطح یه اندازه بده. عنوان ۳ برابر سطح ۲، سطح ۲ بیشتر از ۲ برابر سطح ۳.
  • مرحله‌ی ۳: ستون‌ها، حاشیه‌ها و دو سه تا اندازه‌ی فاصله رو انتخاب کن و هیچی رو چشمی نذار.
  • مرحله‌ی ۴ و ۵: خنثی‌ها به‌اضافه‌ی یه رنگ برند و یه رنگ تأکید که یه بار میاد؛ یه خانواده‌ی فونت تو دو وزن.
  • مرحله‌ی ۶: چشم‌هات رو تنگ کن، چاپش کن و عقب وایستا، عددهای کنتراست رو چک کن، فاصله‌ها رو بخون، و یه چیز دیگه هم کم کن.

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

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

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

همه‌ی درس‌های این دوره

  1. سلسله‌مراتب بصری (Visual Hierarchy): اول به چی نگاه می‌کنم؟
  2. کنتراست: چیزهای متفاوت رو واقعاً متفاوت کن
  3. هم‌ترازی و نزدیکی
  4. فضای خالی و یه سیستم فاصله‌گذاری
  5. گرید و تعادل
  6. ترکیب‌بندی و نقطه‌ی کانونی (Focal Point)
  7. تئوری رنگ: فام، اشباع و روشنایی (Color Theory: HSL)
  8. ساختن یه پالت
  9. تایپوگرافی‌ای که خوب خونده می‌شه
  10. چطور یه طرح رو نقد کنی
  11. یه پوستر بساز، قدم به قدم
  12. ده اشتباه رایج طراحی و چک‌لیست بازبینی (Design Mistakes & Audit Checklist)