Кто мыAbout Us   УслугиServices   ПортфолиоOur Works   КлиентыOur Clients   Медиа-центрMedia Center   БлогBlog   КонтактыContacts  
Full Service Interactive Agency
Карта сайта
 

Studio Blog

Вернуться на главную

 

Модные тенденции веб-дизайна 2009

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

1. Отказ от готовых макетов

image

2. Одностраничный макет

image

3. Многоколонный макет

image

4. Насыщенность иллюстрациями и высококачественной графикой

image

5. Обширные белые пространства

image

6. Элементы оформления социальных сетей

image

7. «Говорящая» навигация

image

8. Динамические вкладки

image

9. Увеличенные формы поиска

image

10. Иконки разделов

image

11. Иконки авторов

image

12. Иконки и графические подсказки

image

13. Списки тем (вместо облаков тем)

image

14. Иллюстрации в постах для блогов

image

15. Акварель

image

16. Надписи от руки

image

17. Стиль ретро

image

18. Естественные текстуры и фон, состоящий из фото-снимков

image

19. Бирки

image

20. Ценники

image

21. Ленточки

image

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

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

image

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

image

image

image

image

image

image

image

image

image

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

image

Когда пользователь кликает по какой-то из кнопок меню, то страница меняется (частично) и там, где ранее находился какой-то контент, отображается новый. Для создания панелей навигации подобных макетов, используются эффекты выдвижения и прокрутки из распространённых библиотек JavaScript.
Главное преимущество для пользователя заключается в том, что ему требуется меньше телодвижений, чтобы добраться до необходимого контента. Поскольку подобный подход является достаточно новым, существует вероятность того, что некоторые читатели окажутся в замешательстве, когда столкнуться с непривычными механизмами навигации. В этом случае можно посоветовать, или даже настоятельно порекомендовать, предлогать пользователям дополнительную «статичную» версию сайта, тем более, что вам в любом случае придётся предложить альтернативную версию для индексации поисковыми машинами и для тех посетителей, которые отключают JavaScript в своих браузерах.

image

image

image

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

image

Одним из способов достичь этого, является использование макетов с несколькими колонками, расположенными друг за другом. Решение вполне подходящее. В последние несколько лет, разрешение мониторов постоянно растёт (хотя, широкое распространение нетбуков типа Eee PC компании Asus может и повлиять на ситуацию), открывая пользователям дополнительное горизонтальное пространство, а дизайнерам дополнительное пространство для работы.
Результат: сегодня всё больше дизайнеров стремятся использовать максимальное количество колонок. Мы наблюдаем устойчивую тенденцию в отношении, так называемых, многоколоночных макетов, которые часто представляют собой жесткие макеты на 850-1000 пикселей в ширину.

Многоколоночность используется для оформления журналов и портфолио. Часто, чтобы обеспечить структурный баланс, иерархию и порядок, в этих макетах используются сетки.
В случае с многоколоночным дизайном невозможно недооценить значение белого пространства между – и в середине – колонок. Активное белое пространство – это пространство, которое умышленно оставляется незаполненным, чтобы лучше структурировать страницу и расставить акценты в соответствующих местах содержания.
Часто в этих целях дизайнеры прибегают к правилу Шнейдермана – «сперва, определи общую картинку, а затем проработай её подробности» - первым делом предлагая пользователю краткий обзор возможностей сайта, а подробности предоставляя по дальнейшему требованию (ярким примером подобного подхода можно назвать Mozilla Labs).

image

image

image

4. Насыщенность иллюстрациями и высококачественной графикой
Будь-то домашняя страничка или профессиональный проект, иллюстрация становится настолько же популярной в веб-дизайне, насколько сейчас является, доминирующая в нём, типография. Дизайнеры стремятся выражать посыл сайта с помощью интерактивных (видео-вставки) и графических (иллюстрации и блоки вступлений) элементов. В последнее время, иллюстрации занимают в оформлении значительно больше пространства, чем раньше и обычно являются дополнением к, и без того вычурной, типографии, и, кроме этого, она становится более броской, более проработанной и, таким образом, более запоминающейся посетителям.
Иногда дизайнеры прибегают к графике, используя её в качестве фона, но также и в качестве других элементов. Применяются самые различные подходы: грандж, коллаж и альбом, орнамент, ретро и акварель, органические текстуры и фото для фона.

