این فایل ارائه من (اسماعیل محمدی‌پناه) برای کارگاه آموزش مقدماتی طراحی واسط کاربری و تجربه کاربری است. در صورتی که طراحی واسط و تجربه کاربری علاقمند هستید و به تازگی می‌خواهید آن را آغاز کنید این فایل برای شما مناسب است. همچنین می‌توانید دوره پیشرفته را در این آدرس مشاهده کنید: https://www.slideshare.net/esmailmp/uxui-design-pro-workshop این کارگاه را در زمستان ۹۷ به دعوت بچه‌های خوب آکادمی جهش برگزار کردم. استفاده از این فایل برای مربیان، طراحان و هر کسی که علاقمند به موضوع دیزاین است با ذکر منبع بدون اشکال است. طبعا بسیاری از مطالب را به صورت شفاهی بیان کرده‌ام. اگر بعضی از قسمت‌ها قابل فهم نبود یا توضیح بیشتری نیاز داشت، با من تماس بگیرید؛ خوشحال می‌شوم. در این کارگاه این مطالب ارائه شد: بیان اهمیت و جایگاه طراحی آموزش فرآیند کلی طراحی اهمیت و تعریف طراحی تجربه کاربری طراحی کاربر محور کاربرپژوهی فرآیند طراحی تجربه کاربری تخصص‌های طراح تجربه کاربری ابزارهای طراحی تجربه کاربری آشنایی با ساخت پرسونا آشنایی با نقشه سفر مشتری آشنایی با معماری اطلاعات آشنایی با نمونه‌سازی سریع و طراحی وایرفریم آشنایی با آزمایش‌های تجربه کاربری روش‌های تمرین و فعالیت در طراحی تجربه کاربری شناخت طراحی واسط کاربری مرور سبک‌های طراحی واسط کاربری آشنایی با ترکیب بندی، رنگ و تایپوگرافی آشنایی با عناصر طراحی واسط کاربری آشنایی با طراحی واکنش‌گرا انجام پروژه گروهی

1. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫اول‬ ‫جلسه‬/۹‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

2. ‫پناه‬‫محمدی‬ ‫اسماعیل‬
‫کاربری‬ ‫تجربه‬ ‫طراح‬/‫کاربری‬ ‫واسط‬ ‫طراح‬/‫خدمات‬ ‫طراح‬
esmailmp@gmail.com

3. ‫دهیم‬‫می‬ ‫انجام‬ ‫دوره‬ ‫این‬ ‫در‬ ‫چه‬‫آن‬
‫جلسه‬‫سوم‬
‫کاربری‬ ‫تجربه‬ ‫های‬‫آزمایش‬ ‫با‬ ‫آشنایی‬
‫گرا‬‫واکنش‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫شده‬ ‫انجام‬ ‫های‬‫پروژه‬ ‫بررسی‬ ‫و‬ ‫نقد‬
‫ها‬‫پروژه‬ ‫ارائه‬
‫جلسه‬‫دوم‬
‫ت‬ ‫شده‬ ‫تهیه‬ ‫های‬‫وایرفریم‬ ‫بررسی‬ ‫و‬ ‫نقد‬‫ا‬
‫دوم‬ ‫جلسه‬
‫کاربری‬ ‫واسط‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫سازی‬‫وپیاده‬ ‫فردی‬ ‫فعالیت‬ ‫آغاز‬
‫افزار‬‫نرم‬ ‫در‬ ‫ها‬‫وایرفریم‬
‫جلسه‬‫اول‬
‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫طراحی‬ ‫پروژه‬ ‫انجام‬ ‫چگونگی‬ ‫با‬ ‫آشنایی‬
‫فعال‬ ‫آغاز‬ ‫و‬ ‫نفره‬ ‫سه‬ ‫های‬‫تیم‬ ‫تشکیل‬‫یت‬
‫گروهی‬

4. .‫مناسب‬ ‫های‬‫پاسخ‬ ‫کردن‬ ‫پیدا‬ ‫و‬ ‫مهم‬ ‫سواالت‬ ‫یافتن‬ ‫توانایی‬.‫نوآورانه‬ ‫و‬ ‫خالقانه‬ ‫مسئله‬ ‫حل‬.‫ت‬ ‫ایجاد‬ ‫و‬ ‫ارزش‬ ‫خلق‬‫مایز‬
.‫زندگی‬ ‫سبک‬ ‫تغییر‬ ‫و‬ ‫ایجاد‬.‫تجربه‬ ‫بهبود‬ ‫یا‬ ‫ساخت‬.‫بهبود‬ ‫یا‬ ‫ساخت‬‫رفتار‬‫کاربران‬.‫کس‬ ‫در‬ ‫موثر‬ ‫عامل‬‫کار‬ ‫و‬ ‫ب‬

