آموزش فرآیند طراحی UX/UI - ایجاد Wireframes و طراحی نهایی
The UX/UI Design Process - Creating Wireframes and a Final Design
کل فرآیند طراحی UX/UI را طی کنید و یک قاب و طراحی کاری برای یک برنامه تلفن همراه ایجاد کنید.
طراحی رابط کاربری و تجربه کاربر را با دنبال کردن یک پروژه طراحی برنامه تلفن همراه از ابتدا تا انتها بیاموزید.
ما ابتدا فرآیند UX را با یادگیری اصول اولیه طراحی UX و توسعه طیف گسترده‌ای از موارد تحویل UX از جمله نمایه شخصی کاربر، نقشه سفر کاربر و نمودار جریان کاربر طی می‌کنیم.
بخش اول این دوره (دروس تئوری طراحی) را می توانید در اینجا در Skillshare بخوانید: .
بعد، در این دوره، به Adobe Xd می‌رویم تا یک قاب سیمی با وفاداری پایین ایجاد کنیم و در نهایت با افزودن نمادها، رنگ‌ها، دکمه‌ها و استایل نهایی، یک طرح صیقلی ایجاد می‌کنیم.
در نهایت، ما همه اینها را به هم پیوند می‌دهیم تا یک نمونه اولیه کاری ایجاد کنیم که می‌توانیم از آن برای آزمایش کاربر، ارائه مشتری یا فقط یک قطعه شروع فوق‌العاده برای پورتفولیوی جدید یا رو به رشد UX/UI شما استفاده کنیم.
همه باید مبانی طراحی UX عالی و فرآیند پشت آن را بدانند. پس از شرکت در این کلاس، می‌توانید ایده‌های UX/UI را در پروژه‌های کاری روزمره خود بگنجانید و حتی نگاهی اجمالی به زندگی طراحان UX/UI داشته باشید.
این کلاس برای همه است، که شامل طراحان گرافیک، توسعه دهندگان وب و هر کسی است که علاقه مند به کسب اطلاعات بیشتر در مورد فرآیند UX و UI با انجام یک پروژه عملی در دنیای واقعی است.
بنابراین، برای این سفر گسترده و سرگرم کننده در کل فرآیند UX/UI به من بپیوندید تا بتوانید در مورد این عرصه خارق العاده و ارزشمند طراحی دیجیتال هیجان زده شوید.
فاز 1: از شما می‌خواهم یک قاب سیمی با کیفیت پایین ایجاد کنید.
این می تواند شامل هر مقدار صفحه نمایش از فقط دویست تا دویست باشد! من از شما می‌خواهم که یک قاب اصلی را ترسیم و طرح‌بندی کنید که به کاربر کمک می‌کند تا به هدف نهایی خود برسد. این می تواند یک فرآیند پرداخت برای یک برنامه تلفن همراه یا می تواند برای یک طرح وب سایت باشد. به یاد داشته باشید، می توانید این قسمت را روی کاغذ ترسیم کنید یا از Adobe Xd، انتخاب خود استفاده کنید!
فاز 2: مرحله بعدی پروژه دانشجویی شما این است که این وایرفریم با کیفیت پایین را بگیرید و با افزودن رنگ نهایی، دکمه‌های نمادها و عکس‌ها، آن را به یک قاب سیمی با کیفیت بالا تبدیل کنید.
مرحله 3: آخرین مرحله پروژه شما استفاده از حالت نمونه اولیه در Adobe Xd برای پیوند دادن Wireframe خود برای تبدیل آن به یک Wireframe کار خواهد بود.
لطفاً با خیال راحت یک پروژه را اینجا در Skillshare شروع یا ارسال کنید، حتی اگر فقط مرحله اول پروژه خود را به پایان رسانده اید.
همچنین قسمت اول دوره را که به نظریه UX می پردازد، بررسی کنید. گامی حیاتی برای کمک به شما برای شروع کار با وایرفریم های خود. من می توانم در اوایل روند شما بازخورد بدهم. احساس نکنید که باید منتظر بمانید تا کل پروژه خود را برای ارسال آن به پایان برسانید.
قسمت 1: تئوری طراحی UX ( این کلاس)
لینک کلاس:
حتماً برای دریافت بازخورد و پرسیدن سؤالات، به گروه فیسبوک دانش‌آموز بپیوندید.
من مشتاقانه منتظر دیدن پروژه های شما هستم!
درس ها Lessons
-
صفحه منو Menu Screen
-
فهرست منو Menu listing
-
نمونه سازی - ایجاد انیمیشن Prototyping - Creating Animations
-
Wireframe با وفاداری بالا - صفحه ورود - قسمت 3 High fidelity wireframe - Login Screen - Part 3
-
قاب سیمی با وفاداری پایین - صفحه فهرست Low fidelity wireframe - the listing screen
-
ادامه صفحه فهرست Listing Screen Cont.
-
راهنمای دوره و گروه فیس بوک Course Guide and Facebook Group
-
قاب سیمی با وفاداری پایین - در حال راه اندازی Low fidelity wireframe - getting setup
-
قاب سیمی با وفاداری بالا - صفحه ورود به سیستم High fidelity wireframe - the Login Screen
-
Wireframe با وفاداری بالا - صفحه ورود - قسمت 2 High fidelity wireframe - Login Screen - part2
-
Wireframe با وفاداری پایین - فرآیند ورود - قسمت 2 Low fidelity wireframe - login process - part 2
-
پیش نمایش کلاس Class Preview
-
سبد خرید Shopping Cart
-
صفحه فهرست Listing Screen
-
Wireframe با وفاداری پایین - صفحه ورود به سیستم Low fidelity wireframe - login screen
-
قاب سیمی با وفاداری بالا - شروع به کار High fidelity wireframe - Getting Started
-
قاب سیمی با وفاداری پایین - پایان صفحه اصلی Low fidelity wireframe - home screen finish
-
اتمام پرداخت Finishing Up Checkout
-
قاب سیمی با وفاداری بالا - صفحه بازشو High fidelity wireframe - Popup Screen
-
نمونه سازی - پیوند دادن همه چیز Prototyping - Linking It All Up
https://donyad.com/d/683c
Lindsay Marsh
300000+ دانشجو | طراحی گرافیک، Adobe، Affinity و موارد دیگر
نمایش نظرات