Современное интернет-пространство пестрит разнообразием стилей в оформлении сайтов. Однако выделить основные направления нам все же представляется возможным. Остановимся подробнее на некоторых из стилей.
Минимализм
Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на сайтах в стиле минимализм внимание пользователя стараются сфокусировать на чем-то конкретном, т.е. рисуется какой-то отдельный элемент, отличный от всего остального (картинка в центре экрана, или большая надпись). Яркими представителями в стиле минимализм являются сайты Eastworks Leather Company, Whole и Lapka. К характерным чертам минимализма относятся:
Простота и понятность;
Минимум графических элементов;
Функциональный интерфейс;
Черно-белый цвет;
Минимальные тени.
Плоский (flat) дизайн
Не менее популярный и близкий по стилю к минимализму. В основу flat дизайна ложится двумерный стиль. Основная идея этого стиля — изображение геометрии элемента только с помощью цветов, без каких-либо других способов придания глубины: теней, скосов, рельефов, градиентов. Как это выглядит на деле, можно узнать на таких ресурсах, как Spell Tower, LayerVault, Yep! Каждый элемент пользовательского интерфейса должен восприниматься однозначно, а взаимодействие с такими элементами должно интуитивно быть понятным для пользователей. Характерные особенности:
Никаких дополнительных эффектов;
Использование простых фигур;
Контрастные цветовые решения;
Акцент на типографике.
Кроме того существует такой вид дизайна как «почти плоский» дизайн. В «почти плоском» дизайне используются техники плоского дизайна, но к некоторым элементам все же добавляются дополнительные эффекты. Например, кнопки содержат дополнительные градиенты или тени. Дизайнеры, как правило, выбирают какой-либо эффект и применяют ко всем элементам «почти плоского» дизайна. Сайт Mixpanel тому пример.
Metro дизайн
Обычно его позиционируют как легкий, простой, быстрый и открытый. В общем и целом этот стиль похож на плоский дизайн. Также используется качественная типографика, простые элементы, хорошо продуманный контент. Отличительные же особенности metro дизайна в том, что ссылки не подчеркиваются, а для визуализации информации используются разноцветные и равномерное закрашенные квадраты навигации. Убедиться в этом можете самостоятельно: Blocklevel, Microsoft SWIT, Etch.
Нестандартная геометрия
Нестандартная геометрия также приобрела популярность в этом году. В основном, она прослеживается во всех элементах сайта (фоны, выделения, отдельные элементы). Благо это позволяют сейчас сделать HTML5 и CSS3. Самыми трендовыми геометрическими формами элементов является круг, ромб и шестиугольник (сота), реже встречаются треугольники: Built by Buffalo, V2, AmplifiQEstudio.
Винтаж (ретро стиль)
Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики того времени. Довольно часто дизайнеры, вдохновившись такой работой, рисуют сайт в ретро стиле. К популярным элементам оформления можно отнести:
Использование текстур (в частности, бумаги во всех её видах — типографская, рваная, пожелтевшая — или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины;
Декоративные элементы (рамочки, узоры, флажки, ленточки, линии — двойные, тройные);
Ретро-цвета (не сочные, а приглушенные);
Характерная замысловатая типографика (шрифты плакатного типа).
Сайты Von Dutch, Kinder Forografie, Alex Peirce, Web Design Yorkshire, Rodolphe Celestin, 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.