پث‌وایز

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

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

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

اشتباه ۱ تا ۵

  • ۱. همه‌چی هم‌اندازه. سطح ۱ نداری، پس چشم جایی برای فرود نداره. راه‌حل: یه چیز انتخاب کن و بکنش ۲ تا ۳ برابر متن.
  • ۲. کنتراست ترسو. تفاوت‌هایی که اون‌قدر کوچیکن که عمدی به نظر نمیان، پس شلخته دیده می‌شن. راه‌حل: چیزهای تقریباً شبیه رو یا یکی کن یا حسابی از هم دور کن.
  • ۳. هیچی تراز نیست. چهار تا لبه‌ی رقیب تو یه صفحه. راه‌حل: یه لبه‌ی شروع مشترک برای تقریباً همه‌چی.
  • ۴. یه فاصله برای همه‌جا. فاصله‌های برابر گروه‌هات رو پاک می‌کنن. راه‌حل: فاصله‌ی بین گروه‌ها حداقل دو برابر فاصله‌ی داخلشون.
  • ۵. بی‌حاشیه. متنی که به لبه چسبیده ارزون به نظر میاد و بد خونده می‌شه. راه‌حل: یه حاشیه‌ی واقعی، حدود ۲ سانت روی A4، و تو اسلاید هم همه‌چی رو از لبه دور نگه دار.

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

هر اشتباه مال کدوم خانواده‌ست؟

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

سلسله‌مراتب: شش تا بولت، همه بولد و همه قرمز, هیچی تو صفحه از هیچی بزرگ‌تر نیست

چیدمان: متنی که به لبه‌ی صفحه چسبیده, عنوان، لیست و پانویس هر کدوم روی یه لبه

رنگ و فونت: متن خاکستری کم‌رنگ روی سفید, چهار تا فونت تو یه تراکت

اشتباه ۶ تا ۱۰

  • ۶. دو تا قهرمان. لوگو و تیتر هر دو دارن نگاه اول رو می‌برن، پس هیچ‌کدوم نمی‌بره. راه‌حل: یه نقطه‌ی کانونی، بقیه عقب می‌کشن.
  • ۷. رنگ زیادی، یا رنگی که تنهایی حرف می‌زنه. راه‌حل: خنثی‌ها به‌اضافه‌ی یه رنگ برند و یه رنگ تأکید، و همیشه کنار رنگ کلمه هم بذار.
  • ۸. متنی که کسی نمی‌تونه بخونه. خاکستری کم‌رنگ، ریز، یا نشسته روی یه عکس شلوغ. راه‌حل: ۴٫۵ به ۱ یا بهتر، و طراحی برای جایی که واقعاً خونده می‌شه.
  • ۹. فونت زیادی، خط زیادی بلند. راه‌حل: حداکثر دو خانواده (یکی امن‌تره) و ۴۵ تا ۷۵ کاراکتر تو هر خط.
  • ۱۰. وسط‌چین کردن همه‌چی و پر کردن هر جای خالی. راه‌حل: متن طولانی رو به لبه‌ی خوندن تراز کن و به جای خالی دست نزن. داره کار می‌کنه.

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

هر اشتباه رو به راه‌حلش وصل کن

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

   ۱  چشم‌هات رو تنگ کن. بلندترین لکه پیام منه؟
   ۲  می‌تونم سطح ۱ و ۲ و ۳ رو اسم ببرم؟
   ۳  هر عنصری با یه چیزی ترازه؟
   ۴  فاصله‌ی بین گروه‌ها حداقل دو برابر داخلشونه؟
   ۵  هر چهار طرف حاشیه‌ی واقعی داره؟
   ۶  همه‌ی فاصله‌هام از یه نردبون کوتاه اومدن؟
   ۷  رنگ‌ها رو بشمر. فونت‌ها رو بشمر. هر کدوم زیر سه‌تا؟
   ۸  همه‌ی متن‌ها ۴٫۵ به ۱ یا بهتر هستن؟
   ۹  خط‌ها بین ۴۵ تا ۷۵ کاراکترن؟
  ۱۰  تو حالت خاکستری هم کار می‌کنه؟ از فاصله‌ای که واقعاً
      خونده می‌شه چی؟

خروجی

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

یه ماه کنار دستت نگهش دار. بعدش دیگه لیست نیست؛ می‌شه طرز نگاه کردنت به یه صفحه.

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

