Рисованный сайт для апельсинового заказчика
Для творческого заказчика — мастерской дизайна интерьеров Apelsin Studio — сделали сайт с горизонтальной навигацией и котиком. Мяу!
Apelsin Design — студия дизайна интерьеров, которая делает стильные и уютные помещения уже 10 лет. Небольшая апельсиновая команда оформила 420 помещений для 200 клиентов, но всё равно остаётся оригинальной и не пытается пропихнуть клиентам шаблонное решение (что для их сферы — обычное, хоть и неприятное, явление).
Мы сразу поняли, что работаем с творческими людьми — руководитель мастерской Константин заключил договор на разработку сайта уже через полчаса знакомства с нами. И теперь у Apelsin Design появился классный сайт, а у нас — опыт работы с творческими и яркими, как марокканский апельсин, людьми.
Мы сразу поняли, что работаем с творческими людьми — руководитель мастерской Константин заключил договор на разработку сайта уже через полчаса знакомства с нами. И теперь у Apelsin Design появился классный сайт, а у нас — опыт работы с творческими и яркими, как марокканский апельсин, людьми.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3830-3530-4839-b462-343262353166__noroot.png)
Задачи
Вместо старенького запылившегося лендига, который был у Apelsin Design, мы решили сделать сайт, который:
- выделится на фоне конкурентов;
- подробно расскажет о мастерской, её достижениях и проектах;
- привлечёт новых клиентов и повысит количество заявок, оставленных онлайн.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3830-6330-4765-b334-313637636561__27.png)
Дизайн
В дизайне интерьеров высокая конкуренция, но оригинальных проектов мало. Люди прошаренные, уже оформившие пару квартир или ресторанов, об этом знают и к исполнителям относятся с подозрением. Нашей целью было подозрение искоренить — сразу, с наскока показать, что эти ребята не мыслят шаблонами. Поэтому дизайн сайта нужен был не просто «вау» — и крыша улетела, а приятный, нестандартный и со вкусом.
Подыскивая подходящие варианты, уже на этапе аналитики QA-менеджер и руководитель проекта задумали сделать рисованный сайт — что отразилось на прототипе.
Подыскивая подходящие варианты, уже на этапе аналитики QA-менеджер и руководитель проекта задумали сделать рисованный сайт — что отразилось на прототипе.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3332-3938-4531-b934-386139386435__noroot.png)
Прототип
Ещё при агрегации появилась идея сделать рисованный сайт, и она понравилась дизайнеру проекта — Даниилу. Он походил, помедитировал и сделал набросок со свободной навигацией (можно перемещаться и вверх, и вниз, и в стороны). Навигация по двум осям — довольно рисковый эксперимент. Но мы рискнули :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3638-3036-4236-a265-363763323537__dina.png)
Дина
Руководитель проекта
Что приятно — заказчик не испугался градуса креатива и не стал спрашивать номер дилера :)
Заказчик пришёл к нам и сразу сказал, что у них высокая планка креатива — делать нужно офигительно. А у нас уже давно появилась идея сделать проект, рисованный ручками. Мы решили предложить этот вариант — и в итоге концепция зашла с первого раза в том виде, в котором её нарисовали.
Я считаю, что основная особенность Apelsin Design в том, что он остался таким, каким был задуман изначально. Практически ничего не поменялось: только наполнение контентом и котик.
Я считаю, что основная особенность Apelsin Design в том, что он остался таким, каким был задуман изначально. Практически ничего не поменялось: только наполнение контентом и котик.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3166-3666-4333-b366-356235333463__belenok.jpg)
Даниил
Дизайнер
Да, на странице «Портфолио» поселился кот — внимательно присмотритесь к этой усатой морде.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3936-3065-4762-b731-343066306535__12.png)
У котика дергается ушко — это любимое место заказчиков. Они даже попросили подвинуть блок с креслом выше, чтобы он целиком помещался на экране. Причём мы добавили его на макет за 10 минут до демо.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild6230-6566-4539-b638-666339393036__dina.png)
Дина
Руководитель проекта
У главной страницы-холста цель — заинтересовать, зацепить посетителя. А внутренние страницы подробно объясняют, что умеют в Apelsin Design, сколько стоят услуги и т.д. Информации вагон и тележка, поэтому здесь — текст, фото и минимализм.
Портфолио продумано и сделано для людей — работы в нём собраны по категориям, понятным человеку-недизайнеру: для пары, загородный дом, рестораны и т.д. Каждый проект — не ворох фотографий, а подробное описание дизайнеров и статистика: стиль, цвета, длительность ремонта, стоимость.
Разработка
Непривычное, горизонтальное расположение блоков пугало вначале. Но для программистов разработка сайта для Apelsin Design прошла между двух гигантских проектов и оказалось не такой уж и проблемной.
Сказать, что было сложно, я не могу: сайт довольно простой. Единственное — я заставлял всех открывать и разрабатывать его на сети 3G, чтобы он не грузился несколько минут.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild6262-6639-4630-a163-663461623562__sobolev2.jpg)
Андрей
Разработчик
Некоторые детали закрашиваются оранжевым, как будто на сайт добавляют последние штрихи, пока вы на него смотрите.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3564-3233-4133-a636-616132363634__noroot.gif)
Оранжевый контур — это SVG объект. Дизайнер нарисовал сплошной линией, как он должен закрашиваться. А разработчики анимировали: включили порядок, в котором появляется линия.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3763-6364-4532-b565-326131303535__dina.png)
Дина
Руководитель проекта
Слон на Apelsin Design, как и на остальных наших проектах, не просто так стоит и скучает. Если потрёте его ластиком, увидите все логотипы, которые были у Сибирикса за 13 лет.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1481613322/tild3263-3366-4531-b738-396364653532__26.png)
Готовый проект