5. ‫دیزاین‬ ‫کلی‬ ‫فرآیند‬
‫بررسی‬ ‫شناخت‬ ‫توسعه‬ ‫ارائه‬

6. ‫چیست؟‬ ‫کاربری‬ ‫تجربه‬

7. ‫کارب‬ ٔ‫تجربه‬ ‫کردن‬ ‫بهتر‬ ‫منظور‬ ‫به‬ ‫طراحی‬‫از‬ ‫ر‬
‫خدمت‬ ‫یا‬ ‫محصول‬ ‫از‬ ‫استفاده‬
‫کاربری‬ ‫تجربه‬(‫صورت‬ ‫هر‬ ‫در‬)‫تبدیل‬ ‫بهتری‬ ‫چیز‬ ‫به‬ ‫را‬ ‫آن‬ ‫باید‬ ‫شما‬ ،‫شود‬‫می‬ ‫خلق‬‫کنید‬.

8. ‫است؟‬ ‫مهم‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫چرا‬
•‫محصول‬ ‫یک‬ ‫شکست‬ ‫یا‬ ‫موفقیت‬/‫کاربران‬ ‫جذب‬ ‫در‬ ‫خدمت‬
•‫محصول‬ ‫توانایی‬/‫بازگشت‬ ‫نرخ‬ ‫بردن‬ ‫باال‬ ‫و‬ ‫کاربران‬ ‫نگهداشت‬ ‫در‬ ‫خدمت‬
•‫محصول‬ ‫موفقیت‬/‫کاربرانش‬ ‫سوی‬ ‫از‬ ،‫سایرین‬ ‫به‬ ‫شدن‬ ‫معرفی‬ ‫در‬ ‫خدمت‬
•‫کاربران‬ ‫در‬ ‫خشنودی‬ ‫یا‬ ‫رضایت‬ ‫ایجاد‬
•‫ارزش‬ ‫کسب‬ ‫و‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫موفقیت‬

9. ‫کاربری‬ ‫تجربه‬ ‫طراح‬ ‫کاری‬ ‫های‬‫فرصت‬
•‫طراحی‬ ‫استودیوهای‬ ‫و‬ ‫ها‬‫استارتاپ‬
•‫های‬‫شرکت‬‫افزاری‬‫نرم‬
•‫های‬‫آژانس‬‫آنالین‬ ‫تبلیغات‬
•‫ای‬‫رسانه‬ ‫چند‬ ‫های‬‫شرکت‬
•‫لنسینگ‬‫فری‬

11. ‫کردن‬ ‫همدلی‬ ‫آنالیز‬ ‫پردازی‬‫ایده‬ ‫سازی‬‫نمونه‬ ‫ارزیابی‬ ‫کردن‬ ‫تکرار‬
‫کاربر‬ ‫طراحی‬‫محور‬(‫محور‬‫انسان‬)
User-centered design

12. ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫مسیر‬
‫پژوهش‬:،‫ها‬‫داده‬ ‫تحلیل‬ ‫و‬ ‫آوری‬‫جمع‬،‫رقبا‬ ‫شناخت‬ ‫و‬ ‫بررسی‬‫کاربران‬ ‫و‬ ‫مخاطبان‬ ‫شناخت‬
‫اکتشاف‬:‫کند‬ ‫خشنود‬ ‫را‬ ‫کاربران‬ ‫که‬ ‫هایی‬‫حل‬‫راه‬ ‫ارائه‬ ‫و‬ ‫پردازی‬‫ایده‬.
‫دیزاین‬:‫عملی‬ ‫شکلی‬ ‫به‬ ‫آنها‬ ‫توسعه‬ ‫و‬ ‫ها‬‫حل‬‫راه‬ ‫بهترین‬ ‫انتخاب‬
‫خلق‬:‫سریع‬ ‫سازی‬‫نمونه‬ ،‫وایرفریم‬ ‫رسم‬
‫تکرار‬ ‫و‬ ‫آزمایش‬:‫نیازها‬ ‫و‬ ‫اهداف‬ ‫با‬ ‫تطابق‬ ‫بررسی‬ ،‫کاربران‬ ‫با‬ ‫شده‬‫دیزاین‬ ‫نمونه‬ ‫آزمودن‬

