Недавно я гуляла на просторах интернета и наткнулась на нечто неизвестное, непонятное и ужасающее. По правде говоря, я не знала куда смотреть, потому что мой взор судорожно бегал из стороны в сторону. Это был сайт, хотя я бы дала ему другое название. Сначала мне показалось, что это давно забытый сайт с далекого 2010, но нет, он до сих пор функционирует. Но что удивительно, так это то, что тематика этого сайта довольно интересная.
И тут я подумала, что это отличная возможность показать, что может произойти, когда нечто ужасное попадает в нужные руки. Я, как человек с медицинским образованием и делавшая это не раз за свою жизнь, решила провести реанимацию, хотя, после увиденного, мне самой не помешала бы таблетка "валидола".
Для начала мне предстояло разобраться во всем этом хаосе, определиться со структурой. Любой сайт начинается с названия - голова личного бренда. Первое, на что мы чаще всего обращаем внимание в прохожем - его лицо. Здесь все то же самое.
Я не нашла логотипа или названия, лишь непонятную ссылку, и исходя из интуиции сделала ее названием.
Следующая задача - определения навигации (конечности нашего сайта), поэтому я начала с меню. Второе, что я считаю ошибкой - нарушение паттерна меню, которое для пользователя более привычно находить в верхней шапке сайта.
Боковое меню имеет место быть, очень часто можно встретить такой паттерн на некоторых веб-страницах, но это делается очень аккуратно. Например, когда кроме списка меню нет больше никаких вставок, рисунков, или прочей информации, или когда список меню вшит в "бургер".
Меню - это очень важный элемент каждого веб-продукта. Он занимает высокую позицию в информационной иерархии, поэтому не стоит держать его на одной позиции вместе с дополнительной информацией, которая никак не относится к меню. Поэтому лучше сделать по стандарту, но это будет выглядеть аккуратно и самое главное - понятно для пользователя.
Также в верхнюю шапку я добавила иконку корзины. Вот что вышло:
Далее двигаясь по центру, мы видим две кнопки, которые призывают к каким-то действиям. Сделать заказ, но чего? Нужен минимум информации, но он почему-то находится ниже кнопок.
Меняем местами, для разнообразия добавляем иллюстрацию, соответствующую тематике, и получаем уже неплохой прототип первого экрана:
Прежде чем перейти к карточкам товара, хотелось бы разобраться с таймером (?). Мне не понравилось, что она стоит на одном уровне с товаром (да и вообще, весь сайт максимально сжат в пространстве, и абсолютно нет воздуха)
В редизайне сайта у меня не было цели сохранить все элементы и весь текст. Я просто хотела показать, как можно организовать пространство страницы. Поэтому какие-то элементы я просто не взяла во внимание и пропустила. А с таймером получилось вот так:
Переходим к карточкам товара.
Опустим обсуждение визуальных моментов, и остановимся на структуре карточек. Плюс в том, что видно (хоть и с трудом) иерархию текста. То есть можно определить, где название, описание, цена. Минус в том, что очень много лишней информации. Все это описание пользователь может найти при нажатии на карточку, как обычно это и происходит.
Также я добавила возможность фильтра товара, и сократила количество карточек на одной странице (на оригинальном сайте карточек намного больше, и все ряды расположены друг за другом, что заставляет очень долго листать вниз)
Далее я исправила еще пару элементов, но они уже не такие значительные. Затем подобрала цвета, стилистику, в общем, визуальную составляющую, т вот что вышло в итоге:
На редизайн я потратила час времени, и, конечно, он далек от идеала. В этом случае я не заморачивалась с отступами и сеткой, так как этот сайт - просто эксперимент. Но, по сравнению с оригиналом, получилось довольно неплохо. Что думаете? И кстати, какие ошибки в оригинальном кроме описанных вы нашли?
Заказать дизайн: mbubniv@yandex.ru или Telegram
Портфолио, мой Behance, портфолио с моушен-графикой