چالش اصلی

ویانا سیستم یکی از پروژه‌هایی بود که تمرکز اصلی من در آن به‌صورت کامل روی UI/UX و توسعه Frontend قرار داشت.

هدف اصلی پروژه، پیاده‌سازی مجموعه‌ای از Landing Pageهای شرکتی بر اساس طراحی‌های ارائه‌شده در Figma بود.

در این پروژه تمرکز من بیشتر از پیاده‌سازی صرف صفحات، روی این موضوع بود که طراحی نهایی تا حد ممکن به طرح اصلی نزدیک باشد، در تمام اندازه‌های صفحه‌نمایش عملکرد مناسبی داشته باشد و ساختار کد نیز به شکلی طراحی شود که در ادامه پروژه قابل توسعه و نگهداری باشد.

پیاده‌سازی دقیق از روی Figma

یکی از مهم‌ترین تجربیاتی که در این پروژه به دست آوردم، کار کردن دقیق بر اساس طراحی‌های Figma بود.

در فرآیند توسعه، تلاش می‌شد فاصله‌ها، ابعاد، Typography، ساختار Layout، اندازه کامپوننت‌ها و جزئیات بصری مطابق طراحی اصلی پیاده‌سازی شوند.

این تجربه باعث شد درک بهتری از تبدیل یک Design آماده به یک رابط کاربری واقعی پیدا کنم و متوجه شوم که پیاده‌سازی دقیق UI تنها به نوشتن HTML و CSS محدود نمی‌شود و نیازمند توجه به جزئیات طراحی است.

Responsive Design

یکی از تمرکزهای اصلی پروژه، Responsive بودن صفحات بود.

لندینگ‌پیج‌ها باید در اندازه‌های مختلف صفحه‌نمایش، از دسکتاپ تا تبلت و موبایل، ظاهر و رفتار مناسبی داشته باشند.

در این پروژه یاد گرفتم که Responsive Design نباید به مرحله انتهایی توسعه موکول شود، بلکه باید از همان زمان طراحی ساختار صفحه و انتخاب Layout در نظر گرفته شود.

برای همین، رفتار بخش‌های مختلف صفحه در Breakpointهای مختلف بررسی شد و Layoutها به شکلی پیاده‌سازی شدند که در ابعاد مختلف صفحه، ساختار و تجربه کاربری مناسبی داشته باشند.

معماری کامپوننت‌های قابل استفاده مجدد

یکی از مهم‌ترین تجربیات معماری این پروژه، آشنایی عملی با مفهوم Reusable Components بود.

به‌جای اینکه برای هر صفحه تمام بخش‌ها از ابتدا پیاده‌سازی شوند، تلاش شد قسمت‌های مشترک در قالب کامپوننت‌های قابل استفاده مجدد طراحی شوند.

برای مثال بخش‌هایی مانند:

• Header
• Footer
• Navigation
• Hero Section
• Cardها
• Buttonها
• Sectionهای مختلف
• عناصر مشترک رابط کاربری

به‌صورت Component طراحی شدند تا بتوان از آن‌ها در صفحات مختلف استفاده کرد.

این رویکرد باعث شد تغییرات آینده با هزینه کمتری انجام شوند؛ زیرا یک تغییر در Component اصلی می‌توانست در تمام بخش‌هایی که از آن استفاده می‌کردند اعمال شود.

کاهش هزینه نگهداری

یکی از نکات مهمی که در این پروژه یاد گرفتم، ارتباط مستقیم میان معماری Componentها و Maintainability بود.

اگر هر صفحه به‌صورت مستقل و بدون توجه به استفاده مجدد ساخته شود، با افزایش تعداد صفحات، نگهداری و اعمال تغییرات سخت‌تر خواهد شد.

به همین دلیل تلاش شد ساختار Frontend به‌گونه‌ای طراحی شود که:

• کدهای تکراری کاهش پیدا کنند.
• Componentها قابلیت استفاده مجدد داشته باشند.
• تغییرات UI با کمترین هزینه انجام شوند.
• توسعه صفحات جدید سریع‌تر انجام شود.
• ظاهر بخش‌های مشترک در تمام صفحات یکپارچه باقی بماند.

این پروژه یکی از تجربیات مهم من در درک عملی اهمیت Component Architecture بود.

آشنایی با Vuetify

در این پروژه از Vuetify به‌عنوان UI Framework اصلی استفاده کردم.

کار با Vuetify باعث شد با ساختار Component-based این کتابخانه و نحوه استفاده از Componentهای آماده برای ساخت رابط‌های کاربری مدرن آشنا شوم.

در کنار استفاده از Componentهای آماده، تلاش شد این ابزار صرفاً جایگزین طراحی UI نباشد و ساختار Componentهای پروژه متناسب با نیاز طراحی و معماری پروژه توسعه پیدا کند.

تمرکز بر UI و UX

برخلاف پروژه‌هایی که تمرکز اصلی آن‌ها روی Backend یا منطق پیچیده سیستم است، تمرکز اصلی این پروژه UI و UX بود.

در نتیجه بخش زیادی از زمان توسعه صرف بررسی مواردی مانند:

• Hierarchy بصری
• فاصله‌گذاری
• Typography
• رنگ‌ها
• اندازه عناصر
• Responsive Layout
• تعاملات کاربر
• Animationها
• Navigation
• Consistency بین صفحات

شد.

هدف این بود که علاوه بر شباهت بصری به طراحی Figma، تجربه استفاده از صفحات نیز برای کاربر روان و قابل پیش‌بینی باشد.

نتیجه

پروژه ویانا سیستم برای من تجربه‌ای مهم در مسیر توسعه Frontend و طراحی رابط کاربری بود.

در این پروژه یاد گرفتم چگونه یک طراحی Figma را با دقت به یک رابط کاربری واقعی تبدیل کنم، چگونه Responsive Design را از ابتدا در معماری صفحات در نظر بگیرم و چگونه با استفاده از Reusable Components ساختاری ایجاد کنم که توسعه و نگهداری پروژه در آینده ساده‌تر و کم‌هزینه‌تر باشد.

همچنین کار با Vuetify به‌عنوان یک UI Framework تجربه مهمی برای من بود و باعث شد با رویکرد Component-based در ساخت رابط‌های کاربری و استفاده صحیح از کتابخانه‌های UI آشنا شوم.

تمرکز اصلی این پروژه بر UI/UX، کیفیت پیاده‌سازی بصری، Responsive Design و معماری قابل نگهداری Frontend بود.