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

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

Основные этапы веб-разработки в 2022 году

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

Этап 1: Постановка задачи

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

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

Этап 2: Формирование уникального предложения

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

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

Этап 3: Создание мудборда

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

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

Подробно про мудборды в блоге есть отдельная статья.

Пример мудборда для сайта

Этап 4: Разработка прототипа

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

Пример прототипа сайта для логистической компании

Для быстрого создания прототипов существует множество программ и сервисов. Они либо бесплатны, либо подписка на них стоит недорого. Вот самые популярные инструменты для прототипирования: Mockingbird, Figma, Pencil, HotGloo, MockFlow и так далее. Еще можно использовать профессиональные инструменты вроде Photoshop, но удобнее будет проектировать все же в специальных сервисах.

Кому-то может показаться, что создание прототипа это пустая трата времени и что лучше сразу же начать делать дизайн. Такой подход уже устарел и вот по каким причинам:

  • Сложности с согласованием. Клиент видит расположение блоков и элементов на сайте одним образом, а вы другим. Это приводит к сложностям и трате времени на дополнительные согласования. В прототипе гораздо проще поменять расположение элементов, следовательно, процесс разработки будет продвигаться быстрее.
  • Дизайнеру сложнее работать. Человеку гораздо проще понимать, что от него хотят, когда перед глазами есть подробная схема, где и как располагать элементы. Имея на руках готовый прототип дизайнеру остается только красиво оформить все элементы.
  • Сложности с доработками. Гораздо легче внести серьезную правку в схематичный прототип, чем пытаться перемещать блоки и элементы в уже готовом дизайне. Часто в таком случае приходится “перелопачивать” весь дизайн, а это большие затраты по времени.

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

Этап 5: Отрисовка дизайна

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

  • подбор и расстановка шрифтов по макету;
  • выбор и применения цветового оформления;
  • оформление кнопок, форм, блоков, галерей и так далее;
  • продумывание анимации и логики взаимодействия с объектами.

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

Пример отрисовки дизайна сайта в Figma

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

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

Этап 6: Верстка макета

За этот этап уже полностью отвечает веб-разработчик, работающий с фронтендом. В 2022 году чаще используются разные сторонние надстройки для верстки: препроцессоры, фреймворки, сторонние библиотеки. На чистых HTML, CSS и JavaScript сайты уже не верстают. Даже самые примитивные. Верстальщику нужно уметь работать со сторонними инструменты. При этом в связке HTML/CSS/JS разработчик тоже должен очень хорошо ориентироваться, так как она является основой всех расширенных инструментов.

Верстка страниц сайта

Еще одной тенденцией 2022-2023 года можно назвать работу с zero-code сервисами. Здесь нет необходимости уметь работать с кодом, так как все происходит в визуальном редакторе, где перетаскиваются и редактируются блоки сайта. Если разрабатывать сайт с помощью zero-code, то можно пропустить и 5 этап. Правда, подход с использованием конструкторов, пускай и очень продвинутых, оправдан только для небольших сайтов: лендингов, блогов, интернет-магазинов. Если нужно реализовать что-то нестандартное, то зеро-код инструменты вам не подойдут.

Этап 7: Адаптация верстки под CMS

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

Для распространенных CMS макеты адаптировать несложно – вся необходимая документация есть на официальных ресурсах, в свободном доступе также много гайдов. Сложнее дела обстоят с CMS, индивидуально написанными под конкретный проект.

После того как сайт был размещен на CMS и опубликован, от разработчика требуется только оказывать ему техническую поддержку: добавление новых страниц, внесение корректировок в существующие, работа с серверной частью и так далее. За это не всегда отвечает разработчик. Клиент может пользоваться поддержкой других специалистов. Также сайт нужно продвигать – проводить SEO-оптимизацию, добавлять новый контент, адаптировать маркетинговую и рекламную кампании. Однако это уже не забота разработчика.

Особенности разработки сайтов в 2022 году

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

Старые браузеры не поддерживаются

Теперь не нужно адаптировать свою верстку под старые версии браузеров или под какие-то редкие веб-обозреватели. Internet Explorer уже практически не используется, а все остальные крупные браузеры оперативно получают обновления. Разработчику же больше не нужно думать, где и какой префикс поставить, чтобы сайт корректно открывался в любом обозреватели. Современные версии практически не требуют какой-либо дополнительной адаптации.

TypeScript набирает популярность

Постепенно вытесняя с рынка JavaScript. Подробно про особенности TS и почему так происходит было рассказано в отдельной статье. Требование владеть этим языком программирования встречаются примерно в 70-75% вакансиях для мидл- и сеньор-разработчиков. TypeScript имеет свои особенности, хотя и сделан на основе JavaScript. Хорошему разработчику потребуется все равно знать оба языка, чтобы оставаться конкурентоспособным на рынке.

Рост React.js

Это фреймворк, написанный на JavaScript. Он позволяет автоматизировать многие задачи для фронтенд-разработки, а также делает поддержку сайта более простой. Фронтендеру очень желательно уметь работать с React, так как он часто встречается в требованиях к вакансиям. Это и без того самый популярный фреймворк, так рост его популярности продолжится в 2023 году.

Статистика популярности других фреймворков

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

Flexbox становится трендом

Теперь его нужно учитывать при создании CSS-разметки. Так, использование Flex-элементов позволяет избавиться от необходимости использования “костылей” для адаптации под разные разрешения и размеры окон. Если вы умеете работать с CSS, обучиться работе с Flexbox не составит особого труда. Вся документация есть на официальном сайте, а в интернете много мастер-классов и объяснений разных фишек.

Псевдоэлементы становятся мастхэвом

Они используются в CSS для решения самых разных задач – от смена цвета кнопки при наведении до открытия всплывающего окна при нажатии на нее. Особую популярность получил псевдоэлемент :has. Он позволяет менять поведения одних элементов в зависимости от состояния других элементов. Так сайт становится более динамичным без необходимости написания скриптов на JavaScript.

Пример использования селектора :has в CSS-коде

Zero-code занимают свою нишу

Еще 5 лет назад создание сайтов на конструкторе считалось чем-то не очень хорошим как для разработчика, так и для заказчика. Сейчас у конструкторов функционал позволяет создавать сайты практически любой сложности (в плане дизайна страниц). Zero-code инструменты однозначно займут серьезную нишу на рынке и будут укреплять свои позиции.

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

Заключение

В целом, этапы разработки сайта в 2022 и 2023 годах не изменятся, но зато изменится их реализация. Все больше будет уделяться внимания планированию и созданию прототипов, для крупных проектов придется осваивать фреймворки, а небольшие сайты будут верстаться на конструкторах с минимум кода. Также TypeScript будет становится все более популярным, вытесняя JavaScript, но полностью он его вытеснит еще не скоро (если вообще вытеснит).