Что такое минимализм в дизайне
Пример стиля минимализм в интерьере. Автор проекта — Valentina Katanova. ИсточникИстория минимализма
Начало XX века было связано со всплеском модернизма и экспрессионизма. Яркие краски, множество сложных декоративных элементов, нестандартные формы и фактуры — too much, как бы выразились сегодняшние аскеты. Естественной реакцией на столь активные формы выражения стало возникновение нескольких новых направлений в искусстве.
Неопластицизм. Движение De Stijl из Нидерландов стремилось к максимальному упрощению композиций. Его участники предпочитали применять в своих работах только набор из вертикальных и горизонтальных линий, черный, белый и основные цвета, а при необходимости — элементарные геометрические формы.
Пример картины в стиле неопластицизма. ИсточникСупрематизм и русский авангард. Малевич и его соратники отрицали идею искусства ради искусства, отказывались от традиционных форм и приемов. Характерно применение контрастных цветов и минимального количества оттенков. Фигуры людей упрощались до набора геометрических форм, а лица зачастую и вовсе не изображались.
Картина «Супрематизм». Казимир Малевич, 1916. ИсточникКонструктивизм. Последователи этого течения отказывались от декоративных элементов, так как считали, что вещи должны быть функциональными. Никаких резных наличников — только строгие прямые линии, стекло и бетон.
Здание редакции газеты «Известия» — яркий пример советского конструктивизма. ИсточникШвейцарский стиль. Данное направление относится к графическому дизайну. Оно сформировалось в середине XX века и отличалось активным применением модульной сетки, шрифтов без засечек и асимметричной верстки.
Пример использования швейцарского стиля в дизайне постеров. Автор — Mehman Mammedov. ИсточникВсе эти направления подготовили почву для развития современного минимализма и одновременно подарили ему множество идей.
Основные черты минимализма
Простая геометрия. Строгие вертикальные или горизонтальные линии могут дополняться мягкими скруглениями на углах. Иногда допускается задействовать элементы в форме круга или овала. Простые лаконичные формы позволяют быстро сфокусировать внимание на конкретном предмете, что особенно актуально при создании рекламных буклетов, меню сайтов и приложений. Откройте любую программу на своем смартфоне и посмотрите на кнопки — простые прямоугольники и квадраты, на которые удобно нажимать.
Монохромная цветовая гамма. Два-три оттенка — оптимальное сочетание для дизайна в стиле минимализм. Базовая цветовая схема позволяет создать яркий и одновременно спокойный проект, который будет комфортен как для восприятия, так и для работы с ним. Ограниченная палитра дает возможность быстро зафиксировать в сознании потенциального покупателя бренд, что особенно важно в современном маркетинге.
Обилие свободного пространства. И в интерьере, и в дизайне интерфейсов в духе минимализма оставлено много свободного «воздуха». Картинка не перегружена, нет визуального шума и раздражающих мелочей. Если спальня, то только с кроватью и тумбой. Логотип — исключительно с одним-двумя запоминающимися элементами. «Воздух» присутствует и в одежде — никаких вычурных украшений, безумных принтов и хитрых кружев: однотонные вещи спокойных оттенков могут дополняться скромными подвесками и столь же лаконичными сумками.
Пример минимализма в образе: простая одежда, лаконичные украшения, неброский макияж. ИсточникМинимум декора. Вензеля, необычные интерьерные решения, яркие иллюстрации — все это неуместно в минимализме. Декором в данном стиле может стать сочетание узких и широких полос на одном из элементов всей картинки. Например, плед на диване или выпадающее меню в интерфейсе приложения. При этом весь декор должен быть функциональным: если есть вазы, в них должны быть цветы, если на одежде присутствуют карманы, то обязательно вместительные и удобные для использования.
Натуральные материалы. Если речь заходит об оформлении интерьера или создании предметов гардероба, то дизайнеры-минималисты отдают предпочтение натуральным природным материалам: древесине, хлопку, льну, натуральной шерсти, металлу, стеклу. Все они имеют приятную фактуру и благородный внешний вид. Но стоит помнить и об их экологичности: такие материалы не только не засоряют собой планету, но и не требуют особых условий для переработки.
Минимализм в интерьере
Стиль минимализм в дизайне характерен для современных пространств и квартир. Он достаточно прост в реализации и приятен для восприятия. Все шкафы и системы хранения скрыты за однотонными светлыми фасадами, тщательно продумана функциональность каждого элемента.
Пример минималистичного интерьера от Porto Buro. ИсточникВ таком пространстве легко поддерживать порядок, ведь оно не захламлено. Интерьеры для минималистов позволяют переключиться с городской суеты на спокойный домашний лад и отдохнуть от ярких витрин и неоновой рекламы. Многие используют минимализм в качестве базы при создании сканди-интерьера: все та же функциональность упакована в более уютную обертку и приправлена несколькими яркими элементами (подушками, постерами, крупными домашними цветами в горшках).
Пример минималистичного интерьера от Porto Buro. ИсточникМинимализм в интерьере любят начинающие дизайнеры: при создании проекта не потребуется прорисовывать массу сложных деталей и продумывать расположение огромного количества декоративных элементов. Но при этом важно не забывать о тех самых системах хранения: следует продумать их расположение и вместимость.
Минимализм в архитектуре
Минималистичная архитектура характерна для новостроек последних лет: гладкие однотонные фасады с прямоугольными окнами без козырьков, ярко выраженной фактуры материала и декоративных элементов. Одно- и двухэтажные частные дома возводятся по тем же принципам. Особое внимание уделяется свету: архитекторы создают проекты с панорамными окнами, чтобы помещение становилось более светлым и объемным за счет проникающих внутрь солнечных лучей. С этой же целью уменьшается количество комнат: чем меньше перегородок и входных дверей, тем светлее пространство.
Проект спортшколы от Виталия Харитошина. ИсточникВ погоне за светом и свободным пространством важно не забывать о функциональности помещения: людям нужны зоны для работы и отдыха, приема пищи и гигиенических процедур. Стоит помнить и об элементарной безопасности: защитные козырьки над входными группами все-таки нужны. Их можно скрыть под балконами верхних этажей или элементами освещения.
Минимализм в графическом дизайне
Композиция строится так, чтобы изображение сразу же отпечаталось в памяти. Простые линии и лаконичные формы, расположенные с учетом модульной сетки, — вот главные черты данного направления. Потенциальным покупателям и пользователям не нужно выискивать нужный объект среди визуального шума — они сразу встречают его по центру дисплея или визитной карточки. Все элементы, которые не несут функциональной и смысловой нагрузки, удаляются. Важно помнить и о свободном пространстве: оно усиливает впечатление от имеющейся информации (логотипа, наименования) и делает ее более выразительной.
Пример логотипа от Регины Самигуллиной. ИсточникВажно! В стремлении упростить визуал не стоит ограничивать себя использованием самых элементарных форм и оттенков. Во времена Малевича это, конечно, выглядело свежо, но сегодня таким решением сложно удивить. Если минималистичных идей нет, можно начать со сложных форм, а затем упростить их.
Минимализм в веб-дизайне и UX/UI
Если говорить о минимализме в веб-дизайне, то нельзя не отметить удобство сайтов, оформленных в этом стиле. С одной стороны, они могут показаться скучными и бедными из-за отсутствия ярких оттенков и интересных шрифтов. С другой — пользователи отмечают, что пользоваться такими ресурсами намного удобнее, т.к. можно не отвлекаться на детали и сразу приступить к поиску нужной информации.
Фрагменты минималистичного сайта: первый экран главной страницы и каталог. Авторы — Захар Ромашов и Pavel Belousov. ИсточникКонтент в данном случае выдвигается на первый план. Если речь идет о каталоге, то минималистичный дизайн предполагает размещение крупных фотографий, информации о цене и наименовании моделей. Все остальные характеристики уместно разместить либо на карточке товара, либо во всплывающем окне. Если же пользователю нужно заполнить ряд форм для анкетирования, то на одном экране стоит помещать не более 3-4 граф для удобства их заполнения. Из кнопок — только «Далее» и «Назад» для навигации. Помните: минимализм — это про потребность и функциональность. Дайте пользователю ровно то, что ему нужно в данный момент, и не нагружайте лишним визуалом.
Минимализм в шрифтах
Да, такое тоже возможно, и подобные шрифты стоит использовать в проектах с минималистичным дизайном. Буквы в них лишены засечек (или имеют минимальное их количество), курсивное написание редко напоминает начертание от руки. Самый яркий пример — шрифты Univa nova, Axon, Luxora grotesk. В их гарнитуры включены как классические, так и курсивные версии написания букв, которые подойдут для оформления визиток, обложек книг, логотипов и т.д. Некоторые шрифты (например, Dallas) вообще лишены строчных букв — они состоят только из прописных. Такое решение позволяет создавать запоминающиеся логотипы, которые быстро врезаются в память.
Пример шрифта Dallas. ИсточникМинимализм в иллюстрациях
Простая на первый взгляд, такая иллюстрация требует длительной проработки. Минимализм в картинках на веб-ресурсе или в книге отличается ограниченной палитрой и продуманной композицией. Художник может задействовать всего два-три цвета, чтобы передать идею. Но сам посыл может нести глубокий смысл и различные сведения. Особенно актуальны минималистичные иллюстрации при создании инфографики: перед художником стоит задача отобразить большой массив данных, используя при этом минимум инструментов. Для этого он упрощает форму, часто прибегает к использованию общепринятой символики, группирует мелкие объекты, а также активно применяет шаблоны.
Пример иллюстрации от Ekaterina Zimina. ИсточникЕсли сложно с нуля создать минималистичный рисунок, то можно начать с привычных форм и постепенно упрощать их. Иногда полезно доводить свое творение до абсурда, избавляясь от деталей, чтобы натренировать мозг и закрепить навык.
Минимализм в геймдизайне
Разработчики игр активно используют главные черты минимализма, чтобы лучше донести свою идею до пользователя. В играх может быть «плоская» графика, но при этом хорошо проработанное освещение, удобная система управления и практически полное отсутствие обучения. Такой подход позволяет создать максимально интересный для пользователя продукт: он захочет самостоятельно все изучить, не отвлекаясь на элементы костюмов персонажей и большое количество «горячих» клавиш.
Windosill — минималистичная игра с ограниченной цветовой палитрой, полным отсутствием текста и голосового сопровождения. ИсточникХотите еще больше минимализма? Используйте очевидные ходы и знакомые людям решения при создании сценария. Так пользователю будет проще освоиться внутри игры, ведь он уже будет знать ее законы. Откажитесь от излишеств в виде большого количества бонусов, которые дают одинаковое преимущество. Избавьтесь от вступительного ролика и большого текстового описания — пусть пользователь с самого начала попадает в мир и самостоятельно изучает его.
Как выбрать шрифт для сайта
8,421 просмотров всего, 3 просмотров сегодня
Оглавление
- Виды шрифтов
- Что нужно учитывать при выборе шрифта
- Технические параметры
- Выводы
Мы часто говорим о том, что текст должен быть уникальным и полезным для пользователей. Но наряду с содержанием большое внимание уделяется и форме подачи материала. В работе копирайтера под ней понимают структурированность текста, в работе дизайнера — типографику. Пожалуй, основным ее элементом является шрифт. И перед дизайнером встает эта непростая задача — подобрать его для сайта.
В этой статье рассмотрим, какие бывают виды шрифтов и чем руководствоваться при их подборе.
Как будет читаться текст, во многом зависит от того, как выглядят сами буквы. Быть может, вы удивитесь, но шрифт даже способен создавать настроение, влиять на общее впечатление от текста, сайта, а значит и компании в целом. Неслучайно, крупные бренды разрабатывают уникальное написание букв, которое затем становятся их визитной карточкой.
О фирменном стиле и шрифтах как одном из его элементов читайте в нашей статье “Фирменный стиль: правила, исключения, секреты”.
Может показаться, что настроение сайта, его тон задает графика. На самом деле шрифт ничуть ей в этом не уступает. Несмотря на обилие возможностей для работы с изображениями и видео, он не теряет своих позиций. Во многом это связано с современными требованиями к адаптивности сайта. Графика замедляет скорость загрузки страницы, а вот шрифты нет. При грамотном их подборе можно создать самые разные сайты от строгих до креативных. Таким образом, как и любой другой элемент дизайна, то, как выглядят буквы, будет влиять на поведенческие факторы.
Виды шрифтов
Существует два основных семейства, или гарнитуры. Буквы с засечками — антиквы, без засечек — гротески.
Первые изначально использовались в книгоиздательстве. Засечки формируют строку и взгляд не сбивается при переходе с одной на другую. Если раньше с монитора было трудно читать материал, написанный шрифтом с засечками, то благодаря современному разрешению дисплеев, это стало очень даже удобным.
Гротески изначально больше подходят для web-среды. Их можно использовать и в длинных, и в коротких текстах. Эта гарнитура более привычна для глаз пользователей. Также ее применяют для логотипов. Она широко распространена в дизайне благодаря своей лаконичности, динамике, современности.
К этой классификации добавим рукописные и моноширенные шрифты.
Если с рукописными все понятно, то вторая требует пояснений.
Моноширенный шрифт — тот, чьи знаки имеют одинаковую ширину и могут быть вписаны в квадрат.
Рассмотрим семейства и то как начертание букв отражается на восприятии текста.
- Антиквы — классика, элегантность, утонченность.
- Гротески — минимализм, динамика
- Рукописные — оригинальность, декоративность
- Моноширенные — устойчивость, уверенность.
Если антиквы и гротески могут применяться для любых текстов, то рукописные и моноширенные уместны для небольших текстовых блоков. Их использование обусловлено стремлением привлечь внимание к определенной информации или общей концепцией дизайна.
Есть и еще одна очень простая и важная классификация — стандартные и нестандартные варианты.
Стандартные поддерживаются каждой операционной системой, каждым браузером. Используя их, вы можете быть уверены, что пользователь увидит сайт таким, как вы задумали. Наиболее популярными из этой группы являются Times New Roman, Arial, Verdana, Tahoma, Georgia.
Если вы выбираете нестандартные, то они будут дополнительно подгружаться в браузер пользователя, что может незначительно снизить скорость загрузки страницы. С другой стороны, вы получите более выразительный, незаюзанный вариант. Подобрать такие шрифты можно на Google Fonts, MyFonts, Fontsquirrel. За большую часть придется выложить деньги, но при желании можно найти и бесплатные. При покупке или скачивании обратите внимание на его лицензию, где прописаны правила пользования. Так вы облегчите жизнь себе и своему заказчику.
Как и везде, где есть платные материалы, есть и пиратский контент. Пользуясь им, дизайнер и владелец сайта становятся пособниками мошенников, незаконно получивших к ним доступ.
Но как все же его выбрать, тем более, платный? Такая ответственность. Специализированные ресурсы ввели возможности тестирования онлайн. Вы не только можете посмотреть сочетаемость разных шрифтов, но и поэкспериментировать с начертаниями, цветом фона.
Что нужно учитывать при выборе шрифта
- общую цель создания сайта и цель дизайна.
- аудиторию веб-ресурса
- содержание будущих текстов
- читабельность
Как правило, для сайта выбирается 3-4 шрифта. Это помогает показать иерархию подаваемой информации, выделить некоторые блоки. Сначала находится оптимальный вариант для тела сайта, затем для заголовков и после для отдельных смысловых элементов. Для дизайнера здесь все усложняется тем, что необходимо скомбинировать эти шрифты. Причем необязательно, чтобы это были представители одного семейства. Вот уж задача не из простых — найти варинты, которые будут гармонировать друг с другом, но при этом не будут казаться слишком похожими. А еще у каждого есть по несколько начертаний, например, жирное, полужирное, тонкое и т.
Основной совет при подборе — не злоупотреблять количеством. Некоторые дизайнеры обходятся одним шрифтом, используя разные начертания. Однако, правила существуют для того, чтобы их нарушать. И если концепция сайта подразумевает многообразие — действуйте. Только учитывайте, что такое решение будет постоянно перетягивать внимание пользователя из одной точки в другую.
Если вы начали свой путь в digital с создания логотипа, то там уже, как правило, использовано несколько шрифтов, чаще всего два. Поэтому прикидывая их количество для сайта, не забывайте учитывать уже примененные в лого.
Более подробно о создании логотипа читайте в нашем материале “Как самому создать логотип компании”.
БЛОК ПРО НАШ САЙТ НА ПОДЛОЖКЕ
Для сайта Stebnev Studio мы выбрали два шрифта: антикву PT Serif и гротеск Fira Sans. Сочетаемость достигается за счет идентичности основных форм букв. Наш логотип создан с использованием шрифта с засечками, так что антиква является продолжением фирменной темы, а гротеск разнообразит визуальную составляющую.
Еще один важный эстетический момент — соотношение цвета знаков с фоном, степень контрастности. Классическим сочетанием для человеческого глаза, конечно, является черный текст на белом фоне. Но раньше все было по-другому: из-за разрешения мониторов чаще всего использовался белый текст на черном фоне.
Сегодня, если вы хотите повысить читабельность текста, стоит сделать подложку не белоснежной, а сероватой. И сам шрифт может быть не черным, а темно-серым. Таким образом вы снизите яркость, и пользователи будут меньше уставать при изучении веб-ресурса. Сочетания цветов могут быть самыми разными. Главное, чтобы это не утомляло глаза и не “калечило” психику посетителй сайта.
Технические параметры
Размер — ключевой момент для читабельности. В веб-среде не принято использовать для тела сайта шрифт менее 12 пикселей. Для сносок и подписей применяется 8-10 пикселей. Оптимальным вариантом для тела ресурса будет 14-18 пикселей. Важно соблюдать единообразие. Т.е. каждый структурный элемент, например, заголовок должен быть везде одного размера.
Расстояние между знаками, или кернинг. Как правило, определяется создателем шрифта. Изменить его веб-дизайнер может в заголовке или в цитате, где важно именно визуальное оформление.
Еще два параметра относятся к типографике в целом.
Интерлиньяж — расстояние между строками. По сути текст представляет собой сочетание знаков и “воздуха”. Так вот, чтобы читатель не “задохнулся”, расстояние между линиями букв должно быть больше, чем размер шрифта в 1, 5 раза. Длина строки важна для комфортного перемещения взгляда по тексту. Оптимальным считается — 600 пикселей. Текст должен быть выровнен по левому краю. Если сайт подразумевает более широкие строки, то можно вспомнить газету и разбить текст на несколько колонок.
После того, как дизайн готов, начинается тестирование его элементов. Не стоит обходить своим вниманием шрифт. Часто дизайнеры видят свое творение только через фотошоп, точнее, сквозь призму фотошопа. Но в реальности все может сильно отличаться. Проверьте, как выглядят страницы сайта в разных операционных системах и браузерах. В особенности если мы использовали нестандартные.
Если вы собираете фокус-группу для тестинга дизайна, обязательно включите в задание оценку шрифта, а точнее читабельности текста.
Выводы
Задавшись вопросом, что лучше подойдет для вашего сайта, не упускайте из вида сочетание эстетики и функциональности. Если выбранный шрифт будет красивым, но текст будет трудно прочесть, вряд ли это улучшит юзабилити и поведенческие факторы.
Подбирая шрифт для сайта, руководствуйтесь не только собственными предпочтениями, но и объективными данными. Задача дизайнера — оформить площадку, на которой будет размещена определенная информация. И все должно работать на эту информацию и ни в коем случае не отвлекать внимание от нее.
- Еще раз выделим пункты, которые стоит учитывать при подборе шрифтов
- не больше 3-4 для сайта
- не использовать в основных текстах шрифты, сложные для чтения
- должен контрастировать с фоном
- для основного текста размер не менее 14 пикселей
- длина строки не более 600 пикселей
- интерлиньяж в 1, 5 раза больше высоты букв
Как и с любым другим элементом дизайна, здесь есть масса ограничений, которые затем превращаются в подспорье. Не бойтесь экспериментировать, и ваши сайты обязательно достигнут поставленных целей.
Семейство шрифтов Metropolis · 1001 шрифтов
Произошла ошибка. Пожалуйста, повторите попытку позже.
Сделано
Крис Симпсон
Метки
- геометрический ,
- минималистичный ,
- без засечек ,
- текст , 9 0011 мелкий текст ,
- средний ,
Начертания
- regular.otf»>
Metropolis Thin
OT
OTF Waterfall 286 символов
9001 2OT
OTF Waterfall 286 символов
Metropolis Light
OT
OTF Waterfall 286 символов
Metropolis Medium
OT
OTF Waterfall 286 символов
Metropolis Semi Bold
OT
OTF Waterfall 286 символов
Metropolis Bold
OT
OTF Waterfall 286 символов
extra-bold.otf»>Черный Метрополис
OT
OTF Водопад 286 символов
- 9002 8 Metropolis Regular Italic
OT
OTF Waterfall 286 символов
Metropolis Thin Italic
OT
OTF Водопад 286 символов
OT
OTF Waterfall 286 символов
Metropolis Light Italic
OT
OTF Waterfall 286 символов
Metropolis Medium Italic
OT
OTF Waterfall 286 символов
Метрополис обычный
OT
OTF Водопад 286 символов
OT
OTF Waterfall 286 символов