Дизайн в стиле Web 2.0

В этом уроке я опишу некоторые элементы, распространенные в современном web дизайне, постараюсь объяснить, почему они работают, и как когда и где вы можете использовать эти элементы в ваших работах. Это продолжение моей статьи Современный стиль в веб дизайне, с более глубоким анализом особенностей дизайна в стиле Web 2.0.

Обзор особенностей Web 2.0

Ниже представлен список основных черт дизайна в стиле Web 2.0.

Конечно, не обязательно использовать все элементы, чтобы сайт работал хорошо, верно и обратное, из того, что сайт имеет все черты присущие сайтам Web 2.0 не следует, что это хороший сайт.

Я уже обращал внимание на некоторые элементы дизайна в моей статье Современный стиль в веб дизайне.

1. Простота
2. Центральное выравнивание
3. Небольшое количество колонок
4. Отдельная шапка
5. Выделение областей цветом
6. Простая навигация
7. Четкие логотипы
8. Крупный текст
9. Крупный вводный текст
10. Яркие цвета
11. 3D Эффекты
12. Градиенты
13. Отражения
14. Оригинальные иконки
15. Вспышки звездочки

Отписка

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

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

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

В этой статье я использую термин «дизайн в стиле Web 2.0» чтобы обозначить характерный для современной школы веб дизайна стиль, описание, которого я начал в статье Современный стиль в веб дизайне.

Многие используют термин «Web 2.0» в иных значениях:

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

Введение

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

Если мне нужно будет описать дизайн в стиле Web 2.0 одним словом, то это будет слово «Простота», так что с нее и начнем.

Я верю, в простоту и думаю, что это передовое направление в веб дизайне.

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

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

Простота

Используйте ровно столько элементов, сколько вам необходимо, чтобы достичь вашей цели.

Дизайн в стиле 2.0 чистый и простой, это не обязательно означает минимализм, в чем вы убедитесь позже.

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

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

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

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

Почему простота это хорошо

• У веб сайтов есть цели, и каждая страница имеет предназначение.
• Внимание пользователя не бесконечно.
• Работа дизайнеров в том, чтобы помогать пользователям, найти то, что им нужно (или обратить внимание на то, что сайт хочет до них донести).
• Элементы дизайна притягивают взгляд. Чем больше лишнего, тем меньше вероятность, что пользователь обратит внимание на наиболее важный материал.
• Для того чтобы установить с пользователем устойчивую связь нам нужно минимизировать шум, это значит, что нам необходимо найти наиболее простое решение.

Когда и как делать дизайн проще

Когда?

Всегда

Как?

Есть два важных аспекта в достижении успеха с простотой:

1. Удалить необязательные компоненты, не влияющие на эффективность.
2. Попробовать изменить решение так чтобы достичь цели более простым путем.

Возьмите себе за правило, удалять все необязательные компоненты, в своих проектах.

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

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

Вот вам и пример дизайна, который страдает от излишнего усложнения.

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

Edward Tufte использует термин «data ink» (деталь, которая несет в себе информацию) и "non-data ink«(деталь, которая просто деталь) чтобы описать этот феномен.

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

Рассмотрим Yaxay более детально, на сайте используется множество элементов, которые я называю «Нагруженность», то есть множество граней, смен тональностей, градиентов, контрастов, фигур и линий… большое количество декоративного материала, но в этих деталях, только два полезных элемента:

1. Логотип сайта
2. Надпись на навигационной кнопке («art gallery»)

Все остальные элементы на странице это просто шум, — декоративные элементы, которые не создают связи с пользователем.

Я не против насыщенности, сложности или красоты в веб дизайне.

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

Конечно, часто нужно передать пользователю не только информацию «hard data» но и впечатления «soft information».

Информация — это факты, такие как новости, цены на акции, расписание поездов, или количество денег на вашем банковском счете.

Впечатления — качественны аспекты связи, такие как первое впечатление о компании, ощущение доступности услуг, чувство, что продукт вам подходит.

Независимо от того какую информацию должен передать элемент, используйте его сознательно и осторожно.

Посмотрите на этот пример:

Сайт Alex Dukal насыщенный интересный и привлекательный, использован ряд визуальных техник, чтобы привлечь ваше внимание, заинтересовать и создать хорошее впечатление о качестве работ Алекса, но в то же время он простой, потому что элементы подобраны внимательно и со вкусом.

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

Центральное выравнивание

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

Почему центральное выравнивание?

Стиль «2.0» простой, смелый и четкий. Сайты, которые размещаются по центру окна браузера, создают именно такое впечатление.

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

Когда и как использовать центральное выравнивание

Я же сказал, используйте центральное выравнивание всегда, если, конечно, у вас нет очень веской причины поступить иначе.

Небольшое количество колонок

Несколько лет назад трехколоночные сайты были нормой, не редкость были и сайты использующие четыре колонки. Сегодня наиболее распространены сайты использующие 2 колонки, а три колонки стали практически максимумом.

Почему чем меньше колонок, тем лучше

Чем меньше колонок, тем проще дизайн, мы передаем меньше информации, но более надежным способом.

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

Как определить необходимое количество колонок

Я настоятельно рекомендую не использовать больше 3 колонок, потому что следует использовать не больше колонок, чем действительно нужно.

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

Пример неправильного использования нескольких колонок

Отдельная шапка

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

Обратите внимание, как четко выделяются шапки на этих 6 примерах.

Почему отдельная шапка это хорошо

Верхняя часть страницы как бы говорит «Это верхняя часть страницы», это и так очевидно, но всегда приятно точно знать, где начинается страница.

