Минимализм — это концепция в дизайне, по которой интерфейсы строятся только на самых важных элементах. Такие веб-сайты обычно получаются простыми и интуитивно понятными для пользователя. Минимализм был адаптирован во множестве вариаций и сегодня оказывает сильное влияние на веб.

Я хотел бы поделиться несколькими советами о том, как проектировать минималистские пользовательские интерфейсы. У многих пользователей перегруженный веб-дизайн вызывает негодование. Если вы будете вываливать на них море информации, они убегут от вас! Но если вы найдете правильный баланс, вы получите прекрасные пользовательские интерфейсы, которые легко создавать и еще проще использовать.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Я обожаю этот бизнес. Только digital, при всей своей динамике, может похвастаться тем, что следующие 30 минут такой человек как я, будет вычитывать и комментировать статью двадцатилетнего парня с северо-востока США. Представить нечто подобное с юристом или дантистом я не смогу при всем желании.

Итак, человек сел, разобрался, подумал и написал статью. Читаем.

План всего необходимого

При создании макета страницы заранее продумайте каждый элемент. Убедитесь, что на вашем веб-сайте каждый кусочек пространства используется для важных деталей. В чистом интерфейсе легко находится незаполненное белое пространство, если оно необходимо для создания приятного впечатления у пользователя.

Я предлагаю вам сначала сделать набросок всех компонентов, которые должен содержать ваш сайт. Спросите себя, действительно ли каждый блок важен для всего дизайна. Нужна ли вам боковая панель на главной странице? Правда ли она содержит важные ссылки, которые пригодятся каждому посетителю? На эти вопросы нет правильных и неправильных ответов, потому что все проекты отличаются друг от друга.

Но у вас должно быть тонкое внутреннее чутье, что правильно, а что нет. Если вы умеете определять, какие элементы являются действительно необходимыми, это значительно облегчит вашу работу. Каждый маленький блок страницы должен встраиваться в общую картину, как кусочек пазла.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Усложняю совет: делайте прототипы, это классическая схема создания интерфейса (в начале думаем, потом - рисуем). Подсказываю: есть специальные программы, которые позволяют делать это легко и быстро. Пример: http://builds.balsamiq.com/b/mockups-web-demo/ и http://www.axure.com ... Может переводчик просто упустил слово "прототип"?

Используйте основные цвета

Это несложное и не жесткое правило, которому нужно обязательно следовать, но это действительно помогает на начальных стадиях разработки дизайна. Если вы присмотритесь к нескольким «чистым» макетам сайтов, вы заметите, что многие из них придерживаются определенной цветовой схемы. Обычно используются сочетания черного, белого и серого и одного-двух основных цветов.

Если начать разработку дизайна или даже прототипа в простой цветовой схеме, это позволит вам сфокусироваться на контенте. Потом у вас всегда будет возможность изменить цвета и добавить новые стили. Но если вы изначально сделаете ставку на чистый интерфейс, результат вас не разочарует.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Неправильное применение контрацептива – приводит к беременности. Больше добавить нечего. Читаем дальше...

Сделайте навигацию простой

Простота — еще одно слово, которое я люблю использовать, говоря о чистом дизайне. Пользователи должны чувствовать, что ваш сайт простой, что он словно бы сделан для детей и «не-технарей». Все текстовые страницы должны быть достаточно большими и легко читаться даже с большого расстояния.

Даже навигационные ссылки должны быть четкими и понятными, чтобы бросаться в глаза при беглом просмотре страницы. Я склоняюсь к использованию дополнительных модулей, например, вкладок, панелей инструментов, выпадающих списков и других прикольных дизайнерских приемов. Они могут стать ключевым элементом на вашей странице и прекрасно работать в паре с навигационной схемой.

В качестве альтернативы вы можете применить минималистские приемы к самой навигации сайта. Ссылки, сгруппированные вверху или внизу страницы, обычно привлекают взгляд, блуждающий по монитору. Пользователи уже привыкли, что панели навигации находятся именно здесь. Применение дополнительных цветов или текстур необходимо скорее для того, чтобы угодить пользователю с эстетической точки зрения.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Мне кажется, взгляду, «блуждающему по монитору», с расстояния в несколько метров уже ничего не поможет. Вот оно! Вот отличие наших дизайнеров и американцев!.. Они бьются до последнего, они сражаются до конца, даже если пользователь ушел в другую комнату или за монитором его собака. Даже дельфин пользователя может расчитывать на соблюдение его эстетического эго. Либерализм в действии. Нашим этого так не хватает.

Удалите ненужные блоки

В какой-то момент вы можете обнаружить себя за попыткой найти повторяющиеся блоки. В некоторых случаях дублирование полезно — например, навигация, которая повторяется на боковой панели и в футере. Пользователям обычно лень прокручивать всю страницу вверх только для того, чтобы вернуться к какой-либо ссылке.

Но скорее всего места на странице у вас мало, и весь контент не влезает. Почти все, что вы выводите на экран, должно быть уникально и зачастую должно содержит ссылки на другие страницы сайта (посты в блоге, пресс-релизы, видео). Отфильтруйте повторяющиеся идеи и замените их новыми, более полезными. Благодаря этому ваши посетители получат гораздо больше от работы с сайтом.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Я читаю это и жду, когда кто-то уже сделает кнопку «закрытия окна браузера» не только в ушлу сверху, но и снизу... это же так удобно – не нужно будет поднимать глаза наверх и это идеально позволит сразу перемещать взгляд за пределы монитора - на бургер и картошку фри.

Соотнесите элементы страницы

