در این مقاله بررسی میکنیم که چطور استفاده درست از ابزارهایی مانند تایپوگرافی ، سلسله مراتب بصری، پالت رنگی و شبکه بندی تراز باعث می‌شوند یک طرح خوب به نظر برسد.
جزییات بصری مانند قلمها، رنگ‌ها و ترازبندی، در خلق یک تجربه و در نهایت ارزیابی کاربر از نام و نشان شما نقش داشته و ویژگی‌های برند را (مانند دوستی یا قابلیت اطمینان) بیان میکنند. به راحتی می توان با یک نگاه متوجه شد که یک طرح خوب به نظر می رسد یا نه؟ اما اغلب تشخیص اینکه چرا خوب به نظر می رسد بسیار سخت است. در این مقاله ما سه طراحی رابط کاربری را تجزیه و تحلیل و اصول طراحی بصری که آنها را جذاب میکند را بررسی میکنیم.
اولین مثال ما از وبسایت مدیوم است. این وب سایت با استفاده از طراحی یک شبکه، فضای سفید و یک سیستم تایپوگرافی با حفظ زیبایی و سادگی، تجربه ای لذت بخش ازخواندن راحت مقالات که هدف اصلی این سایت است برای مخاطب ایجاد میکند.
چیدمان بر اساس یک شبکه، یک شبکه شامل دو ستون در این طرح (خطوط صورتی در تصویر بالا) دیده می شود. شبکه ستونی اول به عنوان لنگر عمودی برای تراز کردن المانهای موجود در سمت چپ وجود دارد از آنجایی که محتواهای نوار کناری به صورت چپ چین قرار گرفته اسکن آنها توسط کاربر راحتر و سریعتر است ( توجه داشته باشید که این یک نمونه سایت انگلیسی زبان است که نوشتار طراحی واضح به نظر می رسد و محتوای نوار کناری اسکن آسان است. متن مقاله نیز در یک ستون دیگر و به صورت چپ چین تراز شده است تراز کردن متن های بلند اهمیت زیادی در تجربه خوب برای مخاطب ایجاد میکند چرا که خوانند به راحتی مب تواند شروع خط بعد را قبل از آنکه آخرین کلمه خط قبلی از ذهنش بپرد، پیدا کند. شما در طراحی ها یتان می توانید از یک شبکه تراز بندی منظم و منسجم استفاده کنید با این تفاوت که تراز بندی در صفحات فارسی می بایست از سمت راست باشد.
تنوع در قلمهای استفاده شده در سایت Medium شامل سبکهای متفاوت از یک خانواده قلم (حروف کوچک، پررنگ، مورب، زیرخط دار) با تغییرات جزئی در رنگ (مشکی در مقابل خاکستری) می باشد
در واقع در این سایت از یک قلم استفاده شده و برای ایجاد تمایز در بین انواع محتوا از تغییرات رنگ و سبک های مختلف قلم استفاده میکند. چرا که استفاده از قلمها یی با سبکهای متفاوت مانند استفاده از تعداد زیاد رنگ، علاوه بر مختل کردن انسجام و یکپارچگی طرح باعث سردرگمی کاربر می شود. این کار باعث می شود که کاربر در طرح صفحه نتواند هیچ نظم و الگویی را شناسایی کند و در نتیجه طرح شما را تصادفی و بی قاعده ارزیابی می کند. برای مثال در تیتر WRITTEN BY استفاده از حروف کاپیتال علاوه بر ایجاد توجه، نسبت به بقیه متن تمایز ایجاد میکند به عنوان یک قاعده کلی، یک سیستم تایپوگرافی را شناسایی کنید و طراحی خود را به 1 یا 2 قلم محدود کنید. همیشه از نوع یکسانی (مورب، پررنگ، حروف کوچک) برای هدف های مشابه استفاده کنید
وب سایت ویرگول با پیروی از اصولی مشابه (شکل زیر) یک نمونه خوب در وب پارسی با خوانایی بالاست
استفاده از فضای سفید: فضای اضافی بین خطوط متن. تیتر، در این طرح برای جدا کردن پارگراف ها از فضای سفید بیشتری (4 تا 6 پیکسل بزرگتر از اندازه قلم) استفاده میکنند. این فضای سفید کمی بیشتر از فضای پیش فرض (که معمولاً 2 پیکسل بیشتر از اندازه قلم است) بین خطوط عادی است. استفاده از این فضاهای سفید اضافی باع شکسته شدن متن های طولانی و بلوک بندی می شو که باعث می شود متن در نگاه اول دلپذیر تر و خواناتر به نظر برسد. اگر متن طولانی در صفحه خود دارید از قانون زیر میتوانید برای ایجاد یک فاصله مناسب برای بین خطوط استفاده نمایید این کار متن شما را خواناتر و روانتر میکند.نکته دیگر در مورد فونتها، استفاده از فونتهایی است که متناسب با صفحات وب طراحی شده باشند. به ویژه قلم های فارسی. معمولا این قلمها فاصله مناسب بین حروف را رعایت میکنند و درنتیجه میزان خوانایی بالای دارند. علاوه بر آن چندین مدل سبک دارند که میتواند کلیه نیازهای یک طراح وب برای ایجاد تمایز و سلسله مراتب بصری به وسیله سبک و ابعاد قلم را پوشش دهد. قلمهایی مانند ایران سانس، وزیر، انجمن، کلمه، دانا و غیره… تعدادی از فونتهایی است که برای طراحی وب سایت مناسب هستند. در مجموع، همین جزئیات، طراحی را زیبا می کند و طرح را با هدف اصلی که بهینه کردن قابلیت خواندن است، متناسب می کند.
اگه این مقاله رو دوست داشتی اینجا میتونی بقیه اش رو مطالعه کنی
