Веб-дизайн находится в постоянном движении: каждый год он развивается и меняется под воздействием различных факторов, приобретая новые интересные инструменты и оставляя позади все старое и неактуальное.
Этот год можно охарактеризовать тем, что одной из причин развития дизайна является растущая распространенность мобильных устройств и планшетов, появление HTML 5. Но давайте подробнее рассмотрим тенденции веб-дизайна 2013 года.
Начинать стоит с новых и популярных типов сайтов.
Адаптивный дизайн
Повсеместное использование всевозможных планшетов, смартфонов и других мобильных устройств привело к появлению адаптивного дизайна.Имея разное разрешение экрана, они заставляют современных веб-дизайнеров задуматься об универсальном сайте, который одинаково хорошо выглядел бы на всех устройствах.
Адаптивный дизайн автоматически подстраивается под любое разрешение и обеспечивает максимальное восприятие пользователем любой информации без потери ее функциональности.
При разработке адаптивного веб-сайта необходимо обратить внимание на два основных момента, а именно: как сайт будет вести себя при разных разрешениях и какой контент на каких устройствах отображать.
Разрешение При разработке адаптивной сетки дизайна используется технология медиазапросов.
Что это такое? Эта технология позволяет указать определенные условия (стили), при которых сайт адаптируется к разрешению монитора используемого вами устройства или окна браузера, изменяя при необходимости ширину макета, количество столбцов, размеры изображений и текста.
Медиа-запросы ограничивают ширину макета, и при достижении определенного значения применяется указанный стиль элемента.
Вы можете сами попробовать поэкспериментировать с размером окна браузера на веб-сайтах.
Риджент-Колледж , Узкие Галстуки , UX Лондон и посмотреть, куда это приведет. Содержание Контент всегда имеет особое значение, и особенно это касается адаптивного дизайна, ведь у нас нет двух версий (мобильной и десктопной), поэтому на этапе дизайна нам нужно понять, какой контент отображать.
Самое главное, чтобы в процессе адаптации сайт не терял своей функциональности, а отображаемый контент максимально быстро приводил человека к желаемому результату.
В мобильной версии сайта информация должна быть представлена лаконично и четко.
Для этого дизайнеры используют ряд методов:
1. Замена части текстовой информации видео или картинками;
2. Упрощение навигации;
3. Создание более емкого контента;
4. Понятное описание товара;
5. Упрощение функционала (избавление от ряда мелких элементов) и т.д.
Одностраничные сайты («Слоенки»)
Одностраничные сайты также стали очень популярны.
Такие сайты имеют ряд характерных особенностей, которые также являются новыми тенденциями в веб-дизайне:
1. Сайт без перезагрузки страницы;
2. Использование вертикальной и горизонтальной прокрутки;
3. Один экран – один раздел сайта;
4. Исправлены ключевые элементы (шапка, корзина, соцсети);
5. Использование крупных шрифтов;
6. Большие тематические иллюстрации;
7. Использование картинки в качестве фона;
8. Большие кнопки;
9. Разделительные экраны (с разными фоновыми изображениями, всевозможными линиями, заливками, градиентами, тенями);
10. Анимации с использованием технологий CSS3 и HTML 5.
Среди одностраничных сайтов можно назвать Д'Анджелико , Фонд предпринимательства , Тег Творческая студия И Снипкарта
Модульные сетки
На таких сайтах основным элементом дизайна является модульная сетка.Кроме того, для них характерны блоки разного размера и бесконечная загрузка контента (один из приемов, позаимствованных из социальных сетей).
Чтобы посмотреть, как выглядит модульная сетка, рекомендуем посетить следующие сайты: Лотта Ниеминен , Жизнь а ля свежая , Бенеттон , МАМО , DНабокс.
com , Ленгленд .
Стили в веб-дизайне
Современное интернет-пространство пестрит разнообразием стилей в дизайне сайтов.Однако нам все же кажется возможным выделить основные направления.
Рассмотрим подробнее некоторые стили.
Минимализм Минимализм – самое популярное направление среди многих дизайнеров.
Обычно на сайтах в минималистическом стиле стараются сосредоточить внимание пользователя на чем-то конкретном, т.е.
рисуется какой-то отдельный элемент, отличающийся от всего остального (картинка в центре экрана, или крупная надпись).
Яркими представителями минималистического стиля являются сайты.
Кожаная компания Eastworks , Весь И Лапка .
К характерным чертам минимализма относятся: 1. Простота и ясность; 2. Минимум графических элементов; 3. Функциональный интерфейс; 4. Черно-белый цвет; 5. Минимум теней.
Плоский дизайн Не менее популярен и близок по стилю к минимализму.
Плоский дизайн основан на двухмерном стиле.
Основная идея этого стиля – передать геометрию элемента только с помощью цветов, без каких-либо других способов добавления глубины: теней, фасок, рельефов, градиентов.
О том, как это выглядит на практике, можно узнать на таких ресурсах, как Башня заклинаний , LayerVault , Ага! Каждый элемент пользовательского интерфейса должен восприниматься однозначно, а взаимодействие с такими элементами должно быть интуитивно понятным для пользователей.
Характеристики: 1. Никаких дополнительных эффектов; 2. Использование простых фигур; 3. Контрастные цвета; 4. Сосредоточьтесь на типографике.
Кроме того, существует такой тип дизайна, как «почти плоский».
Почти плоский дизайн использует методы плоского дизайна, но при этом к некоторым элементам добавляются дополнительные эффекты.
Например, кнопки содержат дополнительные градиенты или тени.
Дизайнеры обычно выбирают эффект и применяют его ко всем элементам «почти плоского» дизайна.
Веб-сайт Микспанель пример этого.
Дизайн метро Обычно он позиционируется как легкий, простой, быстрый и открытый.
В целом этот стиль похож на плоский дизайн.
Он также использует качественную типографику, простые элементы и хорошо продуманный контент. Отличительные особенности дизайна метро – ссылки не подчеркнуты, а для визуализации информации используются разноцветные и равномерно заштрихованные навигационные квадраты.
Вы можете убедиться в этом сами: Уровень блока , Майкрософт СВИТ , травить .
Нестандартная геометрия Нестандартная геометрия также приобрела популярность в этом году.
В основном его можно увидеть во всех элементах сайта (фонах, бликах, отдельных элементах).
К счастью, теперь это можно сделать в HTML5 и CSS3. Самые модные геометрические формы элементов — круг, ромб и шестиугольник (соты), реже встречаются треугольники: Построен Буффало , V2 , AmplifiQEstudio .
Винтаж (стиль ретро) Стиль ретро взят из эпохи 50-80-х годов из афиш, афиш и прочей атрибутики того времени.
Довольно часто дизайнеры, вдохновленные такой работой, рисуют сайт в стиле ретро.
Популярные элементы дизайна включают в себя: 1. Использование фактур (в частности, бумаги всех ее видов – печатной, рваной, пожелтевшей – или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины; 2. Декоративные элементы (рамки, узоры, флажки, ленты, линии – двойные, тройные); 3. Ретро цвета (не насыщенные, но приглушенные); 4. Характерная, сложная типографика (плакатные шрифты).
Веб-сайты Фон Датч , Детская форография , Алекс Пирс , Веб-дизайн Йоркшир , Родольф Селестен , Тейшидо прекрасно демонстрируют использование стиля ретро в дизайне.
Последнее, на чем хотелось бы остановиться, обсуждая тему основных тенденций веб-дизайна, — это характерные элементы, присутствующие на сайтах в 2013 году.
Не такая уж новая тенденция, но тоже довольно распространенная в современной веб-среде — параллакс .
Параллакс создает на сайте ощущение глубины, в результате чего создается иллюзия трехмерного пространства: Спицы , iUtopi , Минерва .
Подобный эффект достигается перемещением нескольких слоев относительно друг друга с разной скоростью.
Фиксированное меню , является следствием распространения сайтов с вертикальной прокруткой: дизайнеры поняли, что пользователю будет неудобно каждый раз возвращаться наверх, чтобы перейти в другой раздел или выполнить какие-либо ключевые действия.
Именно поэтому главное меню стало закрепляться вверху, на протяжении всего времени прокрутки сайта.
Помимо меню, фиксируются основные элементы сайта (например, в случае интернет-магазина этим элементом будет корзина).
Подобное меню используется на сайтах Эяль Шахар , Интерактивное взаимодействие И Райан Шерф .
Полноразмерные фотографии и видео в качестве фона.
, по сути, оказывают вау-эффект, привлекая внимание посетителя сайта: Пятьдесят три , думаю, Люк .
Просматривая видео в фоновом режиме, пользователь может заинтересоваться и продолжить работу с сайтом: МедиаБум , Orange.com , Сила внутри .
Большая дизайнерская типография.
Еще не так давно технологии еще не позволяли широко использовать нестандартные шрифты, и большинство сайтов ограничивались Arial, Tahoma и Trebuchet. С появлением шрифтов от Google арсенал веб-дизайнеров пополнился примерно 30 шрифтами, которые были оптимизированы самим Google и которые при желании можно легко подключить к своему сайту.
Однако времена меняются.
Современные методы верстки позволяют использовать практически любой нестандартный шрифт. Причем шрифтовые сочетания используются как в виде шрифтов, так и в виде красиво нарисованных картинок.
Примеры активного использования нестандартных шрифтов можно увидеть здесь: Амази Лабс , Дениз Чендлер , Райан Шерф .
Еще одна тенденция, которая перешла в Интернет с мобильных устройств, — это большие кнопки интерфейса.
«Кликни и коснись» среди различных гаджетов становится все более популярным, поэтому большие кнопки «переходят» в веб-дизайн.
Хотя огромные кнопки значительно облегчают нажимание на них, они содержат много графики, которая замедляет скорость загрузки страниц, поэтому создателям сайтов приходится находить способы реализовать свои идеи без потери качества изображения и скорости загрузки сайта.
Активно решается проблема использования больших кнопок.
УльтраКлиника , Подарочная карта онлайн , Предварительно составленные сенсорные жесты , КУЛЬТ Студия , Символы .
Ненавязчивый фон.
В 2013 году веб-дизайнеры стали уделять большое внимание фону сайта, в частности, всевозможным текстурам: они с одной стороны минимальны и ненавязчивы, с другой — прихотливы.
Посмотреть примеры использования ненавязчивых фонов можно на следующих сайтах: Мангровые заросли , Тейшидо , 5Портные .
QR-коды.
Еще один элемент, перекочевавший из мобильной сферы в веб-сферу.
Хотя не только в этом: теперь эти коды можно увидеть повсюду, в том числе и на сайтах.
Основная функция кода – привлечь внимание посетителя.
Анимация с помощью CSS 3 и HTML 5. Теперь, с развитием этих технологий, дизайнеры могут легко создавать различные эффекты: деформацию, течение, раскрытие, плоскости и многие другие, и творческие люди этим активно пользуются.
В Интернете существует множество сайтов, которые уже содержат готовые анимационные решения с превью и кодом для вставки на свой сайт. Если вы хотите увидеть, как выглядит анимация с использованием CSS 3 и HTML 5, перейдите сюда: WWF , Правило трех , Зарождение , ИнТакто10 , RailUp , Агент 008 Болл .
В заключение хотелось бы сказать, что влияние мобильных устройств на веб-индустрию, безусловно, продолжится: с развитием интернет-технологий появятся еще более интересные инструменты, которыми будут активно пользоваться дизайнеры.
Но теперь существующий набор инструментов позволяет дизайнерам создавать поистине уникальные и ни на что не похожие веб-шедевры, привлекающие внимание тысяч пользователей.
Материал подготовил Николай Лисов, веб-дизайнер Astra Media Group. Теги: #дизайн #веб-дизайн #Интернет #сайты #сайт #веб-дизайн
-
Испытайте Windows 8 На Своем Рабочем Столе
19 Oct, 24 -
Распространенные Мифы Об Интернете
19 Oct, 24 -
Введение В Параллельные Вычисления
19 Oct, 24 -
Моды Прошивок Для Всех!
19 Oct, 24 -
Новости Codeigniter — Скоро Версия 2.0
19 Oct, 24 -
Эксперименты Ханкина
19 Oct, 24
