رنگ برند را از رنگ رابط جدا کنید
در این بخش، Brand و UI را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «رنگ برند را از رنگ رابط جدا کنید»، بهتر است از خود Brand و UI شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای Brand و UI، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود رنگ برند را از رنگ رابط جدا کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
این صحنه، رابطه اجزای اصلی در رنگ، کنتراست و هویت را بهصورت یک ساختار واحد نشان میدهد.
نقشهای معنایی را پیش از shadeها تعریف کنید
در این بخش، توکن معنایی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «نقشهای معنایی را پیش از shadeها تعریف کنید»، بهتر است از خود توکن معنایی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای توکن معنایی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود نقشهای معنایی را پیش از shadeها تعریف کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
- نقش توکن معنایی را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
خاکستری خوب، ستون فقرات رابط است
در این بخش، neutral scale را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «خاکستری خوب، ستون فقرات رابط است»، بهتر است از خود neutral scale شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای neutral scale، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود خاکستری خوب، ستون فقرات رابط است نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
نمای دوم از فرم کلی فاصله میگیرد و روی اتصال تصمیمهای ریز به تجربه نهایی تمرکز میکند.
کنتراست را در زمینه واقعی بسنجید
در این بخش، خوانایی را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «کنتراست را در زمینه واقعی بسنجید»، بهتر است از خود خوانایی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای خوانایی، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود کنتراست را در زمینه واقعی بسنجید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
- نقش خوانایی را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
سطحها را فقط با سایه جدا نکنید
در این بخش، عمق و سطح را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
در جلسه نقد معمولاً کسی میگوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نامگذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «سطحها را فقط با سایه جدا نکنید»، بهتر است از خود عمق و سطح شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای عمق و سطح، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود سطحها را فقط با سایه جدا نکنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
رنگ وضعیت باید کنار متن و شکل کار کند
در این بخش، error و success را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متنها کاملاند و هیچکس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمیبیند. محصول واقعی اینطور رفتار نمیکند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «رنگ وضعیت باید کنار متن و شکل کار کند»، بهتر است از خود error و success شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای error و success، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود رنگ وضعیت باید کنار متن و شکل کار کند نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخهای برای همیشه نهایی نیست. محتوا رشد میکند، دستگاهها تغییر میکنند و کاربران رفتارهایی نشان میدهند که در اتاق طراحی پیشبینی نشده بود. یک سیستم سالم امکان اصلاح میدهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.
- نقش error و success را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید
تم تیره ترجمه مکانیکی پالت روشن نیست
در این بخش، dark mode را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بعضی انتخابها در ابتدا کوچکاند اما در صد صفحه تکثیر میشوند. یک اندازه تیتر، یک فاصله اشتباه یا یک الگوی کارت بیدلیل، بهتدریج به لحن کل سایت تبدیل میشود. حرفهایبودن یعنی همین تصمیمهای کوچک را پیش از تکثیر ببینیم و برایشان قاعدهای روشن بسازیم. در موضوع «تم تیره ترجمه مکانیکی پالت روشن نیست»، بهتر است از خود dark mode شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
نکته مهم این است که کاربر زبان فایل طراحی را نمیشناسد. او نام توکن، گرید یا کامپوننت را نمیبیند؛ فقط احساس میکند پیدا کردن پاسخ آسان است یا نه. بنابراین جزئیات فنی زمانی ارزش دارند که به تجربهای قابل مشاهده تبدیل شوند: مکث کمتر، انتخاب روشنتر و مسیر بازیابی قابل فهمتر. برای dark mode، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود تم تیره ترجمه مکانیکی پالت روشن نیست نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درستاند، کاربر فقط احساس میکند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعهای از انتخابهای آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.
قانون استفاده، پالت را زنده نگه میدارد
در این بخش، حاکمیت رنگ را نه بهعنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی میکنیم.
بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر میرسد، اما وقتی نگاه از بالا تا پایین حرکت میکند، معلوم نیست کدام تصمیم واقعاً مهمتر است. در چنین لحظهای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راهحل از افزودن یک افکت تازه نمیآید، از روشنکردن مسئولیت هر لایه میآید. در موضوع «قانون استفاده، پالت را زنده نگه میدارد»، بهتر است از خود حاکمیت رنگ شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا میکند و به نقشی که باید در تجربه صفحه داشته باشد برمیگرداند؛ جایی که میتوان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.
میتوان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست میدهد؟ پاسخ روشن، وجود عنصر را توجیه میکند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان میکنیم. برای حاکمیت رنگ، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوتها را یادداشت کنید و فقط قاعدهای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.
در عمل، این بخش با یک بار نگاهکردن تمام نمیشود. طراح، نویسنده و توسعهدهنده هرکدام لبه متفاوتی را میبینند. کنار هم گذاشتن این نگاهها باعث میشود قانون استفاده، پالت را زنده نگه میدارد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. در پایان، کیفیت را با مقایسه قبل و بعد از یک تصمیم بسنجید، نه با تعداد جزئیات اضافهشده. اگر مسیر کوتاهتر، محتوا خواناتر و حالتهای واقعی قابل پیشبینیتر شدهاند، طراحی کار خودش را انجام داده. باقی چیزها باید در خدمت همین نتیجه بمانند.
- نقش حاکمیت رنگ را پیش از شکل آن تعریف کنید
- نمونه را با محتوای واقعی فارسی بسنجید
- رفتار موبایل و حالتهای غیرایدهآل را جدا ببینید