От автора: очень часто простейший дизайн – состоящий из пары элементов – может резко повысить ваше благосостояние. Конечно, мы говорим о минимализме. Неважно делаете ли вы дизайн крошечных мобильных приложений или для гигантских ретина дисплеев, есть пара эффективных советов и хитростей, правил и норм, которые помогут вам получить по максимуму из каждого бита вашего дизайна
Любой образованный глупец может делать вещи больше, сложнее и использовать их еще более жестоко. Однако нужно быть действительно одаренным и иметь много мужества, чтобы двигаться в противоположном направлении.
Эта цитата принадлежит Эрнсту Шумахеру, мыслителю, влияющему на умы, экономисту и автору труда «Малое – прекрасно: экономика, в которой люди имеют значение». В рейтинге The Times эта книга входит в 100 самых влиятельных книг, выпущенных после Второй Мировой Войны.
Эрнст Шумахер в основном говорил о финансовых системах, однако эта цитата получила широкий резонанс среди большого круга дизайнеров и дизайнеров интерфейсов в частности. Очень часто простейший дизайн – состоящий из пары элементов – может резко повысить ваше благосостояние. Конечно, мы говорим о минимализме.
В то время как проверенный временем афоризм гласит «меньше значит больше», и неважно делаете ли вы дизайн крошечных мобильных приложений или для гигантских ретина дисплеев, есть пара эффективных советов и хитростей, правил и норм, которые помогут вам получить по максимуму из каждого бита вашего дизайна.
Использование Wireframe’ов
На самом деле не существует жестких правил в упрощении контента и приведении его к минималистичному виду, однако один из самых эффективных шагов, которые вы можете предпринять для достижения этой цели, на самом деле происходит еще до того, как вы начинаете сбрасывать лишние элементы с дизайна. Этот шаг называется wireframe.
Намного проще работать с простеньким макетом, нежели идти от обратного и упрощать, уменьшать сложный макет. Самое поразительное в том, что усложнять макет можно в любое время, в любом месте с любого устройства, если вы, конечно, не пишите код на стене. В таком случае я беру свои слова назад.
Вы, скорее всего, знаете о больших преимуществах прототипирования, но вы должны понять, что ваш эскиз требует большего внимания к деталям при создании минималистичного дизайна. Так как вы собираетесь реализовывать дизайн в специфическом стиле, важно понимать функции каждого по отдельности и всех элементов вместе. На данном этапе одно из важнейших мест в голове должен занимать макет. Уникальные, нетрадиционные установки могут крайне положительно сыграть в вашем дизайне, когда вы начнете убирать из него элементы.
Для сети
Переходите на модульную структуру, колонки и иерархию макетов, это сделает ваш окончательный макет более линейным. Помните, что самописные сетки и боксы хорошо вписываются в минималистичный дизайн, хоть и достаточно эффективны, могут выглядеть плоско и скучно.
Для мобильных устройств
Для того чтобы лучше планировать используйте онлайн wireframe инструментарий. Такие инструменты позволяют избегать коллизий с макетами в том случае, если вы планируете интерфейсы под каждое конкретное мобильное устройство, а не работаете с «бумаги на цифру» только для того, чтобы выяснить, что ваш минималистичный дизайн далеко не таков.
Ни для сети, ни для мобильных устройств
Никогда не приступайте к этапу создание wireframe’а без конкретного списка того контента, который будет в финальном дизайне. А также не забывайте экспериментировать с несколькими макетами.
Улучшайте и Упрощайте (или упрощайте пока не сломается)
Есть такое выражение «сломал — покупай», но если ваш сайт на грани того, чтобы упасть, значит, вы сделали самый минималистичный дизайн, какой только возможен. Это как удариться в панк-рок и крушить все подряд.
При проектировании важно учесть, что каждая деталь должна служить своей собственной цели. Если вы не можете найти стоящую причину, чтобы оставить элемент на своем месте, удалите его. В минималистичном дизайне считается нормной начать с большого макета и постепенно прийти к маленькому. По факту так намного проще, чем начинать вообще с нуля.
Думайте о стадии очистки дизайна, как о весенней очистке гардероба от старых вещей. Взгляните на все в целом, а затем начните выбрасывать эти вещи в окно, они вам определенно не нужны, и ваш дизайн положительно отреагирует на такой шаг. По сути ключевая мысль это оставить столько, сколько вам нужно. Если вы не уверены, что сайт «достаточно сломан», просто проведите пару тестов на функциональность.
Для сети
Создавайте цели в вашем дизайне. Помните, что минималистичный дизайн предназначен не для примитивизации вашего контента, а для уменьшения количества ненужного контента так, чтобы пользователи быстрее обращали внимание на важные участки, не отвлекаясь на мелочей.
Для мобильных устройств
Из-за природы мобильных устройств и маленьких экранов вы хотите быть уверенными в том, что расстояние между элементами не выглядит, как будто вы просто удалили какой-то элемент оттуда и забыли что-то другое туда вставить. Вы упрощаете не для того, чтобы показывать пустое место, а для того, чтобы очистить просмотр от ненужных деталей.
Ни для сети, ни для мобильных устройств
Не доводите страсть к удалению элементов до того, что у вас на сайте уже не осталось притягивающих взгляд элементов. При упрощении всегда должен оставаться элемент «посмотри на меня». В таком случае вы будете проектировать дизайн ВОКРУГ элемента-фокуса, а не пытаться его создать.
Опциональные ограничения
В наше время мы настолько привыкли к множеству опций «на кончиках пальцев», что это может прозвучать странно, если я скажу «если не получается что-то сделать, ограничьте доступ к этому». Прибегать к такому подходу при создании минималистичного дизайна так же умно, как использовать wireframe на стадии планирования.
С пониженными ограничениями вы не только убережете пользователей от переизбытка опций, а также спасете свой макет от перегрузки, но и задержите внимание посетителей на вашем сайте, что приведет к увеличению конверсии. Как вы видите, за минималистическим дизайном стоит целая наука, в то время как вокруг минимализма до сих пор плавает много глупых понятий для «ленивых дизайнеров».
Обратите внимание, когда я говорю про опциональные ограничения, я имею в виду в основном меню навигации и другие похожие кнопки, которые часто можно встретить на лендинг страницах.
Для сети
Старайтесь ограничиться 3-4-мя пунктами меню. Такой подход не собьет пользователя и облегчит работу с макетом на будущее.
Для мобильных устройств
Уменьшение опций на мобильных устройствах совсем не означает спрятать пункты меню под иконкой «гамбургера». Поэтому при уменьшении функционала на мобильных устройствах обязательно прибегайте к другим методам, которые не просто прячут пункты меню. Помните «Нельзя запомнить то, чего не видно».
Ни для сети, ни для мобильных устройств
Уменьшение количества опций важная задача, но никогда не убирайте те опции, которые влияют на функционал. Убедитесь, что после удаления лишних опций, у вас все достаточно прозрачно. Не заставляйте ваших пользователей додумывать за вас.
Элементы Умного Дизайна
Во время работы с минималистичным дизайном элементы дизайна могут выступать как вашими врагами, так и друзьями, если использовать их по назначению. Один из таких элементов это пустое пространство. Без него крайне сложно добиться минималистичного вида. Тут wireframe играет решающую роль. Такая передышка для контента подсказывает глазу, куда смотреть дальше.
Использование flat-дизайна, несмотря на то, что он выдохся, может показаться хорошей идеей. Flat-дизайн сам по себе является минималистичным. В таком дизайне убрано все лишнее, и если дизайн спроектирован хорошо, он выглядит просто и стильно. Большие шрифты в сочетании с плоской графикой могут вдохнуть жизнь в ваш примитивный макет. Чтобы создать привлекательный глазу дизайн необходимо хорошо подобрать размер вашего шрифта и расположить надписи в правильных местах.
В умном дизайне контраст, баланс и выравнивание также играют большую роль при создании минималистичного дизайна. Чтобы еще больше сбалансировать элементы, можно потратить еще пару минут на wireframe и создать что-то такое же эффективное, как пустое пространство.
Для сети
При работе с контентом в минималистичном дизайне используйте множество размеров крупного шрифта. Такой подход поможет сбалансировать любую другую графику.
Для мобильных устройств
Используйте большой размер шрифта, чтобы привлечь внимание к важным аспектам, однако не переусердствуйте с ним на мобильных устройствах с маленьким экраном. Большой шрифт не всегда хорошо смотрится.
Ни для сети, ни для мобильных устройств
Забыв про баланс в вашем дизайне, вы рискуете столкнуться с тем, что ваш сайт будет выглядеть незаконченным. Лишний раз уделенное внимание балансу дизайна в будущем поможет поддерживать прозрачность и визуальную иерархию на сайте.
Шаблоны и цвета
Вместе с ограничением количества опций на вашем сайте, вам необходимо продумать ограниченное количество цветов. Это не означает, что вы должны придерживаться нейтральной цветовой палитры. Однако, придерживаясь трех основных цветов, вы поможете подчеркнуть детали вашего дизайна, которые могли бы быть «прямо здесь».
Помочь компенсировать минимальную цветовую палитру может использование шаблонов. Акцент на фоне, состоящем из повторяющихся узоров, может не только улучшить цвета, но также узоры и текстуры помогут разбить контент.
Небольшие скопления узоров и цветов могут выделить важные составляющие контента. И просто это более привлекательно, чем белый фон и цветной шрифт на нем.
Для сети
Используйте только бесшовные виды шаблонов в дизайне. Прерывистые шаблоны отвлекают, это можно легко заметить на больших экранах.
Для мобильных устройств
Приглушенные цветовые палитры, как правило, более эффективны на мобильных устройствах. Подумайте, может стоит выбрать более спокойные цвета.
Ни для сети, ни для мобильных устройств
Легко переборщить с цветом, шаблонами и текстурами, особенно, если вы думаете, что в вашем дизайне чего-то не хватает. Не делайте так. Оставьте все как есть, если вы не пытаетесь отвлечь пользователя, конечно.
Заключение
Похоже, тенденция к минимализму задержится надолго. К счастью, если следовать простым советам и хитростям, описанным выше, минимализм может стать вам хорошим другом, а не нежелательным соседом. А вы фанат минималистичного дизайна в сети и на мобильных устройствах? Если да, есть ли какие-нибудь другие хитрости, о которых дизайнеры еще не знают?
Автор: Gabrielle Gosha
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