13. ‫کاربردپذیری‬
‫آن‬ ‫با‬ ‫کردن‬ ‫کار‬ ‫آیا‬
‫است؟‬ ‫ساده‬
‫محتوا‬ ‫راهبرد‬
‫متن‬ ‫از‬ ‫چیزی‬ ‫چه‬
‫در‬ ‫ها‬‫رسانه‬ ‫سایر‬ ‫و‬
‫است؟‬ ‫آن‬
‫اطالعات‬ ‫معماری‬
‫ساختار‬ ‫آیا‬
‫است؟‬ ‫فهم‬‫قابل‬
‫بصری‬ ‫دیزاین‬
‫نظر‬ ‫به‬ ‫چطور‬
‫آید؟‬‫می‬
‫تعاملی‬ ‫دیزاین‬
‫مواجه‬ ‫آن‬ ‫با‬ ‫چطور‬
‫شوند؟‬‫می‬

14. ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫ابزارهای‬
•‫کاربرپژوهی‬
•‫پرسونا‬ ‫ساخت‬
•‫کاربری‬ ‫سناریوی‬
•‫برد‬ ‫استوری‬
•‫مشتری‬ ‫سفر‬ ‫نقشه‬
•‫وایرفریم‬ ‫و‬ ‫اسکچ‬ ‫کشیدن‬
•‫سریع‬ ‫سازی‬‫نمونه‬

15. ‫کاربرپژوهی‬
‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫حین‬ ‫و‬ ‫قبل‬ ‫کاربر‬ ‫درک‬
•‫تمرکز‬ ‫گروه‬Focus groups
•‫مصاحبه‬Interviews
•‫ایملی‬ ‫نظرسنجی‬Email surveys
•‫برداری‬‫عکس‬ ‫و‬ ‫فیلم‬Camera studies
•‫مستقیم‬ ‫مشاهده‬Direct observation
•‫ها‬‫کارت‬ ‫سازی‬‫مرتب‬Card sorting
•‫چشم‬ ‫کردن‬ ‫دنبال‬Eye tracking
•‫ها‬‫کلیک‬ ‫جریان‬ ‫تحلیل‬Clickstream analysis
•‫آ‬ ‫آزمون‬/‫ب‬A/B testing
•‫کاربردپذیری‬ ‫مطالعه‬Usability studies

16. ‫پرسونا‬ ‫ساخت‬

17. ‫اول‬ ‫مرحله‬
‫فکرها‬
‫احساسات‬
‫ها‬‫گفته‬
‫کارها‬
‫ها‬‫فرصت‬
‫اجرایی‬ ‫های‬‫ایده‬
‫مشتری‬ ‫سفر‬ ‫نقشه‬

18. ‫اطالعات‬ ‫معماری‬

19. ‫وایرفریم‬ ‫طراحی‬

20. ‫عملی‬ ‫تمرین‬
‫اول‬ ‫موضوع‬:‫بپزیم؟‬ ‫غذایی‬ ‫چه‬ ‫که‬ ‫این‬ ‫راهنمایی‬ ‫برای‬ ‫طراحی‬
‫دوم‬ ‫موضوع‬:‫خانگ‬ ‫یا‬ ‫کارگاهی‬ ‫ساز‬‫دست‬ ‫تولیدات‬ ‫فروش‬ ‫برای‬ ‫طراحی‬‫ی‬
‫سوم‬ ‫موضوع‬:‫شخصی‬ ‫برند‬ ‫برای‬ ‫طراحی‬

