Академия GRILLBRO — новое, современное, модное, кулинарное пространство с возможностью работать с открытым огнем и лучшими грилями и смокерами в Иркутске.
Это не просто площадка, где можно провести любое мероприятие. В академии также обучают искусству гриля на тематических мастер-классах, а также проводят масштабные гастрономические события города.
Задача:
Нам нужно было разработать сайт, который отвечал бы следующим критериям:
Атмосферность: открытый огонь, искры, дым, сочное мясо, брутальность, дружелюбность, уют, яркость, стиль - вот те слова, с которыми должен ассоциироваться сайт. И хоть некоторые понятия казались на первый взгляд несочетаемыми, мы все равно постарались объединить их в одно целое.
Простота и удобство использования: основные цели сайта - продажа тематических кулинарных мастер-классов, а также бронирование пространств для различных мероприятий. Именно поэтому было важно учесть, что интересный и необычынй дизайн не должен мешать простоте и понятности сайта. Нужно, чтобы люди легко ориентировались на страницах и без труда понимали, как записаться на мастер-класс, забронировать площадку под мероприятие или приобрести подарочный сертификат.
Креативность и необычность: сайт должен выделяться среди конкурентов и запоминаться пользователю: цветовой палитрой, необычными изображениями, интересными анимациями и т.п.
Структура сайта и прототипы:
На первом этапе нам было важно составить грамотную и понятную структуру, в которой учитывались бы все страницы и блоки сайта.
Получилась достаточно объемная и подробная схема, на основе которой мы и продолжили дальнейшую работу.
Однако позже некоторые элементы структуры пришлось перестраивать уже на этапе вёрстки, так как в процессе обсуждения работы с заказчиком было решено добавить несколько новых блоков на главную страницу, например, блок с грилями, на которых можно готовить; или блок с необычными блюдами, сделанными на гриле. Также были переработаны некоторые мастер-классы и услуги, что тоже внесло свои корректировки в структуру.
Опираясь на структуру сайта, мы приступили к отрисовке прототипов - черно-белых схем будущих страниц, где показано примерное расположение блоков и контента.
Генерируем идеи: референсы и мудборд
Одной из важнейших частей работы над дизайном является поиск референсов и сборка мудборда. Именно на этом этапе приходит вдохновение и рождаются классные идеи.
Референсы мы искали, прежде всего, из смежных сфер, но обращали внимание и на другие креативные сайты абсолютно другой тематики. Также несколько примеров отправил нам клиент, их мы также учитывали в процессе работы.
Кроме того, мы вдохновлялись различными постерами и изображениями с тематикой гриля, чтобы поймать нужное настроение и выбрать подходящую стилистику
В итоге, мы пришли к следующему решению: сделать сайт в темных тонах с яркими оранжевыми элементами, сочными картинками, сгенерированными нейросетью, добавить дыма, искр, а также необычных анимаций.
От идеи к реализации: дизайн-концепция
Самым сложным и долгим этапом была разработка дизайн-концепции первого экрана. Здесь мы перебрали огромное множество вариантов: от самых безумных, где кнопка на целевое действие и буквы в заголовке были сделаны в виде куска мяса до более стандартных.
И вдруг нам пришла необычная идея: а почему бы не добавить на первый экран самого настоящего викинга, который жарит мясо на гриле? Брутально, стильно, хорошо вписывается в нашу концепцию.
С помощью Midjourney нам удалось создать идеального викингка для первого экрана.
Спойлер: его пришлось заменить на обычного шеф-повара, так как клиент решил отойти от "сказочной" тематики, чтобы не путать пользователей, которые могли подумать, что академия проводит тематические вечеринки. Но вернемся к этому позже.
А пока вы можете полюбоваться нашим викингом - он получился действительно крутым
Помимо викинга было решено сделать и необычыне обложки для мастер-классов и услуг в подобном стиле. Так и родились: пицца и пироги, которые жарят на гриле серьезные викинги с использованием меча; а также эльфийки, которые тусуются на своей вечеринк
Таким образом, у нас получилась очень сочная и необычная дизайн-концепция, которая действительно привлекала внимания. Но, как было упомянуто выше, от основной идеи "викингов" было решено отказаться в сторону чего-то более понятного и стандартного.
Итоговый дизайн
И хоть от "сказачной" тематики пришлось уйти, дизайн от этого не стал хуже или скучнее. Разнообразить его нам помогли несколько приемов:
Использование таких же ярких, теплых и уютных изображений, сгенерированных нейросетями: генерацииизображений стоит уделить особое внимание, так как только для первого экрана было создано окло 50 вариантов картинок
Мы меняли ракурсы, общий вид шеф-повара, делали так, чтобы он смотрел в камеру. Даже итоговый вариант нам пришлось дорабатывать в фотошопе, чтобы все выглядело идеально - мы добавляли логотип академии на кепку повара. В итоге получилось так, как и задумывалось изначально: брутально, дружелюбно и атмсоферно.
Для всего остального сайта также было сгенерировано множество изображений. Некоторые из них даже не были использованы, так как подбирались самые лучшие варианты, которые точно передадут стиль и атмосферу места.
Кстати, изображения с викингами для обложек мастер-классов было решено оставить. Уж очень интересными они получиились - сразу привлекали внимание и заставляли пристальнее всматриваться в детали.
Добавление дыма и искр, а также необычной анимации на страницы: чтобы сделать сайт еще более атмсферным и глубоким, мы добавили на него декоративные элементы в виде клубов дыдма и ярких искр, разлетающихся в разные стороны. Также мы продумали интересную анимацию по скроллу, когда элементы вращаются по кругу. Это не перегружает сайт и не влияет на скорость его загрузки, но добавляет интерактивности.
Итоги работы:
Команда QWER.agency разработала сайт для GRILLBRO ACADEMY. В итоге у нас получился действительно яркий и атмосферный сайт, который полностью отражает концепцию стильного кулинарного пространства, где вас в приятной дружественной обстановке научат работать с открытым огнем и лучшими грилями в городе Иркутске.