Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>9 янв 2024</li>

3 <li>0</li>

4 </ul><h2>Веб-дизайн: что это и как его освоить с нуля</h2>

5 Рассказываем, что такое веб-дизайн и кто такой веб-дизайнер, чем он занимается и где учиться этой профессии.

6 Иллюстрация: Полина Честнова для Skillbox Media

7 Пишет про дизайн в Skillbox Media. Редактор и арт-директор собственного дизайн-бюро. Ведёт рассылку о текстах, типографике и дизайне.

8 Полина Старцева

9 Редактор.

10 Когда-то сайты были простыми, с чёрным текстом, синими ссылками и пиксельными картинками, а создавали их только программисты. Сейчас же в любом интерфейсе так или иначе есть дизайн, который делают по определённым правилам.

11 Разбираемся, кто придумывает, как должны выглядеть страницы в интернете, как развивалась эта профессия и что должен знать веб-дизайнер в 2024 году.

12 История интернета началась в 1989 году, когда британский учёный Тим Бернерс-Ли из института атомных исследований CERN представил проект - систему быстрого обмена информацией между учёными и университетами по всему миру.

13 С этой страницы начался интернетИзображение:<a>CERN</a>Историю веб-дизайна начал тоже Бернерс-Ли: в 1990 году он стал систематически работать над языком гипертекстовой разметки HTML, который был нужен для представления информации во Всемирной сети. В конце 1991-го он опубликовал первое описание элементов этого языка, а в 1993-м - первую рабочую версию HTML, которая стала стандартом разработки сайтов и впоследствии эволюционировала до HTML5. Модификацией именно этой версии пользуются дизайнеры и фронтендеры с 2014 года.

14 6 августа 1991 года команда Бернерса-Ли сделала первый в мире сайт -<a>http://info.cern.ch</a>Скриншот: сайт<a>info.cern</a>/ Skillbox MediaПервый браузер Mosaic. Его начали разрабатывать в 1992 году, а прекратили поддерживать в 1997-мИзображение: NCSA Image Archive / Wikimedia CommonsПервые сайты выглядели как белые страницы с текстовыми ссылками, которые вели на другие сайты. В них не было изображений и тем более анимированных элементов: у первой версии HTML не было возможностей мультимедиа, которые доступны нам сегодня. Тем не менее в них был протодизайн как способ представления и структурирования информации.

15 Вы читаете эту статью, потому что задумываетесь о карьере в веб-дизайне? Присмотритесь к <a>этому курсу Skillbox</a> - он подойдёт вам, если вы хотите освоить направление с нуля.

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

17 Apple.com в 1994 годуИзображение: Apple /<a>Version Museum</a>Поисковик Yahoo! в 1996-м выглядел такИзображение:<a>Web Design Museum</a>Веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по 1998 год. Во-первых, тогда программирование развивалось в невероятном темпе:

18 1994

19 Первая версия браузера Opera.

20 1995

21 Появились Internet Explorer 1, JavaScript и PHP.

22 1996

23 CSS и запуск технологии Flash, которую стали использовать для векторной графики, игр и мультимедиа.

24 1997

25 Релиз Internet Explorer 3 и HTML 4.0. И в мире уже 100 млн пользователей интернета.

26 Во-вторых, развитию именно дизайна в вебе поспособствовал технологический прорыв:

27 <ul><li>Разрешение мониторов увеличилось до 800×600 пикселей.</li>

28 <li>Мониторы стали отображать 256 цветов и оттенков. Например, благодаря этому появились сайты с текстом салатового цвета на синем фоне.</li>

29 <li>Типографика стала мигрировать в цифру: в дизайне страниц стали использовать веб-шрифты Times New Roman и Courier New.</li>

30 <li>Появилась первая баннерная реклама, видеоплееры, анимированные GIF-изображения и цветные кнопки с 3D-эффектом, который потом разовьётся в скевоморфизм.</li>

31 </ul>Один из первых сайтов Рунета - "Дом-страница Артемия Лебедева" - сохранился в неизменном виде с 1995 годаСкриншот: сайт<a>tema.ru</a>/ Skillbox MediaСтраница с сообщением о блокировке доступа к Reddit. В конце 2023 года тоже можно встретить веб-дизайн в стиле раннего интернетаСкриншот:<a>Reddit</a>Если в 1990-х и в начале нулевых веб-дизайн и код, как правило, шли нераздельно, то сейчас проектированием макетов и созданием страниц часто занимаются разные специалисты.

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

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

34 Сайт проекта "Всё может быть отсканировано" собран на ReadymagСкриншот: сайт<a>ecbscanned</a>/ Skillbox MediaДемо книги написано в кодеСкриншот: сайт "<a>Бюро</a>" / Skillbox MediaВ работе веб-дизайнера есть три основных звена:

35 <ul><li>Он проектирует структуру интерфейса.</li>

36 </ul>Здесь его роль - архитектор-инженер, который продумывает концепцию и логику цифрового продукта и формирует его рабочий прототип.

37 Изображение: Aleksandra Vershinina /<a>Behance</a><ul><li>Визуализирует, как сайт или другой онлайн-сервис должен выглядеть для пользователя и функционировать на разных устройствах.</li>

38 </ul>В этой части работы веб-дизайнер обращается к принципам юзабилити и много тестирует свои идеи для того, чтобы продукт получился удобным для пользователя и одновременно выполнял задачу бизнеса.

39 Изображение: Анастасия Кочубиевская /<a>Behance</a><ul><li>Подбирает изображения, шрифты, микроанимации и другие элементы дизайна - всё, что создаёт эстетику проекта и "оживляет" его.</li>

40 </ul>При этом веб-дизайнер может работать с графикой, созданной другими, - брать в брендбуке знаки, палитру, паттерны, фирменные иллюстрации. Но иногда бывает, что у заказчика лендинга или цифровой платформы нет никакой айдентики: в этом случае веб-дизайнер может одновременно заниматься и бренд-дизайном, если его компетенции это позволяют.

41 Изображение: Ekaterina Panfilova /<a>Behance</a>Реализовывать проект может отдельный специалист - верстальщик или фронтендер, а может, и сам автор дизайн-решений. В этом случае его работу называют "создание сайтов под ключ".

42 Сайт-магазин коллекции Гоши Рубчинского и Йе написан на JavaScript. Подобные цифровые продукты, как правило, создаются командами в студияхСкриншот: сайт<a>sply.yeezy</a>/ Skillbox MediaПроцесс работы веб-дизайнера на фрилансе и в штате устроен примерно одинаково и подразумевает такую последовательность:

43 Встреча с клиентом и составление технического задания.

44 Обсуждение возможных решений - с командой или с самим заказчиком.

45 Проектирование логической структуры сайта.

46 Создание динамичного прототипа и его презентация.

47 Получение и обработка обратной связи от заказчика.

48 Визуальное оформление сайта. Подбор шрифтов, цветовой палитры, создание анимации, подбор изображений и иллюстраций, вёрстка текста.

49 Тестирование рабочего макета сайта, поиск ошибок.

50 Веб-разработка, запуск сайта и анализ его работы по метрикам. Даже если дизайнер сам не программирует и не производит цифровой продукт "руками", он всё равно участвует в этом этапе.

51 Изображение: Artur Nugmanov / Фёдор Мерзликин /<a>Behance</a>Заработок веб-дизайнера может быть и 20 000 рублей, и 200 000 рублей в месяц - как и в любой другой креативной или IT-профессии, он зависит от нескольких факторов:

52 1. Грейд.

53 Судя по актуальным объявлениям на hh.ru, джунам и стажёрам студии и небольшие компании предлагают от 30 000 рублей, мидлам - около 100 000, а сеньорам и лидам - от 350 000 рублей.

54 Скриншот: сайт<a>hh.ru</a>/ Skillbox Media2. Опыт.

55 В веб-дизайне это необязательно означает количество лет реальной службы за деньги. Это ещё и опыт в разных нишах: дизайнер, который работал над интерфейсами для нефтедобытчиков, ценится намного выше, чем дизайнер лендингов для коучей. Для заказчиков и работодателей часто важнее не "стаж 1-3 года", а конкретная практика: были ли у веб-дизайнера проекты B2B, или для локального ретейла, или делал ли он "фестивальные" сайты.

56 3. Дополнительные компетенции.

57 Каждая "дополнительная" профессия кратно увеличивает доход веб-дизайнера. Например, если он может предложить заказчику не только проектирование сайта, но и разработку брендинга, стоимость его услуг увеличивается минимум в два раза. Если он сам программирует и верстает, то может рассчитывать на х3 за проект. А если веб-дизайнер обладает навыками бэкенда, то он становится ценнейшим кадром и кандидатом - такой специалист может рассчитывать на достаточно высокую зарплату в студиях и крупных компаниях. Например, 300 000 рублей.

58 4. Локация заказчика. Реже - где находится сам веб-дизайнер.

59 Столичные компании и клиенты, как правило, готовы платить больше, чем региональные, а зарубежные - больше, чем российские. Учитывая, что удалённая работа в сфере дизайна уже стала нормой, даже веб-дизайнер из провинции вполне может зарабатывать "московские" деньги.

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

61 В конце ноября 2023 года платформа "Эйч" опубликовала<a>данные о зарплатах</a>графических, UX/UI- и motion-дизайнеров. Так, например, средняя зарплата UX/UI в Москве - 97 000 рублей, а по России - примерно на 25% ниже.

