История профессии веб дизайнер кратко

Обновлено: 03.07.2024

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

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

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

Тёмный век веб-дизайна (1989)

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

Таблицы — начало (1995)

Javascript приходит на помощь (1995)

Ответом на ограничения HTML был Javascript. Хотите вывести всплывающее окно? Или вам нужно настроить динамическое изменение расположения элементов? Ответ один — Javascript. Однако главная проблема заключалась в том, что Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно. Нередко ленивые разработчики использовали его для создания быстрой заплатки для кода, однако в умелых руках он способен превратиться в очень мощный инструмент. В наши дни мы предпочитаем избегать использования Javascript, если тот же самый элемент может быть реализован с помощью CCS, но даже несмотря на это, JavaScript сегодня не теряет своей актуальности как в разработке интерфейсов (jQuery), так и в программировании серверной части (Node.js).

Золотая эпоха свободы – Flash (1996)

Появившаяся в 1996 году технология обещала невиданную ранее свободу и ставила своей целью разрушить барьеры, которые сдерживали развитие веб-дизайна в то время. Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента — технологии Flash. Конечный результат работы упаковывался в один файл, а после этого отправлялся в браузер для отображения. Все это работало при условии, что у пользователя стояла последняя версия flash plugin и было немного свободного времени для того, чтобы подождать, пока содержимое загрузиться. Выглядело это волшебно. То время было золотой эпохой ярких страниц приветствия, вводных анимаций и всякого рода интерактивных эффектов. К сожалению, технологии явно не хватало открытости, дружественности к поиску, а потребление ресурсов Flash было по-настоящему большим. Когда Apple решили избавиться от него в своем первом iPhone (2007), технология начала угасать, во всяком случае с точки зрения перспектив в веб-дизайне.

CSS (1998)

Подъем мобильного контента — сетки и фреймворки (2007)

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

После нескольких итераций победу одержала сетка в 960 px, а разделение на 12 столбцов стало использоваться дизайнерами преимущественно. Следующим шагом была стандартизация широко распространенных элементов, таких как формы, меню навигации, кнопки, а также создание возможности их быстрого и простого использования или, попросту говоря — создание библиотеки визуальных элементов, которая содержит в себе весь необходимый код. Победителями здесь стали Bootstrap и Foundation, что также говорит о том факте, что грань между веб-сайтом и приложением стала стираться. Недостатком подхода стало то, что новые дизайны стали чаще выглядеть одинаково. Сами же дизайнеры при этом по-прежнему не могли получить доступ к их изменению без понимания того, как работает код.

Адаптивный веб-дизайн (2010)

Упрощение (2010)

Светлое будущее (2014)

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

Формально, сегодня существует несколько новых идей, которые поддерживают движение в этом направлении. Новые юниты CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов. Они также решают проблему, которая удивляла многих дизайнеров: почему центральное выравнивание по вертикали в CSS делается с таким трудом? Еще одна крутая идея, ставшая частью CSS — Flexbox, который позволяет создавать макеты и изменять их при помощи одного свойства, вместо написания кучи кода. Ну и наконец, web components — еще более основательная попытка, которая представляет собой связанный вместе набор элементов, таких, например, как галерея или форма регистрации. Это создает возможность упростить рабочий процесс, так как элементы становятся строительными блоками, которые могут быть использованы много раз, в том числе и самостоятельно.

Ну а каковы ваши мысли по поводу будущего веб-дизайна?

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

Инструменты веб-дизайнера непрерывно меняются. Если дизайнер не хочет остаться без куска хлеба — важно держать руку на пульсе и следить за трендами.

World Wide Web

Как повысить конверсию на 94%, перекрасив несколько пикселей

Первый сайт

В 1993 году появляется первый браузер с поддержкой графики — NCSA Mosaic, а спустя ещё 3 года — каскадные таблицы стилей (CSS), позволившие форматировать сплошной текст.

Браузер NCSA Mosaic

Photoshop и UI/UX

Adobe Photoshop стал популярен среди дизайнеров с самого его появления. Созданный изначально для полиграфии и фотообработки, он стал незаменимым инструментом для дизайна. Несмотря на множество функций в растровой графике, дизайнеры 90-х использовали Photoshop чаще, чем Illustrator, созданный для векторной. Более 20 лет Adobe занимал роль монополиста в своей сфере.

Photoshop v.1.0.7

Уметь верстать было необязательно, так как дизайнерам приходилось решать всё больше визуальных задач. Оказалось, выгоднее оптимизировать работу и разделить задачи на двух разных людей — верстальщика и дизайнера. Важно было уметь пользоваться всеми возможностями Photoshop и Illustrator. Чтобы верстальщик смог работать в паре с дизайнером, последний должен был понимать вёрстку. А уже после к этому добавилось требование понимания пользовательских сценариев и поведения человека на сайте.

И понеслась

Скорость интернета продолжала расти, сайты — усложняться, и начали появляться веб-сервисы.

Теперь мы используем предварительный этап создания прототипа — прототипирование и продумывание взаимодействия.

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

На смену скевоморфизму приходит flat-дизайн, а вслед за ним материал-дизайн. Появившийся в 2008 году Sketch как простая и понятная программа для дизайнеров на Mac набирает популярность.

Материал-дизайн в Windows

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

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

Чего ждать в ближайшем будущем

Требования к дизайнеру зависят от целей компании. Но редко встречаются дизайнеры, которые обладают всеми перечисленными навыками одинаково хорошо. Чаще они хороши в чём-то одном, и именно этим они ценны.

Думаю, что в будущем, с ростом технологий виртуальной реальности, интерфейсы перейдут в 3D. Уже сейчас создаются сайты под VR. Пока что это арт-пространства, но кто знает, как это будет развиваться?

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

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

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

Чем занимается веб-дизайнер

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

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

Основные обязанности веб-дизайнера:

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

Сколько получают веб-дизайнеры

Как и во многих других профессиях, зарплата веб-дизайнера зависит от его стажа. Если смотреть на объявления с сервисов по поиску работы, то в России начинающие специалисты или стажеры могут рассчитывать на зарплату от ₽40 тыс. Профессионалы среднего уровня, со стажем от года, получают от ₽60 тыс., а старшим специалистам с многолетним опытом обещают от ₽100 тыс. и выше. При этом на уровень зарплаты влияет не только опыт, но и знания, навыки, репутация и количество клиентов.

В веб-дизайне широко распространен фриланс, поскольку профессия завязана на компьютере и, при желании, с ним под рукой можно работать из любой точки мира. При фриланс-занятости на первый план вместо стажа выходят портфолио, а также скорость и качество работы. Для удаленных специалистов важны и навыки работы с клиентами, поскольку каждый раз придется договариваться самостоятельно. Зарплата утверждается по договоренности или за каждый отдельный элемент. Например, за главную страницу сайта и за добавление новой рубрики гонорар может различаться. При таком подходе оплата варьируется в среднем от ₽5 тыс. до ₽8 тыс. за задачу. Если работать на зарубежный рынок, то, согласно анализу портала Kinsta, средняя зарплата веб-дизайнера в год будет $57 тыс. в год или около ₽350 тыс. в месяц.

Что должен знать и уметь веб-дизайнер

Чтобы стать таким специалистом потребуется широкий спектр навыков. Важно не только быть творческим человеком, но и уметь работать с рядом программ и обладать определенной базой знаний. В то же время важны и soft skills, поскольку работа веб-дизайнера неразрывно связана с общением с клиентами.

Что может потребоваться веб-дизайнеру:

знание принципов дизайна: изучение основ поможет лучше углубиться в профессию;
знание типографики и умение работать со шрифтами;
понимание правил композиции, чтобы выстраивать визуальную гармонию;
знакомство с цветовым кругом и понимание, как разные цвета работают вместе;
умение пользоваться дизайнерскими программами, например, Adobe Illustrator, Photoshop и Figma;
умение работать в программах для адаптивного веб-дизайна: они позволяют проверять, как страницы смотрятся с разных устройств;
навыки графического дизайна, которые помогут улучшить работу и расширить потенциальное число работодателей;
понимание бизнес-стратегий. Важно знать, как дизайн сможет помочь целям клиента. Иногда при редизайне сайта достаточно изменить несколько настроек в навигации, чтобы привлечь поток посетителей.

Необходимые soft skills:

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

Как стать веб-дизайнером

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

Суровые 90-е

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

Первые сайты, первые провайдеры, первые веб-дизайнеры. Мониторы с разрешением 640х480, поддерживающие всего 16 цветов (!). Черный текст, синие ссылки, красные или розовые заголовки. Красота!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

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

Карамельные 2000-е