21. ‫کنید‬ ‫تکمیل‬ ‫را‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫کاربرگ‬
‫پروژه‬ ‫کوتاه‬ ‫توضیح‬ ‫و‬ ‫عنوان‬:‫بنوی‬ ‫آن‬ ‫از‬ ‫کوتاهی‬ ‫توضیح‬ ‫همراه‬ ‫به‬ ‫را‬ ‫تان‬‫انتخابی‬ ‫موضوع‬‫سید‬
‫پروژه‬ ‫سوال‬ ‫یا‬ ‫مشکل‬ ‫شرح‬:‫دهید‬ ‫توضیح‬ ‫را‬ ‫مشکل‬ ‫یا‬ ‫سوال‬
‫پروژه‬ ‫اهداف‬:‫پروژه‬ ‫انداز‬‫چشم‬ ‫و‬ ‫نهایی‬ ‫خواسته‬ ‫کردن‬‫مشخص‬
‫شناخت‬:‫ب‬ ‫پرسونا‬ ‫یک‬ ‫و‬ ‫بشناسید‬ ‫را‬ ‫شده‬ ‫انجام‬ ‫های‬‫فعالیت‬ ‫و‬ ‫رقبا‬ ،‫کاربران‬ ،‫پروژه‬ ‫موضوع‬‫سازید‬
‫دیزاین‬ ‫و‬ ‫پردازی‬‫ایده‬:‫برگزینی‬ ‫را‬ ‫ایده‬ ‫بهترین‬ ‫و‬ ‫کنید‬ ‫پردازی‬‫ایده‬ ‫آمده‬ ‫دست‬ ‫به‬ ‫شناخت‬ ‫با‬‫د‬
‫وایرفریم‬ ‫ترسیم‬:‫کنید‬ ‫ترسیم‬ ‫را‬ ‫خود‬ ‫محصول‬ ‫وایرفریم‬

22. ‫اول‬ ‫جلسه‬ ‫پایان‬

23. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫دوم‬ ‫جلسه‬/۱۵‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

24. ‫چیست؟‬ ‫کاربری‬ ‫واسط‬

25. ‫ماشین‬‫انسان‬ ‫کاربری‬ ‫واسط‬

26. ‫چیست؟‬ ‫در‬ ‫کاربری‬ ‫واسط‬ ‫اهمیت‬
•‫است‬ ‫مهم‬ ‫تماس‬ ‫نقطه‬ ‫یک‬ ‫وبسایت‬
•‫گیرد‬‫می‬ ‫صورت‬ ‫وبسایت‬ ‫توسط‬ ‫شما‬ ‫معرفی‬
•‫شماست‬ ‫برند‬ ‫معرف‬ ‫وبسایت‬
•‫شماست‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫ویترین‬ ‫وبسایت‬
•‫بین‬ ‫شما‬۲‫تا‬۲۰‫کنید‬ ‫جذب‬ ‫را‬ ‫کاربر‬ ‫تا‬ ‫دارید‬ ‫زمان‬ ‫ثانیه‬
۱۰‫ثانیه‬
‫دارید‬ ‫فرصت‬

27. ‫تعامالت‬ ‫طراحی‬
•‫دیدن‬
•‫شنیدن‬
•‫کردن‬ ‫لمس‬
•‫چشیدن‬
•‫دادن‬ ‫حرکت‬
•‫کردن‬ ‫صحبت‬
‫ایجاد‬ ‫برای‬ ‫انسان‬ ‫های‬‫توانایی‬ ‫از‬ ‫استفاده‬‫تعامل‬

28. ‫دیزاین‬ ‫فرآیند‬ ‫از‬ ‫مرحله‬ ‫ترین‬‫مهم‬

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

30. ‫اپلیکیشن‬ ‫و‬ ‫وب‬ ‫برای‬ ‫طراحی‬ ‫شناخت‬

31. ‫؟‬

32. •‫کنم؟‬ ‫شروع‬ ‫صفحه‬ ‫کجای‬ ‫از‬
•‫کنید‬ ‫طراحی‬ ‫بروشور‬ ‫یا‬ ‫پوستر‬ ‫نیست‬ ‫قرار‬.‫باشید‬ ‫آگاه‬ ‫ها‬‫تفاوت‬ ‫به‬.
•‫شود‬ ‫تبدیل‬ ‫افزاری‬‫نرم‬ ‫کدهای‬ ‫به‬ ‫است‬ ‫قرار‬ ‫شما‬ ‫طراحی‬!‫باشید‬ ‫مراقب‬ ‫پس‬.
•‫است‬ ‫محدود‬ ‫دارید‬ ‫اختیار‬ ‫در‬ ‫که‬ ‫فضایی‬.‫بدانید‬ ‫را‬ ‫ها‬‫پیکسل‬ ‫تک‬ ‫تک‬ ‫قدر‬ ‫پس‬
•‫بشناسید‬ ‫را‬ ‫وب‬ ‫صفحه‬ ‫مختلف‬ ‫های‬‫قسمت‬.‫هستند؟‬ ‫مناسب‬ ‫چیزی‬ ‫چه‬ ‫برای‬ ‫کدام‬ ‫هر‬

