Секреты хорошего веб-сайта. Чаcть 1. Дизайн

От автора

Доброго времени суток читатели нашего блога на Дзене. Меня зовут Михаил, я являюсь основателем Landing Heroes. С разработкой веб-сайтов я познакомился в 2008 году, а профессионально занимаюсь ей уже почти 10 лет. Я решил написать цикл статей о том, каким должен быть хороший веб-сайт. Я планировал сделать это в маленькой статье, но когда стал писать, понял, что есть слишком много вещей, о которых я хотел бы рассказать. Я постараюсь все же изложить материал сжато и максимально просто.

Дисклеймер

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

Введение

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

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

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

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

1. Современный дизайн

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

• Функциональное назначение сайта
• Целевая аудитория сайта
• Вид деятельности, отрасль
• Брендинг компании
• Тренды в графическом дизайне
• Адаптивность (корректное отображение на всех устройствах)

Конечно, есть и другие факторы, но даже этот список отображает многообразие проблем и возможностей, с которыми сталкиваются в своей работе дизайнеры сайтов (и не только они!). Как учесть все важные моменты владельцу компании при попытке самостоятельно разработать свой сайт? Как сделать так, чтобы сайт выглядел «дорого»? На все эти вопросы легче ответит дизайнер, за плечами которого не один проект.

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

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

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

1.2. Соответствие целевой аудитории

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

1.3. Соответствие отрасли

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

1.4. Соответствие брендингу

Тут все тривиально: если у компании уже есть некий брендинг, то следует учесть его при разработке сайта. Если же дизайн сайта будет сильно отличаться от визиток, внешнего оформления и общей айдентики компании, то пользователю будет сложно ассоциировать сайт с самой компанией. Пожалуй, тут проблема кроется даже не в дизайне сайта, а в самом брендинге: очень часто его у компании просто нет. На нашей практике, примерно в 60% случаев, заказчики хотят разработать сайт, имея только один единственный логотип. Иногда и он отсутствует. С другой стороны, лучше начинать с чистого листа, нежели с плохого брендинга.

1.5. Соответствие современным трендам

Крупные компании и айти-гиганты являются «законодателями» моды и устанавливают свои тренды в дизайне сайтов. Так, популярный тренд на закругленные углы и скевоморфизм был прерван выходом в свет минималистичной стилистики «metro» от Windows 8 в 2012 году. Material design от Google, гласморфизм и неоморфизм – все это популярные течения, которые влияют на современный облик веб-сайтов. Данный пункт не является при этом ключевым при разработке дизайна, однако если на вашем сайте уместно применяются определенные элементы из современных трендов, то сайт будет смотреться актуальным на 2024 год.

1.6. Адаптивность (отзывчивость)

Уже канули в лету те времена, когда веб-сайты просматривались исключительно на мониторах ПК на одинаковых разрешениях. Сейчас пользователи просматривают сайты с планшетов, ноутбуков, смартфонов и т.д. В связи с этим обязательной является разработка версий дизайна под каждый экран.
Также, наверное, вы не раз слышали такие понятия, как «адаптивный» или «отзывчивый» дизайн. Есть ли разница между этими понятиями? Адаптивный дизайн предусматривает перестроение элементов сайта на определенных разрешениях в зависимости от ширины экрана (реже от высоты). При достижении так называемого «брейкпоинта» (англ. «точка слома»), сайт перестраивается. Отзывчивый дизайн же подразумевает планомерное перестроение элементов при изменении ширины (реже высоты) экрана.

Заключение

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