image

image

image

image

image

image

image

5. Больше белого пространства
Наверное, одним из наиболее предсказуемых, и в то же время крайне удачных, путей развития веб-дизайна в последние годы был путь активного использования белого пространства. Белое пространство применяется в оформлении многих сайтов и помогает лучше передать структуру сайта и его содержания.
По правде говоря, мы никогда раньше не встречали такого количества отступов в блоках содержания и навигации. Отступы в 20-25 пикселей становятся повсеместным увлечением и часто можно встретить ещё более заметные отступы. Хочется надеяться, что эта тенденция станет правилом хорошего тона в оформлении страниц.

image

image

image

6. Элементы «социального» дизайна
Если вы знакомы с блогосферой, то прекрасно знаете, что редкий блог не использует какие-нибудь «социальные» иконки или социальные блоки, приглашающие читателей раструбить о прочитанной статье во всевозможных социальных сетях. Каждый автор любит трафик и признание, что и определяет популярность социальных элементов в современном дизайне и заставляет людей работать над их эстетической привлекательностью.
Социальные иконки часто размещаются в правом верхнем углу страницы или же в конце статьи. Социальные блоки обычно находятся в конце поста и иногда размещаются перед списком статей на ту же тему. Часто можно наблюдать, что блог или портфолио каким-то образом совмещены с функционалом Twitter, Flickr и Last.FM.

image

image

image

7. Говорящая навигация
В прошлом году мы уже рассказывали о «говорящей» навигации и, судя по всему, этот оформительский элемент до сих пор остаётся популярным. Основная задача навигационного меню состоит в том, чтобы безошибочно указывать пользователю путь среди различных ответвлений сайта. Конечно, отнюдь не просто, верно передавать содержание разделов, поскольку горизонтальные меню допускают использовать лишь одно или два ключевых слова на каждый из разделов.
Именно поэтому, часто названия разделов не ограничиваются простым списком названий («молчаливая» навигация). Вместо этого, дизайнеры пытаются более подробно объяснить, чего именно пользователю следует ожидать, кликнув по соответствующей ссылке.
Поскольку дизайнеры пытаются обеспечить более осмысленный диалог с посетителями, мы называем подобный тип навигации «говорящей» - в противоположность «молчаливой» - навигацией, которая основывается на перечислении ключевых слов.

image

Чтобы ещё больше подчёркнуть простоту и доступность содержания сайта, часто навигационное меню состоит из блоков одинаковой длины и ширины. Нередко используются крупные иконки, хотя, в большинстве случаев, решение зависит от того, насколько это допускает данный сайт и общий макет. Также часто используются «мягкие» эффекты наведения курсора, что делает листание страниц более приятным.
8. Динамические вкладки
Среди самых популярных веяний в интерактивном дизайне, выделяется мода на динамические вкладки. Принцип динамических вкладок основывается на том, что содержание всех вкладок загружается одновременно со страницей, но в каждый из моментов времени отображается содержание только одной из вкладок (для достижения подобного эффекта используется атрибут display). Чтобы научиться самостоятельно создавать динамические вкладки, вы можете прибегнуть к уроку по динамическим вкладкам и по «вкладочному» управлению в jQuery.

image

image

image

Оригинал:
smashingmagazine.com
Перевод с английского:
Роман Равве


Сохранить страницу на сервисе закладок Bobrdobr.Ru!Сохранить страницу на сервисе закладок del.icio.us

Оставьте комментарий

Вы должны войти, чтобы оcтавить свой комментарий.