هم‌ترازی و نزدیکی
دو تا چیز نامرئی یه صفحه رو جمع‌وجور نشون می‌دن: خط‌هایی که کسی نکشیده و فاصله‌هایی که معنی دارن. یاد می‌گیری چیزها رو روی یه لبه تراز کنی و چیزهای مرتبط رو کنار هم بذاری.
فکر اول
هم‌ترازی (Alignment): خط‌های نامرئی
وقتی چندتا چیز از یه لبه شروع می‌شن، چشمت روی اون لبه یه خط نامرئی می‌کشه. چندتا خط قوی صفحه رو منظم نشون می‌ده. کلی خط ضعیف صفحه رو پخش‌وپلا می‌کنه. قانون: هیچی همین‌جوری یه جا گذاشته نمی‌شه. هر عنصر حداقل با یه عنصر دیگه ترازه.
یه کارت ویزیت که اسم بالا سمت چپه، تلفن پایین سمت راست و ایمیل وسط، سه تا خط بی‌ربط داره. هر سه رو بذار روی یه لبه و کارت یهو «طراحی‌شده» به نظر میاد.
یه تراکت، دو بار
چهار لبه
عنوان وسط‌چین. پاراگراف راست‌چین. شماره تلفن چسبیده به چپ. لوگو هر جا که جا بوده افتاده. چشمت زیگزاگ می‌ره و هیچ ساختاری پیدا نمی‌کنه، با اینکه هر تیکه تنهایی مشکلی نداره.
یه لبه
عنوان، پاراگراف، تلفن و لوگو همه از یه لبه‌ی راست شروع می‌شن، با یه حاشیه‌ی یکسان. یه خط نامرئی قوی از بالا تا پایین صفحه میاد. آروم به نظر می‌رسه، و یه کلمه هم عوض نکردی.
خودت رو امتحان کن
اسلاید امید یه عنوان وسط‌چین داره، یه لیست که با چند سانت فاصله از لبه شروع می‌شه، یه زیرنویس وسط‌چین و یه پانویس که اون‌ور صفحه‌ست. کدوم تغییر بیشتر از همه کمک می‌کنه؟
- عنوان رو بزرگ‌تر کنه که واضح صدرنشین اسلاید باشه
- عنوان، لیست، زیرنویس و پانویس رو از یه لبه‌ی مشترک شروع کنه
- دور هر عنصر یه کادر بکشه که چشم بخش‌ها رو از هم جدا کنه
- لیست و پانویس رو هم وسط‌چین کنه که حداقل همه‌چی اسلاید با هم وسط باشه
جواب رو ببین
عنوان، لیست، زیرنویس و پانویس رو از یه لبه‌ی مشترک شروع کنه
آره. یه لبه‌ی مشترک چهار تا خط رقیب رو با یه خط قوی عوض می‌کنه. ارزون‌ترین تعمیر دنیای طراحیه.
فکر دوم
اصل نزدیکی (Proximity): فاصله‌گذاری معنادار
چشم چیزهایی که کنار همن رو یه گروه می‌بینه، قبل از اینکه حتی یه کلمه بخونه. پس چیزهای مرتبط رو نزدیک هم بذار و چیزهای بی‌ربط رو واضح از هم دور کن. دستور: فاصله‌ی بین گروه‌ها حداقل دو برابر فاصله‌ی داخل یه گروه باشه.
زیرنویسی که ۸ واحد زیر عکس خودشه و ۳۲ واحد بالای عکس بعدی، معلومه مال عکس اوله. زیرنویسی که درست وسط دو تا عکس معلقه، مال هیچ‌کدوم نیست.
قبل: همه‌ی فاصله‌ها یکیه
نشست طراحی
دوشنبه ساعت ۱۸
اتاق ۱۲
گشت عکاسی
شنبه ساعت ۸
پارک شهر
بعد: فاصله‌ی کم داخل گروه، فاصله‌ی زیاد بین گروه‌ها
نشست طراحی
دوشنبه ساعت ۱۸ · اتاق ۱۲
گشت عکاسی
شنبه ساعت ۸ · پارک شهرقبل: شش خط ول. «اتاق ۱۲» مال نشسته یا مال گشت؟
بعد: دو تا برنامه، و این رو قبل از خوندن حتی یه کلمه می‌بینی.نه خطی اضافه شد، نه کادری، نه رنگی. فقط فاصله‌ها عوض شدن.
خودت رو امتحان کن
امید می‌تونه یه فرم طولانی رو خواناتر کنه بدون اینکه حتی یه خط یا کادر یا رنگ اضافه کنه؛ فقط هر برچسب رو به فیلد خودش نزدیک‌تر کنه و از فیلد بالایی دورتر.
جواب رو ببین
درست
درسته. نزدیکی یه سیگنال واقعیه: چیزهایی که کنار هم‌ان با هم یه چیز خونده می‌شن. حدود ۲۴ واحد فاصله بالای برچسب و ۸ واحد زیرش، قبل از اینکه کسی یه کلمه بخونه، به چشم می‌گه این برچسب مال کدوم فیلده. فاصله همون کاری رو می‌کنه که بیشتر آدم‌ها با کادر می‌خوان بکنن.
دستورهایی که همین امروز به کارت میان
- برای هر صفحه یه لبه‌ی اصلی انتخاب کن و تقریباً همه‌چی رو از همون شروع کن. لبه‌ی دوم اشکال نداره؛ لبه‌ی پنجم داره.
- تیتر: بالاش فاصله‌ی بیشتر، پایینش کمتر. حدوداً ۳ به ۱.
- برچسب بچسبه به فیلدش، زیرنویس به عکسش، قیمت به غذاش.
- قبل از اینکه برای جدا کردن خط یا کادر بکشی، فاصله‌ی بیشتر رو امتحان کن. معمولاً بهتر جواب می‌ده و سبک‌تر هم دیده می‌شه.
- تو یه ستون عدد، رقم‌ها رو از یه سمت تراز کن که بشه مقایسه‌شون کرد.
خودت رو امتحان کن
این مشکل هم‌ترازیه یا مشکل نزدیکی؟
- یه زیرنویس درست وسط دو تا عکس افتاده
- سه تا بلوک متن هر کدوم از یه جای کمی متفاوت شروع می‌شن
- برچسب یه فیلد فرم به فیلد بالایی نزدیک‌تره تا به فیلد خودش
- لبه‌ی لوگو چند میلی‌متر با لبه‌ی متن زیرش اختلاف داره
- تلفن، آدرس و ایمیل تو سه گوشه‌ی کارت پخش شدن
- قیمت‌های یه ستون وسط‌چین شدن و رقم‌ها زیر هم نمی‌افتن
جواب رو ببین
هم‌ترازی: سه تا بلوک متن هر کدوم از یه جای کمی متفاوت شروع می‌شن, لبه‌ی لوگو چند میلی‌متر با لبه‌ی متن زیرش اختلاف داره, قیمت‌های یه ستون وسط‌چین شدن و رقم‌ها زیر هم نمی‌افتن
نزدیکی: یه زیرنویس درست وسط دو تا عکس افتاده, برچسب یه فیلد فرم به فیلد بالایی نزدیک‌تره تا به فیلد خودش, تلفن، آدرس و ایمیل تو سه گوشه‌ی کارت پخش شدن
خودت رو امتحان کن
هر مشکل رو به راه‌حلش وصل کن
جواب رو ببین
- عنوان وسط، متن یه طرف، پانویس اون طرف → یه لبه انتخاب کن و همه‌چی رو از همون شروع کن
- تیتر با فاصله‌ی برابر بین دو پاراگراف معلقه → به پاراگرافی که معرفیش می‌کنه نزدیک‌ترش کن
- همه‌ی خط‌های یه کارت فاصله‌ی یکسان دارن → خط‌های مرتبط رو جمع کن و فاصله‌ی بین گروه‌ها رو زیاد کن
- دور هر بخش یه کادر کشیده شده → کادرها رو بردار و بذار فاصله جداشون کنه
خودت رو امتحان کن
رزومه‌ی نگار سه تا شغل داره. فاصله‌ی همه‌ی خط‌ها یکیه و تاریخ‌ها یه جا بعد از عنوان شغل اومدن، یه جا تو یه خط جدا. کدوم اصلاح بهتره؟
- داخل هر شغل فاصله‌ها کم، بین شغل‌ها فاصله بیشتر، تاریخ‌ها روی یه خط
- زیر هر خط متن یه خط نازک بکشه که خواننده ببینه هر خط کجا تموم می‌شه
- کل رزومه رو وسط‌چین کنه که رو صفحه متعادل به نظر بیاد
- به هر شغل یه رنگ جدا بده که راحت از هم جدا بشن
جواب رو ببین
داخل هر شغل فاصله‌ها کم، بین شغل‌ها فاصله بیشتر، تاریخ‌ها روی یه خط
درسته. نزدیکی دوازده خط ول رو می‌کنه سه تا شغل، و هم‌ترازی کاری می‌کنه که کارفرما با یه نگاه از بالا به پایین همه‌ی تاریخ‌ها رو بخونه.
مرور درس
- هر عنصر باید با یه چیزی تراز باشه. چندتا خط نامرئی قوی از کلی خط ضعیف بهتره.
- فقط چیزهای کوتاه رو وسط‌چین کن. متن طولانی رو به سمتی تراز کن که خوندن ازش شروع می‌شه: تو فارسی راست، تو انگلیسی چپ.
- نزدیک هم یعنی مرتبط. فاصله‌ی بین گروه‌ها حداقل دو برابر فاصله‌ی داخلشون باشه.
- تیتر به متنی که معرفیش می‌کنه نزدیک‌تره تا به متن قبلیش.
- قبل از خط و کادر، فاصله رو امتحان کن.