Web-дизайн находится в постоянном движении: с каждым годом он развивается и видоизменяется под воздействием всевозможных факторов, обрастая новыми интересными инструментами и оставляя позади все старое и неактуальное. Нынешний год можно охарактеризовать тем, что одной из причин развития дизайна становится все большее распространение мобильных устройств и планшетов, появление HTML 5. Но давайте подробнее остановимся на тенденциях web-дизайна в 2013 году.
Начать стоит с новых и ставших популярными видов сайтов.
Адаптивный дизайн
К возникновению адаптивного дизайна привело повсеместное распространение всевозможных планшетов, смартфонов и прочих мобильных устройств. Обладающие различными разрешениями экранов, они заставляют современных web-дизайнеров задумать об универсальном сайте, который одинаково хорошо смотрелся бы на всех устройствах. Адаптивный дизайн автоматически подстраивается под любое разрешение и обеспечивает максимальное восприятие любой информации пользователем, не теряя при этом своей функциональности.
При проектировании адаптивного сайта необходимо обратить свое внимание на два основных момента, а именно: как будет вести себя сайт при различных разрешениях и какой контент выводить на тех или иных устройствах.
Разрешение
При проектировании сетки адаптивного дизайна используется технология Media queries, или Медиа запросы. Что же это такое?
Подобная технология позволяет прописать определенные условия (стили), при которых сайт подстраивается под разрешения монитора используемого устройства или окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа запросы ограничивают ширину макета и при достижении определенного значения, применяется прописанный стиль элемента. Можете сами попробовать поэкспериментировать с размером окна браузера на сайтах Regent College, Skinny Ties, UX London и посмотреть, к чему это приведет.
Контент
Контент всегда имеет особое значение, и в особенности это касается адаптивного дизайна, ведь у нас нет двух версий (мобильной и декстопной), поэтому на стадии проектирования нужно понять, какой контент выводить. Самое главное, чтобы при адаптации сайт не терял своей функциональности, а отображаемый контент максимально быстро подводил человека к желаемому результату.
В мобильной версии сайта информация должна быть представлена кратко и ясно. Чтобы достичь этого, дизайнеры используют ряд способов:
1. Замена части текстовой информации видео или картинками;
2. Упрощение навигации;
3. Создание более ёмкого контента;
4. Чёткое описание товаров;
5. Упрощение функционала (избавление от ряда второстепенных элементов) и т.п.
Одностраничные сайты ("Слоенки")
Также приобрели сейчас широкую популярность одностраничные сайты. У таких сайтов можно выделить ряд характерных особенностей, которые также являются новыми тенденциями в web-дизайне:
1. Сайт без перезагрузки страницы;
2. Использование вертикального, горизонтального скроллинга;
3. Один экран - один раздел сайта;
4. Фиксированные ключевые элементы (шапка, корзина, соц. сети);
5. Использование больших шрифтов;
6. Крупные тематические иллюстрации;
7. Использование картинки в качестве фона;
8. Большие кнопки;
9. Разделение экранов (разными фоновыми изображениями, всевозможными линиями, заливками, градиентами, тенями);
10. Анимации с помощью технологий CSS3 и HTML 5.
Среди одностраничных сайтов можно назвать D"Angelico, The Enterprise Foundation, Tag Creative Studio и Snipcart
Модульные сетки
На таких сайтах основным элементом дизайна является модульная сетка. Кроме того, для них характерны блоки разного размера и бесконечная подгрузка контента (один из приемов, позаимствованных из соц. сетей). Чтобы посмотреть, как выглядит модульная сетка, советуем обратиться к следующим сайтам: Lotta Nieminen, La vie a la Fresh, Benetton, MAMO, DNabox.com, Langland.
Стили в web-дизайне
Современное интернет-пространство пестрит разнообразием стилей в оформлении сайтов. Однако выделить основные направления нам все же представляется возможным. Остановимся подробнее на некоторых из стилей.
Минимализм
Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на сайтах в стиле минимализм внимание пользователя стараются сфокусировать на чем-то конкретном, т.е. рисуется какой-то отдельный элемент, отличный от всего остального (картинка в центре экрана, или большая надпись). Яркими представителями в стиле минимализм являются сайты Eastworks Leather Company, Whole и Lapka. К характерным чертам минимализма относятся:
1. Простота и понятность;
2. Минимум графических элементов;
3. Функциональный интерфейс;
4. Черно-белый цвет;
5. Минимальные тени.
Плоский (flat) дизайн
Не менее популярный и близкий по стилю к минимализму. В основу flat дизайна ложится двумерный стиль. Основная идея этого стиля - изображение геометрии элемента только с помощью цветов, без каких-либо других способов придания глубины: теней, скосов, рельефов, градиентов. Как это выглядит на деле, можно узнать на таких ресурсах, как Spell Tower, LayerVault, Yep! Каждый элемент пользовательского интерфейса должен восприниматься однозначно, а взаимодействие с такими элементами должно интуитивно быть понятным для пользователей. Характерные особенности:
1. Никаких дополнительных эффектов;
2. Использование простых фигур;
3. Контрастные цветовые решения;
4. Акцент на типографике.
Кроме того существует такой вид дизайна как "почти плоский" дизайн. В "почти плоском" дизайне используются техники плоского дизайна, но к некоторым элементам все же добавляются дополнительные эффекты. Например, кнопки содержат дополнительные градиенты или тени. Дизайнеры, как правило, выбирают какой-либо эффект и применяют ко всем элементам "почти плоского" дизайна. Сайт Mixpanel тому пример.
Metro дизайн
Обычно его позиционируют как легкий, простой, быстрый и открытый. В общем и целом этот стиль похож на плоский дизайн. Также используется качественная типографика, простые элементы, хорошо продуманный контент. Отличительные же особенности metro дизайна в том, что ссылки не подчеркиваются, а для визуализации информации используются разноцветные и равномерное закрашенные квадраты навигации. Убедиться в этом можете самостоятельно: Blocklevel, Microsoft SWIT, Etch.
Нестандартная геометрия
Нестандартная геометрия также приобрела популярность в этом году. В основном, она прослеживается во всех элементах сайта (фоны, выделения, отдельные элементы). Благо это позволяют сейчас сделать HTML5 и CSS3. Самыми трендовыми геометрическими формами элементов является круг, ромб и шестиугольник (сота), реже встречаются треугольники: Built by Buffalo, V2, AmplifiQEstudio.
Винтаж (ретро стиль)
Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики того времени. Довольно часто дизайнеры, вдохновившись такой работой, рисуют сайт в ретро стиле. К популярным элементам оформления можно отнести:
1. Использование текстур (в частности, бумаги во всех её видах - типографская, рваная, пожелтевшая - или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины;
2. Декоративные элементы (рамочки, узоры, флажки, ленточки, линии - двойные, тройные);
3. Ретро-цвета (не сочные, а приглушенные);
4. Характерная замысловатая типографика (шрифты плакатного типа).
Сайты Von Dutch, Kinder Forografie, Alex Peirce, Web Design Yorkshire, Rodolphe Célestin, Teixido отлично демонстрируют применение ретро стиля в дизайне.
Последнее, на чем хотелось бы остановиться, обсуждая тему основных направлений web-дизайна, - это характерные элементы, присутствующие на сайтах в 2013 году.
Не такая уж новая тенденция, но также достаточно распространенная в сегодняшней web среде - параллакс. Параллакс создает ощущение глубины сайта, благодаря чему возникает иллюзия трехмерного пространства:Spokes, iUtopi, Minerva. Подобный эффект достигается за счет движения нескольких слоев относительно друг друга с разной скоростью.
Фиксированное меню, является следствием распространения сайтов с вертикальным скроллингом: дизайнеры поняли, что пользователю будет неудобно каждый раз возвращаться вверх, чтоб перейти в другой раздел или совершить какие-либо ключевые действия. Именно поэтому основное меню стали закреплять сверху, на всем протяжении скроллинга по сайту. Кроме меню, фиксируются главные элементы сайта (например, в случае интернет магазина таким элементом будет корзина). Подобное меню использовано на сайтах Eyal Shahar, Engage Interactive и Ryan Scherf.
Полноразмерные фото и видео в качестве фона, в основном, оказывают wow-эффект, который привлекает внимание посетителя сайта: Fifty Three, thinkLuke.
Рассматривая видео на заднем фоне, пользователь может заинтересоваться и продолжить работу с сайтом:MediaBoom, Orange.com, The Power Inside.
Крупная дизайнерская типографика. Не так давно технологии еще не позволяли широко использовать нестандартные шрифты, и большинство сайтов ограничивалось Ариалом, Тахомой и Требушетом. C появлением шрифтов от Google, арсенал web-дизайнеров пополнился примерно на 30 шрифтов, которые оптимизировал сам Google, и которые, при желании, можно легко подключить к своему сайту. Однако времена меняются. Современные методы верстки позволяют подключить практически любой нестандартный шрифт. Причем шрифтовые сочетания используются как в виде шрифтов, так и в виде красиво нарисованных картинок. Примеры активного использования нестандартных шрифтов можно наблюдать здесь: Amazee Labs, Denise Chandler, Ryan Scherf.
Еще одна из тенденций, перешедших на web с мобильных устройств - большие кнопки интерфейса. "Нажатие и касание" среди различных гаджетов становится всё более и более популярным, именно поэтому большие кнопки "перебираются" в web-дизайн. Хотя огромные кнопки делают нажатие гораздо легче, они связаны с большим количеством графики, которая замедляет скорость загрузки страницы, поэтому сайтостроителям приходится искать пути решения своих задумок без потери качества картинки и скорости загрузки сайта. К использованию больших кнопок активно обращаются УльтраКлиника, The Online Gift Card, Precomposed Touch Gestured, KULT Studio, Simbolicons.
Ненавязчивые фоны. В 2013 году web-дизайнеры стали уделять большое внимание фону сайта, в частности, всевозможным текстурам: они минимальны и ненавязчивы с одной стороны, с другой причудливы. Примеры использования ненавязчивых фонов можете посмотреть на следующих сайтах: Mangrove, Teixido, 5Tailors.
QR-коды. Еще один элемент, перекочевавший из мобильной сферы в сферу web. Хотя не только в неё: сейчас эти коды можно видеть повсюду, в том числе и на сайтах. Основная функция кода - привлечь внимание посетителя.
Анимация с использованием CSS 3 и HTML 5. Теперь, с развитием данных технологий, дизайнеры могут с легкостью делать разные эффекты: деформация, перетекание, раскрытие, плоскости и многие другие, и творческий народ активно этим пользуется. В сети есть множество сайтов, на которых уже выложены готовые решения анимации с предпросмотром и кодом для вставки в свой сайт. Если хотите посмотреть, как выглядит анимация с использованием CSS 3 и HTML 5, вам сюда: WWF, Rule of Three, Inception, InTacto10, RailUp, Agent 008 Ball.
В заключение хотелось бы сказать о том, что влияние мобильных устройств на web-индустрию, безусловно, продолжится: с развитием интернет технологий появятся еще более интересные инструменты, которые дизайнеры активно будут применять. Но уже сейчас существующий набор инструментов позволяет дизайнерам создавать поистине уникальные и ни на что не похожие web-шедевры, привлекающие внимание тысяч пользователей.
Материал подготовил Николай Лисов, web-дизайнер Astra Media Group.