2019 год был захватывающим для веб-дизайна.
Единственный способ подвести итог - это цитата из одного из моих любимых сериалов «Офис».
В финале сериала Энди говорит: «Я бы хотел, чтобы был способ узнать, что ты живешь в старые добрые времена, прежде чем ты их покинешь».
Ну, это я предупреждаю вас, что сейчас мы живем в одни из самых захватывающих времен в веб-дизайне.
В прошлом году мы стали свидетелями достижений в технологиях, которые помогают нам лучше связывать нас с нашими пользователями, новых стилей, которые раздвигают границы, а также большего внимания к документации и рекомендациям по обеспечению доступности, чтобы сделать Интернет более последовательным. и доступная среда для всех.
Вот некоторые из наиболее заметных тенденций в дизайне бизнес-сайтов, которые мы увидели и полюбили в 2019 году.
1. Плоский дизайн
Flat Design - это минималистский подход к дизайну, в котором используется чистое и открытое пространство, яркие цвета и простые двухмерные иллюстрации.
Этот стиль дизайна начинался как еще одна тенденция, но с годами он стал стандартом веб-дизайна.
Популярность плоского дизайна можно объяснить потребностью в быстро загружающихся веб-сайтах, которые обеспечивают пользователям удобство просмотра как на мобильных устройствах, так и на настольных компьютерах.
Плоский дизайн в основном опирается на простые иллюстрации, которых гораздо меньше "Тенденция дизайна 2019 – Плоский дизайн">alt=
2. Анимированные GIF-файлы
Сегодняшний пользователь настроен на «мгновенное удовлетворение», когда дело доходит до поиска информации, которую он ищет.
Это означает, что у нас есть лишь небольшой промежуток времени, чтобы привлечь их внимание и предоставить им то, что они ищут.
Именно здесь анимированные GIF-изображения действительно хороши.
Гифки могут передать сложные идеи за короткий период времени, будучи при этом интересными и интересными. Дополнительным бонусом является то, что они работают в большинстве браузеров и мобильных устройств, что делает их доступными каждому.
В приведенном ниже примере CarLens, приложение для идентификации автомобилей, использует анимированный GIF-файл в главном разделе, чтобы быстро показать тип информации, которую вы можете найти об автомобиле с помощью этого приложения. GIF-изображение привлекает внимание и побуждает пользователей узнать больше.
3. Разговорные боты и машинное обучение
В прошлом году мы говорили о росте популярности диалоговых ботов и машинного обучения на веб-сайтах.
С тех пор общение с ботами стало второй натурой. Мы наблюдаем огромный прогресс в области искусственного интеллекта и возможностей ботов.
Черт возьми, мы видим это каждый день, когда Google дает нам автоматические предложения или когда Facebook спрашивает нас, хотим ли мы, чтобы нас отметили на фотографии.
Многие компании видят преимущества, которые боты могут принести их организации, в том числе:
- Более удобное предоставление пользователям мгновенных ответов и фильтрация их по соответствующему контакту в зависимости от их проблем
- Повышена эффективность за счет упрощения и экономии времени перехода между делами.
В IMPACT мы интегрировали Drift на страницы наших агентских услуг, чтобы помочь нам мгновенно связаться с нашими потенциальными клиентами.
4. Белое пространство
Как упоминалось выше, веб-дизайн все больше движется к мышлению «лучше меньше, да лучше».
Это означает, что мы видим, что веб-сайты выбирают более простые макеты с большим количеством пустого пространства. Белое пространство (также называемое отрицательным пространством) - это просто пустое пространство на странице. Думайте об этом как о передышке вокруг элементов страницы.
Использование пробелов для разделения различных разделов на страницах помогает улучшить читаемость и облегчает пользователям усвоение важной информации.
We althsimple, инвестиционное приложение, использует пробелы для разделения каждого раздела своего сайта, позволяя пользователям сосредоточиться на одном разделе за раз. Затем он использует умную анимацию, чтобы направить взгляд пользователя вниз по странице.
5. Sketch как популярная программа для веб-дизайна
Со временем в мире технологий возникли бесконечные противоречивые дебаты; Mac против ПК. GIF против JIF. Apple против Android.
Для тех, кто сегодня занимается веб-дизайном, мы находимся в разгаре битвы за лучший инструмент дизайна: Photoshop против Sketch.
В течение многих лет Photoshop был основным инструментом для выполнения веб-дизайна, однако за последние несколько лет Photoshop начал сдавать позиции Sketch.
Sketch - это программное обеспечение, созданное специально для веб-дизайнеров и способное охватить большую часть процесса проектирования: от создания дизайна до прототипирования и презентации клиенту.
Благодаря мощной библиотеке плагинов Sketch с открытым исходным кодом и ее способности выполнять большую часть процесса проектирования, я прогнозирую, что в 2019 году больше компаний начнут отказываться от Photoshop и переходить на использование Sketch в качестве основного программного обеспечения для проектирования.
6. Разбитая сетка и асимметричные макеты
В последнее время в веб-дизайне большое внимание уделяется проектированию в рамках заданной сетки.
Система сеток помогает дизайнерам поддерживать согласованность и последовательность всего проекта и, честно говоря, облегчает разработчикам его воплощение в жизнь.
Однако мы начинаем видеть, как дизайнеры все больше и больше выходят за рамки стандартной сетки. Это помогает дизайнерам получить больше творческой свободы в своей работе и создать еще один уровень иерархии на странице.
Создание этого дополнительного уровня иерархии чрезвычайно полезно, когда нужно направить взгляд пользователя вниз по странице и привлечь его к наиболее важным и действенным частям вашего сайта, и, честно говоря, это позволяет создавать более интригующий и уникальный дизайн.
В IMPACT мы применили этот подход на нашей странице «О нас», чтобы немного разбить контент и привлечь дополнительное внимание к фотографиям нашей команды.
7. Системы проектирования
Проще говоря, дизайн-система - это набор повторно используемых компонентов, подчиняющихся набору правил, ограничений и принципов.
За последний год эти системы стали важной частью многих команд.
Крупные компании, такие как Shopify, Trello и Airbnb, возглавили развитие систем дизайна, создав глубокие системы и даже посвятив им страницы на своих сайтах, чтобы все могли их увидеть.
При внедрении системы дизайна помогают командам уменьшить несоответствия и ускорить процесс проектирования.
Система дизайна Shopify под названием «Polaris» знакомит пользователей с подробными разделами, объясняющими «почему» и «как» в отношении цвета, типографики и UX-дизайна Sshopify.
8. Использование органических форм
Органическая форма - это любая неправильная и неровная форма. Другими словами, это хороший способ сказать «несовершенно».
Они кажутся более нарисованными от руки и гуманистическими. Благодаря своему необычному внешнему виду их можно использовать, чтобы привлечь внимание пользователя и придать вашему сайту индивидуальности.
В сочетании с иллюстрацией или изображением они также могут действительно добавить глубины вашему сайту, разбивая монотонность тех же кругов и квадратов, которые мы привыкли видеть в дизайне.
В приведенном ниже примере дизайнер Арифул Ислам использует органические формы, чтобы придать этой странице более доступный вид и привлечь дополнительный фокус к изображениям, используемым на странице.
Изображение: UI Agency, автор: Арифул Ислам
9. Доступность веб-сайта
Хорошо, последнее не является тенденцией, но это движение, которое нельзя игнорировать в 2019 году.
Если вы новичок в вопросах доступности, это связано с дизайном веб-сайта для людей с ограниченными возможностями. Когда веб-сайты правильно спроектированы и закодированы, люди с ограниченными возможностями могут легко ими пользоваться. К сожалению, в настоящее время существует множество сайтов с барьерами доступности, которые затрудняют использование людьми с ограниченными возможностями.
Поскольку WCAG 2.0 (Руководство по обеспечению доступности веб-контента) становится все более распространенным, становится все более важным следить за тем, чтобы ваш веб-сайт был на должном уровне.
Интернет - важный ресурс в нашей жизни, поэтому важно убедиться, что он предоставляет равный опыт и возможности, независимо от того, как к нему осуществляется доступ.
Если вы ищете полезные ресурсы для обновления кода вашего сайта, вы можете просмотреть полный список инструментов, рекомендованных W3C, сообществом, ответственным за разработку стандартов для Интернета, здесь.
Смотря в будущее
И вот вам девять главных тенденций, которые сформировали дизайн в 2019 году.
С эстетической точки зрения, я думаю, мы увидим, что веб-сайты продолжат двигаться в сторону чистого и практичного стиля плоского дизайна.
С точки зрения UX мы увидим, как компании делают все возможное, чтобы сделать свои сайты доступными для всех и внедряют больше диалоговых ботов, чтобы пользователи могли быстрее реагировать.