В двух примерах шапка содержит только брендинг (Protolize, Mediconmedia), в одном в шапку включена навигация Cross Connector, и в трех остальных и то и другое.

Слабость решения Cross Connector, с моей точки зрения в том, что логотип идет после навигации. Я предпочитаю, чтобы навигация находилась высоко и была четкой (как на Simple Bits).

Когда и как использовать отдельную шапку

На каждом сайте, брендинг и навигация должны быть очевидными, четкими и ясными.

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

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

Вот два примера, где вместо придания цвета самой шапке используется дополнительная линия.

А на этих примерах шапка просто находится за пределами блока с основным содержанием.

Выделение областей цветом

Рассматривая примеры раздела о шапке сайта, вы могли заметить, что многие сайты используют цвет, чтобы обозначить свои функциональные зоны, такие как:

• Навигация
• Фон
• Основной контент
• Ссылки
• Прочий материал

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

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

Простая навигация

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

Почему простая навигация лучше

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

• Где он;
• Куда он может отсюда перейти;
• Какие сервисы ему доступны.

Чтобы сохранить навигацию простой и понятной, нужно:

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

Как сохранить вашу навигацию простой

Запомните ключевой принцип: навигация должна четко отличаться от не навигации.

Следуйте вышеуказанным правилам относительно позиции, цвета и ясности.

Дополнительно рекомендую прочесть мою статью о навигации.

Ссылки должны выделятся на фоне текста, в котором они находятся.

Посмотрите на эти фрагменты, ни в одном из них вам не приходится сомневаться, что это ссылка. Я предпочитаю использовать для ссылок синий текст (не подчеркнутый), который становится подчеркнутым красным при наведении на него мыши.

Подробную информацию об оформлении ссылок можно найти в моей статье Оформление гиперссылок

Четкие логотипы

Вот некоторые в натуральную величину. Заметьте, что эти логотипы стремятся быть большими в соответствии с главными принципами дизайна в стиле 2.0

Почему?

Сильный, четкий логотип говорит «Вот кто мы!» самым простым для восприятия способом.

Когда и как?

Очень трудно сказать, как сделать хороший логотип, но если коротко…

Логотип должен:

• Работать визуально в его контексте, и в любых других местах, где он может быть использован (например, плакаты или футболки),
• Быть понятным и четким,
• Подчеркивать особенности и качество вашего бренда.

Крупный текст

Масса сайтов в стиле 2.0 используют крупные шрифты, похожие на те, что были в сайтах старого стиля.

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

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

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

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

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

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

Перед тем как использовать крупный текст нужно освободить место, удалив необязательные элементы.

К тому же нужна причина, чтобы сделать какой-то текст крупнее остального, он должен быть осмысленным и полезным. Не нужно добавлять крупный текст только потому, что это в стиле Web 2.0.

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

Крупный вводный текст

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

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

Используйте его, только если хотите сказать что-то важное.

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

Яркие цвета

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

Цвет это отличное средство для передачи особенностей бренда

Будьте осторожны при использовании ярких цветов

Помните об осторожности

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

3d эффекты

Большинство сайтов в стиле Web 2.0 используют легкие 3d эффекты, чтобы придать дизайну более качественный вид.

Реалистичные эффекты, такие как тени, градиенты и отражения помогают сделать интерфейс более реальным, солидным и законченным.

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

Как использовать 3d эффекты

Золотое правило здесь использовать их с осторожностью и не переборщить.

Как я объяснял в уроке по 3d эффектам, эффекты не должны применяться ко всему.

Не пытайтесь сделать дизайн полностью трехмерным, потому что:

• Это требует много работы,
• Это может сильно увеличить размер страницы,
• И это не нужно. 3D эффекты, очень сильно привлекающие внимание пользователей должны использоваться обдуманно и преимущественно, чтобы подчеркнуть основные элементы страницы.

Градиенты

В Web 2.0 дизайне больше градиентов, чем склонов в Альпах.

Почему градиенты столь полезны

Градиенты смягчают области, которым иначе пришлось бы сделать однотонными.

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

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

Обратите внимание, что градиенты лучше всего работают, если соседствуют с однотонными областями.

Отражения

Иллюзия отражения одно из наиболее распространенных применений градиентов, наиболее распространены 2 типа отражений:

• Блики созданные отражением света на полированных поверхностях
• Эффект полированного стола

Блики

Реалистичные эффекты в виде капель воды, стеклянных и пластиковых кнопок, очень популярны в последние пару лет.

Я не знаю, кто начал эту тенденцию, но сайт Apple должно быть был одним из наиболее влиятельных пионеров в этой области (Aqua interface look & feel).

Вот некоторые примеры:

Эффект полированного стола

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

Как сделать такие эффекты (from photoshoplab.com)

Оригинальные иконки

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

Иконки могут быть полезны, если они легко узнаваемы и их смысл однозначен. Во всех остальных случаях просто текст гораздо эффективнее.

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

Некоторые примеры различных стилей иконок

Простые и опрятные

Оригинальные и причудливые

Наличие маленьких холмиков не обязательно!

Высокодетализированные

Творчески вдохновленные Mac OSX. Широкий выбор таких иконок представлен на Enhanced Labs.

Вспышки звездочки

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

Звездочки могут очень хорошо работать, но использовать их можно, только если нужно привлечь внимание к чему-нибудь важному, я рекомендую использовать только одну на страницу (максимум!).

Другие способы, которые кажутся несколько избыточными.

To find out how to do it in Photoshop, go here and scroll halfway down (from photoshoplab.com)

Похожие статьи

• Элементы дизайна в стиле Веб 2.0
• Обзор Веб 2.0
• Дизайнерские клише в стиле Web 2.0
• Современный стиль в веб-дизайне