Советы по редизайну сайта. Тенденции веб-дизайна 2017

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

  1. Самое важное – структуру сайта, адреса страниц и файлов лучше не менять после редизайна. Только в случае, если это крайне необходимо, то не забывайте, что в таком случае нужно обязательно настроить 301 редирект с прошлого адреса на новый.
  2. Контент желательно не менять, лучше перенести со старого сайта, так как есть (со всеми ссылками, заголовками и т.д.)
  3. Обязательно перенесите со старых страниц на новые все мета-теги и alt к картинкам.

Тренды веб-дизайна в 2017 году

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

2. Полу-плоский дизайн (“semi-flat,” “almost flat,” “flat 2.0.”). Плоский дизайн возник как альтернатива трехмерному стилю. Появились яркие цвета, простые формы, понятная и читабельная типографика и как следствие высокая скорость загрузки. Но пространство для улучшения оставалось и вот что мы получили с дизайном flat 2.0.:

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

3. Минимализм

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

Можно выделить такие черты минимализма:

  • -  плоский дизайн и текстуры;
  • -  ограниченная или монохромная цветовая палитра;
  • -  только существенные элементы и функции;
  • -  максимизирование негативного пространства;
  • -  динамическая типографика.

4. Персонализированный дизайн. Шаблонные сайты канут в лету. Персонализированный дизайн подразумевает под собой индиивдуализированные иконки, оригинальные рисунки и изображения, дизайн, ориентированный на пользователей. Стоковыми фото и шаблонами пользователей больше не удовлетворить. В 2017 пользователи будут относиться к персонализированному дизайну как к необходимости, а не роскоши.

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

Пример 1

 модульность

Пример 2

модульность

6. Нестандартная сетка

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

Пример 1

нестандартная сетка

Пример 2

нестандартная сетка

7. Материальный дизайн. Еще одно проявление упрощения и краткости – материальный дизайн. Этот визуальный стиль считают одновременно природным и современным. В материальном дизайне уже появляется свет, тени, перспектива и движение. Он вызывает чувство реальности пользователя и зрителя.

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

Пример - http://materialdesignblog.com/

8. Цвета: популярны яркие цвета и градиенты, а также дуотон.

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

Пример 1

цвета

Пример 2

цвета

9. Шрифты (популярны будут жирные и броские шрифты)

Также набирают популярность:

  • географические шрифты (без засечек), например, такие как Futura, ITC Avant Garde, Proxima Nova , или Poppins и Montserrat.
  • Моноширинные шрифты (Monospaced).

10. Умная навигация

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

https://www.designcontest.com/blog/wp-content/uploads/2016/10/navigation.gif

11. Ассиметричность в веб-дизайне

Примеры:

12. Анимация

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

Пример - https://www.zazzlemedia.co.uk/wp-content/uploads/2016/05/Animation-1-2.gif

13. Кастомная графика

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

кастомная графика

14. Синемаграфы (cinemagraphs) — разновидность анимированных GIF-картинок, где в отличие от GIF-ок старого образца анимирована только небольшая часть изображения, которая движется незначительно, подчас и вовсе едва заметно.

Примеры: https://flixel.com/

15. Популярность SVG-файлов. Эта масштабируемая векторная графика представляет для веб-дизайнеров и разработчиков большие преимущества, чем традиционные изображения в формате JPG, PNG, GIF. У SVG много плюсов: файлы быстро загружаются, они адаптивны и интерактивны, а еще их легко изменить.

16. Большие фоновые изображения и видео

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

17. А также видео играет очень важную роль для рынка:

  • видео на лендингах увеличивает конверсию на 80%.
  • Просмотр видео составляет ⅓ всей онлайн-активности.
  • Видео реклама увеличивает намерение приобрести на 97% и узнаваемость бренда на 139%.
  • Добавление видео на главную страницу может увеличить конверсию на 20% и больше.
  • Все больше дизайнеров понимают этот факт. Передовые технологии позволяют использовать лучшее разрешение и сокращать время загрузки. Поэтому в 2017 году мы будем наблюдать большее количество видео.

Автор: Ксения Пашкульская, руководитель SEO-отдела компании МАВР

Читайте также:

Ссылка на первоисточник

Картина дня

наверх