ایکون سبد خرید

رابط کاربری و طراحی سایت اصولی

دوره طراحی سایت

فهرست مطالب

طراحی سایت طبق UI-UX

طراحی سایت به دو بخش تقسیم می شود.طرح رابط کاربری و توسعه رابط کاربری

خب هر کدام را به طوره خلاصه توضیح خواهم داد.

طرح رابط کاربری(ui/ux): برای اینکه این موضوع را بهتر درک کنید.می خواهم این را با مثال بیان کنم.مثلا ما میخواهیم هدر یک سایت را طراحی کنیم،اینجا ux به کمک ما می آید.یعنی چی؟یعنی اینکه میاد طبق اصول و استاندارد های مشخص شده که این استاندارد ها برای راحتی کابر بنا شده است،به ما نشان می دهد که هر المان در کدام قسمت قرار بگیرد.در کنار این ui میگه که این المان چه ظاهری داشته باشه و با دیگر المان ها چه شباهتی

پس اگه متوجه شده باشید،تمام این ها برای جذب کاربر و راحتی اوست،که این موضوع باعث بازدید و فروش بیشتر می شود.به همین دلیل توصیه ما این است که از ui/ux ( رابط کاربری )استفاده کنید.

رابط کاربری

طرح رابط کاربری رایگان

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

برای شروع شما نیاز به برنامه مخصوص این کار دارید.یعنی ادوبی ایکس دی و یا فتوشاپ

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

بیشتر بخوانید:
دوره رایگان طراح شو _ دوره طراحی سایت

معرفی سایت برای طرح های رابط کاربری

سایت های ارائه دهنده طرح رابط کاربری

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

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

Graphicburger

Dribbblegraphics

Graphicgoogle

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

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

نکته: دقت داشته باشید که فایل با پسوند psd باشد.

چند نکته درباره طرح های رابط کاربری

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

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

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

بیشتر بخوانید:
جلسه دوم این آموزش (آشنایی با المنتور)

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

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

دیدگاه‌ خود را بنویسید

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

آخرین مقالات