Веб-дизайн 3.0: когда он действительно имеет значение

Мы, лаборатория Friendly Design, следим за трендами и исследованиями в области дизайна и около. Хотим поделиться с вами переводом статьи про развитие веб-дизайна, конструкторах, которые замедляют его развитие, и новое поколение веб-дизайна 3.0

Время чтения: 21 минута, мы предупредили

Введение

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

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

Эта статья состоит из нескольких частей:

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

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

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

Часть 1: веб-дизайн меняется

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

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

Первые сайты

Первые сайты были текстовыми. И трудно сказать, что у них был какой-то веб-дизайн (в современном понимании).

Переход к веб-дизайну 1.0

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

Многие создавали свои собственные системы управления контентом (CMS). Таким образом, веб-мастерам не нужно было редактировать отдельные HTML-файлы и загружать их каждый раз на сервера. Но было возможно изменить контент в онлайне, в режиме реального времени.

Дальнейшее развитие веб-дизайна и распространение мобильных телефонов привело к новым изменениям.

Переход к веб-дизайну 2.0

Проектирование веб-страниц с помощью сеток стало обыденным.

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

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

Современный веб-дизайн на различных устройствах

WordPress, Joomla и Drupal стали самыми популярными системами управления контентом. Они заменили самописные, которые были несовершенными и дорогостоящими в написании и поддержке, а также имели ограниченную функциональность. Благодаря WordPress и Joomla любой желающий смог создать блог или сайт. И даже на сегодняшний день более 20% сайтов работают с использованием этих систем.

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

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

Умер ли веб-дизайн

Казалось бы, все должны быть довольны: веб-дизайнеры, веб-разработчики и пользователи. Однако возникла новая проблема. Веб-дизайнеры начали задавать один и тот же вопрос: «Веб-дизайн мёртв?». Вы сможете без труда найти статьи, содержащие этот вопрос на всех известных платформах вроде Medium, Mashable, Smashing Magazine, Quora и Reddit. С 2015 года веб-дизайнеры задают один и тот же вопрос.

На картинке ниже — результаты поиска в Google по этому запросу.

Результаты поисковой системы Google

Почему это происходит? На диаграмме ниже видно, что Bootstrap достиг пика своей популярности в 2015-2016 годах.

Bootstrap в Google Trends

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

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

Результаты Pinterest: «web design bootstrap»

В 2015 году, Бен Хант опубликовал книгу под названием «Веб-дизайн умер». Основная идея книги заключается в том, что популярность тем и шаблонов за $50 почти убила спрос на работу веб-дизайнера.

Веб-дизайн, создаваемый профессионалами, стоит гораздо больше, потому что требует времени, знаний и навыков. Далее: кастомный дизайн требует вёрстки в HTML и CSS.

Вы можете спросить, актуальна ли эта проблема сегодня? Да, эта проблема всё ещё актуальна. По прошествии четырёх лет проблема не решена. На картинке ниже — подсказки поиска Google. Люди продолжают задавать тот же вопрос.

Веб-дизайнеры стали искать выход и решения. Они не могли оставаться в стороне, не могли смотреть на то, что веб-дизайн, страсть их жизни, остановился в развитии. Всегда находятся дизайнеры, которые хотят сделать веб лучше. Стив Джобс однажды сказал о таких людях: «Думайте иначе». Такие люди всегда в поиске новых идей.

Полиграфический дизайн

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

Эволюция полиграфического дизайнаonlinedesignteacher.com По материалам Online Design Teacher

Инструменты полиграфического дизайна всегда позволяли свободно размещать элементы. Дизайнеры никогда не были ограничены в творчестве. А творцы всегда были свободны в представлении таких идей. Конечно, в то время не нужно было думать об HTML и CSS или мобильных устройствах.

Формула полиграфического дизайна:

Свободное позиционирование + креативность = современный полиграфический дизайн

Полиграфический дизайн Pinterest

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

