فاصله را به رابطه تبدیل کنید
در این بخش، اصل مجاورت را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «فاصله را به رابطه تبدیل کنید»، بهتر است از خود اصل مجاورت شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
در پروژه واقعی، هیچ قانون بصری نباید از محتوا جدا بماند. تیتر کوتاه و تیتر دوخطی، تصویر عمودی و افقی، متن کم و متن تخصصی باید همان الگو را امتحان کنند. این برخورد با لبههاست که نشان میدهد طراحی انعطاف دارد یا فقط برای یک نمونه ساخته شده است. برای اصل مجاورت، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود فاصله را به رابطه تبدیل کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
این صحنه، رابطه اجزای اصلی در فاصله، گرید و آرامش را بهصورت یک ساختار واحد نشان میدهد.
یک مقیاس فاصله کوچک اما منعطف بسازید
در این بخش، spacing scale را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «یک مقیاس فاصله کوچک اما منعطف بسازید»، بهتر است از خود spacing scale شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
برای تصمیمگیری بهتر، سه قاب کنار هم بگذارید: محتوای واقعی فارسی، عرض کوچک موبایل و حالتی که داده یا تصویر هنوز بارگیری نشده است. اگر ساختار در هر سه قاب قابل فهم ماند، انتخاب احتمالاً از جنس سیستم است. اگر فقط در ماکت ایدهآل جواب داد، هنوز بیش از آنکه طراحی باشد یک تصویر خوب است. برای spacing scale، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود یک مقیاس فاصله کوچک اما منعطف بسازید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش spacing scale را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
padding و margin مسئولیت متفاوت دارند
در این بخش، فضای داخل و بیرون را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «padding و margin مسئولیت متفاوت دارند»، بهتر است از خود فضای داخل و بیرون شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
در پروژه واقعی، هیچ قانون بصری نباید از محتوا جدا بماند. تیتر کوتاه و تیتر دوخطی، تصویر عمودی و افقی، متن کم و متن تخصصی باید همان الگو را امتحان کنند. این برخورد با لبههاست که نشان میدهد طراحی انعطاف دارد یا فقط برای یک نمونه ساخته شده است. برای فضای داخل و بیرون، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود padding و margin مسئولیت متفاوت دارند نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
نمای دوم از فرم کلی فاصله میگیرد و روی اتصال تصمیمهای ریز به تجربه نهایی تمرکز میکند.
سکشن بلند همیشه باشکوه نیست
در این بخش، ارتفاع و محتوا را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «سکشن بلند همیشه باشکوه نیست»، بهتر است از خود ارتفاع و محتوا شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
برای تصمیمگیری بهتر، سه قاب کنار هم بگذارید: محتوای واقعی فارسی، عرض کوچک موبایل و حالتی که داده یا تصویر هنوز بارگیری نشده است. اگر ساختار در هر سه قاب قابل فهم ماند، انتخاب احتمالاً از جنس سیستم است. اگر فقط در ماکت ایدهآل جواب داد، هنوز بیش از آنکه طراحی باشد یک تصویر خوب است. برای ارتفاع و محتوا، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود سکشن بلند همیشه باشکوه نیست نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
- نقش ارتفاع و محتوا را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
تراکم را برای تغییر ریتم استفاده کنید
در این بخش، آرام و فشرده را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «تراکم را برای تغییر ریتم استفاده کنید»، بهتر است از خود آرام و فشرده شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
در پروژه واقعی، هیچ قانون بصری نباید از محتوا جدا بماند. تیتر کوتاه و تیتر دوخطی، تصویر عمودی و افقی، متن کم و متن تخصصی باید همان الگو را امتحان کنند. این برخورد با لبههاست که نشان میدهد طراحی انعطاف دارد یا فقط برای یک نمونه ساخته شده است. برای آرام و فشرده، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود تراکم را برای تغییر ریتم استفاده کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
گرید نامرئی باید در خروجی احساس شود
در این بخش، alignment را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «گرید نامرئی باید در خروجی احساس شود»، بهتر است از خود alignment شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
برای تصمیمگیری بهتر، سه قاب کنار هم بگذارید: محتوای واقعی فارسی، عرض کوچک موبایل و حالتی که داده یا تصویر هنوز بارگیری نشده است. اگر ساختار در هر سه قاب قابل فهم ماند، انتخاب احتمالاً از جنس سیستم است. اگر فقط در ماکت ایدهآل جواب داد، هنوز بیش از آنکه طراحی باشد یک تصویر خوب است. برای alignment، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود گرید نامرئی باید در خروجی احساس شود نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
- نقش alignment را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
در موبایل فاصله را کورکورانه نصف نکنید
در این بخش، فضای خالی موبایل را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «در موبایل فاصله را کورکورانه نصف نکنید»، بهتر است از خود فضای خالی موبایل شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
در پروژه واقعی، هیچ قانون بصری نباید از محتوا جدا بماند. تیتر کوتاه و تیتر دوخطی، تصویر عمودی و افقی، متن کم و متن تخصصی باید همان الگو را امتحان کنند. این برخورد با لبههاست که نشان میدهد طراحی انعطاف دارد یا فقط برای یک نمونه ساخته شده است. برای فضای خالی موبایل، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود در موبایل فاصله را کورکورانه نصف نکنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
ریتم را روی صفحه واقعی تست کنید
در این بخش، بازبینی و اسکرول را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «ریتم را روی صفحه واقعی تست کنید»، بهتر است از خود بازبینی و اسکرول شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
برای تصمیمگیری بهتر، سه قاب کنار هم بگذارید: محتوای واقعی فارسی، عرض کوچک موبایل و حالتی که داده یا تصویر هنوز بارگیری نشده است. اگر ساختار در هر سه قاب قابل فهم ماند، انتخاب احتمالاً از جنس سیستم است. اگر فقط در ماکت ایدهآل جواب داد، هنوز بیش از آنکه طراحی باشد یک تصویر خوب است. برای بازبینی و اسکرول، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود ریتم را روی صفحه واقعی تست کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش بازبینی و اسکرول را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید