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

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

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

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

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

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

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

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

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

طراحی وب سایت موج رنگ

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

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

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

در بخش اول، با انیمیشنی که ترکیبی از اشکال هندسی و رنگ های شاد و زنده هستند، ورود به سایت را نشان می‌دهیم. 

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

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

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

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

بازطراحی گرافیک وب سایت sib.ir

وب سایت Sib.ir، مکانی است برای معرفی و فروش آثار عکاسان ایرانی. در این وب سایت، شما می‌توانید عکس‌های محبوبتان را با قیمتی مناسب و همراه با امضاء هنرمند و گواهی اصالت اثر، خریداری کرده و در قاب مورد نظرتان، در منزل تحویل بگیرید. 

استودیو گروسیان، بازطراحی و پیاده سازی Front-end  این وب سایت را بر عهده داشت. 

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

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

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

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

وب سایت Sib.ir، ریسپانسیو طراحی شده است و سئو و ساختار کدنویسی سایت هم کاملا بهینه است. برای اثبات این موضوع، کافیست کلمه تابلو عکس را در گوگل جستجو کنید تا آدرس وب سایت سیب را در نتایج اولیه مشاهده نمایید.


طراحی وب‌سایت پارس نیکو

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

توریستور

توریستور ۱، نام استارت‌آپی است که تصمیم دارد سوغات ناب و اصیل شهرهای ایران را به صورت اینترنتی بفروشد. افتخار همکاری با این تیم خوش ذوق و آگاه از جزییات فنی کار از بخش‌های هیجان‌انگیز این پروژه‌ است. مسئولیت طراحی گرافیک نشانه (+هویت بصری سازمانی)، وب‌سایت و کدنویسی Front-end این پروژه به ما سپرده شده‌است.

توریستور تا حدودا یک ماه دیگر (اول خرداد ۱۳۹۴) رسما افتتاح خواهدشد و بی‌صبرانه منتظرم از فرایند طراحی آن بیشتر برایتان بنویسیم.



---
۱. TouriStore = Tourist +Store