Как изменились технологии в web-разработке с 2009 года.

Вирусный флешмоб  #10yearchallenge, в котором пользователи сравнивают свои фотографии десятилетней давности с новыми, начался с твиттера, пробрался в инстаграм и захламил фейсбук. Скажем спасибо американскому журналисту Деймону Лейнону за еще одно бесполезное занятие в интернете. В январе 2019 он опубликовал пост в фейсбуке, в котором сравнил свои фото 10 лет назад и сейчас. Деймон назвал этот флешмоб How Hard Did Aging Hit You Challenge («Как сильно возраст повлиял на вас»). За несколько месяцев челендж обошел все соцсети, ну а мы превратили его в мини-исследование и сравнили технологии в веб-разработке в 2009 и в 2019 году. Мы проанализировали все этапы разработки и расскажем какие изменения произошли за последние 10 лет.

Часть I Веб-дизайн

Визуал и проектирование

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

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

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

2019: Кастомные иллюстрации в сочетании с цветом года уже породили мемы с прогнозом о том, как будут выглядеть сайты в 2019. Заезженность иллюстраций спасла их 3D-визуализация с подключением анимации. Анимация вездесуща. Если на вашем сайте нет даже микро-анимации, то ваш сайт — цифровое бревно. Дизайнеры смешивают фото с иллюстрациями и градиентами, экспериментируют с пространством и типографикой, ломают сетку. Кроме больших фотографий, которые использовали уже в 2009 году, теперь интегрируют и видео в качестве фона. Везде, куда ни плюнь. Спасает только качество контента или неординарная подача.

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

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

Технологии растут и вот уже сын маминой подруги собирает “на коленке” сайт на конструкторе, тут же подключает личный кабинет и CMS.

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

Обучение

2009: Отучился в ВУЗе 5 лет? Молодец, держи медальку, ты теперь желанный специалист. Знаний хватит на 20 лет работы.

Спойлер: нет не хватит.

2019: В 2009 тебя обманули. Такой лафы нет. Будь любезен, учись постоянно, иначе тебя вытеснят амбициозные и раскованные новички. Новые знания с каждым годом накатывают в таком объеме, что пока ты учишься в ВУЗе, большая часть твоих знаний успевает устаревать. Как следствие – наблюдаем построение ранней карьеры в веб-дизайне. Возможностей теперь больше: книги, статьи, вебинары, Телеграм-каналы, онлайн-школы, стажировки и т.д.

Софт

2009: Дизайнеру хватало Photoshop. Макеты нарезались и передавались верстальщику, либо он нарезал их сам.

2019: Дизайнеру представлен выбор между Sketch, Figma, Framer X, Adobe XD, InVision Studio и другими. А лучше владеть сразу несколькими инструментами.  Возникли даже софт-войны, что лучше – Sketch или Figma.

Появилась возможность совместного редактирования макетов. Будьте внимательны, первое время вас могут посещать мысли, будто дизайн делается сам по себе. Для ленивцев разработчики заложили различные шаблоны под популярные форматы и разрешения. Дизайнер, словно магистр высших сил, пользуется символами и компонентами, формирует библиотеки. Для контроля версий, помимо встроенных инструментов, существует Abstract. Для презентации анимации – After Effects и Principle. Теперь верстальщикам не обязательно скачивать пиратский софт, чтобы открыть макеты, для этого существуют Zeplin, InVision и уровни доступа в Figma. Выбора больше – мороки больше.

В заключении

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