6 نکته برای خوانا بودن متن در طراحی وب سایت - قسمت اول

طراحی سایت در مشهد

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

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

تمرکز بر قابل خواندن بودن متن

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

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

هر گونه مانعی برای خوانایی متن (فونت خیلی کوچک، رنگ فونتی که برای خواندن سخت است یا طول خط های نامنظم) این درصد را حتی بیشتر کاهش می دهد.

بنابراین هر چه بیشتر متن خود را به راحتی قابل خواندن نگه دارید، لذت بردن بازدیدکنندگان شما بیشتر خواهد شد و احتمالا آنها می خواهند مدت زمان بیشتری داشته باشند.

چطور متن را طراحی می کنید که مخاطبان شما را جذب و نگه می دارد؟ در اینجا چندین عامل برای بررسی وجود دارد:

1. طول خط

ممکن است ما صفحه کاغذی 8.5 × 11 داشته باشیم، اما وقتی که به خواندن روی صفحه می رسیم، طول خط باید بسیار کوتاه باشد. با خطوط طولانی متن، چشمان مردم باید از سمتی به سمت دیگر حرکت کنند تا همه کلمات را بگیرند. و سخت تر از آن وقتی است که مکان خود را از یک خط به پایین حرکت دهند.

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

با استفاده از وبلاگ ها، خطوط دیگر می توانند طولانی تر شوند، زیرا مردم عمیق تر در محتوا قرار می گیرند. به عنوان مثال، طول خط این وبلاگ حدود 115 کاراکتر است. برای کشف طول خطوط متن خود، آن را کپی کرده و در یک ابزار مانند lettercount.com قرار دهید.

برای تقسیم کردن متن و ایجاد خطوط کوتاهتر، از عناصر ستونها و عناصر عکس استفاده کنید.

2. کنتراست

هر چه کنتراست رنگی بین پس زمینه و متن بیشتر باشد، خوانایی بهتر می شود.

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


انتخاب رنگ مناسب

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

متن روشن در زمینه های تاریک

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

3. فضای سفید

ارتفاع کم بین خطوط، خواندن را سخت می کند.

در وب سایت شما نیازی به شلوغی نیست.به متن خود یک مقدار "فضای سفید" (فضای خالی) اطراف آن بدهید، بدین صورت خواندن و اسکن متن بسیار آسان تر خواهد بود.

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


فضا را اضافه کنید و پاراگرافها را بشکافید

برای ایجاد فضای سفارشی بیشتری در سایت خود، از عنصر Spacing و عنصر Horizontal Line استفاده کنید تا خوانایی بیشتری بین عناصر متن افزوده شود.

شما همچنین می توانید متن را به پاراگراف های کوچکتر تقسیم کنید یا لیست های شماره گذاری شده استفاده کنید.


ارتفاع خط خود را تنظیم کنید

از ویرایشگر متن برای افزایش ارتفاع خط متن خود استفاده کنید (این مقدار فضای سفید بین خطوط متن را تنظیم می کند). هیچ قانون خاصی برای ارتفاع متن وجود ندارد - شما باید آن را بر اساس فونت و اندازه فونت مورد استفاده خود، تنظیم کنید.