Кулинарное пространство «GRILLBRO ACADEMY»

О проекте:

Академия GRILLBRO — новое, современное, модное, кулинарное пространство с возможностью работать с открытым огнем и лучшими грилями и смокерами в Иркутске.

Это не просто площадка, где можно провести любое мероприятие. В академии также обучают искусству гриля на тематических мастер-классах, а также проводят масштабные гастрономические события города.

Задача:

Нам нужно было разработать сайт, который отвечал бы следующим критериям:

Атмосферность: открытый огонь, искры, дым, сочное мясо, брутальность, дружелюбность, уют, яркость, стиль - вот те слова, с которыми должен ассоциироваться сайт. И хоть некоторые понятия казались на первый взгляд несочетаемыми, мы все равно постарались объединить их в одно целое.
Простота и удобство использования: основные цели сайта - продажа тематических кулинарных мастер-классов, а также бронирование пространств для различных мероприятий. Именно поэтому было важно учесть, что интересный и необычынй дизайн не должен мешать простоте и понятности сайта. Нужно, чтобы люди легко ориентировались на страницах и без труда понимали, как записаться на мастер-класс, забронировать площадку под мероприятие или приобрести подарочный сертификат.
Креативность и необычность: сайт должен выделяться среди конкурентов и запоминаться пользователю: цветовой палитрой, необычными изображениями, интересными анимациями и т.п.

Структура сайта и прототипы:

На первом этапе нам было важно составить грамотную и понятную структуру, в которой учитывались бы все страницы и блоки сайта.

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

Однако позже некоторые элементы структуры пришлось перестраивать уже на этапе вёрстки, так как в процессе обсуждения работы с заказчиком было решено добавить несколько новых блоков на главную страницу, например, блок с грилями, на которых можно готовить; или блок с необычными блюдами, сделанными на гриле. Также были переработаны некоторые мастер-классы и услуги, что тоже внесло свои корректировки в структуру.

Опираясь на структуру сайта, мы приступили к отрисовке прототипов - черно-белых схем будущих страниц, где показано примерное расположение блоков и контента.

Генерируем идеи: референсы и мудборд

Одной из важнейших частей работы над дизайном является поиск референсов и сборка мудборда. Именно на этом этапе приходит вдохновение и рождаются классные идеи.

Референсы мы искали, прежде всего, из смежных сфер, но обращали внимание и на другие креативные сайты абсолютно другой тематики. Также несколько примеров отправил нам клиент, их мы также учитывали в процессе работы.

Кроме того, мы вдохновлялись различными постерами и изображениями с тематикой гриля, чтобы поймать нужное настроение и выбрать подходящую стилистику

В итоге, мы пришли к следующему решению: сделать сайт в темных тонах с яркими оранжевыми элементами, сочными картинками, сгенерированными нейросетью, добавить дыма, искр, а также необычных анимаций.

От идеи к реализации: дизайн-концепция

Самым сложным и долгим этапом была разработка дизайн-концепции первого экрана. Здесь мы перебрали огромное множество вариантов: от самых безумных, где кнопка на целевое действие и буквы в заголовке были сделаны в виде куска мяса до более стандартных.

И вдруг нам пришла необычная идея: а почему бы не добавить на первый экран самого настоящего викинга, который жарит мясо на гриле? Брутально, стильно, хорошо вписывается в нашу концепцию.

С помощью Midjourney нам удалось создать идеального викингка для первого экрана.

Спойлер: его пришлось заменить на обычного шеф-повара, так как клиент решил отойти от "сказочной" тематики, чтобы не путать пользователей, которые могли подумать, что академия проводит тематические вечеринки. Но вернемся к этому позже.

А пока вы можете полюбоваться нашим викингом - он получился действительно крутым

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

Таким образом, у нас получилась очень сочная и необычная дизайн-концепция, которая действительно привлекала внимания. Но, как было упомянуто выше, от основной идеи "викингов" было решено отказаться в сторону чего-то более понятного и стандартного.

Итоговый дизайн

И хоть от "сказачной" тематики пришлось уйти, дизайн от этого не стал хуже или скучнее. Разнообразить его нам помогли несколько приемов:

Использование таких же ярких, теплых и уютных изображений, сгенерированных нейросетями: генерации изображений стоит уделить особое внимание, так как только для первого экрана было создано окло 50 вариантов картинок

Мы меняли ракурсы, общий вид шеф-повара, делали так, чтобы он смотрел в камеру. Даже итоговый вариант нам пришлось дорабатывать в фотошопе, чтобы все выглядело идеально - мы добавляли логотип академии на кепку повара. В итоге получилось так, как и задумывалось изначально: брутально, дружелюбно и атмсоферно.

Для всего остального сайта также было сгенерировано множество изображений. Некоторые из них даже не были использованы, так как подбирались самые лучшие варианты, которые точно передадут стиль и атмосферу места.

Кстати, изображения с викингами для обложек мастер-классов было решено оставить. Уж очень интересными они получиились - сразу привлекали внимание и заставляли пристальнее всматриваться в детали.

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

Итоги работы:

Команда QWER.agency разработала сайт для GRILLBRO ACADEMY. В итоге у нас получился действительно яркий и атмосферный сайт, который полностью отражает концепцию стильного кулинарного пространства, где вас в приятной дружественной обстановке научат работать с открытым огнем и лучшими грилями в городе Иркутске.

А посетить готовый сайт вы можете по ссылке