Это была работа из серии сказано-сделано, структура и дизайн сайта Талицы рождался не в муках. Получилось создать визуально лёгкий и «вкусный» дизайн для современного молочного бренда.
Перед нами стояла задача разработать идею, структуру и дизайн презентационного сайта для успешного бренда, одного из ведущих в Уральском регионе.
Вводные:
— сделать акцент на продукте
— подчеркнуть уникальность термостатной линейки
— создать неперегруженный дизайн
— на сайте должно быть самое необходимое, без воды
Процесс:
Чтобы лучше понять задачу, мы начали с изучения референсов от клиента: сайты компаний Молочная культура и Epica.
dairyculture
epicayogurt
Обратили внимание, как с помощью дизайна сделан акцент на продукте.
Перед дизайном главной страницы сайты мы разработали её структуру и логику. Получился прототип, который отправили на согласование клиенту.
Подобрали аккуратный стройный шрифт без засечек с округлыми буквами, чтобы подчеркнуть аппетитность продукта.
В качестве фонового изображения была разработана оригинальная векторная иллюстрация в ярких цветах.
Акцент на продукте достигается за счёт крупного изображения продукта на главной странице и анимационных эффектов. Талицкое молоко производит 4 линейки продукции: традиционную, деревенскую, термостатную и мороженое. Чтобы органично разместить информацию о каждой линейке на одной странице, мы внедрили слайдер-карусель.
Для более подробного знакомства с продукцией разработан отдельный раздел, где рассказано о всех линейках бренда. Посетитель сайта может воспользоваться фильтром, чтобы найти интересующую продукцию, а с помощью пиктографики и удобной верстке изучить её состав и полезные свойства.
Отличительной особенностью сайта является раздел-помощник «Где купить свежую продукцию».
Это постоянно обновляющаяся карта магазинов города и фирменной розницы, где продается самая свежая продукция Талицкого молока.
Если у сайта запланирован слайдер на главной странице, будьте готовы к длительным и порой мучительным согласованиям дизайн-макетов для него. А слайдер у нас был запланирован, чтобы отразить преимущества бренда и придать сайту динамичности.
Так выглядел слайдер перед отправкой клиенту на согласование:
После чего мы получили обратную связь:
Внесли правки и вуаля:
После финального согласования дизайна сайта мы передали исходники для дальнейшей работы компании по программированию.
