{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}
Дизайн
Pavel Permyakov

Fashion в веб-дизайне (минимализм)

Индустрия моды, как и дизайна, развивается с большим темпом. В веб-дизайне мода соотносится с трендами. Каждый, кто следит за ними, без усилий увидит корреляцию между сменой трендов в вебе и моде с подиумов.

Некоторые ограничения, скажем так, обусловлены трендами в вебе. Например, fashion-сайты минималистичны, что обусловлено трендами в веб-дизайне. Противоположность минимализму — брутализм. Он пока не дошел до той степени развития, чтобы использоваться в модных бутиках (мне кажется эту нишу оставит за собой минимализм ввиду визуально-функциональной простоты), но попытки есть. Если мой дорогой читатель не знает что такое брутализм, то рекомендую ознакомиться с моей статьей о нем. Вот тут.

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

В конце статьи я оставлю несколько ссылок на красивые сайты, которые, по-моему мнению, заслуживают быть упомянутыми. Плюс в рамках небольшого обучения я сделал рабочий проектик и выложил на Behance. О нем в конце статьи.

Шрифты

Начнем с базовых элементов, по нарастающей.

Шрифты — одна из самых важнейших составляющих визуала этого стиля. Как правило, в fashion-стиле используются шрифты декоративные. Наборный всегда без засечек, helvetica-подобный, а заголовочный чаще с засечками, чем без. Также стоит заметить и то, что размеры шрифта контрасты: заголовки огромные, а наборные до 18 (если речь идет о контейнере размером в 1200-1440px).

Вот немного примеров шрифтовых пар:

Бесплатные:

Playfair - Manrope
Ivy Mode - Poppins
Cormorant Garamond - Montserrat
Prospectus - Sailec
Proxima Nova - Raleway

Платные:

Saol Display - Aktiv Grotesk
Avenir - Didot
Made mirage - Work Sans

Думаю, нет смысла показывать начертания всех. При необходимости можете ознакомиться с ними самостоятельно.

Цвета

Это, наверное, самый простой пункт. Цвета используются пастельные, за редкими исключениями: иногда фирменный стиль намеренно кричащий, но если это бутик, то тут только минимализм.

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

Тут я также должен заметить, что в таком стиле часто делают проекты с темным фоном. Так называемый darkmode. Они очень стильные и придают дороговизну, уникальность проекту.

Приёмы, текст, медиа-контент

Скажу честно, это мой самый любимый пункт.

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

В целом, медиаконтент всегда качественный: фотографии обработаны и подходят под концепцию как стилем, так и расположением, а видео, если есть, то всегда короткие и динамичные. К слову, всё чаще видео используется на обложке сайта. Это 5-10-секундный повторяющийся ролик с текстом поверх. В обложках также уже стандартом являются слайдеры, однако бывают и сложные, креативные варианты.

Плавно переходим к тексту. Заголовки всегда большие и часто наезжает на изображение. Обычно заголовки в 2-3 строки и содержат до 7-8 слов. Это важный момент, ведь так страница смотрится визуально менее нагруженная. Наборный текст всегда короткий. В случаях когда текста много, дизайнеры выстраивают сторителинг короткими урывками. Самый длинный текст, что я встречал, был в 9-10 строк и шириной 400-450 пикселей и всегда рядом идет медиа-контент. Шрифты в данном случае небольшие: 14-18 пикселей, но тут сразу замечание: в тренды входят большие размеры шрифтов и можно встретить текст параграфа кеглем в 24-28 пикселей. Это все выстраивается по ситуации и на вкус дизайнера, просто держу в курсе.

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

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

Примеры

Хотелось бы начать с русскоязычных сайтов. Отличным примером является Талисия. Это интернет-магазин. Ставка тут сдлана на минимализм и он весьма эффективно выполяет свои функции. Это хорошая работа, но в плане юзабилити лично у меня есть нарекания. Многие решения этого плана спорные, но визуально очень неплохо.

Второй и последний русскоязычный сайт является примером качественного даркмода. Это сайт интерьерного дизайнера. Лично меня тут цепляют именно цветовые решения и сторителинг.

Rino Pelle - наверное лучший коммерчиский сайт в плане визуала что я видел. Пожалуй, самый лучший пример fashion-стиля.

Немного устаревший, но все ещё стильный интернет-магазин. Необычные визуальные решения и типографика (NoeDisplay - Northwell - Poppins) придают уникальности. Медиа-контент тоже не отстает. Рекомендую ознакомиться.

Снова e-commerce. Крайне качественный сайт. Лёгкий, правильный, минималистичный.

Резюмирую.

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

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

Надеюсь статья оказалась полезной. Спасибо за прочтение!

P.s. О моем кейсе (не обязательно к прочтению)

Когда я делал этот мини-проект, я опирался на то, что написано выше и пришел к тому, что всего этого все равно не достаточно и вот почему:

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

Нужно развивать чувство прекрасного. Дизайн — не искусство, но очень важно воспитывать чувство прекрасного, чтобы делать качественный продукт. Взять, например, композиция или типографика. Дизайн не должен быть топорным. Он долен быть легким и текучим, как сам дизайнер.

Буду раз вашим комментариям.

0
Комментарии
Читать все 0 комментариев
null