Роман Чигирёв

Мудборды и разработка сайта для типографии Сампринт

Сегодня о практиках креативного мышления на живых примерах. А именно, на примере samprint.ru. Компания занимается типографией: цифровой и офсетной печатью, вырубкой, лакированием, широким форматом. Находится в Москве.

Бизнес-задачи

По результатам брифования выделяем следующие задачи интернет-проекта:

  • Выгодно презентовать компанию для потенциального клиента.
  • «Отстроиться» от сайтов конкурентов.

Особые пожелания заказчика

Заказчику нравится стилистика Google — плоские элементы, яркие тона.

Креативное решение

Уже на этапе текстового брифа становится понятно, в каком направлении идти. Из «карты эмоций», которую мы используем в брифе, заказчик выделил всего одну: «Завораживает, невозможно оторваться!»

Дизайнер составляет мудборд. Прелесть его (мудборда, не дизайнера) в том, что он быстро производится и с высокой точностью позволяет правильно почувствовать дух проекта, определиться со стилистикой графики. А кроме того — заказчик может буквально «почеркать» на мудборде: вот это нравится, а это не про нас.

Первая версия мудборда учитывает пожелания и выглядит так:

Быстро получаем обратную связь.

Артем Сорокин генеральный директор

Нравятся фотографии в HD-качестве, думаю, мы рассмотрим такой способ презентации нашей работы. Яркий сайт вверху справа — тоже подходит по стилю.

Пища для размышлений есть — дизайнер, арт-директор и руководитель проекта уходят в специальную комнату, с диванчиком, большим монитором и маркерным досками. It’s brainstorm time!

Сходу ничего годного придумать не получается — «входные данные» кажутся нам недостаточно индивидуальными. Скетч набросали, но он нам не нравится.

Нужна свежая мысль. Штурмуем. Арт-директор приводит внезапную ассоциацию: фотовыставка «Сушка», где работы развешиваются на бельевой веревке.

Образ нравится. Составляем второй мудборд, уже отсеивая «не попавшие» в настроение референсы и развивая ассоциативный ряд.

Антон дизайнерр

продолжил мысль: фотографии на веревке, знаменитая короткометражка про птичек на проводе от Pixar, Angry Birds… Добавил несколько референсов, подходящих по стилю иллюстраций.

Демонстрируем заказчику мудборд и высказываем соображения по поводу «фишки» будущего сайта. Если всё получится, как мы задумали, с анимацией и игровыми элементами, то сайт можно будет смело номинировать на Awwards :) Заказчик соглашается: такое решение выглядит нетипично, свежо и задорно.

Дизайн и иллюстрации

Дизайнер приступает — с любовью прорисовывая графику для главной страницы. Получается больше, чем просто здорово:

Дальше — нужно придумать изящное решение для внутренних страниц, сохранить дух и в то же время «облегчить» графическую часть. Дизайнер останавливается на варианте со «сквозной» веревкой, смотрим:

Макеты утверждаются, отдаются на верстку. Дизайнер этим временем тоже не дремлет — ему нужно отрисовать спрайты («кадры» для анимации).

Антон дизайнерр

Проект из тех, над которыми работаешь, потому что действительно интересно. Я даже несколько часов личного времени потратил. И не жалею нисколько.

Теперь к технической части.

Верстка, анимация, игровые элементы

Над версткой работает команда разработчиков, потому что верстать придется действительно много, а главное — нужно с огоньком. Поэтому над главной (там больше всего анимации, есть параллакс) трудится Александр:

Александр разработчик

Проект мне с самого начала показался весьма интересной затеей, плюс очень облегчило дело личная заинтересованность и увлеченность проектом Антона.

Спрайты между тем готовы, осталось сделать анимацию объектов:

Продолжая хронологию процесса:

Александр разработчик

По ходу верстки Антон все время что-то дорабатывал и дорисовывал, рассказывал свое видение, улучшал макет. А я воплощал его идеи. В итоге получилась очень занятная вещь.

В качестве игрового элемента продолжаем традиционное заигрывание с нашим копирайтом. В этот раз позволили себе чуть больше — samprint.ru ;)

Результат

Заходите и наблюдайте, сайт прекрасен: samprint.ru

Александр руководитель проекта

Абсолютно все участники проекта сказали, что работать над ним было очень приятно. Однозначно, герой поекта — Антон, переживавший за проект всей душой. Ну и Саша сделал отменную верстку — моя школа ;).


 

Что еще почитать по этой теме

100 недель «Ланч-таймов»: как найти формат для блога, который сам себя пиарит
Сибирикс
25 Мая 2016
100 недель «Ланч-таймов»:  как найти формат для блога, который сам себя пиарит
Внимательный читатель уже заметил, что каждую пятницу ему предлагают ланч. Не тот, который про котлеты и булки, а про digital.
Нет времени объяснять —
#Иди в зал!
Сибирикс
19 Мая 2016
Нет времени объяснять —<br>#Иди в зал!
«Нет зала рядом» и «Я не знаю, какой фитнес-клуб лучше» — больше не отговорки. Мы сделали сервис, который решает проблему с выбором зала. Осталось победить лень и любовь к пицце.
Как организовать фотосъемку товаров для сайта
Сибирикс
17 Мая 2016
Как организовать фотосъемку товаров для сайта
И немножко — зачем. Некоторые до сих пор халтурят и ставят на сайт вместо классных дизайнерских подборок унылые картинки с бесплатных фотостоков. Фу таким быть — учитесь наполнять сайт красиво.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.