Веб-дизайн 3.0: История и становление нового в Веб-дизайне

конструкторы сайтов 3.0

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

Вы узнаете, как стать уникальным, как выделиться на фоне конкурентов и как привлечь внимание ваших клиентов.

Эта статья состоит из нескольких глав:

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

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

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

Глава 1. Веб-дизайн меняется

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

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

дизайн-history.jpg

Веб-дизайн Эволюция

Первые сайты

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

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

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

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

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

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

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

Bootstrap ускорил скорость веб-разработки. Это упростило процесс и сделало его более удобным. Bootstrap с самого начала поддерживал мобильные устройства с помощью гридов.

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

responsive.jpg

Современный сайт на разных устройствах

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

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

Веб-дизайн мертв?

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

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

Seach-на-Google.png

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

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

самозагрузки-popularity.jpg

Google Trends

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

Смотрите на изображении ниже.

самозагрузки-designs.jpg

Результаты Pinterest для «веб-дизайна начальной загрузки»

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

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

Google-2018.png

Поиск подсказок в Google

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

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

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

графика-дизайн-history.jpg

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

Дизайнеры не были ограничены в своем творчестве. И издатели всегда были свободны в своих идеях. Им не нужно было думать о HTML, CSS или мобильных устройствах.

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

СВОБОДНОЕ ПОЗИЦИОНИРОВАНИЕ + ТВОРЧЕСТВО = СОВРЕМЕННЫЙ ДИЗАЙН ПЕЧАТИ

печать designs.jpg

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

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

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

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

  1. Свободным позиционированием
  2. Элементы перекрываются
  3. Снятие ограничений с Bootstrap-подобных гридов

Это означало рождение веб-дизайна 3.0!

Веб-дизайн 3.0 — это свобода дизайнера

современный designs.jpg

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