Еще один качественный прорыв история развития web-дизайна совершила в 2000-е годы, когда технология CSS (Cascading Style Sheets) позволила отделить содержимое веб-страниц от их оформления. 2004–2006 годы считаются началом эры WEB-2.0.

плавные градиенты и мягкие цвета;

объекты скругленной формы;

паттерны на фон.

Да здравствует мобильный контент

До 2007-го года просмотр веба на мобильных телефонах был испытанием не для слабонервных. Появление iPhone и массовое распространение социальных сетей дало толчок развитию мобильных приложений и веб-сайтов.

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

Использование сеток со столбцами при разработке макета сайта стало первым шагом к улучшению ситуации. Веб-дизайнеры стали использовать сетку в 960 пикселей, разделенную на 12 столбцов.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

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

Скевоморфизм и адаптивный веб-дизайн

От сложного к простому

Наше время

Прекрасно сочетается с Flat 2.0 такое направление, как Google Material Design (материальный дизайн), с его визуальными подсказками в виде интересной игры движений, света и теней.

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

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

Если вам понравилась статья, подписывайтесь на обновления нашего блога и делитесь ими с друзьями. Всем хорошего настроения и до новых встреч!

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

Научитесь создавать уникальные сайты с эффектным дизайном и продуманным UX

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

История веб-дизайна

Первый сайт появился 6 августа 1991.

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

Началом его эпохи стали 1994-1996 годы.

В 1997-1998 году визуал сайтов начал приобретать привычные нам черты.

Появился структурный дизайн — Cascading Style Sheets (CSS), макеты сайтов стали табличными. На страницах появились иконки и навигация, дополненная эффектами: увеличением текста при наведении курсора, смена цвета надписи и т.д.

Примерно в это же время начала развиваться FLASH-технология:

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

К началу 2000-х дизайнеры утомились от пестроты и мерцаний.

Дизайн сайтов снова преобразился: в моду вошли тени, мягкие цвета, глянцевые элементы. Навигация стала еще более удобной и понятной.

С 2004 года началась эпоха Web 2.0.

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

В 2007 году начинает развиваться сфера мобильных устройств: их доля в интернет-трафике активно растет.

Одним из основных требований к разработке сайтов становится адаптивный дизайн. Он делает возможным просмотр страниц с любых устройств (мобильных и стационарных) без потери функциональности интерфейса.

Чем занимается веб-дизайнер

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

К визуальной части относится не только внешний вид страниц. Помимо графических элементов — картинок, иллюстраций — web designer продумывает логику расположения элементов на экране, анимацию переходов, цветовую палитру. Если специалист работает над сайтом для определенного бренда, ему приходится учитывать особенности айдентики при разработке концепции.

Работа над пользовательским интерфейсом (UX) — не менее значимая составляющая продукта, который делает веб-дизайнер. Он должен понимать, кто и зачем будет заходить на страницу, каковы особенности целевой аудитории, что ей интересно, чего она ждет от контакта с продуктом. Очевидно, сайт с развивающими занятиями для школьников будет сильно отличаться от лендинга крупной производственной компании — отнюдь не только цветовой схемой и видом иконок. Дети обрадуются какому-нибудь виртуальному щеночку-проводнику, водящему их от раздела к разделу. А работникам бизнес-среды нужен предельно лаконичный и информативный сайт, без щеночков и других затей.

Востребованность профессии

Веб-дизайнер в Москве зарабатывает (по данным портала Trud) — 48 033 ₽. Столько может получать junior-специалист — то есть тот, кто приходит в компанию на стартовую позицию. По мере роста компетенций и перехода в middle или senior зарплата web-дизайнера может начинаться уже от 70 000 ₽. Средняя зарплата веб-дизайнера в России напрямую зависит от позиции. Имеет значение и место работы. В крупной и влиятельной компании у junior-специалиста зарплата может быть выше, чем у middle в небольшом дизайнерском агентстве.

Так как профессия позволяет работать удаленно, не обязательно ограничивать круг поиска вакансий только своей страной. Рынок других стран — Европы и США — открыт для талантливых соискателей. Уровень зарплат там выше: например, веб-дизайнер в США получает $57 467 в год, то есть почти $5 000 в месяц (по данным портала Glassdoor).

Научитесь создавать удобные пользователю веб-сайты с применением 3D и анимации всего за 5 месяцев

Читайте также: