Привет! Твоему вниманию представляю новый редизайн. На этот раз это был сайт фитнес-клуба. Для начала покажу сравнение двух вариантов. Там наглядно видно, где старый, а где новый дизайн.
Была проделана небольшая аналитическая работа и работа с контентом. Фото я не обрабатывал, они были достаточно неплохие, хоть их и мало. Подбор референсов прошёл на удивление быстро и я сразу приступил к переосмыслению. Было введено и убрано какое-то количество функций и элементов, но хочу заметить, что я это делал без их участия, т.е это по факту это нерабочий дизайн. Пройдут правки в соответствие с их потребностями и тогда это будет хороший работающий сайт.
Старая версия.
Дизайн 2018 года. У него были такие основные проблемы:
- Сайт был сделан в 2018 году и выглядит старо.
- На нём не хочется находится, изучать его, я думаю, что большая часть людей заходит на сайт, выбирает абонемент и как можно быстрее выходит.
- Безусловно, сайт содержит в себе необходимую информацию, но свою задачу он не решает.
- Слайдер на главном экране — он малоэффективен, я предложил оставить такую концепцию, но добавить в неё мультиконтент по запросу/геолокации/возрасту или другому параметру.
- Есть множество непонятных элементов. Например, я не догадался, что значит кнопка "мой GYM24".
- Хлебные крошки — это достаточно удобно, но я не вижу в них смысла на сайте, так как человек не зайдет глубже пары страниц, а в шапке всегда есть навигация и вернуться не составит труда.
- Старая типографика.
Итог:
Сайт не хочется изучать, если человек решил, что пойдет в этот зал, то он как можно быстрее выберет абонемент с закрытыми глазами и в целом сайт может отбить у него желание заниматься. Я думаю, сайт отпугнул многих потенциальных клиентов.
Новая версия.
На редизайне я постарался избавиться от перегруженности и сделать упор на стиль и лёгкость подачи информации.
- Навигация, я убрал выбор клуба, чтобы не засорять пространство. Человек при посещении на сайта будет сам выбирать клуб с помощью popup окна, вылетающего в первые секунды. либо добавить редирект по геолокации, это уже в зависимости от потребностей.
- Главный экран, основное изменение — мультиконтентная часть.
- Блок преимуществ я просто сделал более современным и интерактивным, при наведении на пункт будет меняться курсор (это делается с помощью js) и появляться текст, описывающий преимущество — современно, удобно.
- В блоке вашего проекта я убрал цену, это как по мне намного сильнее мотивирует, если человека заинтересовать, то он заплатит почти любые деньги. В общем просто разместил пункты описания и сделал их интерактивными, по клику на которые будет перекидывать на страницу о проекте.
- Раздел о зале я решил "растянуть" на два блока, во избежание перенасыщения контентом, на нынешнем сайте всё сбито в кучу, я же расставил акценты, есть текст, есть CTA, есть блок похожий на преимущества, некоторые, по типу круглосуточной работы, я убрал по причине частого повторения на всём сайте.
- Абонементы я отразил в небольшой таблице, так намного приятнее и проще выбрать что-то, потому что есть акцент, человек может выберет не самый подходящий себе абонемент, но он его выберет и купит, потому что он его видит не в каше.
- В отзывах я оставил концепцию слайдера, это допустимо и круто, но всё же сделал его удобнее и интереснее для пользователя.
- Я стилизовал и расширил блок контактов для удобства пользователя, а иначе ему бы пришлось искать номер и другие контакты по всему сайту.
Итог:
Переработанный и продуманный дизайн, удобная подача контента, минимум засорённости и свободное пространство.
Процесс дизайна и адаптив.
Не все так делают и не все понимают, что дизайн сайта — это определённый процесс. Его можно описать фразой "От меньшего к большему".
Первый шаг — анализ и работа с контентом.
Сперва я "вытянул" все фото и медиаконтент, отсортировал, отобрал лучшее и утвердил (утверждал я сам, так как не было принимающего лица). Также начинал искать референсы и интересные решения для тех или иных блоков. После я думал: "нужно ли мне искать дополнительный контент, писать текст?" Когда я уже знаю с чем мне предстоит работать, я могу идти дальше, только так я буду твёрдо уверен в последовательности и правильности.
Второй шаг — прототип и осмысление.
Когда есть контент, то я могу представить контейнеры, в которых он будет располагаться. Следовательно, я могу сделать набросок по референсам, пожеланиям клиента и своим собственным. Обычно это "квадратики и кружочки". Ведь намного проще разделить этап разработки типографики и прототипирования и соответствовать принципу "От меньшего к большему".
Третий шаг — корректировки. UI, ховеры и состояния.
Как вы понимаете, первая версия детализированного прототипа уже отличается от того, что было на втором шаге. Что уж говорить о финальной, всё ситуативно и текст выглядит немного иначе, чем просто серый прямоугольник.
UI.
На этом этапе нужно продумывать интерфейсные элементы, кнопки, их состояния и тп. По ходу дела вносил корректировки в соответствие с тем, как выглядит общая картина, я думаю, что это дело вкуса, но всё же лучше проверять несколько раз, в таком случае результат будет более обоснованным.
Конечная версия дизайна и объяснение всех аспектов и решений.
Навигация.
Я убрал выбор клуба, чтобы не засорять пространство. Человек при посещении на сайта будет сам выбирать клуб с помощью popup окна, вылетающего в первые секунды, также можно добавить редирект по геолокации, это уже будет зависеть от потребностей.
Главный экран.
Как по мне, слайдер — далеко не самое лучшее решение для главного экрана, но я решил оставить такую концпецию, на старом сайте контент собран так, что без слайдера показывать информацию будет неуместно. Но я предлагаю внести мультиконтентную часть на сайт. Таким образом посетителям будет показываться релевантная информация с возможностью изучить другую путём перелистывания слайдов.
Блок преимуществ.
Я по сути просто сделал его более современным и интерактивным, при наведении на строку меняется курсор и появляется текст, описывающий преимущество. Достаточно удобно.
Фитнес-проект от зала.
Я убрал цену, это как по мне намного сильнее мотивирует, если человека заинтересовать, то он заплатит почти любые деньги. В общем просто разместил пункты описания и сделал их интерактивными, по клику на которые будет пересылать на страницу о проекте.
О зале.
Раздел о зале я решил растянуть на два блока во избежание перенасыщения контентом, я расставил акценты, есть текст, есть CTA (Call To Action), есть блок похожий на преимущества, некоторые, по типу круглосуточной работы, я убрал по причине частого повторения на всём сайте.
Галерея.
С опорой на референсы и прошлый опыт переработал галерею. Она основывается на том, чтобы между фото определённого размера было одинаковое вертикальное расстояние. Из этого выходит красивая форма.
Блок абонементов.
Абонементы я отразил в небольшой таблице, так намного приятнее и проще выбрать что-то, потому что есть акцент, человек может выберет не самый подходящий себе абонемент, но он его выберет и купит, потому что он его видит не в каше.
Слайдер с отзывами.
В отзывах я оставил концепцию слайдера, это допустимо и круто, но всё же сделал его удобнее и интереснее для пользователя.
Блок с контактами.
Я стилизовал и расширил блок контактов для удобства пользователя, а иначе ему бы пришлось искать номер и другие контакты по всему сайту.
Ух, разобрались.
Скажу так, писать о дизайне намного труднее, чем делать. Термины, процессы слишком сложные, но у дизайнера это в голове, он думает этим, видит и говорит то, что другие не понимают. Всем удачи ребята, спасибо за внимание.
Подписывайся на канал YWD и ставь лайк если тебе понравилась статья!
Связаться со мной можно тут:
VK | Instagram | Telegram