Оригинал статьи: http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
В этой статье мы рассмотрим различные элементы модного дизайна в стиле Web 2.0. Мы рассмотрим, почему такой дизайн привлекает внимание и как, где и когда можно использовать его элементы. Данная статья является продолжением предыдущей, но с гораздо более глубоким анализом феномена Web 2.0
Обзор характеристик
Список ниже состоит из наиболее распространённых характеристик дизайна в стиле Web 2.0. Некоторые из них уже были перечислены в этой статье.
Понятно, что сайт не должнен в принудительном порядке использовать все перечисленные элементы. Более того, их использование не горантирует, что у сайта автоматически будет "хороший" дизайн или дизайн в стиле Web 2.0.
- Простота
- Центральное выравнивание
- Малое количество колонок
- Выделение шапки
- Обозначенные границы контента
- Простая навигация
- Логотипы жирным шрифтом
- Большой текст
- Введние жирным шрифтом
- Яркие цвета
- Рельефность
- Градиенты
- Отражения
- Забавные иконки
- Звёзды
Сейчас мы их рассмотрим подробнее и с примерами.
Web 2.0
Заранее сообщаю, что в данной статье термин "дизайн в стиле Web 2.0" используется для описания превалирующий тип веб-дизайна, кратко рассмотренный в этой статье.
Многие люди, говоря о Web 2.0 подразумевают
- Новый стиль веб-экономики
- Новый уровень веб-технологий и взаимодействия между веб-страницами и веб-сервисами
- Социальный феномен новых веб-сообществ и социальных сетей
Ничего подобного в данной статье не будет. Но будет лишь анализ новой школы веб-дизайна.
Wed 2.0 шаблоны
А знаете ли вы, что TemplateMonster имеет в своём арсенале шаблоны дизайнов в стиле Web 2.0? Конечно, слегка неловко осознавать, что кто-то ещё может использовать такой же дизайн, как и на твоём сайте. Но, во-первых, шаблон можно выкупить в эксклюзив. А во-вторых, список шаблонов всё время обновляется и поэтому вероятность того, что пользователи данного сервиса выберут старый шаблон. всё время убывает. Поэтому рекомендую взглянуть на этот сайт и дёшево и сердито приобрести понравившийся шаблон модного дизайна.
Введение
В данной статье я не собираюсь проводить критику или восслаление дизайнов современных сайтов. Я просто систематизирую понятие дизайна в стиле Web 2.0.
Я искренне верю в простоту и считаю, что это будущее веб-дизайнаю Сегодняшние простые и элегантные страницы могут донести до читателя больше меньшими средствами.
- Они позволяют дизайнеру направить взгляд читателя в нужное место посредством мелких хорошо подобранных элементов.
- Они используют меньше слов, которые несут в себе больше информации, а правильно подобранные иллюстрации помогают создать настроение.
- Они отвергают идею сайта, на которм ничего никогда нельзя найти.
1. Простота
Веб-дизайн ещё никогда не был таким простым. И это хорошо. Дизайн в стиле Web 2.0 означает фикусировку, чистоту и простоту. И это не означает минимализм.
Веб-дизайн должен быть минимальным в том смысле, что он должен содержать наименьшее число элементов, призванных достичь пользователям и владельцам сайта того, что они хотят достичь. Иными словами, если у вас имеется два способа для выражения какой-то идеи, выбирайте наиболее простой.
Давайте рассмотрим несколько примеров. Заметьте, как мало разнообразных элементов на страницах сайтов из примеров. Элементов могло бы быть больше, но сделало ли бы это сайт сильнее и понятнее? Самый главный результат, который должен получиться, - это прочтение содержимого сайта пользователем.
Чем хороша простота?
- У сайта в целом есть цель, а у каждой его страницы - своё предгазначение для достижения этой цели.
- Внимание пользователя не бесконечно. Сфокусированный дизайн позволяет сделать так, чтобы пользователь потерял интерес к сайту гораздо позже, чем он получит всю необходимую информацию.
- Это работа дизайнера помочь пользователю найти то, что он ищет (или заметить то, что он должен заметить на сайте).
- Разные прибамбасы очень сильно оттягивают на себя внимание. Чем больше прибамбасов, тем меньше вероятность того, что пользователь заметит то, что нужно.
- То есть сайт должен установить взаимодействие с пользователем, и это взаимодействие доолжно быть с наименьшим "шумом". Поэтому так важно создавать "экономные" дизайны, простые дизайны.
Когда дизайн должен быть простым? Всегда.
Как сделать дизайн простым? Есть два правила, которые позволяют ответить на этот вопрос:
- Уберите те прибамбасы, потеря которых не снизит эффективность сайта.
- Поищите альтернативные решения для достижения поставленных целей (другие прибамбасы, но более простые).
Всегда удаляйте ненужные визуальные элементы. Особенно это касается областей разметки, которые не являются релевантыми предназначению страницы. В этих областях визуальных элементов в идеале быть не должно. И вообще визуальные элементы (точки, линии, фигуры) должны не украшать, но направлять взгляд пользователя.
Вот, кстати, контрпример простого дизайна:
Заметьте, как много здесь декоративных элементов, на которые хочется отвлечься. С другой стороны навигация нечёткая, контент захламлен, интерактивность стремится к нулю.
Сложность и красота веб-дизайна
Я совсем не против сложности, насыщенности и украшательства в веб-дизайне.
Используйте столько жекоративных элементов, сколько хотите. Но все они должны способствовать коммуникации с пользователем, которая должна состояться.
В дизайне можно создавать сообщения при помощи жёстких данных и мягкой информации.
- Жёсткие данные - это факты, новости, цены, расписания, - всё то, что позволяет вам заработать денег
- Мягкая информация - это качественный аспект коммуникации, первое впечатление о компании, ощущение нужности товара пользователю, чувство доброжелательности сайта.
Рассмотрим пример ниже.
Сайт насыщен, интересен и привлекателен. Используется ряд визуальных техник для привлечения внимания, создания заинтересованности и приятного ощущения качества работы Алекса. Но дизайн также прост, потому что визуальные элементы использованы аккуратно. Дизайн не вызывает ощущения бесплатности - он экономичный и богатый.
В заключение данного пункта запомните, что любые визуальные элементы призваны создавать коммуникацию, прежде всего. Если же вы можете создать такую же коммуникацию с менбшим количеством элементов, уберите ненужные.
(...Продолжение следует...)
Читать далее!