Рождение веб-дизайна 3.0

Начиная с 2016 года, мы стали замечать, что идеи полиграфического дизайна стали регулярно появляться в дизайнах веб-страниц на Pinterest, Behance и Dribbble. Они отличались:

  • Свободным позиционированием.
  • Наложением элементов.
  • Выходом за рамки модульных сеток Bootstrap и подобных библиотек.

Это означало рождение веб-дизайна 3.0! Веб-дизайн 3.0 — свобода для веб-дизайнера.

Современный веб-дизайн Pinterest

Летом 2016 года на сайте 83 Oranges была представлена статья под названием: «Тенденции в веб-дизайне».

Автор выделил следующие стили в веб-дизайне:

  • Текст поверх изображения.
  • Перекрывающиеся изображения.
  • Вертикальный текст и минималистичные макеты.
  • Несимметричные модульные сетки в галереях.
  • Изображения с большими заголовками.
  • Абстрактные брендированные элементы.
83 Oranges Pinterest

В третьей части мы подробно рассмотрим стили и способы создания веб-сайтов на Web Design 3.0.

Выход за рамки модульных сеток

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

Pinterest

Если Вы напишите «picture wall» в поле поиска на Pinterest или Google, то 90% результатов будут выглядеть так, как показано на картинке ниже. Вы видите, что дизайн претерпел серьезные изменения. Во всех направлениях дизайна наблюдается стремительный прогресс.

Pinterest

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

Современные модульные сетки

В современных веб-сайтах всё больше используют сложные модульные сетки. Также набирает популярность CSS Grid.

Сложные модульные сетки

Тенденции веб-дизайна 3.0

Современный дизайн веб-сайтов, ломающий привычные стереотипы, становится популярнее. На графике видно, что с каждым годом всё больше веб-дизайнеров открывают для себя мир веб-дизайна 3.0. Этот график показывает результаты по тематике «веб-дизайн» на Pinterest, Behance и Dribbble. Тенденция, вероятно, сохранится и в будущем.

Тенденции веб-дизайна на Pinterest, Behance и Dribbble

Исследование веб-дизайна

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

Фактические данные подтверждают эти результаты исследований. За несколько месяцев мы получили около 800 тысяч уникальных зрителей в месяц. Это говорит о растущей популярности страниц на веб-дизайн 3.0.

Рост аудитории на Pinterest

Если вы хотите, чтобы ваши идеи в веб-дизайне стали заметными на Pinterest или Behance, альтернативы нет: вам нужно создавать сайты в веб-дизайне 3.0. Если вы ещё не начали, следует поторопиться! Мы поможем вам понять, что именно нужно сделать.

Наша цель

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

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

Веб-дизайн 3.0 на Pinterest

Конструкторы сайтов не для творческих людей

Вы можете спросить, где все эти сайты веб-дизайна 3.0? Почему мы видим так мало подобных сайтов? Есть несколько причин:

  • У веб-дизайнеров нет удобных инструментов для создания HTML или тем для Joomla и WordPress по правилам веб-дизайна 3.0. А многим конструкторам сайтов не хватает свободного позиционирования. Дизайнеры по-прежнему вынуждены использовать инструменты для графического дизайна вроде Adobe Photoshop, Adobe XD, Figma или Sketch для представления своих идей.

    Чтобы поделиться идеями с миром, они выкладывают идеи, сохраненные в виде картинок, на Pinterest, Behance и Dribbble. Веб-дизайнеры не могут создавать реальные веб-страницы. Более того, если веб-дизайнеры хотят превратить картинки в веб-страницы, им приходится верстать HTML и CSS этих страниц вручную. А это долгий и довольно дорогостоящий процесс.
  • Нет ресурсов, где можно увидеть текущие тенденции веб-дизайна. Да, есть Pinterest, Behance и Dribbble. Но чтобы понять тенденции, нужно отслеживать изменения в индустрии, которые происходят каждый день. У разных отраслей есть свои веб ресурсы, где можно узнать, что наиболее актуально сегодня: в кино, в музыке, на YouTube. Можно увидеть тенденции всякого разного, но только не веб-дизайна.

    Это создает много спекуляций на тему того, что актуально в веб-дизайне. Также много различных «экспертов», которые любят поговорить о тенденциях. Но нам всем нужен ресурс о веб-дизайне с реальными цифрами. Тогда можно будет понять, что сегодня реально в тренде, в один клик.
  • Из-за отсутствия реальных данных и проверенных авторитетных мнений, дизайнеры продолжают создавать веб-дизайн прошлого поколения.
  • Существует колоссальное несоответствие между идеями веб-дизайна и инструментами для их реализации. С помощью известных конструкторов сайтов невозможно реализовывать современные идеи. Это значительно замедляет развитие и рост веб-дизайна 3.0. Мы категорически против ограничения свободы творчества веб-дизайнеров. У дизайнеров должен быть выбор, в каком виде реализовывать идеи своих проектов

Модные идеи веб-проектов должны сойти с подиумов на Pinterest и Behance, став работающими сайтами.

Выводы

Веб-дизайн молод, и он действительно стремительно развивается.

  • Первая трансформация — появление графики в вебе. Это сделало веб более привлекательным и интересным, что позволило ему завоевать мир. Использование графики позволило вебу стать новым самостоятельным способом распространения информации.
  • Вторая трансформация связана с появлением блогов, модульных сеток и поддержкой мобильных устройств. Использование Bootstrap и популярность шаблонов сделали веб-дизайн скучным и неинтересным.
  • Третья трансформация является наиболее значимой. Она привела к рождению веб-дизайна 3.0. Всё больше издательств переходят в онлайн, а пользователи предпочитают получать информацию с мобильных устройств. Веб-дизайнеры черпают идеи из полиграфического дизайна и переносят их в веб. Им нужна свобода творчества, свободное расположение элементов и выход за рамки модульных сеток.

Часть 2: конструкторы сайтов отстают от тенденций

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

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

Эволюция конструкторов сайтов

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

Эволюция инструментов веб-дизайна

Рассмотрим эти трансформации поближе.

Переход к визуальным редакторам

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

Переход к визуальным редакторам

Переход на Bootstrap

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

Было выпущено несколько популярных конструкторов сайтов, а также плагинов в основном для WordPress, например Webflow, VisualCompuser, Elementor, Divi и другие. Большинство из них основаны на Bootstrap. Однако они хорошо подходят для работы в веб-дизайне 2.0.

Чего же им не хватает, чтобы подходить для веб-дизайна 3.0? В основном того, что конструкторы сайтов и плагины, основанные на Bootstrap, не имеют свободного позиционирования и слоёв. Кроме того, они не предполагают простоту и удобство использования, которые есть у всех доступных инструментов для графического дизайна и которые нужны веб-дизайнерам.

Недавно Bootstrap изменил иллюстрацию на главной странице. Как вы видите ниже, иллюстрация изображает слои. Возможно Bootstrap работает над тем, чтобы работать со слоями и иметь свободное позиционирование.

Главная страница Bootstrap

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

Переход на веб-дизайн 3.0

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

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

Далее мы рассмотрим: невозможность творчества, плагин Gutenberg и конструктор Wix.

Невозможность творчества

В это сложно поверить, но получается, что часто разработчики движутся в противоположном направлении. Некоторые «новомодные» инструменты, такие как Wix ADI, GoDaddy Site Builder и Mobirise, предлагают пользователям только фиксированный набор готовых блоков или шаблонов, где можно заменить только текст и изображения, но изменить макет нельзя.

Неужели разработчики хотят, чтобы все сайты выглядели одинаково? Разве это даёт возможность для творчества и разве таким должно быть развитие веб-дизайна?

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

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

Gutenberg

Следующий пример. Как известно, WordPress выпустил новый редактор статей Gutenberg. Почему он появился? Похоже, разработчики WordPress хотели создать редактор статей подобный тому, что есть на Medium. Кроме того, они хотели добавить функциональность таких инструментов, как VisualComposer.

То есть разработчики попытались убить двух зайцев: сделать редактор статей и в то же время элементарный конструктор. Казалось бы, снова должны быть все счастливы, однако в реальности — обратное. Пользователям абсолютно не понравилось это нововведение от WordPress.

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

Разработчики могли просто сделать удобный API, чтобы облегчить разработку конструкторов сайтов для WordPress. Вместо этого они выпустили ещё одного конкурента существующих конструкторов. Более того, они не дали никаких готовых дизайнов или тем.

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

Wix

Wix попытался стать инструментом веб-дизайна 3.0. Проблема Wix заключается в том, что его HTML не соответствует стандартам, которые приняты разработчиками. Позиционирование элементов абсолютное. С таким HTML невозможно работать, такой код сложно поддерживать для мобильных устройств.

Wix поддерживает только два режима: настольные компьютеры и телефоны. На практике же требуется поддержка минимум пяти типов устройств. Wix пересчитывает позиционирование с помощью JavaScript, а не средствами HTML 5 и CSS 3. Также отсутствует панель свойств, которая есть во всех популярных графических инструментах, используемых дизайнерами.

Похоже, Wix в основном ориентируется на конечных пользователей и не рассчитан на дизайнеров и разработчиков. Например, вот комментарий под популярным видео на YouTube, который называется "How to Make a Website — Web Design Tutorial" («Как сделать веб-сайт — учебник по веб-дизайну») на канале Draw with Jazza. Обсуждение этого видео все ещё продолжается.

Комментарий под видео

Wix попытался упростить разработку сайта и создал Wix ADI, где полностью исключена возможность изменения дизайна. Редактировать можно только текст и заменять изображения. Таким образом, Wix ADI ещё больше отдаляется от веб-дизайна 3.0.

Конструкторы сайтов остановились в развитии

Почему не создаются новые инструменты, которые так нужны индустрии веб-дизайна?

  • Сложность. Конструкторы сайтов — сложные системы, требующие значительных вложений и много времени на разработку. Также нужна отличная идея, которая сможет изменить веб-дизайн.
  • Монополизм. Новым инструментам очень сложно выйти на существующий рынок конструкторов сайтов. Текущие инструменты имеют большую пользовательскую базу, накопленную за эти годы. О новых инструментах сложно сообщить большому количеству пользователей.
  • Пассивность.Разработчики и пользователи, которые пользуются конструкторами сайтов, очень пассивны. Изменения всегда связаны с определёнными рисками и дополнительными усилиями. А люди предпочитают ничего не менять, так как думают, что так, как сейчас, будет всегда. Пожалуйста, не будьте инертными!

Прогресс не остановить

Дизайн не стоит на месте. Никто не в силах остановить развитие. Тем не менее новое всегда встречает трудности на пути. Наша общая цель — поддержать новаторов веб-дизайна 3.0 для изменения сети.

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

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

CSS Grid

CSS Grid постепенно становится новым стандартом для создания макетов.

Новое измерение в веб-дизайне

Позиционирование элементов также имеет несколько этапов развития.

  • Web Design 1.0 — одномерный. Все элементы дизайна в основном располагаются последовательно, один за другим.
  • Web Design 2.0 — двумерный. Применяются модульные сетки для размещения элементов в ячейках, что даёт больше свободы.
  • Web Design 3.0 — появление нового измерения. Свободное расположение элементов, использование наложения, а также появление слоев, аналогично инструментам для графического дизайна. Это открывает совершенно новые возможности для воплощения идей, творчества. Это начало новой эры веб-дизайна.
Измерения в веб-дизайне

Новое измерение веб-дизайна — это как LEGO и мозаика.

Поколения веб-дизайна

Выход за рамки модульных сеток

Как уже говорилось, веб-дизайн 3.0 требует свободного позиционирования и выхода за рамки модульных сеток. Уникальное расположение элементов делает весь дизайн уникальным. Это значительно отличается от иcпользования двух-, трёх- и четырёхколоночных дизайнов, которые все похожи друг на друга.

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

На картинке ниже вы видите сравнение позиционирования элементов. Для веб-дизайна 3.0 очень важно иметь свободное позиционирование.

Сравнение ограниченного и свободного позиционирования

В веб-дизайне 3.0:

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

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

Свободное позиционирование и перекрытие элементов набирают популярность во всех областях дизайна.

Свободное позиционирование в интерьерах

Сравнение ограниченного и свободного позиционирования

Что предлагают популярные конструкторы сайтов? На картинке ниже — сетка из двух колонок, на левой колонке текст. Допустим, вы хотите улучшить дизайн и думаете, как разместить текст.

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

Серьёзно? Кто-нибудь думает, что при подобных ограничениях можно создавать уникальные и современные дизайны с помощью популярных конструкторов сайтов? Ответ очевиден — ограниченное позиционирование практически не позволяет легко и просто создавать сайты в рамка веб-дизайна 3.0!

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

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

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

Позиционирования в веб-дизайне

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

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

Чувствуете разницу? Способ передвижение по карте справа больше похож на свободное позиционирование веб-дизайна 3.0. У вас гораздо больше свободы выбора.

Карты Вашингтона

Другой пример. Эта статья была изначально написана в Word. Word имеет ограниченное позиционирование, аналогичное веб-дизайну 2.0. Функций Word достаточно, чтобы написать статью, но недостаточно, чтобы создать презентацию. Для этого мы обычно используем PowerPoint.

Чувствуете разницу? В PowerPoint элементы можно размещать свободно. Это даёт вам гораздо больше свободы для творчества и создания дизайна. Для наглядности разница показана на картинке ниже.

Word и PowerPoint

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

Разделенные рынки

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

Рынки инструментов для веб-дизайнеров и веб-мастеров

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

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

Мы нашли интересную веб страницу на Web Design 3.0, нам стало интересно, как устроен ее HTML код. Мы открыли инспектор в браузере и обнаружили, что весь дизайн выполнен в виде одной большой картинки.

А как же кнопки или ссылки, спросите вы? Да, есть и кнопки, но они реализованы как кликабельные области в HTML. Мы видим, что данная страница была сделана в обычном графическом редакторе и загружена на веб-сайт как фоновое изображение, потому что, скорее всего, дизайнеры не смогли подобрать подходящий и одновременно простой в использовании конструктор сайтов для веб-дизайна 3.0.

Веб-дизайнерам нужны:

  • Свободное позиционирование.
  • Выход за рамки модульных сеток.
  • Слои.
  • Панель свойств для изменения параметров.
  • Поддержка Windows и Mac OS.

Веб-мастерам нужны:

  • «Чистый» HTML и CSS.
  • Поддержка мобильных устройств.
  • Поддержка WordPress и Joomla.
  • Возможность создания сайтов в онлайне.

Мы видим, требования различны. А это значит, что для создания сайтов на веб-дизайне 3.0 нужны революционные изменения.

Выводы

  1. Конструкторы сайтов отстают от стремительно развивающегося мира веб-дизайна.
  2. История инструментов веб-дизайна включает в себя также несколько трансформаций. Однако прогресс остановился. Есть много признаков, указывающих, что скоро должна произойти новая трансформация.
  3. Рынки для веб-дизайнеров и веб-мастеров разделены. Популярные конструкторы сайтов не поддерживают основные функции, необходимые для веб-дизайна 3.0: свободное позиционирование, современные асимметричные макеты и слои.

Часть 3: инструменты для веб-дизайна 3.0

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

Новая формула современного веб-дизайна выглядит следующим образом:

Веб-дизайн + веб-мастеринг = веб-дизайн 3.0

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

Пересечение рынков для веб-дизайнеров и веб-мастеров

Существуют ли такие инструменты? Да, существуют.

Например, Wix — популярная платформа, её проблемы мы отметили выше: использование абсолютного позиционирования, нередактируемый HTML, ограниченная поддержка мобильных устройств.

Похоже, Wix — это система для конечных пользователей, которая не рассчитана на веб-дизайнеров и разработчиков. Нет версий Wix для Windows или Mac OS. Wix работает только в онлайне и не поддерживает WordPress или Joomla.

Другой пример. Nicepage является системой для создание веб-сайтов на веб-дизайне 3.0. В нём есть функции как инструмента для веб-дизайна, так и конструктора сайтов. Nicepage подходит как и для веб-дизайнеров, так и веб-мастеров.

Программа поддерживает свободное позиционирование, перекрытие элементов, адаптивность для мобильных устройств и современные сложные макеты. При этом генерируется «чистый» HTML- и CSS-код. Nicepage доступен для Windows, Mac OS и в онлайне. Также есть плагины для Joomla и WordPress.

Простой и одновременно для творчества

Являются ли популярные конструкторы сайтов достаточно простыми и гибкими для создания уникальных сайтов по правилам веб-дизайна 3.0? Рассмотрим график ниже.

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

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

0
42 комментария
Написать комментарий...
Андрей Курицын

Это какая-то дичь.

С каких пор есть какой-то веб-дизайн 3.0? Из-за отрицательных маржинов он теперь 3.0?

С каких пор конструкторы и веб-разработка это одно и то же?

С каких пор развитие сферы так сильно стало зависаеть от конструкторов сайтов? Кулинарию, наверное, в вашем понимании Макдональдс развивает.

Не надо путать понятия, спрос определяет предложение:

1) Конструкторы нужны для быстрого дешёвого запуска сайта "на коленке". Эконом вариант + быстро.

2) Сложные дизайны отсутствуют не по-тому, что не умеют, а потому, что это не эффективно и никому не нужно. Это как-то поможет быстрее добиться бизнес-задач? Нет. Это дороже и дольше? Да.

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

Ну и по поводу смерти профессии, если дизайнер или в целом веб-разработчик думает о веб 3.0, то ему пора на свалку уже сейчас, а если думает о решении проблем и задач - будет востребован всегда.

Ответить
Развернуть ветку
Andrei Tsai

"2) Сложные дизайны отсутствуют не по-тому, что не умеют, а потому, что это не эффективно и никому не нужно. Это как-то поможет быстрее добиться бизнес-задач? Нет. Это дороже и дольше? Да."
Золотые слова)))

Ответить
Развернуть ветку
Алексей Халезов

Такое ощущение сложилось, что у вас когнитивный диссонанс (выдаёте желаемое за действительное). Я недавно обратился к дизайнеру, достаточно дорогому, результатом я доволен, но чуть позже наткнулся на конструктор сайтов на бутстрапе и понял что + UI KIT за 50$ и у меня отличный лендинг ничем не отличающийся от того за который я отдал 100к+
Учитывая, что сайты не статичны и требуют постоянной доработки и изменений, я вам из личного опыта могу сказать, что это был последний сайт сделанный мной с дизайнером. Дальше все будет на шаблонах и конструкторах, их невероятно огромное множество. А ещё мое личное убеждение основанное на опыте, 7 лет в веб разработке, дизайнеры очень и очень скоро потеряют свою работу в привычном им формате на сегодняшний день.

Ответить
Развернуть ветку
Aleksandr Ostrenko

Так оригинальная статья написана лишь с целью продвижения нового конструктора Nicepage, который умеет в Web 3.0

Ответить
Развернуть ветку
Александр

Раз так, то ради справедливости есть ещё один - https://webflow.com/

Ответить
Развернуть ветку
Bender Rodriguez

Вот, буквально сегодня подруга написала, что у неё большой заказ сорвался, так как клиент решил пилить лендинг на Тильде. Мол, так получится быстрее и дешевле.

Век дизайнеров подходит к концу, но произойдёт это не завтра и даже не через год-два. Но лет через пять такая профессия, как «web-дизайнер» точно будет заменена новомодным алгоритмом от Adobe или нейросетью от Nvidia :'(

Именно по этому всем нам — дизигнерам и им сочувствующим — стоит обратить свой взор в сторону Python, JavaScript и прочих C#/Java, ну или банально вёрстку подтянуть в какой-нибудь хтмл-академии, а после окунуться в прекрасный мир front-end'а.

Или пиздец нам, дизигнерам ебаным.

Ответить
Развернуть ветку
Георгий Хромченко

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

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

Ответить
Развернуть ветку
Bender Rodriguez

Лично я считаю, что человек, который называет себя «web-дизайнер», но хотя бы базово не умеет в ux — предпроектный анализ (цели, задачи, портреты), mindmap (навигация, структура, зависимости), прототипирование (черновая концепция, интерактивный прототип, базовая/примитивная анимация) — самозванец, банально тратящий время заказчика и в пустую прожирающий бюджеты.

Чистый ui-дизайнер (аля дрибл-стайл) в наше высококонкурентное время нахуй никому не упал. Правда, тут стоит сделать поправку на большие студии, когда у каждого человека в пачке своя роль, ну и промо-проекты, которым крайне важен визуал, чем качественный пользовательский опыт.

В этом плане Тильда расчищает поле, и делает само существование «я-посмотрел-10-роликов-на-ютубе-прошел-курсы-в-гиикбрейнс-теперь-я-дизайнер» бессмысленным и еще больше наполненным болью и страданием :)

Ответить
Развернуть ветку
Александр Александр

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

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

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

Заказчикам вряд ли потребуется 100500 одинаковых сайтов - любой конкурентный бизнес стремится выделиться из толпы, а не слиться с ней.

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

Ответить
Развернуть ветку
alex

"что у неё большой заказ сорвался, так как клиент решил пилить лендинг на Тильде" большой заказ и лендинг???, ну вот такие дизайнеры то может и без работы останутся)))

Ответить
Развернуть ветку
Bender Rodriguez

Какие «такие-дизайнеры»?

Или может вы считаете, что лендиг — это легко и просто?

Ответить
Развернуть ветку
Sergey Mikhalev

Теперь все ищут дизайнера на тильде) И это неплохо. На тильде можно только лендинги клепать, а это бич всех дизайнеров.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artyom Konakov

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

Ответить
Развернуть ветку
Георгий Хромченко

Вот-вот, такой дизайн не возможней без инструментов авторинга, иначе хрен знает как это все должно себя вести на разных экранах

Ответить
Развернуть ветку
alex

Надо уточнить, что дизайнеры лендингов)))

Ответить
Развернуть ветку
К М

что за конструктор и UI KIT?

Ответить
Развернуть ветку
Степан Сидоров

Что за обсёр конструкторов, где в конце рекламят конструктор?

Работа хорошего дизайнера и верстальщика будет цениться ещё больше, как ручная сборка Роллс-Ройсов. И качество лучше, и выглядет в сотни раз аккуратнее, и работает как бесшумные часики.

Конструкторы всегда будут на уровне "наших" тазов.
Конструкторы для полубизнесменов сделанные бизнесменами. Так и будут лендосы пилить для инфокурсов..
Благодаря конструкторам и людям ничего не смыслящим в дизайне, мне стыдно за интернет. Исчадие ада!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Lai Psov

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

Ответить
Развернуть ветку
Yuri Mediakov

Кто-то слышал про этот Nicepage до этой статьи? Похоже статья нужна, чтобы его популяризировать :)