33. ‫های‬‫سبک‬ ‫و‬ ‫ها‬‫گرایش‬
‫کاربری‬ ‫واسط‬ ‫طراحی‬ ‫مختلف‬
•‫ها‬‫سایت‬‫وب‬ ‫تحول‬ ‫سیر‬:‫طراحی‬ ‫یافتن‬ ‫اهمیت‬
•‫تغییر‬‫ها‬‫سبک‬:‫از‬‫همه‬ ‫شدن‬ ‫سایه‬ ‫بدون‬ ‫و‬ ‫تخت‬ ‫یا‬ ‫واقعیت‬ ‫بازنمایی‬ ‫برای‬ ‫تالش‬‫ع‬‫ناصر‬
•،‫کالسیک‬ ،‫مال‬‫مینی‬ ،‫مدرن‬ ‫های‬‫سبک‬‫فانتزی‬ ،‫لوکس‬‫و‬...

36. ‫ها‬‫مشی‬‫خط‬ ‫و‬ ‫ها‬‫چارچوب‬
• Metro
• Material
• iOS
• …
• Fundation
• Bootstrap
• Semantic UI
• Wirez
• Juiced
• …

39. ‫کنیم‬ ‫توجه‬ ‫نکات‬ ‫این‬ ‫به‬
•‫صفحه‬ ‫لود‬ ‫سرعت‬ ‫کنترل‬:‫صفحه‬ ‫حجم‬ ‫کنترل‬
•‫تصاویر‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫و‬ ‫صحیح‬ ‫استفاده‬
•‫ها‬‫آیکون‬ ‫و‬ ‫ها‬‫فونت‬ ‫از‬ ‫درست‬ ‫استفاده‬
•‫ها‬‫چارچوب‬ ‫از‬ ‫یکی‬ ‫در‬ ‫طراحی‬ ‫و‬ ‫کلی‬ ‫راهنمای‬ ‫خطوط‬ ‫رعایت‬
•‫ها‬‫رنگ‬ ‫از‬ ‫صحیح‬ ‫استفاده‬
•‫ها‬‫موشن‬ ‫از‬ ‫صحیح‬ ‫استفاده‬

40. ،‫عناصر‬ ‫چینش‬
‫الگوها‬‫و‬‫بند‬‫ترکیب‬‫ی‬
•‫دارید‬ ‫دست‬ ‫در‬ ‫که‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫اساس‬ ‫بر‬ ‫عناصر‬ ‫بندی‬‫اولویت‬
•‫و‬ ‫ها‬‫دکمه‬ ‫و‬ ‫عکس‬ ،‫ها‬‫متن‬ ،‫منو‬ ‫است؟‬ ‫مناسب‬ ‫کاری‬ ‫چه‬ ‫برای‬ ‫صفحه‬ ‫از‬ ‫قسمت‬ ‫هر‬...
•‫آماده‬ ‫های‬‫اوت‬‫لی‬ ‫از‬ ‫الگوگیری‬

41. ‫بندی‬‫ترکیب‬ ‫در‬ ‫موثر‬ ‫عوامل‬
‫اندازه‬/‫رنگ‬/‫قرارگیری‬ ‫محل‬

46. ‫سازی‬‫ساده‬
•‫محتوا‬ ‫سازی‬‫ساده‬:‫باشند‬ ‫فهم‬ ‫قابل‬ ‫سادگی‬ ‫به‬ ‫که‬ ‫هایی‬‫عبارت‬ ‫از‬ ‫استفاده‬
•‫بصری‬ ‫عناصر‬ ‫سازی‬‫ساده‬:‫استفاده‬‫بی‬ ‫خطوط‬ ‫حذف‬ ،‫اضافات‬ ‫حذف‬
•‫ها‬‫کادربندی‬ ‫حذف‬:‫رویت‬ ‫قابل‬ ‫غیر‬ ‫های‬‫ستون‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫بندی‬‫تقسیم‬ ‫و‬ ‫رویت‬ ‫قابل‬ ‫خطوط‬ ‫حذف‬

