Создатели визуального веб-редактора 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.online/online_html_visual_7.html#metka1 Чего не хватает в веб-дизайне 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 нет подходящего и простого в использовании конструктора веб-сайтов.
Инструменты для веб-дизайна 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
г.
|