از محتوا breakpoint بسازید، نه از نام دستگاه
در این بخش، شکستن طبیعی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «از محتوا breakpoint بسازید، نه از نام دستگاه»، بهتر است از خود شکستن طبیعی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای شکستن طبیعی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود از محتوا breakpoint بسازید، نه از نام دستگاه نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
این صحنه، رابطه اجزای اصلی در موبایل، تبلت و صفحه بزرگ را بهصورت یک ساختار واحد نشان میدهد.
ترتیب ادراکی را در هر عرض بازبینی کنید
در این بخش، اولویت محتوا را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «ترتیب ادراکی را در هر عرض بازبینی کنید»، بهتر است از خود اولویت محتوا شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای اولویت محتوا، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود ترتیب ادراکی را در هر عرض بازبینی کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش اولویت محتوا را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
تایپوگرافی را سیال اما محدود طراحی کنید
در این بخش، clamp و مقیاس را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «تایپوگرافی را سیال اما محدود طراحی کنید»، بهتر است از خود clamp و مقیاس شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای clamp و مقیاس، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود تایپوگرافی را سیال اما محدود طراحی کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
نمای دوم از فرم کلی فاصله میگیرد و روی اتصال تصمیمهای ریز به تجربه نهایی تمرکز میکند.
تبلت را نسخه بزرگ موبایل فرض نکنید
در این بخش، فضای میانی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «تبلت را نسخه بزرگ موبایل فرض نکنید»، بهتر است از خود فضای میانی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای فضای میانی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود تبلت را نسخه بزرگ موبایل فرض نکنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
- نقش فضای میانی را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
تصویر به art direction نیاز دارد
در این بخش، برش و نسبت را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «تصویر به art direction نیاز دارد»، بهتر است از خود برش و نسبت شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای برش و نسبت، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود تصویر به art direction نیاز دارد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
ناوبری موبایل باید یک تجربه کامل باشد
در این بخش، منوی موبایل را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «ناوبری موبایل باید یک تجربه کامل باشد»، بهتر است از خود منوی موبایل شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای منوی موبایل، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود ناوبری موبایل باید یک تجربه کامل باشد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
- نقش منوی موبایل را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
ناحیه لمس و حالت فوکوس را همزمان ببینید
در این بخش، تعامل و دسترسی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «ناحیه لمس و حالت فوکوس را همزمان ببینید»، بهتر است از خود تعامل و دسترسی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای تعامل و دسترسی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود ناحیه لمس و حالت فوکوس را همزمان ببینید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
صفحه بزرگ را بیدلیل کش ندهید
در این بخش، canvas و عرض محتوا را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «صفحه بزرگ را بیدلیل کش ندهید»، بهتر است از خود canvas و عرض محتوا شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای canvas و عرض محتوا، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود صفحه بزرگ را بیدلیل کش ندهید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش canvas و عرض محتوا را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید