Современное интернет-пространство пестрит разнообразием стилей в оформлении сайтов. Однако выделить основные направления нам все же представляется возможным. Остановимся подробнее на некоторых из стилей.
МинимализмМинимализм является популярнейшим трендом среди многих дизайнеров. Обычно на сайтах в стиле минимализм внимание пользователя стараются сфокусировать на чем-то конкретном, т.е. рисуется какой-то отдельный элемент, отличный от всего остального (картинка в центре экрана, или большая надпись). Яркими представителями в стиле минимализм являются сайты
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.