Редизайн сайта в 2018 году

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

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

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


Если вы решились на редизайн

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



Функциональность

Здесь можно вспомнить работы с последних Behance Portfolio Reviews, мы также проанализировали наше портфолио и пришли к выводу, что дизайн стал в первую очередь функциональным.

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


Адаптивность

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

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


Простота

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

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

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

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


Упорядоченный хаос

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

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


Модные тенденции


3D вставки  

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

Все чаще используют сочетание 2D и 3D элементов, в том числе фона и элемента в одном цвете. В таком случае объект «всплывает» из фона благодаря своему объему.

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


Типографика

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

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

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

Среди модных направлений стоит выделить:

  • использование креативных шрифтов

  • стертую типографику

  • хаотичную типографику

  • типографику как элемент реальной жизни



Анимация

Сайты во многом становятся проще по структуре (опять же за счет упора на мобильные устройства), но анимации при этом вводится все больше и больше. Не важно Gif это, SVG, WebGL CSS или видео-анимация. Главное, чтобы анимация решала задачи и была умной.

Стоит также упомянуть рост использования синемаграфов – статичных иллюстраций с частичной анимацией.



Графический дизайн

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



Также повсеместно используются:

  • Металлические элементы

  • Цветовые переходы и элементы

  • Глитч эффект

  • Эффект разрушения

  • Эффект смещения каналов

  • Двойная экспозиция

  • Двойная двухцветная экспозиция

  • Иллюстрации, нарисованные от руки

  • Иллюстрации поверх фотографий

  • Вырезка из бумаги


Что важно помнить при редизайне


Используйте реальный контент

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


Думайте о работе с сайтом после редизайна

Не забудьте о том, что сайт будет расти и развиваться каждый год и надо заранее подготовить его к этим изменениям, чтобы не пришлось создавать новый сайт уже через год. Хорошим решением будет создание UI-кита с набором элементов сайта и правилами использования. Благодаря ему доработки сайта в будущем могут оказаться в разы проще и дешевле.

Хорошим вариантом станет и разработка конструктора для будущих страниц, как мы сделали на проекте «Рики». В основе разделов этого сайта заложен конструируемый шаблон, который упрощает и ускоряет процесс создания и редактирования страницы нового бренда или услуги за счет блочной структуры.


Переносите всю старую информацию

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



Сохраните старый дизайн

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




Презентация по редизайну

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






Координационный
совет SPECIA