طراحی UI/UX

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

توضیحات

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

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

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

در محدوده توافق‌شده پروژه، طراحی رو با دریافت بازخورد شما اصلاح می‌کنیم تا به نتیجه مطلوب برسیم. منظور از اصلاحات نامحدود این نیست که پروژه بدون چارچوب پیش بره؛ یعنی تا وقتی تغییرات در محدوده توافق اولیه باشن، صرفاً به خاطر رسیدن به دور دوم اصلاحات، کار رو متوقف نمی‌کنیم.

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

چه چیزی شامل می‌شود

  • وایرفریم (Wireframes)ساختار صفحات و نحوه قرارگیری محتوا رو قبل از پرداختن به ظاهر نهایی مشخص می‌کنیم. این‌طوری اول درباره ساختار و عملکرد سایت تصمیم می‌گیریم، نه اینکه بحث از همون اول روی رنگ‌ها و جزئیات ظاهری متمرکز بشه.
  • طراحی سیستم بصری در فیگمافقط چند صفحه زیبا و جدا از هم تحویل نمی‌گیرید. رنگ‌ها، تایپوگرافی، کامپوننت‌ها و حالت‌های مختلف رابط کاربری رو به‌صورت یکپارچه طراحی می‌کنیم تا توسعه‌دهنده بتونه از روی فایل، سایت رو درست پیاده‌سازی کنه.
  • تعیین سبک بصری برنداگه هویت بصری برندتون هنوز کامل نیست، عناصر لازم مثل رنگ‌ها، فونت‌ها و سبک کلی طراحی رو مشخص می‌کنیم تا سایت ظاهر یکپارچه‌ای داشته باشه؛ بدون اینکه صرفاً برای این پروژه سراغ طراحی دوباره لوگو بریم.
  • اصلاحات در محدوده پروژهتا زمانی که در چارچوب توافق اولیه پیش می‌ریم، طراحی رو اصلاح می‌کنیم تا به نتیجه موردنظر برسیم. تعداد اصلاحات به‌تنهایی دلیل توقف کار نیست.

چالش

بیشتر مشتری‌ها تا وقتی طرح رو نبینن، دقیقاً نمی‌دونن چه چیزی می‌خوان؛ و این کاملاً طبیعیه. مشکل از جایی شروع می‌شه که تازه بعد از شروع کدنویسی متوجه بشیم چه تغییراتی لازمه؛ چون اون موقع اصلاحات معمولاً زمان و هزینه بیشتری می‌برن.

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

کاری که انجام می‌دهیم

  • قبل از شروع کدنویسی، طرح رو ببینیدیک طرح قابل بررسی و تعاملی، خیلی کم‌هزینه‌تر از ساخت دوباره سایته. قبل از اینکه سایت واقعاً ساخته بشه، می‌تونید ظاهر و ساختارش رو ببینید و درباره‌ش تصمیم بگیرید.
  • طراحی رو با نظر شما جلو می‌بریمبازخورد شما بخشی از فرایند طراحی ماست. ترجیح می‌دیم ایرادهای طرح رو همون موقع که در فیگما قابل بررسیه بشنویم، نه وقتی سایت پیاده‌سازی شده و روی نسخه آزمایشی قرار گرفته.
  • فایل آماده تحویل به توسعه‌دهندهفایل فیگما شامل جزئیات فاصله‌ها، فونت‌ها، کامپوننت‌ها و توضیحات لازم برای پیاده‌سازیه. اگه توسعه سایت رو به ما نسپارید، تیم فنی شما هم برای فهمیدن جزئیات طراحی مجبور نیست همه‌چیز رو از روی حدس بازسازی کنه.

فرآیند ما

  1. 01

    بررسی و شناخت پروژه

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

  2. 02

    طراحی وایرفریم

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

  3. 03

    طراحی رابط کاربری

    ظاهر نهایی صفحات رو با در نظر گرفتن سبک بصری برند، فونت‌ها، رنگ‌ها و کامپوننت‌ها طراحی می‌کنیم. این همون طرحیه که برای تأیید نهایی در اختیارتون قرار می‌گیره.

  4. 04

    اصلاح و نهایی‌سازی

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

چرا ما را انتخاب کنید

  • طراحی‌ای که واقعاً قابل پیاده‌سازی باشه

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

  • امکان سفارش طراحی به‌صورت مستقل

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

  • ارتباط مستقیم و دریافت سریع بازخورد

    مستقیماً با کسی در ارتباط هستید که طراحی رو انجام می‌ده، نه با یک واسطه که نظرات شما رو منتقل کنه. این کار باعث می‌شه بازخوردها سریع‌تر بررسی بشن و روند طراحی معطل رفت‌وبرگشت‌های اضافی نشه.

سوالات متداول

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