ژورنال طراحیسیستم طراحی سایت محتوایی

ژورنال طراحی

سیستم طراحی برای سایت‌های محتوایی؛ انسجام بدون قالب‌زدگی

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

از تصمیم‌های تکرارشونده فهرست بگیرید

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

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

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

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

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

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

توکن‌ها را از رفتار طراحی استخراج کنید

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

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

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

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

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

کامپوننت را با مسئولیت تعریف کنید

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

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

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

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

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

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

الگوی صفحه از کنار هم‌چیدن کارت بیشتر است

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

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

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

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

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

Variant باید تفاوت معنادار را پوشش دهد

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

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

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

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

محتوای واقعی سیستم را آزمون می‌کند

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

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

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

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

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

مستندات باید تصمیم را توضیح دهند

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

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

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

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

سیستم را با مشاهده سایت نگه دارید

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

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

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

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

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

قدم بعدی

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

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