dashbord asansor
این پروژه در دوره کارآموزی من و در نقش UI/UX Designer انجام شد. در این دوره فرصت داشتم فرآیند طراحی یک محصول دیجیتال را از صفر تا صد یاد بگیرم و در طراحی داشبورد مربوط به سیستم مدیریت آسانسور تجربه کسب کنم. در این پروژه روی ساختار صفحات، طراحی رابط کاربری و ایجاد تجربه‌ای ساده و قابل‌فهم برای کاربر کار کردم و با روند واقعی کار در یک تیم طراحی آشنا شدم. به دلیل محرمانگی پروژه، امکان نمایش یا ارائه اطلاعات کامل و جزئیات تمامی بخش‌های محصول در پورتفولیو وجود ندارد؛ بنابراین تنها بخش‌هایی از کار که امکان انتشار آن‌ها وجود دارد در اینجا نمایش داده شده است.
اطلاعات پروژه
روند طراحی
-
آشنایی با محصول
در شروع کارآموزی با محصول، ساختار کلی سیستم و نحوه عملکرد بخش‌های مختلف آشنا شدم. همچنین با روند کاری تیم طراحی و ارتباط بین تیم‌های UI/UX، Front-end و Back-end آشنا شدم تا درک بهتری از فرآیند واقعی طراحی و توسعه محصول داشته باشم.
-
بررسی و تحلیل
نیازمندی‌های بخش‌های مختلف محصول را بررسی کردم و با توجه به اطلاعاتی که در اختیارم قرار می‌گرفت، ساختار صفحات و محتوای موردنیاز هر بخش را مشخص کردم. در این مرحله تلاش کردم اطلاعات پیچیده داشبورد به شکلی منظم و قابل‌فهم برای کاربر نمایش داده شود.
-
Wireframe
قبل از شروع طراحی نهایی، ساختار اولیه صفحات را به صورت Wireframe مشخص کردم. در این مرحله تمرکز اصلی روی چیدمان اطلاعات، سلسله‌مراتب محتوا، مسیر دسترسی کاربر و جایگاه المان‌های اصلی داشبورد بود.
-
UI Design
پس از مشخص شدن ساختار صفحات، طراحی رابط کاربری را شروع کردم. برای ایجاد یک رابط منسجم و قابل توسعه، بخش‌های مختلف Design System از جمله Color System، Typography، Spacing، Grid و Components را تعریف و سازمان‌دهی کردم. همچنین برای المان‌های تکرارشونده مانند دکمه‌ها، Inputها، جدول‌ها، کارت‌ها، وضعیت‌ها و سایر کامپوننت‌های موردنیاز، ساختار مشخصی ایجاد کردم تا طراحی صفحات مختلف یکپارچه باشد و تغییرات آینده راحت‌تر انجام شود.
-
Design Tokens و ساختاردهی کامپوننت‌ها
برای منظم‌تر شدن فایل طراحی، استایل‌ها و مقادیر تکرارشونده را به صورت ساختاریافته تعریف کردم و از Design Tokens برای مواردی مانند رنگ‌ها، فاصله‌ها، اندازه‌ها و سایر مقادیر طراحی استفاده کردم. کامپوننت‌ها نیز به شکلی طراحی شدند که قابلیت استفاده مجدد داشته باشند و بتوان از آن‌ها در بخش‌های مختلف محصول استفاده کرد.
-
همکاری با تیم Front-end و Back-end
در طول پروژه با تیم‌های Front-end و Back-end در ارتباط بودم و درباره نحوه عملکرد بخش‌های مختلف، اطلاعات موردنیاز و محدودیت‌های فنی هماهنگی انجام می‌دادم. این همکاری باعث شد درک بهتری از تفاوت بین طراحی در Figma و پیاده‌سازی واقعی محصول پیدا کنم و طراحی‌ها را با توجه به شرایط و نیازهای فنی پروژه اصلاح و هماهنگ کنم.
تصاویر پروژه