49. ‫رنگ‬
•‫رنگ‬ ‫اساس‬ ‫بر‬ ‫صفحه‬ ‫بندی‬ ‫تقسیم‬:‫اصلی‬ ‫عناصر‬ ‫یا‬ ‫عنصر‬ ،‫فرعی‬ ‫عناصر‬ ،‫زمینه‬
•‫ها‬‫رنگ‬ ‫خواص‬ ‫و‬ ‫معانی‬ ‫شناخت‬
•‫ها‬‫رنگ‬ ‫همنشینی‬ ‫و‬ ‫ترکیب‬ ‫شناخت‬
•‫رنگ‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫استفاده‬
•‫رنگی‬ ‫های‬‫طیف‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫و‬ ‫درست‬ ‫استفاده‬
•‫پروژه‬ ‫هر‬ ‫برای‬ ‫رنگ‬ ‫پالت‬ ‫ساختن‬

55. ‫تایپوگرافی‬
•‫در‬ ‫مهم‬ ‫عنصری‬ ‫نوشته‬‫بندی‬‫ترکیب‬‫است‬ ‫وب‬ ‫مختلف‬ ‫های‬‫بخش‬
•‫ها‬‫فونت‬ ‫اندازه‬:‫است‬ ‫مشخص‬ ‫و‬ ‫محدود‬ ‫ها‬‫اندازه‬ ‫تغییر‬
•‫هستند‬ ‫مشخص‬ ‫وب‬ ‫در‬ ‫استفاده‬ ‫قابل‬ ‫های‬‫فونت‬.
•‫کرد‬ ‫توجه‬ ‫آن‬ ‫به‬ ‫باید‬ ‫که‬ ‫دارد‬ ‫هایی‬‫حساسیت‬ ‫مرسوم‬ ‫غیر‬ ‫های‬‫فونت‬ ‫از‬ ‫استفاده‬
•‫تصویر‬ ‫نه‬ ‫باشند‬ ‫فونت‬ ‫باید‬ ‫امکان‬ ‫حد‬ ‫تا‬ ‫نوشته‬
•‫زیبایی‬ ‫در‬ ‫مهمی‬ ‫عامل‬ ‫ها‬‫نوشته‬ ‫بندی‬‫ترکیب‬‫بندی‬‫ترکیب‬‫است‬ ‫کلی‬

59. ‫ها‬‫آیکون‬ ‫و‬ ‫تصاویر‬ ‫از‬ ‫استفاده‬
•‫تصاویر‬ ‫از‬ ‫استفاده‬ ‫در‬ ‫صفحه‬ ‫حجم‬ ‫به‬ ‫دقت‬
•‫نیاز‬ ‫مورد‬ ‫جای‬ ‫در‬ ‫کیفیت‬ ‫با‬ ‫و‬ ‫بزرگ‬ ‫تصاویر‬ ‫از‬ ‫استفاده‬
•‫وب‬ ‫در‬ ‫استفاده‬ ‫برای‬ ‫تصاویر‬ ‫حجم‬ ‫کردن‬ ‫بهینه‬
•‫و‬ ‫ظاهر‬ ‫در‬ ‫تصاویر‬ ‫تغییر‬ ‫تاثیر‬ ‫به‬ ‫توجه‬‫بندی‬‫ترکیب‬‫سایت‬

61. ‫ها‬‫آیکون‬ ‫از‬ ‫استفاده‬
‫صورت‬ ‫به‬ ‫ترجیحا‬Font‫یا‬SVG
•‫بسته‬ ‫یک‬ ‫از‬ ‫ترجیحا‬ ‫و‬ ‫همسان‬ ‫ها‬‫آیکون‬ ‫از‬ ‫استفاده‬
•‫تصویر‬ ‫حالت‬ ‫در‬ ‫استفاده‬ ‫از‬ ‫پرهیز‬
•‫وکتور‬ ‫یا‬ ‫فونت‬ ‫قالب‬ ‫از‬ ‫استفاده‬
•‫کم‬ ‫نه‬ ‫زیاد‬ ‫نه‬ ،‫جا‬ ‫به‬ ‫استفاده‬
•‫تنهایی‬ ‫به‬ ‫آیکون‬ ‫از‬ ‫استفاده‬:‫مخاطبان‬ ‫برای‬ ‫مناسب‬ ‫فهم‬ ‫قابلیت‬
•‫آیکون‬ ‫بدون‬ ‫متن‬ ‫از‬ ‫استفاده‬:‫آیکون‬ ‫به‬ ‫نیاز‬ ‫عدم‬ ‫و‬ ‫طراحی‬ ‫کردن‬ ‫شلوغ‬ ‫از‬ ‫پرهیز‬
•‫متن‬ ‫و‬ ‫آیکون‬ ‫از‬ ‫استفاده‬:‫همه‬ ‫توسط‬ ‫شدن‬ ‫فهمیده‬ ‫از‬ ‫اطمینان‬ ‫برای‬‫کاربران‬

