بچه‌ها، زوپ ... زوپ، بچه‌ها

زوپ! 
این کلمه احساس خوبی به شما منتقل نمی‌کند؟ خوش‌حالی، شادابی، باحال بودن و...؟ 
بگذارید برای این‌که حس و حال‌تان بهتر هم بشود، بگوییم که این کلمه‌ی بامزه چیست و چه معنی‌ای دارد و از کجا آمده است.  

قبل از هرچیزی، زوپ یک آوا است. آوایی که حالا برای خودش شخصیتی پیدا کرده و تبدیل به یک اسم به‌یادماندنی شده است. اما در مورد کار و مسئولیتش اگر بخواهید بدانید، باید بگوییم که زوپ یک سرویس آنلاین سفارش تاکسی است که قرار نیست فقط رفت و آمد را برای ما راحت‌تر کند، بلکه قرار است با آن کلی حس و حال خوب و متفاوت را تجربه کنیم و بهمان حسابی خوش بگذرد، حتی در ترافیک!
ما این پروژه را از اسفند ۱۳۹۵ به سفارش دوستان خوب‌مان در شرکت تیفای شروع کردیم و قرار شد قبل از طراحی کامل وب‌سایت، یک صفحه‌ی به‌زودی خاص و متناسب با حس و حال این سرویس داشته باشیم. 

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

تصویرسازی‌ ماشین و منظره‌ها و ساختمان‌ها را شروع کردیم، اما وسط‌‌های کار، این فکر به ذهن‌مان رسید که اگر کمی چاشنی ِ بازی به صفحه‌ی به‌زودی اضافه کنیم، ممکن است جالب‌تر هم بشود. پس تصمیم گرفتیم کاری کنیم که کاربر بتواند روی حرکت ماشین کنترل داشته باشد، اگر دوست داشت، سرعت ماشین را زیاد یا کم کند، بوق بزند، ماشین را نگه دارد و حتی کاری کردیم که این بازی با شب و روز واقعی هماهنگ باشد و در شب، همه‌چیز به رنگ شب در بیاید و در روز هم به رنگ روز. تمام این تصویرسازی‌ها و انیمیشن‌ها را با SVG و کمی هم JavaScript انجام دادیم. 

برای بازی، در وب‌سایت یک راهنمای کوچک قرار داده‌ایم که به شما کمک می‌کند دکمه‌ها را راحت‌تر پیدا کنید، اما باز کاری کرده‌ایم که کمی مزه‌ی خوب ِ کشف و غافل‌گیری را بچشید. البته در انتهای این متن هم می‌توانید با دکمه‌ها بیشتر آشنا شوید. 

حالا که همه‌ی این‌ها را گفتیم، بگذارید با هم‌تیمی‌های‌ خوب‌مان که انجام این کار را به عهده داشتند و با صبوری و حوصله، خیلی هم خوب از پسش برآمدند، آشناتان کنیم: 
تمام تصویرسازی‌ها را حسام کرامتی عزیز، طراح خوش‌ذوق‌مان انجام داد، مرتضی هشترودی عزیز، توسعه‌ی Front-end و اجرای انیمیشن‌ها را به عهده داشت و حسام مطهری عزیز هم تگ‌لاین زیبای زوپ را نوشت و کار را تکمیل کرد. 

اوه! داشت یادمان می‌رفت! این هم راهنمای دکمه‌های بازی: 
N: Night / D:Day / H: Horn / Right: Increase Speed / Left: Decrease Speed / Break: Space 

خب، دیگر وقت، وقت بازی کردن ا‌ست: زوپ کن؛ مقصد بهانه‌ست

داستان کوک، یک سایت شور و شیرین


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

طراحی جدید این وب سایت، با تمرکز بر روی شعار برند کوک، یعنی "Tasty Colors Of Cook" انجام گرفت و قرار شد علاوه بر استفاده از تعداد زیادی رنگ شادی‌آور، ارتباط معنایی خوبی هم بین این رنگ‌ها و محصولات کوک برقرار کنیم و هارمونی و هماهنگی درستی در سایت به وجود بیاوریم. 

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

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

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

در بخش محصولات از تکنولوژی‌های Ajax و pushState استفاده کردیم تا هم مشاهده محصولات در دسته‌بندی‌های مختلف خیلی سریع و راحت صورت بگیرد و هم از نظر SEO کاملا بهینه و استاندارد باشد. 

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

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

خب، بهتر است بیشتر از این سرتان را نخوریم. اصلا پیشنهاد می‌کنیم که خودتان به ورژن دسکتاپ و ورژن موبایل وب‌سایت کوک سر بزنید و تمام نکاتی که گفتیم را از نزدیک ِ نزدیک ببینید. امیدواریم از بودن میان آن همه شیرینی و شورینی رنگارنگ لذت ببرید.

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