Тенденции возникают исходя из потребностей общества. В современном мире огромную популярность имеют мобильные устройства. С каждым годом пользователей "умных" гаджетов становится всё больше, а разработчики сайтов всё чаще стараются учесть их потребности. Адаптивность дизайна теперь не "роскошь", а необходимость и обязательное условие качественного веб-ресурса. Каждый, кому доводилось сталкиваться с неадаптивными сайтами на мобильных устройствах, подтвердит, что это сильно и, возможно, навсегда отбивает желание посещать неудобный сайт. Ведь это и неполное отображение контента (часто урезанное или "съехавшее"), и отсутствие некоторых важных элементов (например, кнопок), и слишком мелкие и близкорасположенные ссылки, при нажатии на одну из которых, обязательно открывается совершенно другая. Масса неудобств неадаптивного дизайна обусловила не просто главную тенденцию 2015-2016 года, но и создала новый постулат веб-разработки. Отныне каждый уважающий себя веб-дизайнер обязан создавать удобные, адаптивные сайты. На рисунке 1 показан пример адаптивности сайта к экранам с различным разрешением. Элементы в зависимости от размера окна корректируют свой размер, то есть макет сайта является гибким. Таким образом, на мобильном устройстве мы видим тот же сайт, что и на компьютере или ноутбуке, но уже подстроенный под размер экрана смартфона или планшета. Кнопки управления на таком сайте одинаково удобны и для пользователей компьютера (они имеют привычный размер), и для пользователей мобильных устройств (кнопки увеличиваются до размера, позволяющего с легкостью использовать их на сенсорных экранах). Также разработчики многих адаптивных веб-ресурсов уменьшают размер картинок или убирают их совсем - для быстрой загрузки сайта мобильным Интернетом.

Рисунок 1. Пример адаптивности сайта. Слева изображена страница сайта при разрешении экрана монитора 1024х700, а справа - при разрешении экрана мобильного телефона 360х640 (при вертикальном положении устройства).

2. Длинная страница вместо ссылок

Продолжая тему об удобстве пользования сайтом на мобильных устройствах, нельзя не отметить самую заметную тенденцию 2015 года - одна длинная страница вместо ссылок на несколько страничек. Это обусловлено интуитивно понятным движением "перелистывания" пальца человека по сенсорному экрану вместо нажатия по многочисленным ссылкам. Причем страница может быть длинной и листаться вниз, а может быть равной размеру экрана (в длину) и иметь стрелочки сбоку для перелистывания контента направо-налево. Поэтому так называемые "landing-page", то есть длинные "продающие" страницы будут актуальны и в 2016 году.

Название "продающие" длинные страницы получили за то, что они отлично подходят для рекламы бизнеса в Интернете. Landing-page позволяет наилучшим образом представлять информацию о компании, выделять ее преимущества и побуждать работать именно с этой фирмой. Структура примера "продающей" страницы показана на рисунке 2. Данный landing-page состоит из 7 типичных для этого вида сайтов блоков. В первом блоке помещают логотип фирмы, название и контактную информацию (адрес, телефон, электронная почта). Второй блок первым бросается в глаза пользователю, здесь размещают изображение или короткий видео-ролик, подсказывающий пользователю о тематике бизнеса. Например, фирма, занимающаяся изготовлением мебели на заказ, может разместить здесь одну или несколько сменяющих друг друга фотографий мебели в высоком разрешении. Третий блок призывает покупателя совершить какое-либо действие. Например, сделать заказ или связаться с представителем компании. В четвертом блоке размещают кнопку, которая позволяет совершить действие, призыв о котором был в блоке выше. Под цифрой 5 на схеме выделен блок уникального предложения, призванный заинтересоать покупателя выгодой: акции, скидки, подарок за покупку. В шестом блоке фирмы выкладывают своё портфолио: сделанные ранее работы; товары; услуги и т.д. Под цифрой 7 на рисунке 2 показан блок отзывов - здесь компаниии размещают хорошие отзывы клиентов, сертификаты качества, грамоты и прочие доказательства конкурентоспособности. Так выглядит стандартная схема длинных страниц. Она не содержит лишних ссылок, неважной информации и поэтому привлекательна для пользователей.

Рисунок 2. Структура landing-page.

3. Минимализм с ярким акцентом

Если трендом веб-дизайна 2014 года был минимализм, то сейчас, в середине 2015 года, к нему добавился яркий акцент. Акцентом в данном случае является картинка или видео в хорошем разрешении. Самое главное правило - не перегружать дизайном сайт. Один акцент, который привлекает внимание и передает главную идею сайта, и минимальный набор текста и кнопок, которые должны отлично сочетаться с акцентом, не переводя лишнего внимания на себя. На рисунке 3 показан пример веб-страницы в стиле минимализм с ярким акцентом.

Рисунок 3. Пример веб-страницы в стиле минимализма с ярким акцентом. Акцентом в данном случае является изображение в высоком разрешении, которое привлекает на себя внимание, но не перегружает пользователя лишними элементами дизайна.

4. Прозрачные кнопки

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

Рисунок 4. Пример страницы с прозрачной кнопкой "Регистрация". Главной на этой странице является кнопка "Войти", поэтому на нее сделан акцент цветом. Второстепенная кнопка "Регистрация" прозрачная с цветной рамкой, чтобы эта кнопка не отвлекала на себя внимание, но при необходимости была заметна.

5. Материальный дизайн Google

Material Design [2] - это разработка корпорации Google, которая, по словам самих разработчиков, представляет собой визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями науки и техники.

Основные принципы материального дизайна: интуитивное общение с техникой; визуальные подсказки, основанные на реальности (бумага и чернила, свет, поверхность); пространство, масштаб; акцент на действия пользователя; единая среда, непрерывность действий. И всё это не нарушает принципов минимализма, а является его продолжением и улучшением.

6. Типографика