62. •‫کمک‬ ‫صفحه‬ ‫مهم‬ ‫های‬‫المان‬ ‫سایر‬ ‫شدن‬ ‫دیده‬ ‫به‬ ‫و‬ ‫هستند‬ ‫مهم‬ ‫بسیار‬ ‫خالی‬ ‫فضاهای‬
‫کنند‬‫می‬.
•‫ک‬ ‫پر‬ ‫آجر‬ ‫یا‬ ‫بلوک‬ ‫با‬ ‫منظم‬ ‫صورت‬ ‫به‬ ‫را‬ ‫آن‬ ‫تمام‬ ‫که‬ ‫نیست‬ ‫دیوار‬ ‫شبیه‬ ‫وبسایت‬‫نیم‬.
•‫نکنیم‬ ‫حمله‬ ‫مخاطب‬ ‫چشم‬ ‫به‬.‫بدهیم‬ ‫استراحت‬ ‫او‬ ‫به‬.
•‫می‬ ‫اسکن‬ ‫سرعت‬ ‫با‬ ‫بلکه‬ ‫خوانند‬‫نمی‬ ‫را‬ ‫ها‬‫آن‬ ‫وب‬ ‫صفحات‬ ‫دیدن‬ ‫هنگام‬ ‫در‬ ‫کاربران‬‫کنند‬.
‫شود‬‫می‬ ‫ها‬‫پیام‬ ‫بهتر‬ ‫انتقال‬ ‫باعث‬ ‫خالی‬ ‫فضاهای‬.
‫خالی‬ ‫فضای‬

63. ‫فعالیت‬ ‫به‬ ‫کاربر‬ ‫فراخوانی‬
Call to action

66. ‫میکروانیمیشن‬ ‫و‬ ‫انیمیشن‬
•‫کاربر‬ ‫با‬ ‫تعامل‬ ‫افزایش‬ ‫برای‬
•‫کاری‬ ‫انجام‬ ‫به‬ ‫ترغیب‬ ‫و‬ ‫فراخواندن‬ ‫برای‬
•‫جذابیت‬ ‫افزایش‬
•‫طبیعی‬ ‫اتفاقات‬ ‫و‬ ‫فرآیندها‬ ‫نمایش‬
•‫کاربر‬ ‫در‬ ‫احساس‬ ‫ایجاد‬

67. •‫کاربر‬ ‫حرکات‬ ‫به‬ ‫اپلیکیشن‬ ‫یا‬ ‫وبسایت‬ ‫صفحه‬ ‫عناصر‬ ‫بودن‬ ‫حساس‬
•‫کاربردپذیری‬ ‫افزایش‬ ‫و‬ ‫کاربر‬ ‫با‬ ‫تعامل‬ ‫افزایش‬
•‫میکروانیمیشن‬ ‫یا‬ ‫انیمیشن‬
•‫شود‬ ‫دیده‬ ‫باید‬ ‫المان‬ ‫هر‬ ‫برای‬ ‫مختلف‬ ‫های‬‫حالت‬.
•‫دکمه‬ ‫یک‬ ‫مثال‬ ‫عنوان‬ ‫به‬:‫است‬ ‫گرفته‬ ‫قرار‬ ‫آن‬ ‫روی‬ ‫موس‬ ‫که‬ ‫حالتی‬ ،‫عادی‬ ‫حالت‬،
‫ک‬ ‫از‬ ‫بعد‬ ‫فعالیت‬ ‫انجام‬ ‫حال‬ ‫در‬ ‫که‬ ‫حالتی‬ ،‫است‬ ‫شده‬ ‫کلیک‬ ‫آن‬ ‫روی‬ ‫که‬ ‫حالتی‬‫لیک‬
‫است‬.‫فایل‬ ‫یک‬ ‫دانلود‬ ‫حال‬ ‫در‬ ‫مثال‬.
‫کاربر‬ ‫به‬ ‫واکنش‬

