О веб-дизайне


Содержание сайта
Разное
О веб-дизайне

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

Этапы развития веб-дизайна

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

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

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




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

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

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

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

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

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

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

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

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

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

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

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



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

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

1. Дизайнеры не имеют удобных инструментов для создания страниц HTML или WordPress в веб-дизайне 3.0. Существующим веб-редакторам не хватает свободного позиционирования объектов. Дизайнеры по-прежнему должны использовать графические редакторы, такие как Adobe Photoshop, Adobe XD (Adobe Experience Design) или Sketch App, чтобы реализовать свои идеи. Нужно первоначально воплотить свои идеи как изображения. Веб-дизайнеры не могут создавать рабочие веб-страницы. Если они хотят превратить макеты в веб-страницы, им нужно написать код HTML и CSS вручную. Но это долгий и дорогой процесс.
У дизайнеров должен быть выбор, в каком стиле создавать свои сайты. Современный веб-дизайн должен сойти с подиумов показов мод на Pinterest и Behance, чтобы стать работающими веб-сайтами.

2. Нет ресурсов, где вы можете увидеть современные тенденции в веб-дизайне. Да, есть Pinterest, Behance и Dribbble. Но чтобы понять тенденции, вам нужно следить за изменениями каждый день. В каждой отрасли есть ресурсы, где вы можете узнать, что сегодня в тренде: в кино, в музыке, на YouTube. Этого нет для веб-дизайна. Поэтому появляется много спекуляций о тенденциях в веб-дизайне. Есть много "экспертов", говорящих о тенденциях. Но нам нужен ресурс с данными о веб-дизайне, чтобу действительно понимать  сегодняшние тенденции.
Из-за отсутствия реальных данных и достоверных авторитетных мнений дизайнеры продолжают проектировать в старых стилях.

Веб-редакторы

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


Примечание: Щелкните по названию программы, чтобы узнать о ней больше.


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

Переход к Bootstrap
Переход 2 был развитием блоговых систем, таких как WordPress и Joomla, и инструментов для создания тем, например Artisteer. Но через несколько лет тематические дизайны Artisteer устарели.
Были выпущены некоторые популярные конструкторы сайтов и плагины для WordPress: Webflow Visual Composer, Elementor, Divi и другие. Большинство из них основаны на Bootstrap. Они хороши для веб-дизайна 2.0.
Чего не хватает в веб-дизайне 3.0? Эти конструкторы сайтов и плагины не имеют свободного позиционирования и слоев. Кроме того, они не предлагают простоту и удобство инструментов графического дизайна, которые нужны дизайнерам.
Недавно Bootstrap стал применять слои и начал применять свободное позиционирование.

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

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

Мы рассмотрим следующие случаи: отсутствие креативности на примере программ WIX  и Gutenberg

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

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

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

WIX

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

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

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

1. Создатели сайтов (веб-редакторы) - это довольно сложные системы, требующие значительных инвестиций и времени на разработку. Это также требует отличной идеи, которая может изменить веб-дизайн.

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

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

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

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

CSS Grid

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


Расположение элементов также имеет свою эволюцию
Веб-дизайн 1.0 является «одномерным». Элементы дизайна в основном располагаются последовательно один за другим.
Веб-дизайн 2.0 является «двухмерным». Есть сетки для размещения элементов в ячейках, что дает больше свободы.
Веб-дизайн 3.0 - это новое измерение. Он имеет свободное расположение элементов, перекрытий и слоев, как в инструментах графического дизайна. Это открывает новые перспективы для веб-дизайна.

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



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

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

Ограниченное (Limited Positioning) и свободное позиционирование (Free Positioning)
На картинке ниже вы можете увидеть пример двухэлементной сетки. Вы видите текст в левой ячейке. Представьте, вы хотите улучшить свой дизайн, поэтому вам интересно, куда поместить текст.
Есть два пути. Первый слева на картинке. Вы видите красные линии. Это заполнители, которые поддерживаются в современных веб-редакторах Web Design 2.0. Обычно вы можете поместить элементы между другими элементами в сетке или в другие ячейки. Это ограниченное позиционирование.
Но ограниченное позиционирование делает практически невозможным создание сайтов в веб-дизайне 3.0!
Абсолютно позиционированные элементы не подходят для мобильных устройств, и их необходимо перемещать вручную в каждом мобильном представлении. В веб-дизайне 3.0 элементы расположены относительно и мобильны.

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



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

Дизайнеры всегда использовали графические редакторы (Adobe XD, Adobe Photoshop, Sketch App, InVisio Studio, Figma) для разработки макетов в веб-дизайне 3.0. Все эти графические редакторы имеют свободное позиционирование, наложение элементов и слои. Но вы не можете использовать их для создания рабочих сайтов, поскольку они сохраняют работу только как изображения.

С другой стороны, существуют веб-редакторы (Webflow, Gutenberg, Artisteer, Wix, Squarespace, Visual Composer, Weebly).
 Дизайнеры используют эти платформы для создания веб-сайтов. Но очень сложно или почти невозможно проектировать современные веб-сайты в Web Design 3.0 с помощью этих конструкторов веб-сайтов.

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

Веб-дизайнерам необходимо:
     Свободное позиционирование
     Удаление ограничений таблицы
     Слои
     Панель свойств для элементов
     Поддержка Windows и Mac OS
Веб-мастерам нужно:
     Чистый HTML и CSS
     Поддержка мобильных устройств
     Поддержка WordPress и Joomla
     Создание сайтов онлайн
Как видим, эти требования разные. Для создания сайтов в веб-дизайне 3.0 нам нужны революционные изменения.

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

Как вы думаете, возможно ли создать веб-дизайн 3.0, используя только графический редактор или только веб-редактор? Да, но это сложно. Это похоже на использование велосипеда с одним колесом. Это легко с двумя колесами, работающими вместе, как в велосипеде.
Новая формула современного веб-дизайна выглядит следующим образом:
WEB DESIGN + WEB MASTERING = WEB DESIGN 3.0

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

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

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



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



См. также
Частые ошибки дизайна веб-страницы

Последнее обновление: июнь 2019 г.