Статьи

» Тренды веб-дизайна 2010
» Создавайте эмоции, а не эстетику
» Понимая веб-дизайн
» Минимализм - не примитивизм
» Основы минимализма
» Очарование несовершенства

Тренды веб-дизайна 2010

Пурист скажет, что великий дизайн существует вне времени. Да, в идеальном мире тренды из этой статьи можно смело игнорировать.

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

Технологии меняются, и это решительно расширяет возможности медиа.

В 2010 году мы наблюдаем, как дизайнеры продолжают расширять границы веб-дизайна, определяя следующие тенденции:

Дизайн печатной продукции

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

Шрифты класса Serif

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

Шрифты семейства Sans-serif в целом считаются более читабельными с экрана монитора. Но благодаря увеличивающемуся количеству пользователей, просматривающих страницы на высоком разрешении, и развитию технологии сглаживания шрифтов, шрифты класса Serif стали легко читаться и в качестве основного текста.

Hippopotamus - cоздание сайтов с чистым дизайном

Крупные заголовки

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

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

Многоколоночная верстка

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

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

Большие иллюстрации

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

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

Диаграммы и инфографика

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

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

Простота

Антуан де Сент Экзюпери однажды сказал: «Совершенство достигается не когда нечего добавить, а когда нечего убрать». Есть много преимуществ простоты в дизайне.

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

Минималистичный дизайн по сетке

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

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

Одностраничный сайт

Существует много путей упростить дизайн. Одностраничный сайт-визитка использует сразу два подхода: сокрытие и извлечение.

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

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

Много белого пространства

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

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

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

Типографика

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

Технология CSS3

Не уверены, что можете извлечь пользу из CSS3? Подумайте еще раз. Пионеры веба, такие как Энди Кларк и Джереми Кейт проповедуют «прогрессивную модернизацию» в веб-дизайне. Прогрессивная оптимизация означает создание сайтов таким образом, что они корректно отображаются старыми версиями браузеров и в то же время остаются современными для тех, кто использует последние технологии.

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

Анимация CSS3

Анимация в сети прошла долгий путь. В самом начале анимировать мы могли только с помощью GIF файлов. Затем границей возможного стал Flash. Теперь мы можем выбирать между Flash, Silverlight, GIF, JavaScript и даже CSS3. Нетипичная анимация может надолго запомниться, CSS3 сделает ее загрузку легкой, а создание простым.

Закругленные углы

Стиль Web 2.0 2005 и 2006 годов, сделал закругленные углы популярными, настолько, что они начали раздражать. В то же время, создавать их было сложно. Тогда не существовало возможности сделать действительно круглые углы. Вместо этого их приходилось имитировать средствами CSS, JavaScript и изображениями.

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

Многие дизайнеры находят серьезные преимущества в этой новой возможности браузеров в 2010 году.

Тени от текста и блоков

Использование теней, чтобы придать глубину, использовалось часто (и иногда слишком часто) с самых ранних дней появления веб-дизайна. Но не всегда это было оправдано. Чтобы добавить тень к тексту, нужно было использовать изображения, что увеличивало время загрузки страницы и делало поддержку сложнее. Тени для блоков требовали несколько изображений и такие хитрости CSS как «раздвижные двери» («sliding doors»).

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

RGB и прозрачность

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

CSS3 предлагает дизайнерам гораздо больше надежности и свободы в работе с прозрачностью RGB. Не считая множества возможностей настройки прозрачности, есть одна область, в которой эта технология помогает особенно – сложная раскраска заднего плана, перекрытая полупрозрачными цветами. Раньше, такой эффект был непрактичным, его невозможно было создать без обращения к сложным изображениям формата PNG.

Мобильная версия

Доступ в Интернет с мобильного телефона дал миллионам пользователей возможность проверить свой банковский счет во время ожидания ответа, узнать счет, проезжая в метро или написать в Twitter во время вождения автомобиля. (Угадайте, какая из этих привычек опасна?) И мобильный Интернет продолжает интенсивно развиваться. Мы дошли до главного – каждая компания должна решить, будет ли их сайт использоваться «на бегу» и, если да, как именно. Инновационные компании уже вложили большие средства в полезные и дружественные мобильные версии своих сайтов.

Hippopotamus - cоздание сайтов с чистым дизайном

Креативность

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

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

Чистые иллюстрации

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

Текстурный фон

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

Пиктограммы

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

В последние несколько месяцев дизайнеры стали задаваться вопросом: «Как можно оживить пиктограммы?» И это привело к прогрессу пиктограмм, который сделал их полезными и интересными.

Акварель

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

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

Рукописный текст

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

Социальные медиа

В последнее время люди проводят больше времени на сайте Facebook, чем на Google, и не удивительно, что дизайнеры ищут инновационные пути внедрить социальные службы на свои сайты.

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

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

Фиксированные элементы

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

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

Перевод: Hippopotamus

Оригинал статьи: Web Design Trends for 2010