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. О моем кейсе (не обязательно к прочтению)
Когда я делал этот мини-проект, я опирался на то, что написано выше и пришел к тому, что всего этого все равно не достаточно и вот почему:
В дизайне есть множество мелких деталей, которые не улавливаешь, пока делаешь что-то сам. Я задался этим вопросом и задам его вам. Я же считаю, что нужно саморазвиваться и пополнять свой инструментарий таких деталей, а как это можно сделать? Перерисовывать чужие проекты, копировать их или просто анализировать... Что думаете на этот счет?
Нужно развивать чувство прекрасного. Дизайн — не искусство, но очень важно воспитывать чувство прекрасного, чтобы делать качественный продукт. Взять, например, композиция или типографика. Дизайн не должен быть топорным. Он долен быть легким и текучим, как сам дизайнер.
Буду раз вашим комментариям.