Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!



Web 2.0 как гид по дизайнерскому стилю (часть 1)

В этой статье я описываю общие варианты графических дизайнерских элементов в современном веб («2.0») стиле дизайна.

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

Это продолжение моей статьи Current Style, где анализируется более глубоко особенности дизайна в стиле «Web 2.0».

Содержание

На листе содержания находятся общие черты дизайна «Web 2.0».

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

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

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


Правовая оговорка

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

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

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

Web 2.0 ?!

Я использую термин «дизайн в стиле Web 2.0» для описания большинства черт веб дизайна, которые я начал описывать в моей статье Current style.

Многие используют термин «Web 2.0» для описания:
  • Возрождения веб в экономике
  • Новый уровень технологического взаимодействия веб сайтов и сервисов
  • Социальный феномен, полученного из новых типов онлайн сообществ и социальных сетей


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

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

Коротко о стиле Web2.0

Если у вас нет возможности создания собственного стиля дизайна «2.0», TemplateMonster только недавно (17 июля 2007) открыл новый раздел Web 2.0 Templates.

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

Многие сайты получают выгоду от применения нововведений, персонального дизайна и покупка шаблона менее чем за $100 хороший способ достигнуть этого! TemplateMonster занимается этим на протяжение многих лет, поэтому я рекомендую поискать там.

Если у вас нет возможности создания собственного стиля дизайна «2.0», TemplateMonster только недавно (17 июля 2007) открыл новый раздел Web 2.0 Templates.

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

Многие сайты получают выгоду от применения нововведений, персонального дизайна и покупка шаблона менее чем за $100 хороший способ достигнуть этого! TemplateMonster занимается этим на протяжение многих лет, поэтому я рекомендую поискать там.

Введение

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

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

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

1. Простота

«Использовать столько элементов, сколько необходимо для достижения того, что вы хотите достигнуть»

Веб дизайн стал проще, и это очень хорошо. Дизайн 2.0 означает сфокусированный, чистый и простой.

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

Я уже писал о Occam's Razor, который я использую практически все время. Один способ интерпретировать это: есть два возможных решения проблемы, более простое решение лучше.

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

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

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

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

Всегда!

Как?
Существует два важных аспекта достижения успеха с помощью простоты:
  • Убрать ненужные компоненты, не влияющие на эффективность.
  • Попытаться найти альтернативное решение, которое достигнет цели более простым способом.

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

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

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

Вот примет дизайна, который не достаточно прост.

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

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

Эдвард Тюфте босс, когда дело доходит до дизайна информации. Он использует термин «data ink» (деталь, которая несет информацию) и «non-data ink» (деталь, которая просто деталь), чтобы описать этот феномен.

Один из способов Тюфте определения меры эффективность информационного дизайна (графики, чаты, презентации и т.д.) использование отношения data-ink к non-data-ink. Чем больше пропорция data-ink, тем более эффективен дизайн.

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

  • Логотип сайта
  • Надпись на навигационной панели («art gallery»)

Все остальное - «загруженность»: фигуры в качестве фона, диагональные линии в панели интерфейса, сетка, градиенты... это все шум, это все «non-data ink», потому что они не создают связь с пользователем.

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

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


Конечно, часто то, что мы передаем не является hard data, а является soft information.

Hard data - Означает факты, такие как новости, цены на акции, расписание поездов, или сколько денег на вашем банковском счету...

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

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

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

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

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

Часть 2. (Продолжение)

Материал взят и переведен с Web design from scratch

Просмотров: 14414

  Коментарии (1)
 1 Написал(а) Scout, в 06:33 17.05.2017
There is a critical shortage of initomarfve articles like this.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама
СПБ Окна ПВХ - окна челябинск .