Ох, 90-е… Эта эпоха дала нам столько всего. Гранж был на подъеме, восточное побережье воевало с западным в хип-хопе. Все ходили в джинсах с высокой талией и рубашках, а на ногах (в идеале) были Converse. Кроме того, это десятилетие дало нам сериал «Друзья», «Симпсонов» и «Южный парк». И все, что придет вам в голову – поп-культура, политика, мода – было каким-то грубым, неотесанным. Этот вид ознаменовал эпоху.
Перенесемся в современность: этот образ 90-х годов возвращается на новый уровень. И это не остановить.
Грубая эпоха 90-х рулит дизайном. Яркая анимация, большие шрифты и асимметрия.
Прошли те времена, когда была востребована идеальная симметрия и нежный дизайн.
Хотя каждый веб-сайт сам по себе уникален, есть некоторые элементы, которые совпадают. Ниже мы расскажем об этих элементах – они помогут вам достигнуть стиля 90-х.
Перебор в типографике
Одна из самых ярких характеристик девяностых – броская типографика. Конечно, не стоит забывать о читабельности текста. Но это не означает, что вы должны делать его блеклым. Добавьте перчинки и сделайте леттеринг центром вашего дизайна. Некоторые комбинации работают лучше, чем другие, поэтому будьте осторожны при выборе шрифтов для вашего сайта.
Экспериментируйте со стилями шрифтов, используйте прописные и строчные буквы. У вас огромное количество вариантов. Главный принцип – чем больше, тем лучше. Дизайнерское агентство Locomotive приводит интересные кейсы.
Просто посмотрите на этот заголовок, который занимает весь экран. Он действительно создан для того, чтобы вы его заметили. Ну и, конечно же, контраст.
Есть также сайты вроде davideperozzi.com, которые шагнули вперед и сделали типографику наиболее заметным элементом своего дизайна.
Даже в разделе Портфолио все повернуто на огромных буквах! Изображения и цвета вторичны. Вы увидите картинки – но только мельком – если наведете курсор или нажимаете на слово. Эта типографика сочетается с различными анимационными эффектами. И именно эта комбинация больших шрифтов и нетипичных анимаций делает сайт динамичным, интересным и запоминающимся.
Контрасты в размерах шрифта
Из-за того, что вы используете огромные заголовки, остальная типографика на сайте должна быть меньше. Это не значит, что она должна быть «стандартной». Просто разница должна быть такой, чтобы смягчить чрезмерный эффект и показать, что у вас есть визуальная иерархия.
Ребята из craftedbygc.com проделали большую работу по объединению идеально заданных размеров шрифта с изображениями, которые они выбрали для использования на странице.
Заголовки – наиболее заметный элемент этого дизайна, в то время как остальная типографика значительно меньше. Она поддерживает структуру страницы, не перекрывая изображения.
Асимметричный макет
Еще несколько лет назад симметричное расположение элементов было стандартом дизайна. Забудьте об этом. В наши дни правит асимметрия. Хотя эта техника может быть немного провокационной, она определенно эффективна.
Отличный пример – сайт Burnish Creative.
С каждым вашим скроллом происходит что-то странное. Буквы движутся, воспроизводиться видео, появляются лица на изображениях, один элемент перекрывает другой. Может показаться, что это перебор. Но для такого сайта этот прием освежает общий вид.
Каждая страница – хранилище контента. Иногда его слишком много, и посетитель устает. Но такое разнообразие даст новый мотив: он будет прокручивать, чтобы увидеть новую анимацию или видео.
Минимализм
Возможно, эстетика 90-х выглядит не минималистично, но на самом деле это так. Вас не должны смущать огромные шрифты и смелый дизайн. Если вы присмотритесь, то поймете, что на любой из этих страниц не очень много элементов.
Дизайн лишен любых элементов, в которых нет смысла. Весь смысл в том, чтобы дать вашим посетителям именно то, что они искали. Вы не хотите отвлекать их ненужной косметикой. Упрощая свой дизайн, вы повышаете эффективность сообщения. Поставьте пользователей на первое место и убедитесь, что ваш дизайн соответствует их потребностям.
Контурная типографика
Эстетика 90-х и контурная типографика – это любовь навсегда. Полые шрифты – отличный выбор, особенно для веб-сайтов, где много изображений. Если вы не хотите, чтобы ваша типографика подавляла картинки, но сам текст очень важен, этот способ убьет сразу двух зайцев.
Сайт benandmartin.com – отличный пример использования типографики.
Когда вы прокручиваете страницу вниз, на вас «выпрыгивают» новые проекты, и каждый подписывается контурным шрифтом. И главное – хоть шрифт и большой, нет ощущения, что он доминирует. Картинки главный элемент страницы. Если бы они использовали сплошной шрифт, а затем поместили текст поверх изображений, изображения служили бы просто фоном для текста.
Такая типографика хороша тем, что вы можете поиграть с ней и разместить надписи там, где вы хотите.
Смелая анимация
Мы хотим, чтобы все было просто, верно? Как мы уже говорили, нет необходимости добавлять ненужные детали. Но вы можете добавить несколько эффектов анимации десь и там, чтобы сделать процесс просмотра более увлекательным и захватывающим.
Как этот парень:
Луи Анса использует смелые анимации, чтобы превратить обычный сайт-портфолио в нечто запоминающееся. Он также позаботился о микровзаимодействии на своем сайте. Как только вы наводите курсор мыши на изображение или кнопку, указатель меняет свою форму. Такие мелочи имеют значение и делают процесс просмотра особенным и приятным.
Крайности брутализма
Один из способов придать вашим сайтам внешний вид 90-х годов – использование брутализма. Паскаль Девиль (brutalistwebsites.com) дал одно из лучших объяснений того, что такое брутализм:
В своей жесткости и отсутствии заботы о том, чтобы выглядеть комфортно или просто, брутализм можно рассматривать как реакцию молодого поколения на оптимизм и легкомысленность современного веб-дизайна.
Брутализм – полная противоположность строгим дизайнам, к которым мы все привыкли. Множество ярких цветов, микровзаимодействий, неуместных изображений, анимации… Это некоторые из основных характеристик как эстетики 90-х, так и бруталистического дизайна.
Нарушайте правила и забудьте о совершенстве. Наполните содержание индивидуальностью и характером. В этом суть брутализма. И хотя художники-бруталисты часто применяют более смелый подход к этой философии, он может может помочь вам добиться эстетики девяностых.
Сделайте красным
Мы уже говорили о том, что дизайны, вдохновленные 90-ми годами, в основном лишены цвета – они используют его как изюминку. Но если вы захотите использовать эту изюминку, какого цвета она будет? Какой цвет лучше всего сочетается с простой, но впечатляющей эстетикой 90-х? Конечно же красный!
Если ваша цель – привлечь внимание, то смело выбирайте красный. Этот цвет уже глубоко укоренился в наших мозгах. Мы связываем его с силой, энергией и страстью. Вернитесь и еще раз посмотрите на все примеры, которые мы использовали в тексте. На этих сайтах не так уж много цветов, но детали красного цвета есть везде! Ваш глаз сразу же обращается именно к этим элементам.
Но здесь важно не переборщить. Убедитесь, что вы используете его в меру, и только для деталей, которые хотите выделить.
Заключение
Уникальная эстетика 90-х набирает популярность сегодня. Особенно среди более альтернативной публики. Простой, эффективный, смелый, привлекающий внимание – именно так должен выглядеть ваш дизайн, если вы хотите выглядеть как в 90-х.
Читайте также:
20+ новых крутых инструментов для дизайнеров за август 2019
5 советов, как контролировать внимание пользователя на вашем сайте
5 полезных расширений Chrome, которые должен попробовать каждый веб-дизайнер