62 За дизайн лендинга на Tilda можно получить и 20 000 рублей, и 100 000. Это зависит от масштаба проекта, требований заказчика и того, делает ли веб-дизайнер всё сам или работает с другими профессионалами. Например, дизайн простой визитки-заглушки может стоить клиенту 8000 рублей, а если он заказывает у студии имиджевый лендинг с дизайном на zero-блоках и нестандартными решениями - и 200 000 руб.Скриншот: сайт<a>ADEM History</a>/ Skillbox MediaНасколько прогрессируют цифровые технологии, настолько же растёт объём того, что должен знать и уметь веб-дизайнер. К тому же грань между этой профессией и UX/UI уже практически стёрта: эволюционируют и интерфейсы, и требования пользователей к их удобству и эстетике.

63 Поэтому веб-дизайнер должен:

64 <ul><li>Хорошо ориентироваться в проектировании цифровых продуктов в целом, а не только в десктопных версиях сайтов.</li>

65 <li>Уметь анализировать аудиторию, проводить исследования, ориентироваться в задачах бизнеса.</li>

66 <li>Знать принципы построения грамотного user flow.</li>

67 </ul>Проработка user flow и интервьюирование аудитории для сервиса аренды велосипедов в БерлинеИзображение: Vladislav Lyashuk /<a>Behance</a>Кроме этого веб-дизайнеру для успешной работы полезно ориентироваться в основах нескольких "соседних" профессий:

68 <ul><li>Маркетолога, чтобы делать продающие интерфейсы или правильно интегрировать в них рекламу.</li>

69 <li>Бренд-дизайнера, чтобы своей работой правильно развивать визуальный язык компании-заказчика.</li>

70 <li>Копирайтера, чтобы наполнять свои проекты осмысленными текстами - хотя бы на этапе проектирования.</li>

71 <li>Верстальщика, чтобы понимать, какие решения технически возможны и как свои идеи лучше передавать в реализацию.</li>

72 </ul>Иногда в командах нет копирайтеров и редакторов, особенно если это благотворительный проект. В этом случае текстами на сайтах часто занимаются веб-дизайнер и сам заказчикИзображение: Дарья Жигалова /<a>Behance</a>Кроме этого, дизайнеру интерфейсов нужна хорошая насмотренность, умение презентовать и защищать идеи. А ещё - способность быстро учиться и осваивать новые темы: это важно, потому что веб-дизайнерам приходится разбираться в сути бизнеса заказчика.

73 Тому, кто работает с цифровыми продуктами, нужен тот же основной инструментарий, что другим дизайнерам:

74 <ul><li>Типографика.Сайты, приложения, платформы, онлайн-сервисы - это в первую очередь информация, поэтому необходимо умение подбирать шрифты, организовывать визуальную структуру текстами и грамотно подбирать графические формы кнопок под знаки.</li>

75 </ul>Сложная типографика на сайте о загрязнении воздухаСкриншот: сайт<a>Plastic Air</a>/ Skillbox Media<ul><li>Работа с цветом.Веб-дизайнер не просто "раскрашивает" макеты: палитры - это тоже способ структурировать информацию, привлечь внимание к главному.</li>

76 </ul><ul><li>Работа с формами, графикой, иллюстрациями.Как и в коммуникационном дизайне, в вебе элементы оформления должны выполнять задачи.</li>

77 </ul>Изображение: nastya galeeva / Kirill Kashkin / Sasha Chuguevskaya /<a>Behance</a>Веб-дизайнер в первую очередь пользуется следующими программами, графическими редакторами и приложениями:

78 <ul><li>Figma;</li>

79 </ul><ul><li>Adobe Photoshop, Illustrator;</li>

80 <li>Midjourney, Leonardo.ai, ChatGPT и другими ИИ-помощниками;</li>

81 </ul><ul><li>Spline или Blender.</li>

82 </ul>Большим преимуществом будет умение самому делать лендинги и интернет-магазины с помощью самых популярных конструкторов:

83 <ul><li>Tilda,</li>

84 </ul><ul><li>Webflow,</li>

85 </ul><ul><li>Readymag.</li>

86 </ul>Дизайнеры веб-продуктов востребованы и в IT, и в торговле, и в сфере услуг, а главное, спрос на профессионалов не уменьшается. Но несмотря на то, что эта сфера по меркам диджитала "древняя", получить качественное образование по этой специальности в российских вузах проблематично.

87 <ul><li>Программа переподготовки по направлению "веб-дизайнер" есть в <a>ИТМО</a>.</li>

88 <li>Можно прослушать заочный курс из 48 академических часов "Дизайнер-верстальщик" в <a>Московском политехе</a>.</li>

89 <li>Есть несколько программ дополнительного образования по направлению "Дизайн и программирование" в <a>НИУ ВШЭ</a>.</li>

90 </ul>Самый распространённый способ освоить эту профессию - это онлайн-курсы, где учат решать дизайном задачи реального бизнеса, работать с типографикой, верстать контент по сетке.

91 Здесь мы напомним про курс Skillbox "<a>Профессия Веб-дизайнер</a>". В вашем портфолио будет 15 проектов от реальных заказчиков, на курсе есть игровой тренажёр и помощь в трудоустройстве.

92 А для первого погружения можно выбрать курс по конкретной программе или конструктору.

93 <a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>