Летом 2016 года 83 Oranges ( https://83oranges.com/ ) представили статью под названием «Тенденции веб-дизайна».

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

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

В главе 3 мы подробнее рассмотрим стили и способы создания веб-сайтов в веб-дизайне 3.0.

Удаление ограничений таблиц

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

стена-2.jpg

Пример из Pinterest

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

стены-3.jpg

Пример из Pinterest

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

Современные сеточные макеты

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

комплексно-grids.jpg

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

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

Веб-дизайн-trends.png

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

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

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

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

viewers2.png

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

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

Наша цель

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

nicepage-designs2.jpg

Идеи веб-дизайна 3.0 на Pinterest

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

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

  1. Дизайнеры не имеют удобных инструментов для создания страниц HTML или WordPress в веб-дизайне 3.0. А у существующих разработчиков сайтов нет свободного позиционирования. Дизайнеры по-прежнему должны использовать инструменты графического дизайна, такие как Adobe Photoshop, Adobe XD или Sketch App, чтобы реализовать свои идеи. Чтобы поделиться идеями с миром, они загружают идеи в виде изображений в Pinterest, Behance и Dribbble. Веб-дизайнеры не могут создавать рабочие веб-страницы. Если они хотят превратить макеты в веб-страницы, им нужно написать код HTML и CSS вручную. Но это долгий и дорогой процесс.
  2. Да, есть Pinterest, Behance и Dribbble. Но чтобы понять тенденции, вам нужно следить за изменениями каждый день. В каждой отрасли есть ресурсы, где вы можете узнать, что сегодня в тренде: в кино, в музыке, на YouTube. Тенденции показывают все, но не веб-дизайн. Это создает много спекуляций о тенденциях в веб-дизайне. Есть много «экспертов», говорящих о тенденциях. Но нам нужен ресурс с данными о веб-дизайне. Тогда можно будет понять сегодняшние тенденции в один клик.
  3. Из-за отсутствия реальных данных и достоверных авторитетных мнений дизайнеры продолжают проектировать в старых стилях.
  4. Существует несоответствие между дизайном и инструментами. Создатели сайтов не могут создавать современные веб-дизайны. Это существенно замедляет рост веб-дизайна 3.0.
Современный веб-дизайн должен сойти с подиумов показов мод на Pinterest и Behance, чтобы стать работающими веб-сайтами.

Резюме

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

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

Глава 2. Создатели сайтов отстают от трендов

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

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

Эволюция разработчиков сайтов

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

сайт-строители-history.png

Хронология создания сайтов

Давайте рассмотрим эти переходы подробно.

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

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

текст в visual.jpg

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

Переход к начальной загрузке

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

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

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

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

bootstrap.jpg

Начальная страница загрузки

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

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

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

Недостаток творчества

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

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

Гутенберг

Вот еще один пример. Как известно, WordPress выпустил новый редактор статей — Гутенберг. В чем причина его появления? Похоже, разработчики WordPress хотели создать тот же редактор статей, что и Medium.com. Кроме того, они хотели иметь функции таких инструментов, как VisualComposer. Они сделали оба, редактор статей в сочетании с простым конструктором сайтов. Казалось бы, все снова должны быть счастливы. Но на самом деле мы видим обратное. Пользователям не понравилось это нововведение WordPress. Пожалуйста, смотрите картинку ниже.

gutenberg.png

Скриншот с WordPress.org

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

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

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

WIX

Wix пытался стать инструментом для веб-дизайна 3.0. Проблема Wix в том, что его HTML не соответствует стандартам, принятым разработчиками сайтов. Расположение элемента является абсолютным. В результате HTML-код недоступен для редактирования, и его сложно обслуживать мобильными устройствами. Wix поддерживает только рабочие столы и телефоны. На практике обычно существует поддержка пяти типов устройств. Wix пересчитывает позиционирование с помощью JavaScript, а не HTML5 и CSS3. Также нет панели свойств, как во всех популярных инструментах графического дизайна, используемых дизайнерами.

Кажется, что Wix в основном для конечных пользователей, а не для дизайнеров и разработчиков. Например, посмотрите комментарии к популярному видео на YouTube под названием «Как создать сайт — учебник по веб-дизайну» на канале «Рисуй с Jazza». Обсуждение под этим видео все еще продолжается.

Wix-comment.png

Снимок экрана с YouTube

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

Нет прогресса в конструкторах сайтов

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

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

Прогресс продолжается

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

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

tesla.jpg

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

CSS Grid

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

grids.jpg

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

Расположение элементов также имеет свою эволюцию.

Веб-дизайн 1.0 является «одномерным». Элементы дизайна в основном располагаются последовательно один за другим.

Веб-дизайн 2.0 является «двухмерным». Есть сетки для размещения элементов в ячейках, что дает больше свободы.

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

новый dimension.jpg

Размеры в веб-дизайне

Новое измерение похоже на кирпичи LEGO против мозаики.

lego.jpg

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

Удаление ограничений таблицы

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

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

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

positioning.png

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

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

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

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

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

мебель пуловеры-small.jpg

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

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

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

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

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

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

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

ограниченным positions.png

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

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

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

washington.jpg

Карты Вашингтона, округ Колумбия

Другой пример: эта статья была отредактирована в Microsoft Word. Он имеет ограниченное позиционирование, подобное веб-дизайну 2.0. Функции MS Word достаточно, чтобы написать статью. Но MS Word недостаточно для разработки презентации. У нас есть Microsoft PowerPoint для этого. Ты чувствуешь разницу? В MS PowerPoint вы можете свободно размещать элементы. Это дает вам гораздо больше свободы для творчества в дизайне. Смотрите разницу на следующей картинке.

слово-powerpoint.jpg

Microsoft Word и Microsoft PowerPoint

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

Отдельные рынки

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

дизайнеры-против-webmasters.jpg

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

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

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

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

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

anntaylor.jpg

Веб-дизайнерам необходимо:

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

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

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

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

Резюме

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

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

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

полноцикловой-bicycle.jpg

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

WEB DESIGN + WEB MASTERING = WEB DESIGN 3.0

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

дизайнеры-и-webmasters.png

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

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

Например, Nicepage — это система для создания страниц в веб-дизайне 3.0. Он объединил в себе возможности инструмента графического дизайна и конструктора сайтов. Подходит для веб-дизайнеров и веб-мастеров. Он поддерживает свободное позиционирование, перекрытие элементов, мобильные устройства и современные сетки. При этом он генерирует чистый HTML и CSS. Nicepage доступен для Windows, Mac OS и онлайн. Есть также расширение Joomla и плагин WordPress.

Творческий и простой

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

простой flexible.png

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

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

Самый главный человек на сайте. Если Вы хотите опубликовать свою статью на нашем ресурсе то милости просим на nkosistema@mail.ru

Оставьте первый комментарий

Отправить ответ

Ваш e-mail не будет опубликован.




1 × пять =

Нажимая кнопку "Отправить комментарий" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных"