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