آموزش فرآیند طراحی 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
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/683c
Lindsay Marsh
300000+ دانشجو | طراحی گرافیک، Adobe، Affinity و موارد دیگر
نمایش نظرات