С помощью нового CSS-3 так легко создавать множество сложных эффектов, которые мы все так любим. Тени и закругленные уголки — мои самые любимые, но есть много других. Когда вы разрабатываете встроенные HTML-элементы, такие как формы и кнопки, оставайтесь последовательными.

Мне нравятся более чистые интерфейсы, которые не затрагивают стили по умолчанию. Это вовсе не значит, что мне не нравятся нестандартные макеты страниц. Однако я считаю, что между Windows/OSX/Linux есть большая разница в браузерах и движках отрисовки (рендеринга). Если у вас нет возможности протестировать ваш сайт на всех этих операционных системах, используйте самые простые стили.

У веб-разработчиков есть огромный выбор возможных решений по настройке этих элементов. Отличный пример — это поля форм, так как очень сложно обеспечить одинаковое оформление для области ввода текста, выпадающих списков, слайдеров, радио-кнопок и самого текста. Прочтите нашу статью об упрощенных свойствах CSS и о том, как внедрить их в ваш дизайн.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Не буду читать статью про упрощенные свойства. Я, по правде говоря, побаиваюсь полей форм и радио-кнопок. Да и о чем со мной разговаривать, если я не могу проверить сайт во всех браузерах. Возможно, я потерян для дизайна окончательно.

Заключение

Надеюсь, эти советы помогут вам начать мыслить минималистически. Разработка чистого пользовательского интерфейса требует гораздо больше работы, чем кажется. Вы должны поставить себя на место пользователей и посмотреть на сайт их глазами. Это может занять месяцы тренировок, но рост креативности при этом огромен. Если у вас есть похожие идеи относительно простого минималистского дизайна сайтов, поделитесь с нами своими мыслями в комментариях к этой статье.

Александр Ковальский
Руководитель и креативный директор CreativePeople

Надеюсь мои комментарии были также убедительны и полезны. Комментарий к данному посту написан в стиле авторского сарказма и не несет ничего важного.

Об авторе

Джейк Рошело (Jake Rocheleau)— энтузиаст социальных медиа и интернет-предприниматель. Вы можете подписаться на него в твиттере — @jakerocheleau. Еще у него есть сайт: JakeRocheleau.com.

Оригинал: http://webdesignledger.com/tips/design-tips-for-a-cleaner-user-interface

Дмитрий Калинников
Руководитель отдела аналитики и проектирования в ADV/web-engineering co.

Изложенные в статье советы довольно просты и очевидны. Однако многие разработчики интерфейсов часто пренебрегают ими, иногда непредумышленно. Самое плохое, что может случиться с интерфейсом — это когда информация вторична по отношению к внешнему виду. Декор ради декора нивелирует функциональные и потребительские свойства продукта и превращает информационный объект в хрупкое и неудобное в обращении «нечто». При проектировании любой вещи или интерфейса необходимо помнить, что основной результат процесса под названием «дизайн» находится не в декоративной, а в инженерной области. Однако претворяя в жизнь изложенные в статье советы, всегда следует держать в уме универсальную максиму: «правила придуманы для того, чтобы их нарушать».

Назир Хасавов
Арт-директор в DEFA

Полезная статья о нужных вещах. Повторение, как говорится, мать учения. И в этом смысле, статья несет практическую пользу всем, кто занимается разработкой сайтов, независимо от занимаемой должности. Мне кажется, чем чаще будет говориться о том, как важны: навигация, содержание, чистота, доступность информации, лёгкость, простота и т.д., тем будет только в пользу.

Есть только пара претензий — в самом начале, автор говорит про минимализм, как концепцию. С этим сложно согласиться. Минимализм, скорее, не концепция, а целое направление в дизайне со своими правилами и принципами, где больше отдается предпочтение форме, нежели содержанию. И, все-таки, мыслить минималистически, не совсем верное заключение, которое хочется сделать, правильнее говорить о том, чтобы научиться мыслить рационально. Сайты бывают разные, где-то «минимализм» может быть уместной формой, а где-то ее может оказаться недостаточно для выражения идеи или бренда. В любом случае, верное следование определенным правилам и принципам, может очень круто дисциплинировать специалиста и привести к лучшим результатам.

Артем Лебсак
Владелец в Joomru LLC

Минимализм — это дзен. Информационный (много текста) или презентационный (много яркой графики) дизайн — принципиально разный подход, определяемый принципиально разными задачами. А вот «опрятный пользовательский интерфейс» — вообще отдельный пункт в создании любого дизайна. Содержание статьи не соответствует названию.

Опрятный пользовательский интерфейс, это привычный пользователям интерфейс. Опрятный пользовательский интерфейс состоит из ограниченного числа осознанных элементов, повторяющихся от страницы к странице, призванных задать рамки и сопроводить посетителя сайта куда следует. Опрятный пользовательский интерфейс не оттягивает на себя внимание от основного наполнения сайта. Он сдержан, надёжен, но не притязателен. А ещё, опрятный пользовательский интерфейс — предсказуем и нагляден. Он реагирует, взаимодействует и выделяет.

При создании пользовательского интерфейса главное помнить — «всё гениальное — просто». При создании своего первого интерфейса не стесняйтесь посмотреть в сторону успешных проектов-долгожителей коммерческого толка — эффективный интерфейс у них, это их прибыль. Значит, он сделан именно так, а не иначе на основании множества учтенных факторов. Или читайте много статей. Или возьмите за основу готовый фреймворк, хоть тот же Bootstrap http://twitter.github.com/bootstrap/ (по-русски: http://bootstrap.veliovgroup.com/base_css.php)

Всё гениальное — просто. © Альберт Эйнштейн