Современные тенденции веб-дизайна (часть 1)

Предисловие. Данная статья не ориентирована на профессиональных веб-дизайнеров. Она направлена на обычных пользователей, которые были свидетелями развития сети Интернет.

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

Итак, предлагаю вам обзор современных тенденций в оформлении сайтов.

 

Что мы потеряли?

В первую очередь, я хочу показать вам дизайн, которые постепенно ушел от нас, но все еще встречается. Как найти оформление сайтов? Эта задача стала нетривиальной. Где дизайн не меняется с годами? Образовательные учреждения, больницы, гос. учреждения. Сайты искал с помощью каталога DMOZ, который может быть сам примером классики дизайна сайта.

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

Тот самый Google

Тот самый Google

Теплый ламповый дизайн

Теплый ламповый дизайн

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

Яблоки тоже были старыми

Яблоки тоже были старыми

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

Самый первый сайт сети сохраняет традиции оформления

Самый первый сайт сети сохраняет традиции оформления

Первый бум

Первый тренд, потрясший интернет произвели две компании. Первая из них Apple, а вторая – Microsoft. Имя тенденции – стеклянный интерфейс. Все сайты заполонили полупрозрачные кнопочки с тенью и эффектом свечения.

Угадайте кто вызвал стеклянный бум?

Угадайте кто вызвал стеклянный бум?

Полупрозрачность, альфа каналы – все дизайнерские форумы были переполнены уроками «как сделать стеклянную кнопку».

Отражение и стеклянный эффект

Отражение и стеклянный эффект

Этот эффект был везде – кнопки содержали обязательные переходы градиентов. Логотипы в хедере отбрасывали тени, заголовки в сайдбарах казались выдавленным желе. Помним, любим. Скорбим? Нет!

Еще несколько сайтов с подобным дизайном:

Прозрачность и градиенты

Прозрачность и градиенты

Стиль Vista

Стиль Vista

Сложные градиенты

Сложные градиенты

Даже системный блок - и тот как стекло

Даже системный блок - и тот как стекло

Думай иначе

Итак, год 2004-2005. Полным ходом идет подготовка к выпуску новой версии Windows Vista, которая тогда еще называлась Longhorn. Весь Интернет завален сайтами со стеклянным дизайном, здесь имеется в виду Рунет. А во всем остальном прогрессивном мире уже думаю иначе.

Тhink different. Думай иначе. Весь мир кричит о «модном» дизайне «стеклянном» дизайне сайтов, со множеством элементов оформления? Значить, нужно, делать сайты с минимальным количеством цветов и минимумом деталей. Весь Интернет пестреет цветами радуги? Давайте делать в сером цвете!

Законодатель мод

Законодатель мод

Как всегда такой подход оправдал себя. Перенасыщенный «стеклянным» дизайном пользователь с огромным удовольствием принял новый тренд – минимализм. Сочетание черных, серых и белых цветов. Упор на контент. Минимум оформления – рамки вокруг фотографий, тонкие полосы.

Принцип пирамиды

Принцип пирамиды

Немного отвлекусь. Компания Apple сыграла огромную роль в «моде» на дизайн. Нужно признать, что «стеклянный» интерфейс – тоже ее заслуга. Но упоминать яблочную компанию в каждом абзаце было бы не корректно. Да простят меня любители яблок.

Серый и белый цвет - тренд

Серый и белый цвет - тренд

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

Упор на контенте

Упор на контенте

Web 2.0

Стиль Web 2.0 – модное слово 2005 года. Поисковые системы данному запросу выводят миллионы сайтов. Веб 2.0 везде. И самое интересное, никто не может объяснить, что это такое.

В чем заключается стиль? основные особенности:

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

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

Как и обещал, привожу примеры:

 

web2.0 - типичный представитель дизайна

web2.0 - типичный представитель дизайна

Дизайн сайта Skype - пример нового подхода

Дизайн сайта Skype - пример нового подхода

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

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

Продолжение следует…

 

 

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">