راهنمای کاربردی برای طراحان وب و طراحان گرافیک
راهنمای جامع چیدمان حرفهای در طراحی وب
چگونه با فاصلهگذاری درست، ساختار محتوایی سنجیده، تنوع چیدمان و انتقالهای بصری، صفحههایی زیبا، واضح و دعوتکننده طراحی کنیم.
۱) فاصلهگذاری، چیدمان و محتوا
انتخاب دقیق رنگ، تایپوگرافی و تصویر میتواند در چند ثانیه نخست تأثیر بسیار خوبی ایجاد کند؛ اما اگر فاصلهها، ساختار صفحه و نحوه ارائه محتوا به همان اندازه دقیق نباشند، آن تأثیر اولیه بهسرعت از بین میرود. مخاطب معمولاً ضعف چیدمان را با واژههای تخصصی توضیح نمیدهد، ولی آن را احساس میکند: صفحه شلوغ به نظر میرسد، خواندن سخت میشود، مسیر حرکت چشم نامشخص است و اعتماد به کیفیت کلی کار کاهش مییابد.
تفاوت میان یک طراح متوسط و یک طراح مسلط، فقط در سلیقه بصری نیست. طراح حرفهای میتواند نخست مشکل را تشخیص دهد، سپس علت آن را پیدا کند و در نهایت راهحل مناسب را با کمترین آزمونوخطا اجرا کند. برای نمونه، اگر یک بخش «بد به نظر میرسد»، باید مشخص شود مشکل از کدام عامل است: عرض بیش از حد متن، فاصله عمودی ناکافی، همترازی نامناسب، تکرار چیدمان، فقدان سلسلهمراتب یا تضاد ضعیف میان بخشها.
خلاقیت و تجربهکردن برای پیدا کردن سبک ارزشمند است؛ اما در اصلاح خطاهای بنیادی چیدمان، تکیه بر آزمونوخطای بیهدف باعث اتلاف زمان میشود. قواعدی که در ادامه میآید، به شما کمک میکند مسائل رایج را هدفمندتر حل کنید.
فضای خالی زمانی مفید است که در جای درست قرار بگیرد و ظرفیت واقعی عرض صفحه را از بین نبرد.
۲) قواعد پایه برای استفاده از فضا
مهارت چیدمان مثل یادگیری یک زبان است
رنگ و سبک تا حدی جنبه هنری دارند و ممکن است برای بعضی افراد طبیعیتر باشند؛ اما بیشتر اصول مؤثر فاصلهگذاری و چیدمان را میتوان به قواعد قابل توضیح تبدیل کرد. در آغاز شاید لازم باشد مرتب به این قواعد مراجعه کنید. با تکرار، تصمیمها تدریجی و شهودی میشوند: میفهمید چه زمانی یک متن باید باریکتر شود، چه زمانی یک تصویر باید بزرگتر باشد، چه زمانی فاصله زیاد باعث گسست میشود و چه زمانی فاصله کم باعث ازدحام.
فضا را بپذیرید، اما آن را هدفمند مصرف کنید
در طراحی چاپ، طراح دائماً درگیر جا دادن محتوا در یک سطح محدود است. این عادت ممکن است به وب منتقل شود و نتیجه آن ستونی باریک در مرکز صفحه باشد؛ ستونی که محتوا را فشرده میکند و در دو سوی آن فضای بزرگی بدون کاربرد باقی میماند. وب چنین محدودیتی ندارد. صفحه میتواند بلند شود، عناصر در نمایشگرهای مختلف تغییر اندازه دهند و کاربر با اسکرول به ادامه محتوا برسد.
این آزادی به معنی پخشکردن بیقاعده محتوا نیست. باید بین سه متغیر تعادل برقرار شود: عرض قابل استفاده، اندازه عناصر و فاصله اطراف آنها. وقتی تیتر و پاراگراف بزرگتر میشوند، فضای اطراف نیز باید متناسب افزایش پیدا کند؛ در غیر این صورت، طراحی بزرگ است اما همچنان فشرده احساس میشود.
۳) صفحههای بلند و تجربه اسکرول
صفحه بلند ذاتاً بد نیست. صفحهای بد است که دلیلی برای ادامهدادن به کاربر نمیدهد. اگر محتوا ارزشمند، منظم و از نظر بصری متنوع باشد، صفحه بلند میتواند مانند یک روایت مرحلهبهمرحله عمل کند: مسئله را معرفی کند، مزایا را توضیح دهد، شواهد ارائه کند، به پرسشهای احتمالی پاسخ دهد و در زمان مناسب کاربر را به اقدام دعوت کند.
طول صفحه باید از نیاز محتوا پیروی کند. وقتی پیام ساده است، افزودن بخشهای تکراری فقط برای بلندتر شدن صفحه نتیجه معکوس دارد. در مقابل، وقتی تصمیم کاربر به توضیح، مقایسه یا اعتمادسازی بیشتری نیاز دارد، کوتاهکردن اجباری صفحه میتواند باعث شود کاربر پیش از دریافت اطلاعات کافی صفحه را ترک کند.
هر بخش باید دلیل مشخصی برای حضور داشته باشد و کاربر را طبیعی به بخش بعدی هدایت کند.
اندازهگیری به جای حدس
با ابزارهای تحلیل رفتار میتوان دید کاربران تا چه عمقی اسکرول میکنند، در چه نقاطی صفحه را ترک میکنند و روی کدام عناصر کلیک میکنند. افت اسکرول همیشه نشانه ضعف نیست؛ ممکن است یک دکمه موفق کاربر را به مرحله بعد منتقل کرده باشد. معیار اصلی این است که کاربران مناسب، اطلاعات کافی دریافت کنند و به اقدام موردنظر برسند.
۴) طراحی راحت و خوشخوان
در طراحی داخلی، چیدمان راحت به معنی فضای قابل استفاده، مسیر حرکت روشن و فاصله مناسب میان وسایل است. همین منطق در طراحی وب نیز کاربرد دارد. متن، تصویر، دکمه و کارتها مانند اجزای یک اتاق هستند. وقتی همه عناصر به هم چسبیدهاند، صفحه ناآرام و خستهکننده میشود. وقتی فاصلهها بیش از حد و بدون ارتباطاند، صفحه پراکنده و گسسته احساس میشود.
راحتی بصری باعث میشود کاربر مدت بیشتری بماند، تیترها را دنبال کند و احتمالاً وارد متنهای توضیحی شود. بیشتر کاربران ابتدا صفحه را اسکن میکنند. بنابراین چیدمان باید حتی پیش از خواندن دقیق، ساختار و پیام را منتقل کند.
فضای مناسب، توجه را روی هر گروه محتوایی متمرکز میکند و مسیر اسکن صفحه را روشنتر میسازد.
۵) طراحی محتوامحور
یکی از بزرگترین تهدیدها برای کیفیت چیدمان، وارد کردن متن خام و ویرایشنشده در قالب است. حتی اگر نوشتن محتوا وظیفه طراح نباشد، طراح باید بتواند درباره ساختار نمایش آن نظر بدهد. طراحی خوب فقط ظرف محتوا نیست؛ محتوا را قابل فهم، قابل اسکن و قابل اقدام میکند.
مشکل: متنهای بلند و یکپارچه
محتوای زیاد لزوماً بد نیست، اما باید به قطعات کوتاه تقسیم شود. هر بخش یک تیتر روشن داشته باشد که موضوع پاراگراف بعدی را بیان کند. این کار بدون حذف اطلاعات، خواندن و اسکن را آسانتر میکند.
مشکل: نبود تیتر
تیترها قلابهای بصری هستند. حتی اگر کاربر فقط تیترها را بخواند، باید بفهمد موضوع چیست، چه ارزشی ارائه میشود و چرا ادامه دادن ارزش دارد.
مشکل: کارتهای نامتوازن
در چیدمان چندستونه، اختلاف شدید طول متن باعث میشود ردیفها نامنظم به نظر برسند. متنها را تا حد امکان از نظر حجم نزدیک کنید یا ساختاری انتخاب کنید که ارتفاع متفاوت کارتها را بپذیرد.
مشکل: تیترهای طولانی
تیتر بالای پاراگراف بهتر است معمولاً در یک یا دو خط تمام شود. تیتر بلند، اندازه تایپ را محدود میکند و سلسلهمراتب را ضعیف میسازد. جمله بلند را میتوان به مقدمه یا نقلقول برجسته تبدیل کرد.
مشکل: دعوت به اقدام کم یا نامرتبط
کاربران در نقاط متفاوت آماده اقدام میشوند. دکمه باید کنار محتوایی قرار بگیرد که تصمیم را پشتیبانی میکند؛ نه اینکه صرفاً در ابتدا و انتهای صفحه تکرار شود.
مشکل: متن طولانی دکمه
متن دکمه را معمولاً به دو یا سه واژه محدود کنید. اگر توضیح بیشتری لازم است، از لینک متنی یا یک جمله کوتاه در کنار دکمه استفاده کنید. دکمه چندخطی شکل و کارکرد خود را از دست میدهد.
مشکل: تیترهای مبهم و بیش از حد تبلیغاتی
بازی زبانی زمانی مفید است که وضوح را قربانی نکند. کاربر نباید برای فهمیدن موضوع صفحه مجبور به حدس زدن یا کلیک کردن شود. تیتر میتواند جذاب باشد، اما باید در همان نگاه اول اطلاعات قابل استفاده ارائه دهد.
کاربر باید بتواند با نگاهکردن به تیترها و عناصر برجسته، مسیر و پیام اصلی صفحه را بفهمد.
۶) تسلط بر فاصلهگذاری
فاصله میان عناصر مرتبط
هرچه دو عنصر از نظر معنایی به هم نزدیکتر باشند، فاصله بصری آنها نیز باید کمتر باشد. تیتر، پاراگراف و دکمهای که یک پیام واحد را تشکیل میدهند باید مانند یک گروه دیده شوند. همین اصل درباره تصویر محصول و عنوان زیر آن نیز صدق میکند. فاصله کم در اینجا نشانه فشردگی نیست؛ نشانه ارتباط است.
فضای اطراف گروهها و ستونهای متنی
گروههای متنی در چهار طرف به فضای تنفس نیاز دارند. در متن چپچین یا راستچین، لبه نامنظم سطرها در یک سمت تشکیل میشود. اگر عنصر کناری بیش از حد به این لبه نزدیک باشد، بینظمی خطوط برجستهتر میشود؛ فضای خالی کمک میکند این لبه طبیعی و آرام دیده شود.
تعادل الزاماً به معنای تقارن نیست. یک بلوک راستچین میتواند اندکی از مرکز هندسی فاصله داشته باشد تا وزن بصری آن با جهت چینش متن هماهنگ شود. تلاش برای مرکزکردن اجباری همه چیز، گاهی نتیجهای مصنوعی ایجاد میکند.
فاصله کم درون یک گروه و فاصله بیشتر میان گروهها، رابطه عناصر را بدون توضیح اضافی منتقل میکند.
فضای خالی و تمرکز
فضای منفی باعث میشود چشم همزمان با عناصر رقیب درگیر نشود. وقتی گزینهها و پیامها بیش از حد نزدیک و متعدد باشند، زمان تصمیم افزایش مییابد. بنابراین فاصلهگذاری فقط یک ترجیح زیباییشناختی نیست؛ بخشی از معماری تصمیم است.
فاصله میان تصاویر مستطیلی هماندازه
تصاویر همشکل و هماندازه به دلیل لبههای منظم میتوانند با فاصله بسیار کم یا حتی بدون فاصله کنار هم قرار بگیرند. شباهت فرم باعث میشود ذهن آنها را یک مجموعه واحد ببیند. در چنین گریدی، فاصله دو یا چهل پیکسل بیشتر به سبک بصری مربوط است تا فهمپذیری.
تعادل در عرض کامل صفحه
صفحه وب را میتوان تا حدی شبیه یک تابلوی عمودی و قابل اسکرول دانست: هدف، اثرگذاری و خوانایی در اندازههای مختلف است. برای استفاده بیشتر از عرض صفحه، معمولاً باید تیتر و متن نیز بزرگتر شوند و فضای اطرافشان افزایش یابد. بزرگکردن ظرف بدون بزرگکردن محتوا فقط فضای خالی بیهدف تولید میکند.
فاصله عمودی میان بخشها
مقدار فاصله عمودی به تضاد پسزمینه وابسته است. اگر دو بخش پسزمینه یکسان داشته باشند، فاصلههای انتهای بخش اول و ابتدای بخش دوم با هم جمع میشوند و شکاف بزرگی میسازند. اگر پسزمینهها متفاوت باشند، خط مرزی بصری شکاف را تقسیم میکند و ممکن است برای تنفس مناسب، فاصله بیشتری لازم باشد.
۷) جریان بصری در طول صفحه
صفحه خوب باید هم منسجم باشد و هم تنوع داشته باشد. اگر تمام بخشها از یک الگو پیروی کنند، صفحه شبیه سندی طولانی و یکنواخت میشود. اگر هر بخش کاملاً متفاوت باشد، هویت مشترک از بین میرود. هدف این است که زبان بصری ثابت بماند، اما ریتم و ترکیببندی تغییر کند.
کارهایی که بهتر است انجام نشود
- یک چیدمان را بلافاصله زیر نسخه مشابه خودش تکرار نکنید.
- در بیشتر صفحهها، یک الگوی مشخص را بیش از حد تکرار نکنید؛ مگر صفحهای که ذاتاً فهرست یکنواختی از موارد دارد.
- چیدمانهای تقریباً مشابه را فقط با تغییر جزئی عرض یا فاصله پشت سر هم قرار ندهید.
- بین دو بخش با پسزمینه یکسان، شکاف بسیار بزرگ و بدون عنصر پیونددهنده ایجاد نکنید.
- بخشهای صرفاً متنی را بارها پشت سر هم تکرار نکنید.
- دو گرید تمامعرض با تعداد ستون ناسازگار را بدون هماهنگی خطوط کنار هم قرار ندهید.
- الگوی دو ستونِ تصویر-متن را به صورت چپ و راست بیپایان تکرار نکنید.
کارهایی که بهتر است انجام شود
- پس از یک بخش پرتصویر، بخشی آرامتر با فضای خالی بیشتر قرار دهید.
- پسزمینهها را در طول صفحه تغییر دهید، اما از الگوی مکانیکی و راهراه دوری کنید.
- بخشهای تصویری را با بخشهای متنی یا ساده متعادل کنید.
- نقاط تمرکز را جابهجا کنید تا چشم کاربر در یک مسیر یکنواخت گیر نکند.
تنوع در ترکیببندی باعث حفظ توجه میشود، در حالی که رنگ، تایپوگرافی و جزئیات مشترک انسجام را نگه میدارند.
۸) انتقالهای بهتر میان بخشها
تغییر پسزمینه یکی از سادهترین راههای تفکیک بخشهاست، اما اگر هر انتقال فقط یک خط افقی خشک باشد، صفحه میتواند سرد یا لایهلایه به نظر برسد. انتقال خوب باید با شخصیت بصری پروژه هماهنگ باشد و در عین ایجاد تفاوت، جریان صفحه را قطع نکند.
تضاد رنگی با خط مستقیم
دو مستطیل با رنگ متفاوت، تمیز و حرفهای هستند و برای فضاهای رسمی یا مینیمال مناسباند. با این حال، تکرار مداوم دو رنگ به شکل یکی در میان، اثر «راهراه» یا «لایههای پنکیکی» ایجاد میکند. بهتر است توالی متنوعتری از رنگ روشن، رنگ تیره، زمینه تصویری و بخشهای همرنگ به کار رود.
انتقالهای منحنی، زاویهدار و تصویری
منحنیها و فرمهای نرم برای هویتهای دوستانه و غیررسمی مناسباند. خطوط مورب، مثلثها و فرمهای شکسته حس انرژی، حرکت یا جدیت بیشتری دارند. یک تصویر یا عنصر تزئینی که در دو سوی مرز ادامه پیدا میکند، مرز میان بخشها را نرم میکند و اتصال بصری میسازد.
پسزمینههای تصویری
یک تصویر تمامعرض میتواند تنوع قدرتمندی ایجاد کند. در برخی طرحها، حرکت آرام تصویر هنگام اسکرول یا آشکارشدن بخشهای متفاوت آن، عمق بیشتری میسازد. انتقال از تصویر به رنگ ثابت زمانی حرفهایتر میشود که رنگها و فرمهای تصویر در مرز محو یا ترکیب شوند، نه اینکه ناگهان قطع شوند.
انتقال مبتنی بر گرید
دو بخش گریدی میتوانند بدون فاصله کنار هم قرار بگیرند، به شرط آنکه دستکم یکی از خطوط عمودی یا افقی در هر دو بخش ادامه پیدا کند. این خط مشترک، حتی در صورت تغییر تعداد ستونها، حس پیوستگی ایجاد میکند. اگر هیچ خطی همراستا نباشد، دو گرید جدا و تصادفی دیده میشوند.
اتصال بدون تغییر پسزمینه
همیشه لازم نیست رنگ پسزمینه تغییر کند. یک خط، تصویرسازی یا عنصر تزئینی میتواند از دو بخش عبور کند و آنها را به هم پیوند دهد. همچنین میتوان ارتفاع یا موقعیت عمودی محتوا را در ستونها کمی جابهجا کرد تا لبههای همه عناصر روی یک خط افقی خشک قرار نگیرند.
بیرونزدگی محتوا از پسزمینه
قرار دادن بخشی از کارت، تصویر یا عنصر گرافیکی روی مرز دو پسزمینه، هم تضاد را حفظ میکند و هم جریان را بهبود میدهد. این همپوشانی باید کنترلشده باشد؛ مقدار زیاد آن میتواند سلسلهمراتب و خوانایی را مختل کند.
نوع انتقال باید با لحن بصری پروژه هماهنگ باشد و کاربر را به ادامه صفحه هدایت کند، نه اینکه مرزی سخت ایجاد کند.
۹) طراحی صفحه اصلی
برای بسیاری از کاربران، بخش بالایی صفحه اصلی نخستین و شاید آخرین مواجهه با وبسایت است. این بخش باید در زمان کوتاهی سه وظیفه را انجام دهد:
جذابآنقدر اثرگذار باشد که توجه را جلب و حفظ کند.
واضحکاربر را مجبور به حدسزدن درباره موضوع و ارزش صفحه نکند.
درگیرکنندهانگیزه لازم برای کلیک یا ادامه اسکرول را ایجاد کند.
بخش قابل مشاهده پیش از اسکرول
منظور از این بخش، محدودهای است که هنگام بارگذاری صفحه و پیش از هر حرکت کاربر دیده میشود. اندازه آن در لپتاپ، موبایل و نمایشگرهای مختلف یکسان نیست؛ بنابراین باید بر «اولویت» تمرکز کرد، نه بر یک خط ثابت پیکسلی.
پیام اصلی، نشانه واضح موضوع، تصویر یا عنصر بصری اثرگذار و مسیر اقدام اولیه باید در این محدوده هماهنگ باشند. اشتباه رایج آن است که لوگو یا تصویر بسیار بزرگ، تمام فضای اولیه را اشغال کند و پیام اصلی به زیر اسکرول رانده شود.
در نمونه مناسب، پیام اصلی و مسیر اقدام پیش از اسکرول دیده میشوند؛ تصویر از محتوا پشتیبانی میکند، نه اینکه آن را پنهان کند.
اولویتبندی محتوا در صفحه اصلی
همه کاربران تا انتهای صفحه نمیروند. بنابراین مهمترین اطلاعات باید زودتر ارائه شود و جزئیات تخصصیتر در ادامه یا در صفحههای اختصاصی قرار گیرد. افزودن محتوا فقط برای پرکردن صفحه، باعث کاهش تمرکز میشود. هر بخش باید یا به فهم بهتر کمک کند، یا اعتماد بسازد، یا اعتراض احتمالی را برطرف کند، یا کاربر را به مرحله بعد هدایت کند.
صفحه اصلی ضعیف یکی از رایجترین نقاط شکست وبسایتهای کوچک است. بهتر است پیش از طراحی صفحههای فرعی، زمان کافی برای ایدهپردازی، آزمودن سلسلهمراتب و تأیید ساختار صفحه اصلی صرف شود.
۱۰) جمعبندی و چکلیست نهایی
طراحی وب برای طراحان گرافیک و هویت بصری، ادامه طبیعی همان مهارتهاست؛ با این تفاوت که صفحه ثابت نیست، اندازه نمایشگر تغییر میکند، کاربر حرکت میکند و محتوا باید در طول مسیر تصمیمگیری سازماندهی شود. کیفیت نهایی حاصل یک ترفند منفرد نیست؛ نتیجه هماهنگی فضا، تایپوگرافی، محتوا، تصویر، ریتم و اقدام است.
فضا و راحتی
- محتوا را به قطعات قابل هضم تقسیم کنید.
- از صفحه بلندِ ارزشمند نترسید.
- فضای خالی را برای تمرکز و سلسلهمراتب به کار ببرید.
محتوامحوری
- متن بلند را با تیترهای کوتاه تقسیم کنید.
- تیترها باید حتی بهتنهایی پیام را منتقل کنند.
- دکمهها کوتاه، مرتبط و در نقاط مناسب باشند.
فاصله و گروهبندی
- عناصر مرتبط را نزدیک نگه دارید.
- میان گروههای مستقل فاصله بیشتری قرار دهید.
- فاصله را با اندازه تایپ و عرض صفحه هماهنگ کنید.
جریان صفحه
- یک چیدمان را پشت سر هم تکرار نکنید.
- بخشهای تصویری و آرام را متعادل کنید.
- از انتقالهای هدفمند برای هدایت چشم استفاده کنید.
بخش اولیه صفحه
- موضوع، ارزش و اقدام اصلی را پیش از اسکرول روشن کنید.
- از تصویر اثرگذار در خدمت پیام استفاده کنید.
- مهمترین اطلاعات را زودتر و جزئیات را در ادامه ارائه دهید.
این مدل مفهومی سه جزء را کنار هم قرار میدهد: جذابیت بصری، وضوح ساختار و درگیری هدفمند. زیبایی بدون وضوح گیجکننده است، وضوح بدون جذابیت سرد است و هر دو بدون مسیر اقدام، نتیجه عملی ایجاد نمیکنند.
چکلیست پیش از تحویل
- آیا کاربر در چند ثانیه نخست موضوع و ارزش صفحه را متوجه میشود؟
- آیا تیترها بهتنهایی روایت منطقی و قابل فهمی دارند؟
- آیا طول پاراگرافها، عرض ستون و اندازه فونت خواندن را آسان میکنند؟
- آیا عناصر مرتبط نزدیک و بخشهای مستقل بهاندازه کافی جدا هستند؟
- آیا چیدمان در طول صفحه تنوع دارد، بدون آنکه هویت بصری از بین برود؟
- آیا پسزمینهها و انتقالها جریان را تقویت میکنند یا صفحه را تکهتکه نشان میدهند؟
- آیا دکمهها کوتاه، واضح و مرتبط با محتوای اطرافاند؟
- آیا محتوای مهمتر زودتر از جزئیات فرعی آمده است؟
- آیا نسخه موبایل نیز همان سلسلهمراتب و راحتی بصری را حفظ میکند؟
- آیا هر بخش دلیل مشخصی برای حضور دارد؟