مراحل طراحی وب
قبل از شروع طراحی وب سایت، اسکلت سایت را باید بسازیم، که در بخش معماری اطلاعات توضیح داده شد.
به چه نوع ابزارهایی نیاز دارید؟
1- ابزار User Flow
Overflow (به زودی برای ویندوز خواهد آمد)
Wireflow (وب)
Flowmapp (وب)
2- ایزار Mockup
3- ابزار wireframe
4- ابزار پرتوتایپ(Prototype)
5- ابزار Animation
6- ابزار Hand off
چه ابزاری آخر سر استفاده کنیم؟
| نرم افزار | ||
| برای طراحی | Adobe Xd یا Invision | |
| برای پرتوتایپ | Adobe Xd | |
| برای انیمیشن | Invision یا AE | |
| برای Hand off | Zeplin یا Invision | |
| یک ابزار برای همه | Invision یا Adobe Xd | Invision یا Figma |
خودم از چه ابزاری استفاده میکنم؟
User Flow در XMind
طراحی در Adobe Xd
نمونه اولیه و تعاملی در Adobe Xd
انیمیشن در After Effects
تعامل با برنامه نویس در Zeplin
کار تیمی در Figma (فقط برای پروژههای خارجی)
1- Mock-up
تصویر یک صفحه از اپلیکیشن یا وب سایته که جذابیت بصریش صفره و یک یا چند مرحله از user flow رو نشون میده. ما Mock رو می سازیم تا بتوانیم سریع به بقیه یک نمونه از محصول رو نشون بدیم و بازخورد بگیرریم.
ابزارهای وایرفریمینگ: MockFlow- Balsamiq Mockups - Adobe XD
2- Wireframe
این mockهای مختلف چطور به هم وصل میشن؟ وقتی که روی یک دکمه خاص کلیک می کنیم کجا می ریم؟
این Wireframe همون Mockها هستن که بر اساس user flow به هم متصل شدن و کل وب سایت ما رو نشون میدن!
ابزارهای وایرفریمینگ: MockFlow- Balsamiq Mockups - Adobe XD
3- Design System
تم، رنگ، فونت، کتابخانه UI را انتخاب و طراحی می کنیم.
4- Hand Off
پیاده سازی UI
5- Enhance
بهبود مستمر