ژورنال طراحیطراحی کارت حرفه‌ای در رابط وب

ژورنال طراحی

طراحی کارت در وب؛ چگونه از ظاهر قالبی و تکراری فرار کنیم؟

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

کارت باید مرز محتوایی واقعی داشته باشد

در این بخش، مسئولیت کارت را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

در عمل، این بخش با یک بار نگاه‌کردن تمام نمی‌شود. طراح، نویسنده و توسعه‌دهنده هرکدام لبه متفاوتی را می‌بینند. کنار هم گذاشتن این نگاه‌ها باعث می‌شود کارت باید مرز محتوایی واقعی داشته باشد نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درست‌اند، کاربر فقط احساس می‌کند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعه‌ای از انتخاب‌های آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.

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

این صحنه، رابطه اجزای اصلی در کارت، ماژول و ترکیب‌بندی را به‌صورت یک ساختار واحد نشان می‌دهد.

همه کارت‌ها نباید ارتفاع برابر داشته باشند

در این بخش، ریتم و محتوا را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

در جلسه نقد معمولاً کسی می‌گوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نام‌گذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «همه کارت‌ها نباید ارتفاع برابر داشته باشند»، بهتر است از خود ریتم و محتوا شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

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

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

  • نقش ریتم و محتوا را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

تصویر را برای پرکردن کادر مصرف نکنید

در این بخش، رسانه و نسبت را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

در عمل، این بخش با یک بار نگاه‌کردن تمام نمی‌شود. طراح، نویسنده و توسعه‌دهنده هرکدام لبه متفاوتی را می‌بینند. کنار هم گذاشتن این نگاه‌ها باعث می‌شود تصویر را برای پرکردن کادر مصرف نکنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخه‌ای برای همیشه نهایی نیست. محتوا رشد می‌کند، دستگاه‌ها تغییر می‌کنند و کاربران رفتارهایی نشان می‌دهند که در اتاق طراحی پیش‌بینی نشده بود. یک سیستم سالم امکان اصلاح می‌دهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.

نمای سه‌بعدی دوم از جزئیات اجرایی طراحی کارت در وب چگونه از ظاهر قالبی و تکراری فرار کنیم
02

نمای دوم از فرم کلی فاصله می‌گیرد و روی اتصال تصمیم‌های ریز به تجربه نهایی تمرکز می‌کند.

سطح، مرز و سایه سه پاسخ متفاوت‌اند

در این بخش، تفکیک بصری را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

در عمل، این بخش با یک بار نگاه‌کردن تمام نمی‌شود. طراح، نویسنده و توسعه‌دهنده هرکدام لبه متفاوتی را می‌بینند. کنار هم گذاشتن این نگاه‌ها باعث می‌شود سطح، مرز و سایه سه پاسخ متفاوت‌اند نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درست‌اند، کاربر فقط احساس می‌کند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعه‌ای از انتخاب‌های آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.

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

کل کارت را فقط با قرارداد روشن کلیک‌پذیر کنید

در این بخش، تعامل را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

کارت شاخص را از گرید بیرون بکشید

در این بخش، feature card را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

در جلسه نقد معمولاً کسی می‌گوید «یک چیزی اینجا کم است». این جمله اغلب به معنای نیاز به عنصر تازه نیست. شاید فاصله، وزن، نام‌گذاری یا ترتیب محتوا نتوانسته رابطه اجزا را توضیح دهد. پیش از افزودن هر چیز، بهتر است همان چیزهای موجود را از نظر نقش، ریتم و رفتار دوباره ببینیم. در موضوع «کارت شاخص را از گرید بیرون بکشید»، بهتر است از خود feature card شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

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

در عمل، این بخش با یک بار نگاه‌کردن تمام نمی‌شود. طراح، نویسنده و توسعه‌دهنده هرکدام لبه متفاوتی را می‌بینند. کنار هم گذاشتن این نگاه‌ها باعث می‌شود کارت شاخص را از گرید بیرون بکشید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. هیچ نسخه‌ای برای همیشه نهایی نیست. محتوا رشد می‌کند، دستگاه‌ها تغییر می‌کنند و کاربران رفتارهایی نشان می‌دهند که در اتاق طراحی پیش‌بینی نشده بود. یک سیستم سالم امکان اصلاح می‌دهد، بدون آنکه هر تغییر کوچک هویت و ساختار کل سایت را از نو بسازد.

  • نقش feature card را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

در موبایل اطلاعات را دوباره اولویت‌بندی کنید

در این بخش، کارت موبایل را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

در عمل، این بخش با یک بار نگاه‌کردن تمام نمی‌شود. طراح، نویسنده و توسعه‌دهنده هرکدام لبه متفاوتی را می‌بینند. کنار هم گذاشتن این نگاه‌ها باعث می‌شود در موبایل اطلاعات را دوباره اولویت‌بندی کنید نه یک تزئین جدا، بلکه بخشی از ساختار قابل نگهداری سایت باشد. خروجی خوب قرار نیست در هر صفحه خودش را معرفی کند. وقتی قواعد درست‌اند، کاربر فقط احساس می‌کند صفحه آرام، روشن و قابل اعتماد است. طراح اما باید بداند این آرامش نتیجه مجموعه‌ای از انتخاب‌های آگاهانه است: چه چیزی دیده شود، چه چیزی عقب بماند و چه زمانی رابط پاسخ بدهد.

گاهی فهرست یا ردیف انتخاب بهتری است

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

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

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

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

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

قدم بعدی

برای پروژه شما، از پرسش‌های درست شروع کنیم.

شرح کوتاهی از وضعیت، هدف و محدودیت‌ها بفرستید تا مسیر مناسب را روشن کنیم.