Ответить
Развернуть ветку
Дима Брейвен

Пустая статья, написанная не дизайнерами, а маркетологами. А билдер еще один "инновационный конструктор", которые пишут про web 3.0, но UI у самих хромает)
А если говорить про нужны ли билдеры. Конечно, нужно. Но под типовые и около типовые задачи.

Ответить
Развернуть ветку
Kirill Ushakov

Мертворождённый ваш 3.0
С точки зрения бизнеса пустая трата времени и денег. Зачем переплачивать лишних пару сотен, за пару кривых блоков, когда можно почти за даром собрать сайт, который будет решать поставленные цели?

Ответить
Развернуть ветку
Evgeny Belov

Ребята, а где ваш сайт с дизайном 3.0 ?

Ответить
Развернуть ветку
Anton Karev

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

Ответить
Развернуть ветку
Andrei Tsai

а как же DIVI)

Ответить
Развернуть ветку
Алексис Второй
Веб-дизайн 3.0 — свобода для веб-дизайнера.

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

Никто не хочет (и не будет) ломать себе голову и глаза, пробираясь через произведение свободы веб-дизайнера. Именно поэтому тупая сетка без, простите, изъёбов так активно пошла в массы: легко наполнять, легко потреблять.

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

Творчество имеет место быть, но строго дозировано. Посмотрите, например, этот ад и голосовалку под ней: https://vc.ru/design/51443-kak-vyglyadit-internet-bez-yuzabiliti-redizayn-izvestnyh-saytov-kotoryy-vyzval-negodovanie

Ответить
Развернуть ветку
Александр Александр

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

Ответить
Развернуть ветку
Константин Барболин

Для WordPress сейчас набирает популярность крутой конструктор Elementor. В сравнении с Visual Composer он проще, легче, имеет больше элементов, и "умеет в web 3.0" — там недавно как-раз появилась возможность свободного позиционирования объектов https://youtu.be/1vOLOueRDaw

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Алексей Халезов

А что вы назовёте не шаблонной задачей?))

Ответить
Развернуть ветку
Alexey Praskovin

Сайт для "не таких как все" с типографским дизайном: мешанина цветов, наползание элементов и неработающие элементы управления. Это уже было на стыке Web 1.0 и Web 2.0, когда массовое распространение в РФ получили Ucoz и Народ.

Сейчас просто пришел новый виток спирали.

Ответить
Развернуть ветку
Кирилл Казаков

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Dim

Это чья-то курсовая, точнее, её вступление?

Ответить
Развернуть ветку
Валерий Алексеев

Все примеры Web Design 3.0 из этой статьи демонстрируют отсутствие у дизайнеров минимального понимания UX.

Красивая и современная картинка, «я художник, я так вижу», свежий взгляд на дизайн — это всё замечательно. Но когда речь заходит о конверсии, об удобной навигации, о продуманной структуре проекта — все эти фишечки с объемом и нарушением границ уходят на задний план.

Безусловно, можно совмещать идеи Web Design 3.0 и нормальный UX — респект таким дизайнерам. Но проблема в том, что после подобных статей тысячи дизайнеров начального и среднего уровня начинают пилить такие сайты, не разобравшись сперва в базовых принципах дизайна интернет-проектов.

Ответить
Развернуть ветку
Усов Иван

Читать "дизайн 3.0" – неудобно. К тому же вся статья ходит во круг декстопной версии, тогда как мобильный трафик куда выгоднее.

Ответить
Развернуть ветку
Denis Glebko

Перевод, конечно, кондовенький...
В некоторых местах прям как гугл-транслейт :(

Ответить
Развернуть ветку
Александр Ефимов

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

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Денис Лобановский

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Vitaly Kuznetsov

Как любой конструктор был убогим квадратно-прямоугольным шлаком — так и остался. А про css вообще молчу…

Ответить
Развернуть ветку
39 комментариев
Раскрывать всегда