А в TurboBlogе гостевой пост . В этот раз мы рады предложить вам материал, подготовленный Юлией Солнцевой — нашим внештатным автором. В своей первой статье для нашего блога Юля поделилась собственным видением минималистического веб-дизайна, а также подкрепила его убедительными примерами. Впрочем, лучше один раз увидеть, чем пару раз услышать об этом .
Сегодня на рынке коммерческого искусства все яснее прорисовывается стремление к минималистической форме подачи информации. И эта тенденция не есть что-то новое. Это логическое следствие развития и смены этапов в искусстве. Когда-то, в 60-х годах, минимализм впервые заявил о себе как отдельное направление искусства. Его появление — это протест, реакция на абсолютное торжество экспрессионизма в то время, а особенно, его утрированной формы — абстрактного экспрессионизма.
Современный мир переживает различные стадии развития интернет-технологий. Минула эра web 1.0 — вся совокупность того, чем был и того, из чего состоял интернет до появления web 2.0 технологий, участниками и непосредственными творцами которых мы все с вами и являемся.
С недавних пор исследователи развития интернет-технологий во главе с Jason McCabe Calacanis , лидером Netscape.com, пророчат нам наступление новой эры — web 3.0, специфику которой, кроме того, что интернет станет более ориентированным социально, они так и не смогли сформулировать.rnПонять возрастающую популярность минимализма, или как его еще называют — искусства ABC, в современном веб-дизайне невозможно, не рассмотрев специфику каждой стадии web-технологии и визуализировавшего ее дизайна.
Первому этапу развития дизайна в эре web 1.0. были свойственны:
- броскость цветов, в основном из палитры web safe;
- вездесущий желтый цвет;
- неимоверно раздражающий контраст, например, белое на синем или красное на черном;
- картинка вместо фона и, как результат, полная нечитабельность текста;
- отсутствие четкой структуры модульной сетки, а в особо тяжелых случаях — и самой модульной сетки.
Вот как выглядели сайты знаменитых компаний в 90-х годах:
Дизайнеры знали и любили только один шрифт — Comic Sans
.Но следует помнить, что дизайн развивался параллельно с интернет-технологиями. Дизайнерам негде и не у кого было учиться — они были первопроходцами.
Затем, на рубеже 90-х и 2000-х, развитие дизайна и графики привело к гонке креативности. Дизайнеры еще буквально пару лет назад старались всячески удержать внимание посетителя визуальными приманками, будь-то впечатляющий флеш или реалистичный 3D. Абстрактные формы и нестандартный интерфейс — все это, конечно же, привлекало внимание пользователя, но вместе с тем и отвлекало его от контента сайта, в связи с чем большинство сайтов не выполняло своей первостепенной функции — информирования. В итоге сегодня интернет перенасыщен шаблонным креативом, что сделало множество сайтов однотипными.
Правду говорят: в наше время, чтобы отличаться, нужно быть простым. И минимализм в какой-то мере отвечает этим требованиям. Как и когда-то в живописи, минимализм сегодня в веб-дизайне — это попытка вытянуть контент из информационного шума , расставить акценты, сформировать четкую схему восприятия. Яркий дизайн способен удержать внимание посетителя, минималистический — направить его в нужное русло.
Основные принципы мышления в стиле минимал:
- отказ от субъективности восприятия;
- отказ от символизма и метафорических форм;
- поразительная геометрическая четкость;
- баланс контрастов;
- нейтральные поверхности, мягкие текстуры.
Ленивый дизайнер или дизайнер-минималист? Как же распознать талант? Для формирования системы восприятия дизайнеры-минималисты используют определенные методы. О них — дальше.
Минимальное использование графики
не должно означать ее отсутствие.
Упрощение графики до минимума
— один из основных приемов минимализма, при этом минималистичная графика должна иметь свой стиль и смысловой посыл.
Неброский цвет фона
, в основном — различные вариации сочетания черного и белого, или преимущественно светлые тона, которые создадут деловой стиль сайта и тем самым вызовут у пользователей ощущение доверия, надежности, стабильности, серьезности.Выделяйте важную информация цветом.
Четкость модульной сетки
— это важно. Информация, которая имеет четкую структуру, легко воспринимается и запоминается.rnИспользование модульной сетки и направляющих не только облегчит структурирование всех элементов дизайна относительно друг друга, но и в значительной мере сохранит нервы верстальщику, который намного быстрее вычислит размеры всех элементов подложки.
Понятная пользователю навигация.
Навигация, упрощенная до минимума, ускорит процесс поиска информации и восприятия структуры сайта. Это один из элементарных способов быстро донести информацию до посетителя. Веб-дизайнеры часто прибегают к использованию простой навигации.
В прямом смысле слова — убрать все лишнее
.Поменьше графики. Если вы решили использовать фотоматериалы, сделайте их наглядной иллюстрацией рода деятельности фирмы.
Палитра.
Правильный подбор палитры очень важен для формирования необходимого восприятия информации. Минимализм — не синоним простоты и серости, или вовсе отсутствия цвета, минимализм это стиль подачи информации. Искусствоведы дают лишь стилистические советы, а все остальное — дело вкуса веб-дизайнера и предпочтений заказчика.
Упрощаем дизайн
, выносим шрифт на первое место. Если текстовый контент для вас дело первостепенное, то шрифт для дизайна — «царь и бог». Экспериментируйте не только с видами шрифтов, но и с интервалами, цветом. Про шрифты следует отметить несколько занимательных фактов. Естественно, дизайнер, работая с шрифтами, хочет, чтобы его сайт выглядел оригинально. Но истина заключается в том, что у большинства пользователей, которым посчастливится посетить этот сайт, установлены лишь системные шрифты, и у 99% — это шрифты системы Windows. Так что, эксперимент имеет свои логические ограничения, используйте нестандартные шрифты там, где это уместно: логотипы, надписи
.
Сфера применения минимализма в веб-дизайне
Как по мне, минимализм, в принципе, не имеет ограничений по сфере своего применения. Но практика использования этого направления сложилась таким образом, что чаще всего
веб-дизайнеры применяют этот стиль при создании следующих сайтов:
сайт-визитка, портфолио
:
корпоративный сайт:
Сдержанные цвета и отказ от рюшек, удобная навигация, четко структурированная информация и акцент на контент поспособствуют созданию делового стиля.
блог/ персональная страница
:
В своей основе принципы оформления блога и персональной странички такие же, как и принципы оформления сайта. Но есть отличия, которые задает характер самой блогосферы: боковое меню, упрощенная навигация, основное место отводится тексту. Хорошим примером, который демонстрирует принципы оформления блогов, может выступить стиль сайта Facebook. Ничего не должно отвлекать пользователя от информации и общения:
Следует помнить, что при использовании минималистического стиля в дизайне также необходимо учитывать специфику шрифтов, цветовые решения и фирменный стиль компании в целом.
Конечно же, отношение к минимализму в веб-дизайне, как и к минимализму в искусстве, у разных людей может быть разным: от полного восторга до полного неприятия. Заказчику может не приглянуться новое актуальное видение художника, ему может показаться, что дизайнер попросту ничего не делал, но тот факт, что мода на минимализм только набирает обороты — остается фактом. Так, например, популярный стиль в архитектуре и дизайне интерьеров — хай-тек — во многом использует приемы минимализма:
Многие фотографы отдают предпочтение этому жанру фотографии, в особенности — ломографы. Использовать пустое пространство как основной атрибут для привлечения внимания — главный прием жанра:
И напоследок хотелось бы озвучить девиз дизайнеров-минималистов, который очень хорошо выражает суть минималистического направления в веб-дизайне — «Doing more with less»
.
Минималистичные образцы веб-дизайна выглядят хорошо. Применительно к веб-дизайну, главным преимуществом минимализма является многообразие допустимых стилистических, цветовых решений, вариантов масштаба, но цель всегда преследуется одна. Минимализм, как стиль дизайна веб-сайтов, приобрёл популярность, благодаря своим явным преимуществам. Минималистичные веб-сайты быстрее загружаются, отвлекают на себя меньше ресурсов сервера, и модернизировать их, как правило, легче, чем громоздкие графические построения. Посетители также видят в них признаки профессионализма и умения придерживаться сути.
Минимализм сделал упор на отказ в дизайне от всего лишнего, сохранив лишь главные элементы. Расцвет минимализма повлёк за собой появление новых терминов, узких специализаций, нашёл отражение в искусстве - в музыке и литературе. Однако, дизайнерам веб-сайтов освоение приёмов построения минималистичных ресурсов даётся непросто, многих такая задача пугает. Минималистичный образец веб-дизайна содержит исключительно необходимый для достижения намеченной цели контент, отличается обилием пробелов, небольшим количеством иллюстраций или наличием всего-то одного крупного изображения, краткостью текстов. Минималистичные веб-сайты не загромождены деталями, изучение и усвоение сведений даётся их читателям легко, не напрягает, на их страницах просто ориентироваться, мало кому удастся там заблудиться. Чаще всего минималистичные веб-сайты красиво смотрятся, и среди дизайнеров они снискали особо нежную привязанность.
Перед вами 15 образцов минималистичного веб-дизайна, хоть и содержащие ряд "архитектурных излишеств", но радующие своим видом взгляд. Надеемся, они придутся вам по душе.
С развитием интернет технологий и веб-дизайна, последние годы появилась некая тенденция(не везде и не у всех) к упрощению страницы. Упрощение как дизайна, так и кода. И это главная идея минимализма в веб-дизайне, «меньше это лучше».
Наиболее важная часть страницы — это контент, поэтому в минимализме исключается всё лишнее, чтобы выделить содержание. При этом содержание, в свою очередь, подчёркивает дизайн. Создание такого сайта на первый взгляд кажется проще, чем, например, цветного сайта с яркими заголовками, однако это не так. Здесь очень важно при минимальном содержании страницы сохранить удобство её использования.
И всё же, очень редко сайты в минималистическом стиле выглядят некрасиво или не стильно. Поэтому минимализм со своей лёгкостью и элегантностью чаще всего находит применение в каких-то корпоративных сайтах, а так же блогах, портфолио, социальных сетях.
Сегодня посмотрим примеры страниц по каждому из этих разделов (в конце статьи — обзор российских сайтов в стиле минимализм):
Блоги
Тут я решил схитрить, а заодно сделать Вам приятное — выложу наиболее интересные бесплатные WordPress темы в стиле минимализм, так что можете не только смотреть, но и качать.
Довольно стандартный дизайн, белый фон и мелкий шрифт.
Тут уже больше креатива — мы видим интересный логотип и игру с шрифтами.
Ulap
А вот здесь шрифт большой — и опять же ничего лишнего.
Doc
На этой теме много свободного пространства, есть и красный акцент.
Lead
Более «женственный» и мягкий дизайн, заголовки даже розовые.
Эта тема совмещает фото и текст, при этом сохраняя большое количество воздуха.
А вот тут используется более интересный фон.
Последняя из тем имеет чёрный фон и небольшие акценты. Они придают некий имидж странице, в тоже время основное внимание сосредоточено на контенте.
Портфолио
Как я уже писал, минимализм прекрасно подходит для презентации Ваших работ — от них попросту ничего не будет отвлекать!
Простенький такой дизайн, на странице особо выделены логотип, главная фотография и приветственная надпись.
Серый с красно-голубым сплешем дизайн, акцентами, опять же, выглядят фото и лого.
Создатели этой страницы выделили области своей деятельности.
Мягкий кремовый дизайн. Акцент снова на фото.
Почти отсутствуют картинки, зато выделяется красный логотип — самое яркое пятно страницы.
Здесь вообще всё очень-очень мелкое, воистину, ничего лишнего.
Гламурное сочетание чёрный-розовый, плюс большая фотография, задают характер сайту.
На этой странице компания сразу выставляет работу из портфолио, презентуя уровень своих работ.
Корпоративные сайты
Минимализм в дизайне своего корпоративного сайта выбирают компании, которые хотят подчеркнуть принцип работы: «Дело прежде всего».
Компания явно решила акцентировать взгляд на трёх пунктах меню.
Стильный рисунок внизу отображает профиль деятельности компании.
На этом сайте выделен слоган и услуги компании.
Ещё один пример сайта, где центром композиции является фото.
На этой странице из текста представлен только главное меню сайта компании.
Лого, цена и небольшой рассказ о товаре — больше на странице ничего нет.
D&AD
Apple
Классика жанра) Меню, пара слов о товаре и сам товар.
SOFA
Опять же, всё внимание сосредоточено на продукции компании.
Социальные сети
Классический пример, и законодатель мод – facebook.
Linkedin тоже выбирает минимум оформления, хотя на странице даже есть баннер.
Одна из новых социалок для дизайнеров, всё простенько и аккуратненько. Хотя, полагаю, профиль сети всё-таки обязал создателей немного её приукрасить.
Популярный сервис закладок старается не отвлекать пользователей от главной цели — добавить ссылку в закладки
У Google всегда всё выглядит просто.
Среди остальных трендов веб-дизайна минимализм занимает особое место. На просторах Рунета это течение не особо популярно, и часто используется не совсем правильно. И очень зря, ведь минималистский дизайн может выглядеть действительно потрясающе!
Люди устали от большого потока информации, ярких красок, картинок и прочего контента, которых захламляет все свободное пространство. Минимализм помогает избавиться от мишуры и сосредоточиться на главном.
Надеемся, эта статья внесет ясность в данный вопрос.
Корни минимализма в веб-дизайне
Многие из самых популярных сегодня направлений дизайна (в том числе плоская иллюстрация, большие фоновые изображения и скрытая навигация), прямо или косвенно относятся к минимализму, веб-дизайн движению, которое началось в начале 2000-х, но заимствует свою философию от более ранних движений в изобразительном искусстве. Минимализм при правильном применении может помочь вам направить дизайн на упрощение пользовательских задач.
К сожалению, некоторые дизайнеры неправильно применяют минимализм, сосредоточившись только на визуальной стороне вопроса. Они сокращают или скрывают важные элементы в погоне за минималистским дизайном для своего собственного блага, не думая об удобстве для пользователей. Они не понимают основную суть минимализма, и вместо того, чтобы сделать юзабилити проще, усложняют его.
Чтобы лучше понять и применять принципы минимализма, мы должны понять его истоки и основные характеристики. Мы исследуем эти темы в серии из двух статей. В этой, первой статье, мы определим минимализм и ознакомимся с его историей. Во второй статье мы проанализируем характеристики минималистского дизайна и их влияние на юзабилити.
Минималистский интерфейс – какой он?
При правильном применении, минималистский веб-дизайн должен максимально просто, прямым путем, показать содержание, ничего не усложняя и не отвлекая пользователя от основной цели. Эта стратегия часто включает в себя удаление контента или функции, которые не поддерживают основные задачи интерфейса.
О том, что именно квалифицируется как минималистский веб-дизайн, ведется много споров. Но есть несколько общих черт, которые выделяет большинство дизайнеров. Они включают в себя плоские текстуры, ограниченные цветовые палитры и использование отрицательного пространства. Эти и другие специфические характеристики подробно рассмотрены в следующей статье этой серии.
Сайт-портфолио дизайнера Брайана Данахера является типичным примером того, что многие дизайнеры называют минималистским сайтом. При просмотре в полноэкранном режиме на 15-дюймовом MacBook Pro, домашняя страница почти полностью представляет собой белое пространство. Сайт оформлен в оттенках серого цвета палитры, смелые акценты поставлены с помощью интерактивных элементов.
Этот сайт включает очень мало элементов, которые отвлекают от основного контента. Минимализм хорошо подходит для портфолио-сайтов, которые имеют довольно простые цели, относительно низкие объемы содержания, и очень похожую информацию на большинстве страниц. Применять минимализм эффективно для более сложных сайтов может быть непросто.
Путь минимализма к популярности
1960-е годы
Прежде чем минимализм стал тенденцией в веб-дизайне, это было движение в изобразительном искусстве во время после Второй мировой войны. Оно возникло как реакция на хаотические цвета, движения, и часто встречается в абстрактных работах экспрессионистов (таких, как картины Джексона Поллока).
В 1960, минимализм стал популярным в различных областях, в частности, изобразительном искусства и архитектуре. В изобразительном искусстве минимализм характеризуется монохроматическими палитрами, геометрическими элементами, последовательностью и простотой промышленных материалов.
Минималисты, которых стоит отметить - это графический дизайнер Йозеф Мюллер-Брокман, художник Эллсворт Келли, и промышленный дизайнер Дитер Рамс. Обратите внимание на чистые линии, простоту и экономное использование цвета в каждом из приведенных ниже примеров. Несмотря на широкое разнообразие сфер использования, определенный стиль дизайна весьма ощутим.
Девизом минимализма в это время стало: «Меньше значит больше». Этот девиз позже станет неофициальной мантрой минимализма в веб-дизайне.
1980-2000
В конце двадцатого века минимализм начал складываться как отдельное направление в области взаимодействия человека с компьютером.
Деятели этого времени выступали за краткость и устранение ненужной информации из интерфейсов.
2000-е годы
Начиная с середины 2000-х годов, отголоски минимализма как художественного движения стали появляться в веб-интерфейсах: большее негативного пространства, меньше содержания и ограниченные цветовые палитры. Google часто называют пионером минимализма веб-интерфейсов. Google ставит в приоритете простоту и строгость в своем интерфейсе с момента его бета-запуска в 1990-х годах.
За 15 лет мало что изменилось. Пользователи могут видеть только три варианта навигации: чтобы получить доступ к остальным функциям Google, нужно открыть меню.
Медленно, но верно, минимализм нашел точку опоры. Его начали использовать веб-дизайнеры, дизайнеры, художники, фотографы, архитекторы и разработчики.
2010-2013
Появление понятия адаптивного веб-дизайна (RWD) в 2010 году позволило по-новому оценить минималистский подход. Для эффективного использования методов RWD, организации должны были поставить приоритет на контент. На мобильных носителях сторонние элементы могли стать настоящей проблемой – их нельзя было проигнорировать так же, как на настольных компьютерах.
Постепенно пользовательские и дизайнерские предпочтения стали склоняться в сторону простоты веб-интерфейсов. Этот сдвиг был подчеркнут крупными модернизациями, проведенными двумя гигантами индустрии технологий: современный дизайн Microsoft в 2011 году, и выпуск Apple iOS7 в 2013 году.
Релиз Windows 8 в 2011 году – это первый крупный редизайн операционной системы за последние десятилетия. Новая философия дизайна была целиком реализована в духе минимализма.
В 2013 году компания Apple представила радикально обновленную операционную систему в более плоском и более минималистском стиле - iOS7. Решение компании Apple двигаться к более минимальной и плоской конструкции особенно подчеркивает популярность тренда, учитывая, что это в корне противоречит историческому стилю дизайна бренда.
2014-2015
Минималистские принципы разработки в настоящее время появляются в новых и неожиданных местах: на сайтах электронной коммерции, интернет-изданиях, и даже образовательных сайтах.
Многие площадки, которые предлагают широкий спектр услуг, также останавливают свой выбор на минимализме. Это позволяет дать клиентам именно то, что нужно, не отвлекая их на другие мелочи.
Сегодня минимализм пересекается с другими направлениями веб-дизайна, такими как плоский дизайн, отзывчивый веб-дизайн, чистый дизайн. Вклад Минимализма в эти тенденции будет обсуждаться подробно в статье на следующей неделе.
Споры касательно юзабилити: хорош ли минимализм для пользователей?
Минимализм – это стратегия, которая существенно влияет на содержание и информационно-архитектурные решения. В результате, минимализм имеет определенное влияние на юзабилити интерфейсов. Неудивительно, что удобство и простота использования сайтов в минималистском стиле стала предметом обсуждения среди веб-профессионалов.
Сторонники утверждают, что минимализм снижает информационную перегрузку: чем больше функций и содержания вы можете убрать, тем лучше. Минимализм, примененный с умом, позволяет создать положительный эмоциональный опыт для пользователей. Люди, как правило, лучше реагируют на эстетически приятные интерфейсы.
Но когда дизайнеры придерживаются слишком жестко идеологии минимализма, они рискуют достичь расточительно низкой плотности информации. Все нужное будет попросту сложно найти, а навигацию – невозможно понять. Минимализм в умеренных количествах может быть эффективным, ровно до тех пор, пока вы не потеряете из виду основную цель - помочь пользователям выполнять задачи.
Несколько советов по созданию минималистского интерфейса
Убедитесь, что стратегия минималистского дизайна подходит для вашего сайта, вашего бренда. Если вы уверены, что минималистский дизайн является правильным для Вас, следуйте нескольким советам:
*Используйте девиз: «Меньше значит больше», в своих проектах. Не добавляйте лишние элементы просто так. Это правило может быть верно как для содержания, так и для дизайна, а также удобства пользователей.
*Рассмотрите возможность уменьшения каких-либо элементов, которые не несут важную информацию.
*Учитесь минимализму у Кэрролла: не просто вырезайте элементы - думайте о потребностях ваших пользователей, старайтесь реализовать задачи, так кратко и просто, как это возможно.
*Знайте, что в одиночку минималистский визуальный дизайн, без значимого рассмотрения пользовательских задач, не приведет к успеху. Вопросы юзабилити Windows 8 могут послужить вам примером.
Углубленное обсуждение характеристик минимализма будет рассмотрено в следующей статье, через неделю. Следите за новостями!