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

Вообще у оригинальной статьи более 2к ретвитов и количество подписчиков блога впечатляет. Ссылка на оригинал в конце.

Intro

Существует тонкая грань между дизайном и разработкой, и с движением в новое десятилетие, эта грань становится весьма размытой. Достаточно ли сделать красивый макет в фотошопе? Может лет 5 назад это и было так. Сейчас пользователям Интернета нужно нечто большее. Красота без какого-либо содержания через некоторое время становится скучной. Если это ваша цель – впечатлить общество коллег-дизайнеров с вашими роскошными проектами, то вы найдете себя в нижнем потоке быстро. 2011 год не о красоте, а о функциях. Направления этого года и десятилетия – отзывчивый дизайн, постоянное соединение и виртуальная реальность.

Как вам остаться актуальными как дизайнеры в 2011 году? Цель дизайнера не ослепить, а вовлечь. Любой дизайнер может получить “ахи” и “охи”, которые легко забываются. Величайший дизайнер может создать среду, которая очаровывает и завораживает пользователя месте, где он не хочет искать кнопку “Назад”. Некоторые элементы собираются вместе, чтобы создать такое чудо: гармоничные цветовые схемы, интуитивный дизайн, легко доступная информация и быстрое реагирование. Кроме того, никогда не надо недооценивать силу простоты. Конечно, это всегда было так, но в 2011 году вы уже не забудите свободу действий рабочего стола на компьютере или ноутбуке. Теперь ваш дизайн должен бороться со смартфонами, нетбуками, планшетами и тому подобным. Вы готовы к этому?

1. Больше CSS3 + HTML5

CSS3 и HTML5 было далеком за горизонтом веб-дизайна в последние пару лет, но теперь, в 2011 году, мы видим, это бомба. Дизайнеры наконец-то начинают отказываться от Flash. Однако у вас могут быть чувства относительно Flash и вы это наверняка знаете, что Flash это не очень хороший вариант с некоторыми горячими новыми технологиями, которые доступны для ваших текущих и потенциальных посетителей. В 2011 году вы будете медленно уходить от Flash и включать магию под названием HTML5. Посмотрите на удивительно похожие сравнения:

Картинки кликабельные и ведут на инструменты при помощи которых были нарисованы эти картинки.

Попробуя инструмент написанный на HTML5 я почувствовал себя художником и вот что из этого получилось:

Первый пример нарисован при помощи инструмента на HTML5 (по настоящему завлекает), второй на Flash. Как это не странно, но у меня в некоторых моментах флешевый вариант тормозил, да и с настройками там не айс. Хотя последнее скорее недоработка самого приложения, а не технологии.

Теперь это видно, но нужно понимать, что Flash и HTML5 не равные противники. В 2011 году будет много места для обоих технологий. Проблема в том, что дизайнеры в 2010 (и ранее) злоупотребляли Flash. Существуют единичные, очень редкие случаи, когда весь сайт должен быть изготовлен на Flash, особенно в настоящее время. HTML5 частично может заменить Flash, но не полностью, т.к. некоторые нетрадиционные элементы дизайна всё ещё можно выполнить только на Flash.

2. Простые цветовые схемы

Простота. Там нет ничего, кроме сообщения на “тихом” фоне. Тишину можно интерпретировать по разному. Забудьте чёрные и белые цвета или оттенки серого. Представьте себе зелёный, жёлтый или даже красный в качестве основного цвета. Но не стоит ограничиваться двумя или тремя цветами, так же можно поработать с их оттенками для разнообразия. Это может оказаться очень удачным вариантом для отображения вашего сообщения несколькими цветами. Например:

Это визуализация твиттера. При создании этого сайта были использованы только технологии XHTML / CSS и Javascript. Благодаря этому сайт получился лёгким и шустрым. Заметьте, что у сайта нет ни единого намёка на тормоза, которые наверняка бы появились при использовании технологии Flash. Вот собственно и сам пример – toriseye.quodis.com

Красный может показаться раздражающим, если не правильно его применить. На сайте collisionlabs.com всё сделано правильно.

3. Поддержка мобильных устройств

Смартфоны, iPad’ы, нетбуки и прочие. В 2011 году для потребителей доступно огромное количество мобильных устройств. Это означает, что ваше веб-дизайн должен быть доступен сразу во многих видах окон.