71. •‫ها‬‫دستگاه‬ ‫تمام‬ ‫در‬ ‫وبسایت‬ ‫درست‬ ‫نمایش‬
•‫چینش‬ ‫و‬ ‫ها‬‫اندازه‬ ‫در‬ ‫تغییر‬
•‫عناصر‬ ‫کردن‬ ‫اضافه‬ ‫و‬ ‫حذف‬
•‫کاربردپذیری‬ ‫افزایش‬
‫گرا‬‫واکنش‬ ‫طراحی‬

75. •‫ها‬‫فرم‬
•‫ها‬‫فرآیند‬ ‫نمایش‬
•‫ها‬‫پیغام‬
•‫منو‬‫و‬‫تب‬
•‫فیلدهای‬‫ورود‬‫اطالعات‬
•‫ها‬‫دکمه‬
•‫انواع‬،‫عکس‬ ،‫متنی‬ ‫محتوای‬‫فیلم‬
•‫ها‬‫حرکت‬
•‫جداول‬
•‫فیلترها‬
•‫جستجو‬
•‫مدیریت‬‫و‬ ‫محتوا‬‫داشبورد‬
•‫خرید‬‫و‬‫فروش‬
•‫محیط‬‫و‬ ‫نوشتن‬‫تعامالت‬
•‫راهنماها‬
‫وب‬ ‫صفحات‬ ‫عناصر‬

76. Adobe Photoshop sketchAdobe Experience Design
‫افزارها‬‫نرم‬

80. ‫دوم‬ ‫جلسه‬ ‫پایان‬

81. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫سوم‬ ‫جلسه‬/۱۶‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

82. ‫کاربردپذیری‬ ‫آزمون‬
Usability Testing
‫اول‬ ‫گام‬:‫کنیم‬‫می‬ ‫آماده‬ ‫آزمون‬ ‫برای‬ ‫را‬ ‫طراحی‬ ‫یا‬ ‫محصول‬.
‫دوم‬ ‫گام‬:‫کنیم‬‫می‬ ‫پیدا‬ ‫را‬ ‫آزمون‬ ‫در‬ ‫کنندگان‬ ‫اشرکت‬.
‫سوم‬ ‫گام‬:‫نویسیم‬‫می‬ ‫آزمون‬ ‫انجام‬ ‫مسیر‬ ‫برای‬ ‫طرحی‬.
‫چهارم‬ ‫گام‬:‫کنیم‬‫می‬ ‫راهبری‬ ‫و‬ ‫مدیریت‬ ‫را‬ ‫زمون‬.
‫گام‬‫پنجم‬:‫کنیم‬‫می‬ ‫بیان‬ ‫و‬ ‫مشخص‬ ‫را‬ ‫ها‬‫یافته‬.

87. ‫وب‬ ‫برای‬ ‫مناسب‬ ‫قلم‬ ‫چند‬
•‫یکان‬B Yekan
•‫یکان‬ ‫ایران‬IranYekan
•‫سنس‬‫ایران‬IranSans
•‫ایران‬Iran
•‫بلک‬ ‫ایران‬Iran Black
•‫رویا‬B Roya
•‫نازنین‬B nazanin
•‫میترا‬B Mitra
•‫تیتر‬B Titr
‫فونت‬ ‫خرید‬:fontiran.com

88. ‫مناسب‬ ‫آیکون‬ ‫مجموعه‬ ‫چند‬
fontawesome.com
iconscout.com/unicons
flaticon.com

92. ‫دیدن‬
‫دیدن‬ ‫درست‬ ‫و‬

104. cssdesignawards.comcssdesignawards.com

105. ‫برگزیده‬ ‫های‬‫نمونه‬ ‫پیگیری‬
cssdesignawards.com
ux-design-awards.com
webbyawards.com

109. ‫گروهی‬ ‫های‬‫فعالیت‬ ‫ارائه‬
•‫تیم‬ ‫هر‬۵‫دارد‬ ‫زمان‬ ‫دقیقه‬:
•‫پردازی‬‫ایده‬ ‫و‬ ‫موضوع‬ ‫انتخاب‬ ‫فرآیند‬
•‫پروژه‬ ‫شرح‬ ‫و‬ ‫برتر‬ ‫ایده‬ ‫انتخاب‬
•‫ها‬‫طراحی‬ ‫نتیجه‬ ‫ارائه‬

110. ‫جلسه‬ ‫پایان‬‫سوم‬