طرحی که هر ده تا چک رو رد کنه، حتماً طرح خوبیه.

جواب رو ببین

نادرست

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

پرونده

اسلاید فصلی نگار

یه اسلاید عریض. یه عکس از دفتر، از این گوشه تا اون گوشه پرش کرده. روی عکس، وسط‌چین و سفید: عنوان «خلاصه‌ی نتایج فصل سوم و نکته‌های کلیدی برای تیم» با ۲۸ پوینت. زیرش شش تا بولت با ۱۸ پوینت خاکستری روشن، اون‌ها هم وسط‌چین و تمام عرض اسلاید. عددی که مهمه، «فروش ۱۸ درصد بیشتر»، بولت چهارمه، وسط یه جمله. لوگو ۴ سانت پهناست تو یه گوشه؛ تاریخ و شماره‌ی صفحه هم تو اون دو گوشه‌ی دیگه. دور بولت پنجم یه کادر قرمز کشیده شده. حاشیه‌ها حدود ۵ میلی‌متر. عنوان و بولت‌ها هم با دو تا فونت متفاوتن.

قبل از اینکه ادامه بدی، خودت امتحان کن: چهار قدم درس ۱۰ رو اجرا کن و بنویس اولین تغییری که می‌دی چیه.

تشخیص   با چهار قدم درس ۱۰

  هدف       یه عدد باید با آدم‌ها از اتاق بیرون بره:
            فروش ۱۸ درصد بیشتر

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

  چی خوبه   ترتیب بولت‌ها منطقیه و زبونش ساده‌ست

  تغییر ۱  «۱۸٪» رو بکش بیرون با ۱۵۰ پوینت. پیام همینه.
  تغییر ۲  عکس رو از پشت متن بردار.
            متن روی عکس شلوغ خونده نمی‌شه.
  تغییر ۳  شش تا بولت رو بکن یه خط زمینه و بقیه رو
            با دهنت بگو.

از نو ساخته‌شده

  [۴۸]
  ۱۸٪                    ۱۵۰ پوینت بولد، رنگ برند
  [۱۶]
  بیشتر از فصل قبل       ۳۶ پوینت معمولی، تقریباً مشکی
  [۴۸]
  نتایج فصل سوم          ۲۰ پوینت خاکستری، گوشه‌ی پایین
  لوگو ۱۵ میلی‌متر         گوشه‌ی پایینی دیگه

خروجی

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

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

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

به اسلاید اولیه‌ی نگار نگاه کن. اولین تغییر باید کدوم باشه؟

  1. عنوان و بولت‌ها رو با یه فونت یکسان بنویسه
  2. کادر قرمز رو از دور بولت پنجم برداره
  3. لوگو رو ببره پایین تو یکی از گوشه‌ها که با عنوان رقابت نکنه
  4. «۱۸٪» رو از وسط جمله بکشه بیرون و بکنتش بزرگ‌ترین چیز
جواب رو ببین

«۱۸٪» رو از وسط جمله بکشه بیرون و بکنتش بزرگ‌ترین چیز

درسته. نقد تغییرها رو بر اساس اثرشون مرتب می‌کنه. کل کار این اسلاید یه عدده، و الان اون عدد بولت چهارمه، وسط یه جمله. بقیه‌ی لیست مرتب‌کاریه.

همون اسلاید، قبل و بعد

قبل

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

بعد

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

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

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

  1. عکس رو پشت همه‌چی نگه داره و دور متن یه کادر قرمز بکشه
  2. عکس رو پشت همه‌چی نگه داره و به متن سفید سایه بده
  3. عکس رو ببره تو نصف اسلاید و متن رو روی پس‌زمینه‌ی ساده بذاره
  4. عکس رو بزرگ‌تر کنه که جذاب‌ترین قسمتش پشت عدد بیفته
جواب رو ببین

عکس رو ببره تو نصف اسلاید و متن رو روی پس‌زمینه‌ی ساده بذاره

درسته. مشکل خود عکس نیست؛ عکس زیر متنه. به هر کدوم جای خودش رو بده، هر دو کار می‌کنن. اگه واقعاً مجبوره روی هم بذاردشون، به یه قسمت واقعاً آروم عکس یا یه پنل توپر پشت کلمه‌ها احتیاج داره، چک‌شده روی ۴٫۵ به ۱.

مرور دوره

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

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

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

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)