Создание дизайна сайта для мобильных устройств заключается не только в удалении “колокольчиков” и “свисточков” из конструкции – этот метод может породить только свободные и безличные конструкции. Хотя не исключено, что дистилляция магии с вашим оригинальным дизайном в чистом виде делает представление вашего бренда тяжёлым. К счастью, технология позволяет быстро избавиться от этого груза.

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

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

Хотя это прогноз западных аналитиков для западных рынков. В России же скорее всего этот момент запоздает ещё на несколько лет.

4. Прокрутка со смещением

Прокрутка со смещением существует не только для старых видео игр. Одна из самых горячих тенденций этого года – это создание ощущения глубины. Что может подойти для этого лучше, чем прокрутка со смещением? Смещение (Паралакс) – это эффект, в котором используется несколько слоёв для создания иллюзии трёхмерности пространства. Она может быть выполнена при помощи нескольких простых трюков CSS или JQuery плагинов, например Spritely. Прокрутка со смещением может быть наиболее эффективной в качестве дополнительного элемента для вашей конструкции, например, как верхний и нижний колонтитулы или фон. Применение его как неотъемлемой части вашей навигации может оказаться не удачным вариантом для посетителей вашего сайта.

На сайте Old Pulteney используется эффект прокрутки со смещением по вертикали. Это добавляет небольшое ощущение глубины и вызывает большой интерес.

5. Проектирование для сенсорных экранов, а не для мыши

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

На сколько ваша конструкция “мыше-ориентирована”? Как дизайнеры мы обожаем мыши, ваши ссылки загораются при наведении на них мышью. Однако при использовании сенсорных экранов нет таких эффектов как при наведении мышью. Как ваш дизайн будет показывать ссылки посетителям? Что с раскрывающимся меню? Всё это не подходит для дизайна для сенсорных экранов.

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

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

6. Глубина восприятия в веб-дизайне

Нет, речь не идёт о воздушном “Я вижу вашу чашку кофе и клавиатуру на вашем сайте” дизайне двух летней давности. Под глубиной восприятия тут подразумевается создание размерностей в дизайне вашего сайта таким образом, что некоторые части сайта кажутся ближе, чем другие. Появляется ощущение 3D эффекта, когда всё сделано мастерски. Помните свои ощущения во время просмотра блокбастера “Аватар” в 3D? Некоторые элементы в буквальном смысле спрыгивали с экрана.

Хотя 3D технологии ещё не добрались до веб-дизайна, вы всё равно можете воссоздать эффект глубины в вашем дизайне.

www.plantate.net. На этом сайте показаны особенности вращения 3D планеты и создания эффекта глубины при помощи хорошо подобранных теней и слоёв.

www.nike.com. 3D элементы на столько четкие и простые, что делает их настолько ошеломляющим.

7. Большой фотографический фон

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

www.somewhere-lefilm.com. Этот сайт использует снимки с высоким разрешением и преобладающий цвет желтый во всем.

www.iflymagazine.com. На этом сайте используются игровые анимации и масштабируемые изображения.

8. Авантюрные доменные имена и интеграции

Хотя это вопрос не совсем веб-дизайна, мы с нетерпением ждём более креативных доменных имён. Когда-то доткомы потеряли свою привлекательность, в первую очередь  потому, что приходилось придумывать слова в Na’Vi, чтобы найти домен, который не был придуман кем-то ещё. В этом году широкое распространение получат такие доменные зоны как .me или .us. Подумайте о возможности воспользоваться этим.

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

www.photosheep.me. Другой пример интеграции .me

9. QR: Quick Response

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

Баркоды. Так просто сфотографировать уникальный штрих-код с вашего телефона с камерой. Дальше как по волшебству, телефон открывает веб-сайт, связанный со сфотографированным штрих-кодом. Красота QR заключается в том, что вы можете использовать её множеством разных способов. Можно разместить на сайте QR с закодированной ссылкой на мобильную версию вашего сайта. Так же можно использовать QR в качестве аватара.

Создать QR со ссылкой на ваш ресурс вам поможет сервис для генерации QR.

10. Миниатюрный дизайн

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

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

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

11. Постоянное соединение / Жизнь в потоке

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

www.mickmel.com. Персональный сайт, который использует технику лайфстриминга.

www.storyhotels.com. Это бизнес-сайт, на одной странице которого синтезируется сразу много информации.

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

А вот ссылка на оригинальную статью – webdesignledger.com

Комментарии (7) на “Тренды в веб-дизайне в этом году”