آموزش های ویدیویی رایگان برنامه نویسی و وب

آموزش ویدیویی طراحی رابط کاربری وبسایت با Adobe XD

آموزش تصویری طراحی رابط کاربری وبسایت شرکتی

2

رابط کاربری وبسایت ٬ یکی از مهم ترین قسمت های آن به شمار می رود.چرا که تنها چیزی است که کاربر شما در هنگام مواجهه با وبسایتتان می بیند.بنابراین همیشه افراد سعی خود را می کنند تا یک رابط کاربری قابل قبول برای وبسایت و اپلیکیشن خود ارائه کنند.در این آموزش ویدیویی طراحی رابط کاربری وبسایت ٬ به شما آموزش می دهیم که چگونه با استفاده از نرم افزار رایگان Adobe XD به طراحی رابط کاربری وبسایت بپردازید.

 

منظور از رابط کاربری چیست؟

رابط کاربری ٬ معادل فارسی UI ( User Interface ) است.در واقع به جلوه بصری هر چیز می توان رابط کاربری گفت.

نرم افزار Adobe XD چیست؟ – آموزش ویدیویی طراحی رابط کاربری وبسایت

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

Adobe XD نام نرم افزار نسبتا جدید شرکت ادوبی است که مختص طراحی رابط کاربری ارائه شده است. و با آن می توانید رابط کاربری اپلیکیشن و یا یک وبسایت را طراحی نمایید.

در آموزش ویدیویی طراحی رابط کاربری وبسایت با Adobe XD چه مطالبی گفته می شود؟

آموزش ویدیویی طراحی رابط کاربری وب سایت

در این ویدیو در مورد قوانین مهم طراحی رابط کاربری توضیح می دهیم.همچنین با استفاده از برنامه Adobe XD به طراحی هدر رابط کاربری یک وبسایت ساده شرکتی می پردازیم تا به صورت پروژه محور با قوانین و همچنین نحوه استفاده از نرم افزار Adobe XD آشنا شویم.

۴ قانون مهم در طراحی رابط کاربری

همانطور که در ویدیوی آموزش طراحی رابط کاربری وبسایت با Adobe XD می گوییم ٬ ۴ قانون برای طراحی رابط کاربری می توان در نظر گرفت :

۱. تضاد و رنگ ها

۲. فونت و تایپوگرافی

۳. فضای خالی و فاصله

۴. ثبات عناصر و همسان سازی

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

آموزش ویدیویی طراحی رابط کاربری وبسایت

لینک وبسایت های استفاده شده در آموزش ویدیویی طراحی رابط کاربری وبسایت با Adobe XD

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

Illustration های زیبا و رایگان نیز از وبسایت Undraw قابل دریافت هستند.و در نهایت آیکون های استفاده شده که از وبسایت Flaticon قابل دریافت هستند.

جدای از این موارد ٬ برای شروع بد نیست از رنگ های قرار گرفته در وبسایت MaterialUI استفاده کنید تا وقتی که با رنگ ها بیشتر آشنا شوید.

در صورتی که به طراحی رابط کاربری علاقه مند هستید و قصد دارید در آینده این رشته را به عنوان شغل خود برگزینید ٬ بد نیست که از وبسایت های پایین بازدید کنید تا با جدیدترین سبک های طراحی رابط کاربری آشنا شوید :

Behance.net

Dribbble.com

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

در کل هم ببخشید دیگه صدام یکم گرفته بود :))

2 نظرات
  1. محمد می گوید

    سلام. وقتتون بخیر. ممنون از آموزش خوبتون
    سوالی داشتم. طرح خیلی زیبایی زدین اما آیا پیاده‌سازی این طرح‌ها با css و html دشوار نیست؟ آخه خیلی طرح‌های قشنگی میشه زد ولی پیاده‌سازیشون به چه نحو خواهد بود؟ ممنون میشم توضیح بدین

    1. محمد صالح موسی پور می گوید

      سلام وقت بخیر.
      پیاده سازی همچین چیزی یه مقدار شاید زمانبر یا دشوار تر از قالب های معمولی باشه اما شدنی هست.شما اون منحنی سمت راست رو به عنوان یک عکس با فرمت PNG یا SVG خروجی میگیرید و با استفاده از دستور های position:absolute و position:relative (برای عنصر مادر عکس) عکس رو در جای خودش میذارید.سمت چپ انداختن محتوا هم که کار خاصی نداره فقط کافی از Padding یا Float یا Position:absolute یا FlexBox استفاده کنید.فقط باید حواستون باشه که روی رزولوشن های مختلف تست و پیاده سازی کنید که به مشکل برخورد نکنن و همین هست که یکم زمانبر میکنه پیاده سازی اینجور طرح ها رو.
      موفق باشید.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.