Как сделать красивый и практичный дизайн

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

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

Градиенты, тени, отражения – о, мой бог!

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

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

Mint.com

На сайте Mint.com есть все, что клиент может пожелать от дизайна стандарта «Веб 2.0». Значит ли это, что он красив?

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

Dribbble-синдром

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

Dribbble

На Dribbble показаны вырванные из контекста образцы дизайна. Хорошо это или плохо?

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

Сравнение с отсутствием стиля

Как измерить красоту? Если сайт неудобен в использовании, то не имеем ли мы дело с бесцельной красивостью? Посмотрите на сравнение, приведенное ниже.

Nettuts+

Логотип и панель навигации сайта Nettuts+.

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

facebook

Сайт социальной сети Facebook.

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

Если приятный вид сайта действительно настолько важен, то текущий дизайн Facebook должен выигрывать по сравнению с его упрощенной версией. Однако, как знать, возможно, упрощенная версия сайта еще даст фору украшенной?

Что делает дизайн удобным для пользования?

Я не собираюсь ратовать за всеобщее возвращение к синим ссылкам на белом фоне. В сущности, как я объясню далее, и Nettuts+, и Facebook можно с успехом охарактеризовать как действительно красивые веб-сайты. Эти примеры были приведены лишь для пояснения, и я вовсе не имею целью критиковать дизайнеров, создавших их.

Скорее, я призываю дизайнеров помнить о двух вещах при добавлении «красивостей» и усовершенствований в свои работы, а именно:

  1. интерактивные и интуитивные элементы страницы
  2. следование бренду и постоянство стиля

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

Интерактивные и интуитивные элементы страницы делают дизайн функциональным.

Если конкретный элемент дизайна делает сайт более дружелюбным, или если он содержит ненавязчивые подсказки для пользователя, это улучшает юзабилити. Ниже приведен пример с ресурса Design Informer:

Design Informer

На сайте Design Informer поле поиска подсвечивается при наведении курсора мыши. Эта ненавязчивая особенность очень элегантно выглядит в браузерах WebKit, поскольку в CSS3 предусмотрена анимированная подсветка. Фон поля поиска, заданный по умолчанию, мог бы быть чуть поярче, чтобы улучшить общее удобство сайта, но в данном конкретном случае ценно не столько исполнение, сколько сама идея.

Этот очень простой эффект подсказывает пользователю, что он имеет дело с активным элементом, и делает поле поиска более привлекательным. Так, до смешного простой прием дает очень мощный эффект.

Однако сама возможность использования эффектов анимации не означает, что их следует использовать. Если, как в случае с Design Informer, примененный эффект делает пользовательский интерфейс более интуитивным и легким в восприятии, то он вполне оправдан. Эту мысль очень хорошо сформулировал Стюарт Терсби (Stuart Thursby):

Если дизайнеры полагают, что использование HTML5 и CSS3 уже само по себе добавляет им дизайнерских навыков, то они сильно заблуждаются.

Добавляйте элемент, только если он придаст дополнительное удобство дизайну. Если дизайн не сделан более удобным с помощью специальных техник (CSS3, JavaScript или что-то еще), то дизайнер должен пересмотреть вопрос, стоит ли добавлять дополнительный код. “Украшение” дизайна может зайти так далеко, что даст обратный эффект, поэтому прежде чем добавлять какие-либо элементы, убедитесь, что они принесет пользу, а не вред.

Еще один пример  эффекта, который повышает удобство дизайна можно найти на новом сайте Soh Танаки. Посмотрите на скриншот:

Soh Tanaka

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

Опять же, простой эффект, который представляет собой не просто украшение, а служит определенной цели. В учебных материалах примеры HTML-кода часто слишком длины и не помещаются в заданный текстовый блок, так что приходится либо разрывать код, либо использовать некрасивые полосы прокрутки. Решение Tanaka позволяет сделать примеры кода более привлекательными и читаемыми и снижает вероятность разрыва кода или возникновения полосы прокрутки.

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

Следование бренду ведет к повышению удобства дизайна

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

Ниже приведен пример скриншота сайта 10k Apart:

10k-screen

Лавровый венок на фоне и отчетливая иллюстрация позволяют немедленно идентифицировать этот сайт, как принадлежащий к бренду A List Apart. Следование бренду улучшает юзабилити этого микросайта из серии ALA и делает его привлекательным и хорошо знакомым.

А здесь у нас красивый и интуитивный дизайн сайта Launchlist:

Launchlist

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

Удобство не должно быть в ущерб красоте

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

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

Новости энергетики