3 اصل طراحی وب که هر مبتدی باید بداند

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

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

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

سه اصل اساسی طراحی وب سایت چیست؟
گزینه های زیادی را ارائه ندهید (پارادوکس انتخاب)
چیزها را به ترتیب منطقی قرار دهید (سلسله مراتب بصری)
فضای کافی بین موارد موجود در صفحه خود بگذارید (فضای سفید)

پارادوکس انتخاب


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

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

در اینجا مثالی از صفحه با تعداد معقول انتخاب وجود دارد. این طرح به خواننده نشان می دهد که ابتدا چه چیزی بخواند و بعد به کجا برود.

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

سلسله مراتب بصری


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

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

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

چگونه از سلسله مراتب بصری در طراحی وب سایت خود استفاده می کنید؟
ایجاد سلسله مراتب بصری ایجاد اختلاف بین عناصر است. اگر همه چیز را یک فونت بزرگ کنید زیرا همه چیز مهم است ، پس این همان کاری است که هیچ چیز مهمی ایجاد نکنید. در عوض به این رویکردهای مختلف فکر کنید:

اندازه. بزرگتر = مهمتر. کوچکتر = از اهمیت کمتری برخوردار است. از عناوین بزرگ ، متوسط و کوچک استفاده کنید تا متن شما شکسته شود و به صفحه شما ساختار ببخشد. یک تصویر بزرگ از تعداد تصاویر کوچکتر در یک شبکه مهمتر است.
رنگ به طور معمول ما در مورد رنگ به عنوان شخصیت در وب سایت شما صحبت می کنیم ، اما همچنین ابزاری برای جلب توجه افراد است. یک رنگ غیرمعمول که از بقیه صفحه شما متمایز است می تواند به تأکید بر نکته مهمی کمک کند.
تعیین سطح. اطلاعات بالای صفحه مهمتر از اطلاعات پایین است. اطلاعات سمت چپ به طور سنتی مهمتر از آنچه در سمت راست است (از آنجا که ما معمولاً با الگوی F یا Z شکل می خوانیم) از اهمیت بیشتری برخوردار است.

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

فضای سفید


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

فضای سفید خواندن و پیمایش سایت شما را بسیار آسان می کند. برای وب سایت خود آن را به عنوان ماری کوندو در نظر بگیرید – تفاوت بین جستجوی چیزی در کمد لباس پر از لباس در مقابل یک لباس نامرتب.

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

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

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments