Отказ от гамбургера. Что влияет на тренды в веб-дизайне

Генеральный директор агентства Empirical Proof Крис Лейк собрал в одном материале тренды в веб-дизайне 2016 года.

Гомогенизация

По словам Криса Лейка, на смену тренду «дрибблизации» дизайна приходит стандартизация. Все сайты в 2016 году всё больше будут похожи друг на друга.

Паттерны вместо страниц

Современные дизайн-команды уже перешли на новый принцип работы - сначала разрабатываются UI-компоненты, а затем на их основе страницы сайта или сервиса. В 2016 году на этот принцип работы перейдет большая часть команд по всему миру.

Анимация

По словам Лейка, CSS, HTML5 и jQuery уже позволяют создавать полноценные анимационные эффекты - не хуже, чем во Flash. Пока не все дизайнеры научились использовать анимацию в интерфейсах - так, чтобы она не мешала пользовательскому опыту.
Однако в 2016 году появится больше удачных примеров в использовании анимационных эффектов.

Насыщенные цвета и палитры

Насыщенные цвета и неоновые палитры станут трендом 2016 года. Пример - сайт Bloomberg.

Другой пример - редизайн логотипа Medium, представленный командой сервиса в 2015 году. Дизайнеры использовали ярко-зеленую палитру.

Еще один пример - Spotify.

Размытие изображения

Инженеры Facebook используют эффект размытия и масштабирования при загрузке изображений страницы. Таким образом пользователь может увидеть картинку еще до того, как она полностью скачается на компьютер. По словам разработчиков Facebook, это ускоряет время загрузки страницы на 30%.

Загрузка структуры страницы

Facebook использует еще один прием при загрузке сайта - отображение структуры страницы еще до появления контента. Пока страница загружается, посетители знакомятся с оформлением ресурса, вместо того, чтобы разглядывать белый экран или какой-нибудь индикатор на AJAX.

Этот приём получит более широкое распространение в 2016 году.

Scrolljacking

Scrolljacking - прием, когда контент изменяется по мере движения скрола мыши. Например, такая механика используется на сайте Apple:

Однако, по мнению многих дизайнеров, этот прием не всегда удобен для пользователей, так как контент изменяется не синхронно движению скрола мыши. Из-за этого в использовании интерфейса может возникать дискомфорт.
Лейк также отмечает, что в 2016 году появится всё больше страниц с обилием эффектов и анимаций - на таких сайтах пользователям будет всё сложнее взаимодействовать с интерфейсом.

Пассивно-агрессивные всплывающие окна

Несмотря на недовольство дизайнеров и специалистов по UX, всплывающие окна вновь заполнили интернет - формы подписки на email-рассылку, предложения подписаться на социальные сети компании, скидки и прочее.
В 2016 году, по мнению Лейка, ситуация не улучшится - маркетологи по-прежнему часто будут использовать этот прием для своих целей.

Отказ от гамбургера

В 2016 году дизайнеры начнут отказываться от использования иконки «гамбургера», за которой спрятаны пункты меню, в пользу «видимых» элементов.
Например, Youtube уже перешел от «гамбургера» на горизонтального меню с «табами».

Тяжелые страницы станут тяжелее

В 2010 году средний размер одной страницы составлял 702 КБ, в 2015 году - 2219 KB. Рост более чем в три раза. И, похоже, что никто не задумывается об ограничении этого роста. Например, главная страница The Daily Mail весит 8,8 MB.
Это, как пишет Лейк, плохо сказывается на мобильных пользователях - скорость мобильного интернета не всегда позволяет просматривать такие «тяжелые» сайты.

Некоторые тенденции в веб-дизайне сменяются от года к году, другие же остаются актуальными длительное время. Приводим полный перечень дизайнерских трендов текущего года с описаниями и рекомендациями к использованию.

Если вы не опережаете время, то неизбежно отстаёте.

Добро пожаловать в путеводитель по тенденциям веб-дизайна 2016 года!

Описывая каждый из трендов, мы будем пояснять, почему он работает и как вы лично сможете овладеть им. Также мы приведём более 40 примеров сайтов таких компаний, как Intercom, Google, Beoplay, Sennheiser и других.

План нашего обзора следующий:

1. Введение

2. Микровзаимодействия

4. Минималистичный дизайн

5. Гибрид плоского и материал-дизайна

6. Сочные анимации

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

8. Яркие цвета

9. Длинный скроллинг

10. HD графика

11. Иллюстрации

12. Выводы

Давайте же начнём без проволочек с изучения того, как крошечные взаимодействия могут создать незабываемые впечатления для посетителей.

Микровзаимодействия

Решающее значение в мобильном дизайне приложений играет оформление микровзаимодействий в потоке более серьёзных действий. Они обычно выглядят настолько незначительными, что пользователи решаются выполнить их вообще без раздумий.

Включение/отключение оповещений, смена цвета кнопки при нажатии, звуковые уведомления, говорящие о поступлении нового комментария к вашей картинке либо чему-то ещё – все эти мелкие вещи складывают общую картину в глазах пользователя, формируют впечатление от использования приложения.

Выгоды от качественного оформления микровзаимодействий

• Вы сможете быстро обучить пользователей взаимодействию с вашим продуктом;
• Связь статуса, изменений и возможности привлечения внимания к определённым областям;
• Обеспечение обратной связи по итогу завершённых действий;
• Добавление приятных элементов, которые не будут отвлекать от получение основного опыта взаимодействия с продуктом;
• Укрепление позиций бренда эксклюзивностью интерфейса;
• Удовлетворение ожиданий пользователей (микровзаимодействия являются нормой для многих сайтов и приложений). Наверняка, в вашем продукте они также будут ожидаемыми.

1. Формируем привычку у пользователей.

Микровзаимодействия являются ключевым компонентом для выработки привычек у посетителей. Этот процесс состоит из трёх элементов:

• Сигнал (микровзаимодействие) – триггер, инициирующий действие;
• Повторяющиеся действия – знакомый пользователю порядок действий;
• Награда – результат завершения действий.

К примеру, красный прямоугольник и белый значок (триггер) в Facebook указывают на наличие нового сообщения. Пользователь совершает рутинное действие, нажимая на значок для того, чтобы пообщаться со своим другом (вознаграждение). Через некоторое время пользователь, видя подобные вещи, автоматически совершают требуемые от них действия. Чем выше награда (мотивация), тем более сильной привычка становится.

2. Дизайн для частого использования.

Поскольку мы хотим сформировать привычку использования нашего продукта, нужно проработать дизайн элементов, которые будут часто использоваться. То, что поначалу может выглядеть интересно и мило, со временем может стать надоедливым, устареть после сотен циклов повторения действия. Старайтесь пресечь в зародыше вероятность такого эффекта.

3. Сделайте для триггеров общий визуальный ряд с интерфейсом продукта.

Старайтесь создавать сходные по дизайну элементы микровзаимодействий с общим интерфейсом. К примеру, одного и того же цвета, с применением одних и тех же анимаций, форм и т. д. Согласованность дизайна повышает степень узнаваемости и укрепляет индивидуальность бренда. К примеру, в New York Times используют собственный логотип в качестве загрузочной анимации. Фирменный узнаваемый стиль, который ни с чем другим не спутаешь.

4. Используйте анимации.

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

5. Избегайте нежелательных взаимодействий.

Распространённой ошибкой является перегрузка интерфейса большим количеством микровзаимодействий. Для начала разработайте их набор лишь для базовых функций и посмотрите на реакцию ваших пользователей. Наиболее частыми точками взаимодействия в дизайне являются:

• Экраны загрузки;
• Анимированные иллюстрации, которые активируются при наведении курсора мыши.

Позитивный пользовательский отклик на анимацию базовых элементов является сигналом для добавления большего их количества.

6. Используйте юмор в ваших текстах.

Микровзаимодействия вроде кнопок с призывом к действию или других интерактивных объявлений (страниц ошибки 404, например) будут более эффективны, если в них внести вкрапления юмора. Можете даже использовать запись человеческого голоса в некоторых местах.

Карточки

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

4. Загрузочные анимации скрашивают ожидание.

Если у вас нет возможности убрать загрузочный бар страницы либо же сократить время ожидания, интересная анимация поможет облегчить этот процесс в глазах пользователя.

Вместо использования традиционных загрузочных баров с отображением прогресса загрузки в процентах, попробуйте предложить своей аудитории нечто более вкусное и творческое. Конечно, наилучшим выходом из ситуации является оптимизация сайта. Использование загрузочного бара – крайний вариант. Если уж никак без него не обойтись, то лучше украсить рутинный процесс анимацией.

Типографика

Более высокие разрешения девайсов, быстрые Интернет и наличие доступа к новым библиотекам веб-шрифтов(Google Fonts , Adobe Typekit и т. д.) делают из нашего времени золотой век типографики.

Преимущества качественной типографики

• Выросшее разрешение экранов предоставляет больше возможностей для реализации интересных типографических идей;
• Возможность подчеркнуть уникальность бренда, сделать его узнаваемым за счёт используемого шрифта;
• Усиление влияния текстового контента;
• Инструмент для выстраивания визуальной иерархии элементов, особенно это важно для выделения CTA (call to action) инструментов.

Принципы использования

1. Чёткость превыше всего.

Никогда не жертвуйте чёткость ради «лучшего» шрифта – типографические стили не работают, если вы не можете прочесть написанное.

2. Простой, но впечатляющий шрифт.

Простая типографика легче читается и быстрее грузится, не говоря уже о том, что она необходима для оформления минималистических стилей. Обратите внимание на следующее:

Увеличение размера шрифта;

Контрастируйте цвет шрифта и окружающего его фона;

Используйте жирный шрифт в ключевых местах.

Не следует путать понятия «впечатляющий» и «цветистый». Простые шрифты помогают донести мысль уверенно и ясно.

3. Сложные и простые шрифты: Serif против Sans Serif.

Убедительных доказательств того, что один из них всегда разборчивее другого нет. Это просто вопрос стиля, не более того. Сложные шрифты делают текст более богатым, формальным, а простые хорошо сочетаются с минимализмом оформления.

Популярные sans serif шрифты:

1. Proxima Nova
2. Futura
3. Avenir
4. Open Sans
5. Helvetica Neue
6. Популярные serif шрифты:
7. Caslon
8. Garamond
9. Freight Text
10. Minion
11. FF Meta Serif

5. Наложение рукописных шрифтов.

Такие шрифты являются хорошим дополнением для тех, кто желает создать «домашний» стиль. Поскольку разборчивость такой типографики находится под очень большим вопросом, ограничивайте её использование большими названиями, наложенными на изображения.

6. Текст, уходящий за рамки обозначенного пространства.

Одним из лучших способов обратить внимание на текст является его накладывание на другие элементы с выходом за их рамки. Часть слова или целое словом могут выходить, к примеру, за пределы изображения, накладываясь на соседнюю область. Это смешивает экран в единое целое и выглядит эффектно, а иногда даже эпатажно.

7. Шрифты по умолчанию.

В большинстве случаев не стоит использовать более двух семейств шрифтов. Если хотите разнообразить контент, меняйте размеры и типы шрифтов в рамках одного семейства.

Яркие цвета

На протяжении 2015 года мы опознали тенденцию ко внедрению ярких красок. В 2016 году это направление продолжило набирать обороты. Дальше популярность ярких красок будет лишь расти. Используйте больше палитр и оттенков, если желаете идти в ногу с модой.

Преимущества использования ярких цветов

• Различные оттенки и градиенты цветов помогут лучше различать содержимое, которое они выделяют;
• Использование визуальной стимуляции особенно полезно для небольших сайтов.

1. Дуотон.

• Использование двухцветной гаммы само по себе является трендом и будет ещё долго популярным наряду с внедрением ярких цветов.
• Понятно, что дуотон является комбинацией цветовой гаммы двух цветов. Это могут быть оттенки одного и того же цвета либо же вовсе противоположные тона.
• В веб-дизайне дуотон часто используется для лучше представления изображений и фотографий. Выглядит захватывающе и современно.
• Имейте ввиду следующие моменты:
• Используйте простые фотографии с ярко выраженной единой тематикой. Насыщенные элементами изображения (к примеру, пейзажи) могут быть плохо различимыми, особенно на мобильных экранах;
• Контрастный дуотон позволяет легче различать детали фотографии;
• Отделите фотографию от остальной области просмотра красочными границами или полноэкранной прокруткой;
• Используйте чёткие изображения с ясно различимыми границами объектов на них.

Точно так же дуотон часто используется для наложения на фото, как показано на примере ниже.

2. Наложение.

Другой интересной тенденцией использования ярких цветов является их наложение на фотографии.

Наложенный цвет усиливает значимость изображения, желание рассмотреть его детали. Цвет поможет изменить интерпретацию фото. Например, красная накладка сделает картинку более живой и назойливой, в то время как синяя создаст спокойное ощущение от увиденной сцены.

3. Эффектные градиенты.

Смешиваемые друг с другом цвета с постепенным увяданием тона – популярный выбор многих современных дизайнеров. Не нужно брать для смешения более 2 или 3 цветов – это лишнее.

4. Выделите ключевые слова и кнопки.

В монохромных текстах используйте яркие цвета для выделения слов и фраз вроде «бесплатно», «сегодня» и т. д. Это придаст им дополнительный вес, увеличив силу внушения.

В том же духе вы можете сделать некоторые кнопки больше по размеру, чем другие, не забыв выделить их красочной границей или фоном. Это отлично работает.

5. Изменение состояния элемента при наведении курсора.

Как мы уже упоминали, говоря о карточках, цвета – идеальный инструмент для дифференциации элементов. Изменение цвета при наведении курсора мыши – верный и простой способ визуальной коммуникации, увеличивающий степень интерактивности сайта или приложения.

6. Используйте правильный цвет для вызова желаемой эмоции.

Различные цвета вызывают разные эмоции. Приведём небольшую шпаргалку для некоторых часто используемых на сайтах цветах:

• Красный – передаёт ощущение страсти и осторожности одновременно. Этот цвет увеличивает интенсивность циркуляции крови;
• Синий – создаёт ощущение спокойствия и стабильности, поэтому часто используется при оформлении сайтов различных финансовых институтов;
• Зелёный – задаёт хороший баланс между тёплыми и холодными цветами, передаёт ощущение натуральности, чистоты и достатка;
• Фиолетовый – исторически ассоциируется с чем-то царственным, создаёт ощущение роскоши и тайны;
• Белый – идеальный нейтральный цвет, который в паре с другими цветами передаёт ощущение элегантности, усиливая эффект от последних;
• Чёрный – утончённый и мощный цвет, который всегда актуален для использования в любых типах проектов.

Длинный скроллинг

Сайты с длинным или бесконечным скроллингом быстро завоевали своё место в качестве константы в веб-дизайне.

Особенности использования длинной прокрутки

• Отлично подходит для мобильных устройств. Меньшие экраны приводят к необходимости частого скроллинга, а сам формат хорошо сочетается с сенсорным управлением;
• Удобная повествовательная форма, в которую таким образом погружают контент, способна заинтересовать посетителей;
• Упрощение навигации;
• Бесконечная прокрутка добавит элемент неожиданности к пользовательскому опыту.

1. Используйте визуальные сигналы.

Значок вроде стрелочки, указывающий на направление прокрутки и находящийся за пределами области контента, будет выглядеть уместно и информативно. Даст понять, сколько ещё осталось скроллить до конца страницы и оповестит о линейной выкладке контента.

2. Экраны как страницы.

Скроллинг может быть не только плавным, но и постраничным. Прокрутка – и поменялся целый экран. Это модно и красиво.

Настройте каждый экран в выкладке страницы так, чтобы он полностью заполнял собой всю видимую область. Создайте индивидуальные стили, сочетающиеся с общей темой, для каждого такого блока прокрутки. Иногда полезно дублировать элементы CTA на каждом экране. Такой подход позволяет пользователям целостно воспринимать сайт и быстро понять, к чему их подводят создатели площадки.

Для небольших сайтов с несколькими страницами вместо длинного скроллинга можно использовать прокрутку навигации. То есть пользователь сможете перейти к другой странице, проведя по скроллу мыши, минуя необходимость кликать пункты меню. Можно сделать анимацию перехода между страницами, чтобы укрепить визуальную коммуникацию с пользователем, как показано на скриншоте ниже.

3. Липкое меню навигации.

Одним из самых больших рисков при длинном скроллинге является возможность дезориентации пользователя. Он просто может потеряться в пути. Самое простое решение – липкое меню навигации, которое будет оставаться на экране в одном положении при прокрутке страницы.

Если это занимает много места, на ваш взгляд, то можно, по крайней мере, включить возможность перепрыгивания в меню, чтобы человек мог быстро перейти в другой раздел. Как минимум, сделайте кнопку «Наверх», особенно если у вас сайт с бесконечной прокруткой.

4. Анимации, активируемые скроллингом.

Анимации делают скроллинг более увлекательным и втягивают пользователя в процесс коммуникации с сайтом. Сделайте скроллинг более гладким, визуально интересным при помощи анимационных эффектов. Это заставит пользователя заострить внимание и задаться вопросом вроде «А что же будет дальше?». Вы можете задать свои правила игры, выстроив последовательность из анимаций на манер хлебных крошек в известной сказке. Человек захочет посмотреть вашу задумку до конца, если она хорошо реализована.

Параллакс-прокрутка – простой выход, но не единственный. Призовите на помощь творчество, не обязательно повторять точь-в-точь ранее придуманные последовательности эффектов.

5. Смягчите недостатки SEO-оптимизации страницы с длинной прокруткой.

Сайты с бесконечной прокруткой имеют свои ограничения в плане SEO-продвижения. Но их можно смягчить. Нил Пател даёт полезные рекомендации на эту тему.

HD-графика

Устройства с высоким разрешением экрана уже давно стали стандартом, а 2016 – годом HD-дизайна. Увлекательные видео, мощные фотографии и богатая графика задали вектор движения в сторону качества визуального контента.

Выгоды от использования качественной графики

• Пользователи устройств с HD-экранами ожидают контента соответствующего качества;
• Качественные видео могут значительно увеличить время пребывания посетителей на сайте;
• Творческий подход даёт дизайнерам больший контроль над настроением посетителей.

1. Комбинируйте стоковые и пользовательские фото.

Конечно, уникальные фото лучше, но не каждая компания может позволить себе нанять фотографа. В качестве компромисса можно объединить стоковые и оригинальные фото таким образом, чтобы они были уникальными. Найдите стоковые фото на желаемую тему, добавьте свой логотип, измените цвета, если нужно, и дело сделано! В поисках материала для создания фирменных изображений можно посетить Unsplash , Pixabay или Pexels .

2. Подготовьте качественные изображения.

Полноэкранные фоновые изображения и видео приковывают внимание пользователей мгновенно и служат идеальной презентацией сайтов, выполненных в стиле минимализма.

Как показано на скриншоте ниже, высококонтрастное изображение легко привлекает внимание к текстовому контенту, наложенному поверх него. Поскольку большинство девайсов не поддерживают стандартное для камер разрешение сторон снимка 1:15, вам придётся заранее обрезать изображение под различные разрешения экранов. Картина должна выглядеть одинаково чётко и разборчиво на любом устройстве.

3. SVG или растровая графика?

Растровые форматы графики (.jpg, .gif, .png) имеют определённое разрешение в пикселях изначально, в то время как скалярная графика может увеличиваться или уменьшаться по размеру экрана без потери качества.

Используйте SVG для уникальной графики, а для фотографий лучше всего подходят растровые форматы с чётко ограниченным количеством пикселей в разрешении. Важно покупать фототехнику с хорошей разрешающей способностью для таких целей.

4. Видео-фон в хедерах.

С увеличением средней скорости Интернета видео-фоны набирают популярность. Их использование способно продлить время, проведённое людьми на вашем сайте. Обратите внимание на следующие моменты:

Отрезки видео длиной в 10-30 секунд составляют хороший баланс между привлекательностью содержания и высокой скоростью загрузки страницы;

Отключенный по умолчанию звук в видео – чаще всего пользователи не ожидают сходу услышать звук после перехода на сайт, многих это может раздражать. Лучше выключить его, оставив кнопку включения для желающих послушать.

Видео привлекает пользователей с первой секунды входа на сайт, что служит серьёзным поводом для его использования.

Иллюстрации

Для получения более уникальных изображений, нежели привычные стоковые фото, дизайнеры всё чаще прибегают к иллюстрациям. Они стали популярной альтернативой решениям из различных фото-банков.

Преимущества использования иллюстраций

• Прямое обращение к фантазии пользователя, что позволяет укрепить его личную связь с сайтом;
• Больше контроля над содержанием изображения и его деталями;
• Как правило, это обходится дешевле, чем заказ фотосессии, и предлагает большую творческую свободу действий;
• Иллюстрации понятно выражают сложные концепции через привычные визуальные образы.

1. Согласуйте иллюстрацию с общей темой макета.

Иллюстрации в веб-дизайне зародились в виде значков и прочих вторичных элементов. Если вы желаете выдвинуть этот стиль на первый план, то нужно объединить его основной темой сайта с точки зрения дизайна и содержания.

2. Добавьте творческие эффекты.

Иллюстрации дают дизайнерам больше свободы для применения креативных эффектов, особенно популярны вот эти два:

Анимации – они всегда идут рука об руку с иллюстрациями;

Слои - из-за своей универсальности иллюстрации позволяют упростить эффекты при помощи введения слоёв для придания глубины изображению.

3. Используйте иллюстрации в инструкциях и руководствах.

Даже те сайты, которые не используют повсеместно рисованный стиль графики, всё равно могут включать его в свои инструкции и руководства. Изображения скажут даже больше, чем слова, человек освоится быстрее. Кроме того, беззаботное позиционирование через мультяшные образы помогут пользователю забыть о том, что он учится, делая этот процесс более простым и увлекательным.

4. Используйте плоский дизайн в иллюстрациях.

Конечно, плоский дизайн со временем оброс слоями собственных фишек, но его можно использовать и для создания иллюстраций. Большинство своих самых значимых преимуществ (простота создания и восприятия, скорость загрузки такой графики) он не утратил и до сих пор с успехом применяется при оформлении иллюстраций.

Выводы

Вы узнали некоторые техники, которые популярны в современной среде веб-дизайна. Применяйте их в контексте своего проекта. Помните, никогда не нужно слепо следовать тенденции лишь потому, что её реализации отлично выглядит сама по себе. Нужно использовать все эти вещи с толком и пользой, выборочно и по смыслу. Уверены, среди вышеперечисленного найдутся идеи, которые помогут вам реализовать эффективный с коммерческой точки зрения и полезный для пользователей проект.

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

Форма следует за функцией

Функциональность сайта является более важной, чем его красота и внешняя привлекательность. В области архитектуры бытует мнение: «Форма следует за функцией». Архитектура сайта также подчиняется этому принципу. У этого мнения существует простое объяснение: форма (внешний вид) должна служить функции (назначению) предмета. Дизайн должен существовать для функции, и лишь потом для формы, а не наоборот.

Многие веб-дизайнеры случайно перевернули эту парадигму с ног на голову. Они хотят изменить внешний вид сайта в надежде, что функция позаботится сама о себе. К сожалению, это нереально. Прежде чем приступить к работе над сайтом, вы должны определить его цель и то, как пользователь собирается с ним работать.

Красивый сайт может отвлечь пользователя

Допустим, у вас просто превосходный внешне сайт. Но если пользователь заходит на него и не знает, что с ним делать, то ваш сайт вредит вам, а не помогает. К счастью, опытные специалисты знают, как объединить красоту и функциональность.

Сайты с плохой функциональностью имеют высокий показатель отказов

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

Красивый сайт часто медленно загружается

Сайт может быть внешне потрясающим, но смогут ли увидеть это ваши посетители, если загрузка будет слишком длительной? Скорее всего, нет. Время загрузки чрезвычайно важно для продвижения, не говоря уже о конверсии. Чем быстрее ваш сайт, тем больше это понравится Google.

Визуальная часть дизайна - лишь одна составляющая уравнения

Сайт является очень сложной вещью. И его дизайн - лишь аспект, но крайне важный. Главным в этом уравнении остается пользователь. По этой причине вы должны ориентироваться на своего пользователя, но не только на его глаза, но и на желание взаимодействовать с вашим сайтом.

Золотая середина

Очевидно, что красота и функциональность сайта могут существовать в полной гармонии. Тысячи сайтов тому пример. Чтобы найти ту самую золотую середину, запомните главные правила:

• Форма следует за функцией, изначально продумайте цель создания сайта.
• Простота лучше, как визуально, так и функционально.
• Следите за временем загрузки. Уберите ненужные функции, если они замедляют ваш сайт.
• Сделайте цель сайта очевидной. Пользователи должны точно знать, зачем сайт существует.
• Сделайте сайт удобным для посетителя, он должен точно знать, что делать дальше.

Вывод

Создайте красивый сайт, который работает. Но иногда стоит жертвовать красотой в угоду функциональности. Если вы все сделаете правильно, ваш сайт, вероятно, будет выглядеть прекрасно.

• Перевод

Мир веб-дизайна ярок и многообразен. Большие изменения происходят здесь не каждый год. Подтверждает это и стремительный рост технологий, который за последние несколько лет показал, что важные тенденции в веб-дизайне недалекого будущего будут сосредоточены на улучшении имеющихся разработок.

Плоский дизайн станет более текстурированным, “кинематографические опыты” будут более распространенными, а использование библиотек JavaScript позволит больше экспериментировать. Мы уверены, что растущая популярность WebGL и виртуальной реальности позволит изменить вебсайты, которые мы знаем, в нечто новое с интересными интерактивными возможностями.

В этой статье мы рассмотрим 11 крупнейших ожидаемых тенденций веб-дизайна этого года. Так что устраивайтесь поудобней и начинайте читать!

1. WebGL (Web Graphics Library)

Среди новейших достижений есть приметная технология WebGL (Web Graphics Library). Её использует множество удивительных сайтов, появившихся недавно.

По-простому, WebGL - это способ визуализации интерактивной 3D и 2D графики в браузерах с аппаратным ускорением, без каких-либо плагинов.

1.1 Интерактивное 3D приложение WebGL

Experience Curiosity (разр. NASA)

WebGL был одной из центральных тем конференции SIGGRAPH 2015 . Презентацию по трехмерной графики и WebGL вы можете посмотреть на этом канале YouTube.

Из полуторачасового видео, вы узнаете о веб-приложении NASA “Experience Curiosity ”, созданием которого отметилась третья годовщина посадки марсохода “Curiosity” на Марс. Приложение позволяет пользователям “покатать” трехмерный марсоход NASA на поверхности Марса и “управлять” рукой-манипулятором.

Для создания этого ресурса использовался Blend4Web (фреймворк для создания браузерных 3D-приложений) и Blender (пакет для трехмерного моделирования и анимации).

Веб-сайт Beloola использует three.js (библиотека JavaScript)

Проект “The Boat” от SBS TV (Австралия)

Австралийское телевидение SSB TV переработала историю писательницы Nam Le “The Boat” о побеге из Вьетнама и превратило её в интерактивный видео-рассказ с помощью WebGL. Приложение состоит из нескольких частей с отлично выполненной анимацией и вручную раскрашенными иллюстрациями. Здесь также используется three.js , как и в предыдущем примере.

BecauseRecollection

С технической точки зрения - это непрерывная двухмерная анимация, которая выполняется в псевдо 3D пространстве. Выглядит очень эффектно!

2. VR (Виртуальная реальность)

Виртуальная реальность (VR) - это родственная технология, которая способна встряхнуть мир гаджетов в 2016 году. Возможно, совсем скоро всё станет гораздо интереснее.

Вебсайт timeshift165

Теги: Добавить метки

2016 год уже на пороге, так что пришло время заглянуть немного вперед и попытаться предсказать появление новых трендов в веб-дизайне в ближайшее время.

Тренды веб дизайна 2016

В современном мире делать предсказания немного неблагодарное занятие. Технологии меняются настолько быстро, что очередное предсказание может стать устаревшим в мгновение ока. С другой стороны, некоторые тенденции настолько укрепились в веб дизайне, что остаются на пике популярности на протяжении многих лет и совершенствуются. Опытные дизайнеры, которые сталкиваются с этим каждый день, могут заранее заметить возможные изменения.

Например, как директор по дизайну продукта Facebook Джули Чжо , которая недавно сделала прогноз тенденций в веб-дизайне на целых 10 лет вперед. С нашей стороны было бы слишком смело заглядывать так далеко, но предвидеть появление некоторых тенденций, которые, несомненно, будут популярны в следующем году, вполне возможно. Давайте рассмотрим самые крутые тренды в веб-дизайне, которые мы, возможно, увидим в 2016 году.

Яркие цвета

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

InJob

Яркие цвета всегда были прерогативой креативных веб-сайтов, таких как портфолио дизайнеров или персональные страницы фотографов. Сегодня мы можем наблюдать использование ярких тонов в разнообразных дизайнах даже традиционно сдержанных черно-белых бизнес- или финансовых сайтов.

Это не значит, что в 2016 минимализм отойдет на второй план. Совсем наоборот, он будет оставаться одной из самой популярных тенденций дизайна на ближайшие несколько лет. Яркие цвета делают минималистический дизайн более привлекательным, не перегружая его лишними элементами или навязчивым оформлением. Помните, что пустое пространство активно используется в «чистом» дизайне, но это не всегда подразумевает использование только белого цвета. Вы можете использовать яркие цвета для фона в чистом виде, добавлять градиенты или выделять наиболее важные элементы с их помощью.

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

Некоторые дизайнеры называют данный стиль «почти плоским» дизайном, поскольку он добавляет немного глубины плоским элементам. В этом году популярность выросла среди веб-дизайнеров, и кажется, эта тенденция продолжится в следующем году.

Barni Media

Материальный дизайн сохраняет все основные преимущества плоского дизайна, за исключением того, что материальный добавляет объем (так называемую ось Z) для выделения кликабельных элементов или элементов для совершеения других действий. Он сочетает в себе красоту и удобство использования, что делает данный тренд весьма привлекательным для разработки веб-сайтов. Анимация становится изюминкой дизайнов, поскольку она функционируют не как простое украшение, а как улучшение юзабилити.

В Google проделали очень крутую штуку: они создали документ с рекомендациями для применения принципов материального дизайна и подтолкнули людей использовать их в своих работах. Они сделал данный стиль более доступным для дизайнеров, не принуждая их гадать, что нужно сделать для достижения того или иного результата.

Акцент на шрифтах

Шрифты – это уникальный элемент дизайна веб-сайта. При грамотном использовании они могут не только передать смысл (что написано), но и служить декоративным элементом (как это написано). В последнее время надписи все больше и больше используются в веб-дизайне как оформление и выполняют такие же задачи, как и использование цветов.

Tennent Brown

Все более частое использование мобильных девайсов дало толчок к использованию крупных шрифтов в веб-дизайне. Очевидно, что тексты на маленьких экранах должны выглядеть крупнее, чтобы быть легко читаемыми. Эта тенденция стала широко использоваться для создания интересных дизайнов.

Большое разнообразие бесплатных шрифтов , особенно шрифтов Google, делает надписи прекрасным элементом дизайна, который открывает широкие возможности для веб-дизайнеров. Более того, широкий выбор бесплатных или недорогих (но тоже крутых) шрифтов делает создание авторских дизайнов легким даже для обычных пользователей. Наряду с вышеупомянутым трендом использования ярких цветов, большие надписи также могут создать потрясающий эффект в дизайне веб-сайтов. Но стоит учесть, что использование надписей требует более глубокого знания шрифтов, их размеров, комбинаций и сочетания с окружающими элементами дизайна.

Одностраничные дизайны

Одностраничный дизайн не такой уж и новый тренд, поскольку появился в сети несколько лет назад. Можно надеяться, что он и дальше не останется без внимания дизайнеров. Это довольно-таки противоречивая тенденция, которая по-прежнему имеет много противников и много сторонников.

Одностраничные дизайны часто встречаются на посадочных страницах , поскольку такой вид веб-сайтов не нуждается в сложной структуре. Эта тенденция появилась благодаря мобильно-ориентированного интернета, где акцент на удобство сайта подразумевал отказ от менее важных элементов и облегчение навигации сайта.

Безусловно, одностраничники подходят далеко не для каждого сайта. С таким дизайном вам обязательно понадобится продумать особенности навигации (закрепить меню в верхней части страницы, добавить кнопку “наверх”, чтобы позволить пользователям легко возвращаться к началу страницы). Но эта тенденция, безусловно, останется в центре внимания в течение следующего года.

Длинная прокрутка

Данный тренд тесно связан с одностраничными веб-сайтами. В связи с широким использованием мобильных девайсов, прокрутка стала более удобной в использовании, чем клик. Длинная прокрутка используется в дизайне многих сайтов, чтобы рассказать историю бренда и привлечь пользователей.

Kaipo Che

Трудно сказать, повлияла ли техника скролла на появление теории “над линией фолда” или же наоборот. Так или иначе прокрутка не так важна для современной сети. Многие владельцы веб-сайтов по-прежнему придерживаются идеи размещать наиболее важные элементы, например, как кнопки призыва к действию, в верхней части экрана. По правде говоря, это зависит от разных факторов. Привлечь посетителей и заставить их прокрутить до момента совершения покупки намного сложнее, чем просто разместить кнопку «Купить сейчас» в границах первых 600 вертикальных пикселей экрана. Но это более выгодно для вашего веб-сайта и его юзабилити.

Адаптивная навигация

В связи с ростом использования мобильных устройств для работы в Интернете, все чаще начали появляться вопросы по поводу навигации для мобильных девайсов . Давно знакомая иконка «гамбургер»-меню в настоящее время является одним из лучших решений.

Несмотря на то, что многие веб-дизайнеры против использования меню «гамбургер» в версиях веб-сайта для десктопа, эта крошечная иконка из трех линий завоевала адаптивный дизайн, так что в ближайшее время мы будем видеть все больше и больше «гамбургеров».

Draw Better

Фактически основной аргумент против «гамбургер»-меню, это его слабое узнавание. Но так как все больше и больше сайтов его используют, не думаю, что данная проблема все еще актуальна. Такая навигация более удобна для пользователей мобильных девайсов, чем другие типы адаптивной навигации как, например, закрепленная строка меню вверху страницы или скрытое меню.

Фоновые изображения и видео

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

Proske

Видео также являются мощным способом привлечения внимания к веб-сайтам и их контенту. Но нужно следить за их весом, так как скорость загрузки сайта – один из главных параметров, который учитывает Google при ранжировании ресурса.

Макеты: карточный дизайн, сплит-лейаут и центрированный контент

Создать хороший макет, означает одновременно сделать его и красивым, и удобным для пользователей. В современном веб-дизайне фокусируются эти аспекты, поэтому структура сайта постоянно улучшается для достижения наилучших результатов.

На протяжении нескольких последних лет мы повсюду можем видеть использование карточного дизайна . Это все началось со стиля «метро», а затем проявилось в дизайне социальной сети Pinterest. Такой тип макета особенно подходит для создания адаптивных веб-сайтов, поскольку вы можете группировать карточки в подвижные блоки, чтобы соответствовать небольшим размерам экранов. Блоки и карточки используют свободное пространство для творческой подачи контента.

Сплит-лейауты давно пользуются популярностью. Этот тип макета делит контент на части, причем эти части намного крупнее, чем в сетке. Вы делите экран на две вертикальные части, а затем размещаете свой контент в пределах каждой из этих частей. Сплит открывает много возможностей для веб-дизайнеров, начиная с использования различных цветов для каждого фрагмента контента и заканчивая анимированными эффектами для навигации.

Центрированный контент несет в себе функции противоположные сплит макету. Он собирает все основные элементы и контент в центре макета, чтобы привлечь внимание пользователей к нему. Центрованный контент отлично подходит для одностраничных сайтов и минималистических дизайнов.

Технический аспект: создание прототипов в браузере

Главным изменением за последние годы стало стирание границ между работой дизайнера и разработчика. В последнее время, часто встречаются дизайнеры с навыками кодирования. Современные дизайнеры без проблем используют различные сервисы прототипирования и быстро сооружают хороший макет с динамическим контентом вместо мокапов, которые нужно потом кодировать.

Благодаря огромному количеству различных инструментов для создания макетов прямо в Интернете дизайнеры имеют больше возможностей видеть, как их проекты будут работать. Работа в браузере с онлайн инструментами становится повседневной рутиной для многих дизайнеров и разработчиков. MotoCMS также является онлайн инструментом, который позволяет разработчикам создавать веб-сайты онлайн. Так что в скором времени мы ожидаем увидеть больше приложений, что позволят разрабатывать сайты прямо на мобильных устройствах.