От автора: помните 2015 год? Apple Watch, новый iPhone 6S, новый парк юрского периода. Все это было будто вчера. 2015 год оставил свой отпечаток во всем, в том числе и на веб-дизайне. Какие же тренды веб-дизайна в 2105 году были основными?
Веб-дизайн в этом году продолжал адаптироваться к росту пользователей, заходящих на сайт с мобильных браузеров. На основе моей статьи на сайте UXPin давайте составим топ трендов в веб-дизайне, а также рассмотрим, как можно использовать эти преимущества в 2016 году.
1. Минимализм
Одной из центральных идей веб-дизайна 2015 года стали минималистичные сайты: простота. Полная зачистка сайта кроме основных элементов придаст сайту легкость и сделает для него намного больше, чем данные элементы могут дать вашему сайту – кроме того, увеличивается скорость загрузки страницы, большое преимущество для мобильных устройств. Чем меньше элементов, тем легче сделать дизайн адаптивным.
Как написано в статье Тренды веб-дизайна 2015 & 2016, минимализм это еще одно визуальное преимущество, продвигающее другие направления, например HD фон.
В примере выше на сайте OMEGA только нужные элементы: настройка языка, выпадающее меню и логотип для возврата на главную. Так как больше нет никаких лишних элементов интерфейса, такой подход почти всегда привлекает внимание к основному изображению дорогого товара.
Советы
Экономьте место с помощью выдвигающегося или выпадающего меню
Необычная симметрия сайта сделает его более привлекательным, особенно асимметрия
Бесплатные ресурсы
Галерея одностраничных минималистичных сайтов – сайт-агрегатор одностраничных сайтов
Лучшие минималистичные темы WordPress – удобная площадка для размещения минималистичных шаблонов, хотя не все там бесплатно.
Тренды дизайна: Изящество и Минимализм – набор полезных уроков по минималистичным техникам с 28 примерами лучших дизайнов этого года.
2. Долгая прокрутка
Чем меньше экран, тем дальше крутить. Миф развенчан, сегодня дизайнеры и пользователи признают значение долгой прокрутки: больше пространства для творчества, улучшенная передача основной идеи сайта, усиленное взаимодействие и упрощенная навигация (если сайт достаточно маленький).
Долгий скроллинг хорошо подходит сайтам с большой аудиторией пользователей с мобильными устройствами, а также для сайтов с постоянно обновляющимся контентом. Скроллинг неудобен на сайтах с тяжеловесным медиа, типа видео, загрузка которого отнимает время.
Советы
Пользователь не потеряется на вашем сайте, если на нем будет прилипающее меню или меню с перепрыгиванием на выбранный пункт. Такой тип меню обязателен на сайтах с прокруткой.
Разбавьте процесс прокрутки параллакс эффектами и анимацией.
Не следуйте советам из этих статей Moz article и Quicksprout article, они негативно влияют на SEO оптимизацию.
Бесплатные ресурсы
One Page Love – галерея лучших одностраничных сайтов, обновляется регулярно.
Apple воскрешает колесо прокрутки – статья с сайта TechCrunch анализирует, как Apple Watch могут вдохнуть новую жизнь в сайты с прокруткой.
Как создать сайт с параллакс эффектом – урок из двух частей по основам параллакс дизайна, включая кпрограммирование.
3. Новый Flat Дизайн
Сегодняшний flat дизайн является эволюцией веб-дизайна и противоположен идее скеоморфизма. Новый, более утонченный виток развития flat дизайна — Ryan Allen назвал его Flat Design 2.0 – уделяет больше внимания к деталям:
Световые блики и подчеркивания
Градиенты и/или тени
Большее внимание к деталям
Как и в минимализме, простота это преимущество в flat дизайне. Почти мультяшная графика, разборчивые шрифты и яркие цвета облегчают понимание.
Советы
Кнопки-призраки можно использовать не только во flat дизайне. Так как они прозрачные, то внимание пользователя остается на фоновом изображении. Кнопки дополняют основное изображение.
Простая графика визуально ускоряет загрузку сайта. Отлично работает с адаптивным дизайном.
Бесплатные ресурсы
Тренды дизайна: Эволюция Flat Дизайна – бесплатный набор уроков, содержащий 18 примеров лучших дизайнов этого года.
25 макетов Flat дизайна для различных устройств: Шаблоны flat дизайна под различные устройства.
50 Flat иконок: набор из 50 бесплатных flat иконок с сайта Digital Synopsis.
4. Мощная анимация
Движение привлекает внимание, значит, анимация может повлиять на визуальную иерархию элементов, особенно тех, которые появляются первыми. Более того, анимация показывает связи: представьте анимацию при сжатии окна браузера, как сворачивается меню – анимация показывает, что действие завершилось удачно, а также пользователю предоставляется возможность вернуться на предыдущий пункт меню.
Вылетающее меню, прототип с сайта UXPin, с визуальным редактором идеально. По крайней мере, анимация придает жизни скучным действиям. Если навести курсор мыши на элемент меню, можно заметить, что пункт меню при клике не просто изменяет свой цвет.
Советы
В веб и обычной анимации можно воспользоваться классическими 12 правилами анимации Disney.
Анимация имеет ключевое значение при создании эффекта плавной прокрутки. Более того, анимация во время прокрутки помогает создать более захватывающий и зрелищный сайт.
Анимация во время загрузки помогает пользователю рассчитать время, а также помогает развлечь пользователя, пока он ожидает.
Легкая фоновая анимация, если она ненавязчива и не отвлекает внимание, может добавить энергичности застоявшемуся дизайну.
Бесплатные ресурсы
CSS3 Animation Cheat Sheet – Полезная коллекция готовой plug-and-play анимации позволит с помощью специальных классов применить анимацию к любому элементу.
Web Animation – Постоянно обновляющийся гид по синхронизации и вычислении времени анимации на веб-страницах и в API.
Interaction Design & Animations – Бесплатный 80-ти страничный гид по методам интерактивного дизайна, основанный на 47 примерах лучших дизайнов за год.
5. Яркие цвета
Раньше у веб-дизайнеров было всего 216 безопасных цветов, но сейчас ситуация изменилась, и цветов уже миллионы. Цветовой прогресс удачно совпал с распространенностью HD экранов.
В статье Тренды веб-дизайна 2015 & 2016 говорится, что этот год буквально вспыхнул в красках. Яркие цвета отлично сочетаются с flat дизайном. Кроме всего прочего эти цвета также сочетаются и с другими направлениями веб-дизайна.
Цвета, привлекающие внимание, уменьшают вероятность того, что пользователю станет скучно – недостаток минимализма. В сочетании с типографикой цвета могут привлекать внимание к отдельным фразам. Кроме того, цвета играют важную роль в юзабилити: вспомните, как обычно изменяется цвет карточки при наведении на нее мышки – прямой индикатор интерактивности.
Советы
Каждый цвет ассоциируется с определенной эмоцией, правильно подбирайте цвет, что он соответствовал тематике продукта.
Перед использованием цветовой схемы, разберитесь, как цвет влияет на дизайн.
Бесплатные ресурсы
ColourLovers – Обширное сообщество, постоянно делятся своими цветовыми палитрами и обсуждают теоретические аспекты влияния цвета на дизайн.
Tint UI – подборщик цвета, копирует hex коды цветов. Есть возможность выбора цветовой палитры определенных платформ (Material Design, iOS и т.д.), брендов (Twitter, Firefox) или наиболее популярных цветов.
Тренды дизайна: Живые цвета – Бесплатный набор уроков по техникам цвета, содержащий 22 примера лучших дизайнов за текущий год.
6. HD фон
Дынный тренд был всего лишь вопросом времени, с бурным ростом устройств с высоким разрешением.
HD разрешением считается любое разрешение с плотностью точек на дюйм свыше 200ppi (dpi). Обычное разрешение составляет 72ppi. Изображения с обычной плотностью на HD экранах выглядит размыто, начинают появляться квадратики. HD же изображения смотрятся отлично на мониторах с низким разрешением. Это означает, что пользователи со стандартным дисплеем не заметят разницы, а пользователи с HD заметят.
Советы
Обычно соотношение сторон устройств не совпадает со сторонами камеры 1:1.5, так что придется обрезать изображения. Иначе вы не будете уверенным, какая часть изображения будет обрезана, а какая будет отображаться.
В SVG изображения масштабируются по линиям и точкам; а растровые форматы (.jpg, .png, .gif) масштабируют попиксельно. Используйте SVG для абстрактной графики, а растровый формат для реальных изображений и видео, так как у них фиксированное число пикселей – вот почему важно сначала работать с HD файлами.
Бесплатные ресурсы
Улучшаем качество изображений на Retina дисплеях – советы с сайта Tuts+ по работе с HD дисплеями, в том числе и медиа запросы.
Browser Shots – онлайн тесты на разрешение вашего экрана и возможностей браузера.
20 наборов размытых HD фонов – коллекция бесплатных размытых HD фонов.
7. Выразительные фотографии
Благодаря развитию HD экранов в веб-дизайне начали использовать фотографии высокого качества.
Наиболее часто используются в качестве основных изображений – одна фотография, заполняющая все пространство. Основные изображения отлично привлекают внимание пользователей и прекрасно подходят для лендинг страниц и страниц авторизации.
Советы
Сочетайте стоковые фотографии с заказными так, чтобы первые смотрелись, как заказные – к примеру, сочетание элементов темы и ваших элементов дизайна.
Бесплатные сервисы стоковых фото Unsplash, Pixabay, Pexels.
Поэкспериментируйте с наложением цветовых фильтров на изображения. К примеру, желтый оттенок придаст серому фото оптимистичности.
Фото товаров в естественном окружении повышают продажи в отличие от стандартных фото. Фотографии в естественном окружении создают ощущение, какого это владеть данным продуктом.
Бесплатные ресурсы
10 ошибок при использовании стоковых фотографий — статья с сайта Design Shack рассказывает про 10 распространенных ошибок при использовании стоковых фотографий.
TinEye Reverse Image Search – Инструмент, с помощью которого можно узнать, с какого сайта взято фото.
The Ultimate Guide to Beautiful DIY Photography – гид для начинающих по созданию веб-фотографий.
8. Динамическая типографика
С тех пор, как исчезла проблема с рендерингом и с появлением новых, бесплатных шрифтов, типографика стала играть большую роль в веб-дизайне.
Динамическая типографика это не всегда дикие и сложные шрифты – наиболее распространены обычные шрифты, хорошо сочетающиеся с минималистичным и flat дизайном. Динамическим шрифтом можно назвать любой шрифт, привлекающий к себе внимание, будь то простой или сложный шрифт, огромный или миниатюрный.
Советы
В большинстве случаев на одном сайте достаточно двух шрифтов. Для разнообразия можете поиграться с большим количеством шрифтов, однако следите, чтобы они были из одного семейства.
Помните основную задачу шрифтов – четкость и разборчивость текста. Если шрифт нечитаемый, то совершенно не важно насколько он необычный.
Динамическая типографика может сделать из текста конфетку. Часто можно встретить страницы с красивым текстом поверх большого центрального изображения.
Бесплатные ресурсы
Тренды в дизайне: Драматические шрифты – бесплатный гид по технике шрифтов, содержащий 21 пример лучших дизайнов за этот год.
Awwwards Typography in Web Design Gallery – топ сайтов с лучшей типографикой, постоянно обновляется.
Топ 41 лучших шрифтов за 2015 — Elegant Theme избавил вас от поиска из тысячи шрифтов и составил список лучших за год.
9. Полнейшее взаимодействие
Преимущества HTML5, CSS, Javascript и jQuery позволяют добиться полного взаимодействия с пользователем, что повышает рейтинги продаж. Данный тренд развивался с появлением таких возможностей, как:
Элементы, по которым можно кликнуть, или провести пальцем
Push уведомления
Использование персональных данных (геолокация)
Контроль отображения контента
Навигация на основе прокрутки страницы
Плавные переходы и циклические функции
В этом году также развивалось и микровзаимодействие, т.е. звук при отправке email или анимация, привлекающая внимание к новому уведомлению.
10. Карточный макет
И завершает десятку очередной тренд на мобильных устройствах. С помощью карточного макета веб-приложения и сайты могут отображать значимый контент в понятной, хорошо организованной форме. По такому макету очень удобно перемещаться, особенно при редиректе на сторонние сайты. Из-за своей способности изменять количество рядов и колонок под различные размеры экранов данный макет отлично вписывается в адаптивный дизайн.
Советы
Кликабельной должна быть вся карточка, а не только изображение или текстовые ссылки. По закону Фиттса такой подход улучшает взаимодействие.
Расстояние между карточек, «канавки» должны быть четко определены. Не заставляйте пользователя играть в угадайку.
Бесплатные ресурсы
Как создать карточный интерфейс с помощью Sketch App 3 – урок по созданию простого карточного макета при помощи Sketch (перспективное дизайнерское приложение).
10 примеров Material Design карточек с помощью CSS и HTML – ресурс с готовыми Material Design карточками.
Техники дизайна: Карточки и минимализм – бесплатный гид по карточному интерфейсу и минималистичным методам, 43 способа применения.
Заключение
Основная задача это слушать ваших пользователей и использовать тренды на основе их запросов. Не надо пытаться использовать все подряд только ради того, что бы «быть в моде». Эти тренды подходят на для всех сайтов, поэтому всегда отталкивайтесь от предпочтений пользователей.
Если у вас есть желание более подробно изучить основные направления веб-дизайна, прочтите бесплатный гид на 185 страниц Web Design Trends 2015 & 2016. В нем представлены все 10 техник, описанные в сегодняшней статье. Кроме того, в гиде содержатся еще масса других лучших практик и более 100 бесплатных ресурсов.
Прочтите о том, как пользоваться данными трендами. В книге представлено более 160 примеров с такими сайтами, как Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas и т.д.
Автор: Jerry Cao
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (3)