Найти тему
WEB-DESIGN WITH KATE

Как я делала дизайн для сайта магазина модной одежды

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

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

Milenuage - вымышленный бренд модной одежды, для которого я делала дизайн сайта
Milenuage - вымышленный бренд модной одежды, для которого я делала дизайн сайта

Повышая свои навыки веб-дизайнера на очередном курсе, было задание "разработать дизайн интернет-магазина модной одежды". Были некоторые условия, которых было необходимо придерживаться (например, какие именно страницы нужно было обязательно отрисовать), но в основном это был полет фантазии.

По сути, опираться было не на что, а точнее не было бренда, не было визуала, которому было нужно соответствовать. Это с одной стороны хорошо — полет фантазии был не ограничен. Но в этом и заключается сложность, т.к. без опоры на что-либо трудно создавать. Грубо говоря, в таком случае стоит задача сделать не просто сайт, а разработать бренд, суть которого, характер, tone of voice будет отражен в сайте.

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

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

Референсы, визуал которых мне понравился
Референсы, визуал которых мне понравился

2) Формирование бренда. Как я уже писала вышел, не было ничего, даже названия, не говоря уже о каких-либо характерных бренду элементов. Поэтому я придумала название для вымышленного бренда одежды - Milenuage (возможно, такое название уже есть, но я взяла его из головы).

Для любого бренда необходим логотип. Я решила сделать строгий логотип, который представляет собой название бренда белого цвета с подложкой красного цвета. Для написания логотипа я использовала шрифт Suisse Intl (дизайнеры, которые меня читают, будьте внимательны, это платный шрифт, для того, чтобы использовать его в коммерческих целях для своих проектов, необходимо заплатить, иначе могут возникнуть неприятности. В моем случае же это учебный проект, поэтому тут проблем возникнуть не может).

Логотип бренда Milenuage
Логотип бренда Milenuage
Вывеска с названием магазина бренда Millenuage
Вывеска с названием магазина бренда Millenuage
Так бы выглядел магазин Milenuage, например, в торговом центре
Так бы выглядел магазин Milenuage, например, в торговом центре

3) Следующим этапом я определила цветовую гамму и шрифты. Я захотела сделать строгий дизайн и использовать минимум цветов - черный, белый и серый. Для акцентирования я выбрала красный цвет, который использовала в логотипе.

Цветовая гамма
Цветовая гамма

Для написания текстов я использовала тот же шрифт, что взяла для логотипа Suisse Intl. Также, для написания названия бренда на баннерах (например на главной странице) я использовала шрифт Bigilla (этот шрифт так же платный, поэтому будьте внимательны при его использовании).

Шрифты
Шрифты

4) Ну и наконец я приступила к самому дизайну. Я опускаю этап прототипирования, когда я делала схематичную структуру сайта, т.к. я делала это для того, чтобы было на что опираться. Но т.к. это не коммерческий проект, то это делать не обязательно, потому что согласовывать структуру ни с кем, кроме как с самой собой не нужно. Я уверена, что читателям уже надоели все эти подготовительные процессы, и хочется увидеть сам дизайн. Поэтому прошу любить и жаловать ДИЗАЙН САЙТА МАГАЗИНА МОДНОЙ ОДЕЖДЫ ДЛЯ МУЖЧИН И ЖЕНЩИН MILENUAGE.

Главная страница
Главная страница
Страница каталога
Страница каталога
Страница карточки товара
Страница карточки товара
Страница оплаты
Страница оплаты
Страница корзины
Страница корзины

Вот такой длинный путь пришлось пройти для того, чтобы "просто нарисовать картинки". Более подробно весь этот проект и его нюансы можно посмотреть в моем портфолио на Behance (здесь кстати и другие мои работы, они тоже крутые и тоже заслуживают вашего лайка).