История веб дизайна: Краткая история веб-дизайна / Хабр

Краткая история веб-дизайна / Хабр

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

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

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

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

Тёмный век веб-дизайна (1989)

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

Таблицы — начало (1995)

Появление на свет браузеров, способных показывать изображения, было первым шагом в веб-дизайн — такой, каким мы его знаем сегодня. Самым доступным способом структурирования информации была концепция использования таблиц, которые на тот момент стали доступны в HTML. Поэтому помещение таблиц внутрь других таблиц и смешивание статических ячеек с ячейками относительных размеров началось с книги Дэвида Сигела «Creating Killer Sites». Применение таблиц в таких целях казалось не совсем правильным, поскольку их основным предназначением является структурирование информации. И тем не менее, этот метод создания веб-дизайна был самым распространенным в течение длительного времени. Была тогда и другая проблема — сохранение работоспособности этих хрупких структур. В то же время популярность приобрело «разрезание макетов» на отдельные элементы. Дизайнеры рисовали красивые макеты, а разделением их на части поменьше и склеиванием их так, чтобы дизайн работал как надо, занимались разработчики. С другой стороны, таблицы обладали такими шикарными особенностями, как возможность выравнивать содержимое по вертикали, определять его размеры в пикселях и в процентах. Главным преимуществом таблиц было то, что они позволяли максимально близко воссоздать структуру сетки. Тогда же разработчики поняли, что перестали любить внешние интерфейсы и их разработку.

Javascript приходит на помощь (1995)

Ответом на ограничения HTML был Javascript. Хотите вывести всплывающее окно? Или вам нужно настроить динамическое изменение расположения элементов? Ответ один — Javascript. Однако главная проблема заключалась в том, что Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно. Нередко ленивые разработчики использовали его для создания быстрой заплатки для кода, однако в умелых руках он способен превратиться в очень мощный инструмент. В наши дни мы предпочитаем избегать использования Javascript, если тот же самый элемент может быть реализован с помощью CCS, но даже несмотря на это, JavaScript сегодня не теряет своей актуальности как в разработке интерфейсов (jQuery), так и в программировании серверной части (Node.js).

Золотая эпоха свободы – Flash (1996)

Появившаяся в 1996 году технология обещала невиданную ранее свободу и ставила своей целью разрушить барьеры, которые сдерживали развитие веб-дизайна в то время. Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента — технологии Flash. Конечный результат работы упаковывался в один файл, а после этого отправлялся в браузер для отображения. Все это работало при условии, что у пользователя стояла последняя версия flash plugin и было немного свободного времени для того, чтобы подождать, пока содержимое загрузиться. Выглядело это волшебно. То время было золотой эпохой ярких страниц приветствия, вводных анимаций и всякого рода интерактивных эффектов.

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

CSS (1998)

Примерно в то же время, что и Flash, появился другой, лучший с технической точки зрения способ структурирования дизайна — Cascading Style Sheets (CSS). Его базовая концепция заключалась в разделении функций контейнера содержимого и функций его представления, таким образом, что сам контент помещался в HTML, а его визуальное форматирование происходило при помощи CSS. Первые версии технологии были далеки от гибкости, однако самой большой проблемой была медленная скорость адаптации браузеров к ней. Для введения полной браузерной поддержки CSS потребовалось несколько лет и нередко его использование сопровождалось немалым количеством багов. Одновременно с этим нередко получалось так, что самые новые CSS-свойства поддерживались только в одном браузере, в то время, как в других этой поддержки не было. Для разработчиков это стало настоящим кошмаром. Здесь также важно пояснить, что CSS не является языком написания кода, скорее — языком объявления свойств объектов и, если вопрос о том, надо ли дизайнерам учиться писать код остается открытым, то ответ на вопрос «Следует ли им понимать, как работает CSS?» совершенно точно будет положительным.

Подъем мобильного контента — сетки и фреймворки (2007)

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

После нескольких итераций победу одержала сетка в 960 px, а разделение на 12 столбцов стало использоваться дизайнерами преимущественно. Следующим шагом была стандартизация широко распространенных элементов, таких как формы, меню навигации, кнопки, а также создание возможности их быстрого и простого использования или, попросту говоря — создание библиотеки визуальных элементов, которая содержит в себе весь необходимый код. Победителями здесь стали Bootstrap и Foundation, что также говорит о том факте, что грань между веб-сайтом и приложением стала стираться. Недостатком подхода стало то, что новые дизайны стали чаще выглядеть одинаково. Сами же дизайнеры при этом по-прежнему не могли получить доступ к их изменению без понимания того, как работает код.

Адаптивный веб-дизайн (2010)

Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу, предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления, назвав это термином «Responsive web design» (адаптивный веб-дизайн). Формально, мы все еще продолжаем использовать HTML и CSS, поэтому речь здесь идет больше о концептуальном улучшении.

Относительно этого подхода существует немало заблуждений. Для дизайнера «адаптивность» означает создание множества набросков разных макетов, а для клиента это значит, что все будет работать на телефоне. Разработчик при этом думает о скорости загрузки страницы, о том, как представить пользователю изображения, о смысловой нагрузке элементов, о приоритете мобильной или десктопной версии и так далее… Главное преимущество такого подхода заключается в сохранении одного и того же контента на разных макетах. На практике это значит, что один и тот же веб-сайт работает везде. Надеюсь, что хотя бы с этим определением согласны все.

Упрощение (2010)

Отрисовка большего количества макетов требует больше времени. Исходя из этого, к нашему общему счастью, дизайнеры решили рационализировать процесс, избавившись от замысловатых эффектов теней и вернувшись обратно к истокам дизайна, отдав приоритет содержимому. Качественные фотоматериалы, подбор шрифтового оформления, красочные иллюстрации и продуманные макеты — таков дизайн, каким мы создаем его сегодня.
Упрощение визуальных элементов, или так называемый «плоский дизайн» также является частью этого процесса. Главное его преимущество в том, что материалам, приоритетности отображаемой информации и содержимому в целом уделяется гораздо больше внимания. Глянцевые кнопки заменяются иконками, это позволяет нам использовать векторные изображения и шрифты-иконки. Веб-шрифты позволяют получить прекрасную типографику. Самое забавное здесь в том, что веб был близок к этой идее с самого начала, но ведь на то она и молодость…

Светлое будущее (2014)

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

Формально, сегодня существует несколько новых идей, которые поддерживают движение в этом направлении.

Новые юниты CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов. Они также решают проблему, которая удивляла многих дизайнеров: почему центральное выравнивание по вертикали в CSS делается с таким трудом? Еще одна крутая идея, ставшая частью CSS — Flexbox, который позволяет создавать макеты и изменять их при помощи одного свойства, вместо написания кучи кода. Ну и наконец, web components — еще более основательная попытка, которая представляет собой связанный вместе набор элементов, таких, например, как галерея или форма регистрации. Это создает возможность упростить рабочий процесс, так как элементы становятся строительными блоками, которые могут быть использованы много раз, в том числе и самостоятельно.

Ну а каковы ваши мысли по поводу будущего веб-дизайна?

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

История возникновения и развития веб-дизайна

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

Суровые 90-е

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

Первые сайты, первые провайдеры, первые веб-дизайнеры. Мониторы с разрешением 640х480, поддерживающие всего 16 цветов (!). Черный текст, синие ссылки, красные или розовые заголовки. Красота!

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

В конце 1993-го в сети произошел долгожданный «прорыв» — появился первый графический браузер Mosaic, который положил начало улучшению визуальной передачи информации. С тех пор история веб-дизайна начала развиваться бешеными темпами. Всего за несколько лет количество сайтов в интернете выросло с нескольких сотен до десятков тысяч.

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

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

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

Карамельные 2000-е

Еще один качественный прорыв история развития web-дизайна совершила в 2000-е годы, когда технология CSS (Cascading Style Sheets) позволила отделить содержимое веб-страниц от их оформления. 2004–2006 годы считаются началом эры WEB-2.0.

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

плавные градиенты и мягкие цвета;

объекты скругленной формы;

зеркальность, глянцевость, «карамель» в кнопках, картинках и иконках;

«специальные предложения» и бейджи на главной странице;

паттерны на фон.

Да здравствует мобильный контент

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

Скевоморфизм и адаптивный веб-дизайн

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

Клиент думает: «Ага, адаптивный веб-дизайн… Значит, сайт будет хорошо работать на телефоне». Разработчик же, в первую очередь, думает о количестве набросков макета, смысловой нагрузке элементов, скорости загрузки контента, визуальных способах представления информации, приоритете десктопной или мобильной версии и т. д.

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

Характерными чертами скевоморфизма можно назвать «кожаный» фон приложения-календаря у iOS или трехмерную иконку «мусорной корзины».

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

От сложного к простому

К всеобщему счастью веб-дизайнеров, в 2012 году маятник моды качнулся в другую сторону. Скевоморфизм стал ругательным словом, визуальные элементы были максимально упрощены, приоритет был отдан содержимому. Так появился термин «плоский дизайн».

Глянцевые трехмерные кнопки были заменены плоскими векторными иконками и веб-шрифтами (прямо как на рассвете веб-дизайна в 1990-е), подтверждая выражение «Все новое — это хорошо забытое старое». В тренде также яркие цвета, интересная типографика, большие фоновые изображения и даже фоновое видео.

Наше время

Сегодня существует несколько новых идей, которые, в принципе, поддерживают движение в направлении «плоского» дизайна (Flat Design), так как он позволяет эффективно использовать пространство и сосредоточить внимание пользователя на наиболее важных элементах сайта.

Прекрасно сочетается с Flat 2.0 такое направление, как Google Material Design (материальный дизайн), с его визуальными подсказками в виде интересной игры движений, света и теней.

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

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

Если вам понравилась статья, подписывайтесь на обновления нашего блога и делитесь ими с друзьями. Всем хорошего настроения и до новых встреч!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

8 этапов в истории развития веб-дизайна

Эволюция трендов веб-дизайна кратко и поэтапно

Андрей Батурин, 19 июня, 2017

Андрей Батурин

В сфере web-дизайна тенденция следовать трендам заметна как нигде больше. Год от года появляются новые решения и трудновыговариваемые термины: один “скевоморфизм” чего только стоит. Но знаете ли Вы, через какие метаморфозы пришлось пройти этой индустрии, чтобы достичь нынешних результатов?

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

1991-1993

Самый первый сайт увидел свет 6 августа 1991 года. Для нашего избалованного глаза он выглядит совсем сухо. Но всё, что могли содержать первые в мире страницы — ссылки и текст.

О красоте сайтов не говорили вплоть до 22 апреля 1993 года, когда выпустили первый графический браузер Mosaic, поддерживающий просмотр изображений. Так однообразный текст стали разбавлять яркими картинками. Разработчики сайтов этому очень обрадовались и решили впредь использовать все нововведения по максимуму. Иначе, зачем они вообще нужны?

1994-1996

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

1997-1998

Облик сайта начинает чуть более походить на привычный нам: сайты теперь строят на основе табличных макетов, добавляют эффекты и навигацию с иконками. Также активно развивается FLASH-технология, вследствие чего появляется возможность добавлять “мигающие” заставки. И с ними, как и с фонами ранее, порой начинается серьезный перебор. Помимо всего прочего, период характеризуется активной интеграцией маркетинга в дизайн. Чуть ли не на каждом сайте можно было увидеть кричащие рекламные баннеры с громкими лозунгами.

1999-2003

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

2004-2006

Да начнётся великая эпоха Web 2.0! В web-дизайне с приходом Web 2.0 стали отдавать предпочтение тени, глянцевости иконок и кнопок и мягким цветам интерфейсов. Также в тренде — упор на читаемый и функциональный контент и интеграция в ресурсы анимационного контента.

2007-2010

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

2011-2014

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

2015-2016

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

Что ждет нас в дальнейшем?

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

• Ровная сетка — это скучно. Поэтому на смену ей придёт нестандартная, ломаная сетка, которая сделает сайты динамичнее и интереснее.
• Продолжится бурное развитие тенденции на интерактивный дизайн и анимацию.
• Поговаривают, что долгий скроллинг постепенно канет в лету.
• Основной изюминкой будущего web-дизайна обещает стать шрифт, как главный графический элемент интерфейса.

Понравилась статья? Сохраните у себя в соцсетях и поделитесь с другими!

Обсудить

Другие статьи по тегам

сайты дизайн сайта

Понравилось

0

на эту тему

Значение цвета в фирменном стиле компании Что такое адаптивный сайт и в чем его преимущества

Краткая история веб-дизайна для дизайнеров | by Софт Культура

По случаю нового набора курса DigitalDesign. Lab попросили преподавателя курса Елену Сахарову подготовить вишлист
из лучших статей на тему UI, UX, визуального и веб-дизайна.
Первая ласточка — статья Сандижса Рулукса из Froont c краткой историей отношений веб-дизайна и кодинга.

Sandijs Ruluks

Автор: Sandijs Ruluks
Оригинал статьи

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

Одна вещь, которая все время заставляла меня удивляться —
это почему существует четкое разделение между дизайном
и кодингом? Почему сложные вещи становятся более простыми,
а простые — более сложными?
Так что, вместо того, чтобы спорить, должны ли дизайнеры изучать код или разработчики должны изучать дизайн, давайте найдем общее в том, как развивался дизайн для веба и как преодолеть разрыв между кодом и дизайном.

Темные века веб-дизайна (1989)

Sandijs Ruluks

Самое начало веб-дизайна было достаточно темным, поскольку экраны были в прямом смысле черными и в них находилось лишь несколько монохромных пикселей. Дизайн создавался при помощи символов
и табуляции (клавиша Tab). Так что давайте быстро перемотаем до тех времен, когда Дизайн Пользовательского Интерфейса был главным способом поиска в вебе — к эре Дикого Запада таблиц.

Таблицы — начало (1995)

Sandijs Ruluks

Рождение браузеров, которые могут отображать изображения стало первым шагом к тому веб-дизайну, который мы знаем. Ближайшей доступной опцией структурирования информации была концепция таблиц, уже существовавшая в HTML. Так что помещение таблиц внутрь таблиц, выдумывание хитроумных способов сочетать статичные ячейки с подвижными, было делом, начатым книгой Дэвида Сигела «Создание потрясающих сайтов». Хотя это и не казалось совсем правильным, поскольку основное предназначение таблицы — структурировать числа, на протяжении некоторого времени это оставалось достаточно распространенным методом дизайна.
Другой проблемой была сложность в поддержании таких неустойчивых структур. Это также было временем, когда стал популярен термин «slicing designs». Дизайнеры создавали модный дизайн, но разбить его на слайсы и придумать лучший способ заставить этот дизайн работать — все это оставалось на совести разработчиков. С другой стороны, таблицы имели несколько удивительных свойств, таких как возможность выравнивания по вертикали, определяться в пикселях или процентах. Главным преимуществом было то, что это было ближе всего к сетке, которую ты тогда мог получить. Это было время, когда многие разработчики предпочитали не любить фронт-енд программирование.

JavaScript спешит на помощь (1995)

Sandijs Ruluks

JavaScript был ответом на ограничения HTML. К примеру, вам нужно всплывающее окно или вы хотите динамически менять порядок
чего-либо. Ответ — JavaScript. Однако, основной проблемой было
то, что JavaScript наслаивается поверх структуры, которая заставляет веб работать и должен загружаться отдельно. Очень часто
он используется как простой patch для ленивого разработчика,
хотя он доcтаточно мощный, если его использовать мудро.
Сейчас мы избегаем (использовать) JavaScript, если тот же самый компонент можно разработать, используя CSS. Хотя JavaScript
сам по себе по-прежнему остается мощным инструментом как
во фронт-енде (JQuery), так и в бэк-енде (Node.js).

Золотая эра свободы — Flash (1996)

Sandijs Ruluks

Чтобы разрушить ограничения, существующие в веб-дизайне, родилась технология, обещающая невиданную до тех пор свободу. Дизайнер мог создавать любые формы, лейауты, анимации, взаимодействия; использовать любой шрифт — и все это в одном инструменте — Flash. Конечный результат паковался в один файл
и отправлялся браузеру для отображения. Что, в случае, если пользователь имел последний flash-плагин и немного свободного времени подождать, пока он загрузится, работало, как по волшебству. Это была золотая эра для splash-страниц, интро-анимаций
и интерактивных эффектов любого сорта. К сожалению, он был
не очень search-friendly и конечно же использовал слишком много производительной мощности. Когда Apple решили отказаться
от него на их первом айфоне (2007), Flash начал угасать.
По крайней мере, для веб-дизайна.

CSS (1998)

Sandijs Ruluks

Примерно в одно время с Flash, родился лучший подход
к структурированию дизайна с технической точки зрения — Cascading Style Sheets (CSS). Основная концепция была в том, чтобы отделять контент от его презентации. Так что вид и форматирование оформлялись в CSS, а содержание — в HTML. Первые версии CSS были далеки от гибких, но основная проблема была в adoption rate браузеров. Прошло несколько лет, прежде чем браузеры начали полностью поддерживать его и часто он был достаточно нестабильным. Это также было время, когда один браузер мог иметь новейший компонент,
в то время как у других его не было, что было настоящим кошмаром для разработчика. Если быть быть точным, CSS — не язык программирования, это скорее декларативный язык. Должны ли
веб-дизайнеры знать, как кодить? Возможно. Должны ли они понимать, как CSS работает? Безусловно!

Восстание мобильных — сетки и фреймфорки (2007)

Sandijs Ruluks

Блуждание в интернете на мобильных устройствах было само по себе вызовом. Помимо разных лейаутов для разных устройств, оно выявило проблему паритетности контента — должен ли дизайн выглядеть так же на маленьком экране или же он должен быть усечен?
Как расположить все классные мигающие рекламы на этом маленьком экране? Скорость тоже была проблемой, поскольку загрузка большого количества контента сжигала ваш интернет-трафик очень быстро. Первым шагом к улучшениям стала идея многоколонных сеток.
После нескольких итераций, победила система сеток 960 и деление
на 12 колонок стало чем-то, что дизайнеры использовали ежедневно. Следующим шагом было привести к единому стандарту часто используемые элементы, такие как формы, навигация, кнопки и легко упаковать их для многоразового использования. В основном — создание библиотеки визуальных элементов, которая содержит код. Победители здесь — Bootstrap и Foundation, что также связано с тем фактом, что грань между веб-сайтом и приложением стирается. Обратной стороной этого было то, что дизайн часто выглядел одинаково и дизайнеры по-прежнему не имели к библиотекам доступа, если не знали, как работает код.

Responsive веб-дизайн (2010)

Sandijs Ruluks

Гениальный парень по имени Этан Маркотт решил бросить вызов существующему подходу, предложив использовать тот же контент,
но отличный лейаут для дизайна и придумал термин «Responsive web design». Технически мы все еще используем HTML и CSS, так что это скорее концептуальное усовершенствование. Однако здесь много заблуждений. Для дизайнера responsive означает создание множества макетов. Для клиента это означает, что все работает на телефоне.
Для разработчика это способ, как подаются изображения, скорость загрузки, семантика, mobile-desktop first и многое другое. Главным преимуществом здесь является content parity, что означает, что один тот же сайт работает везде. Надеюсь, хоть на этом мы сошлись,
как минимум.

Flat-времена (2010)

Sandijs Ruluks

Создание большего количества макетов требует большего времени, поэтому, к счастью, мы решили оптимизировать процесс, отбросив модные эффекты с «тенюшками» и вернуться назад к истокам дизайна, отдавая приоритет контенту. Прекрасные фотографии, типографика, точные иллюстрации и продуманные макеты — это то, как мы создаем дизайн сейчас. Упрощение визуальных элементов или так называемый Flat design также является частью процесса. Основный плюс здесь — это то, что гораздо больше внимания может быть уделено образцу, структуре сообщения и содержанию в общем. Блестящие кнопки вытеснены иконками, что позволяет нам использовать векторные изображения и шрифты с иконками. Веб-шрифты являются источниками прекрасной типографики. Самое смешное, что веб был очень близок к такой форме с самого начала. Но, что уж, на то и даны молодые годы.

Светлое будущее (2014)

Sandijs Ruluks

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

Технически, существует несколько новых концептов, которые лишь подтверждают движение в этом направлении. Новые блоки в CSS, такие как vh, vw (viewport height и width) дают гораздо большую гибкость в расположении элементов. Это также решит проблему, которая занимала многих дизайнеров — почему отцентровать что-то по-вертикали в CSS — это такая боль? Flexbox — еще один классный концепт, являющийся частью CSS. Он позволяет создавать лейауты
и модифицировать их одним свойством вместо написания кучи кода. И, наконец, веб-компоненты — еще больший шаг. Это набор элементов, связанных вместе, т. е. галерея, форма записи и так далее. Это представляет более легкий workflow, где элементы становятся структурными элементами, которые могут быть использованы заново и обновлены по отдельности.

А каковы ваши мысли по поводу будущего веба?

Замечание: года в скобках означают начало. Все развивалось
в разном темпе в течение этого времени. В то же время, 1998–2007 годы не были совершенно пустыми, ведь именно в это время происходила эволюция.

История веб-дизайна.Инфографика

%PDF-1.5 % 1 0 obj >/OCGs[9 0 R]>>/Pages 3 0 R/Type/Catalog>> endobj 2 0 obj >stream application/pdf

История веб-дизайна.Инфографика

2017-11-18T09:59:31+03:002017-11-18T09:59:31+03:002017-11-18T09:59:31+03:00Adobe Illustrator CC 2015 (Macintosh)

100256JPEG/9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEA AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgBAABkAwER AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE 1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fh2+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp 0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fh2+f3OEhYaHiImKi4yNjo +DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8A9U4q7FXYqwb80LzzXZxa fcaC81Ead7qOGMsoSKFpfUkYV2BQAIdmrTrTMjTiJvicPVyyRAMPP7mORXHnFtCv/rWoalHrdkpj tbVY5At2i2sYjKPx3drlzIzIS3EEfZy0iFjYUfs3/U0A5eE2TxD7fT+vdE3EXnnT9au7KC81G5S1 VJYrgo8kTQC1lecgtyWSQylERPtct6U6AcBF7fgsz4kZEb/gG/t6JdqqfmvY2enpHfXVze3VrJNJ DFG7i2doo4aSNxq7NLLyCn7BHcAnJR8Ik7bNU/HAG+5Hy2r7zfl7mUeSj5pvfMV/c6hcXkOmWgCW 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

uuid:db581fcc-5897-ab44-a6d7-85bec2eaa8b7xmp. did:c6c0b011-cc49-4a62-af3c-70f57b43308cuuid:5D20892493BFDB11914A8590D31508C8proof:pdfuuid:8e579a43-be4b-2942-955c-52819b1365e6xmp.did:038eaa73-2c17-4ce1-93d2-c41ccff87563uuid:5D20892493BFDB11914A8590D31508C8proof:pdf

savedxmp.iid:038eaa73-2c17-4ce1-93d2-c41ccff875632017-11-18T01:31:12+03:00Adobe Illustrator CC 2015 (Macintosh)/

savedxmp.iid:c6c0b011-cc49-4a62-af3c-70f57b43308c2017-11-18T09:59:28+03:00Adobe Illustrator CC 2015 (Macintosh)/

PrintFalseTrue1560.0000001627.723027Pixels

YanoneKaffeesatz-RegularYanone KaffeesatzRegularOpen TypeVersion 2.000FalseYanoneKaffeesatz-Regular.ttf

YanoneKaffeesatz-BoldYanone KaffeesatzBoldOpen TypeVersion 2.000FalseYanoneKaffeesatz-Bold.ttf

LobsterLobster 1.4RegularTrueTypeVersion 1.004Falselobster_[allfont.ru].ttf

Cyan

Magenta

Yellow

Black

Группа образцов по умолчанию0

БелыйCMYKPROCESS0. 0000000.0000000.0000000.000000

ЧерныйCMYKPROCESS0.0000000.0000000.000000100.000000

CMYK красныйCMYKPROCESS0.000000100.000000100.0000000.000000

CMYK желтыйCMYKPROCESS0.0000000.000000100.0000000.000000

CMYK зеленыйCMYKPROCESS100.0000000.000000100.0000000.000000

CMYK голубойCMYKPROCESS100.0000000.0000000.0000000.000000

CMYK синийCMYKPROCESS100.000000100.0000000.0000000.000000

CMYK пурпурныйCMYKPROCESS0.000000100.0000000.0000000.000000

C=15 M=100 Y=90 K=10CMYKPROCESS15.000000100.00000090.00000010.000000

C=0 M=90 Y=85 K=0CMYKPROCESS0. 00000090.00000085.0000000.000000

C=0 M=80 Y=95 K=0CMYKPROCESS0.00000080.00000095.0000000.000000

C=0 M=50 Y=100 K=0CMYKPROCESS0.00000050.000000100.0000000.000000

C=0 M=35 Y=85 K=0CMYKPROCESS0.00000035.00000085.0000000.000000

C=5 M=0 Y=90 K=0CMYKPROCESS5.0000000.00000090.0000000.000000

C=20 M=0 Y=100 K=0CMYKPROCESS20.0000000.000000100.0000000.000000

C=50 M=0 Y=100 K=0CMYKPROCESS50.0000000.000000100.0000000.000000

C=75 M=0 Y=100 K=0CMYKPROCESS75.0000000.000000100.0000000.000000

C=85 M=10 Y=100 K=10CMYKPROCESS85.00000010.000000100.00000010. 000000

C=90 M=30 Y=95 K=30CMYKPROCESS90.00000030.00000095.00000030.000000

C=75 M=0 Y=75 K=0CMYKPROCESS75.0000000.00000075.0000000.000000

C=80 M=10 Y=45 K=0CMYKPROCESS80.00000010.00000045.0000000.000000

C=70 M=15 Y=0 K=0CMYKPROCESS70.00000015.0000000.0000000.000000

C=85 M=50 Y=0 K=0CMYKPROCESS85.00000050.0000000.0000000.000000

C=100 M=95 Y=5 K=0CMYKPROCESS100.00000095.0000005.0000000.000000

C=100 M=100 Y=25 K=25CMYKPROCESS100.000000100.00000025.00000025.000000

C=75 M=100 Y=0 K=0CMYKPROCESS75.000000100.0000000.0000000.000000

C=50 M=100 Y=0 K=0CMYKPROCESS50. 000000100.0000000.0000000.000000

C=35 M=100 Y=35 K=10CMYKPROCESS35.000000100.00000035.00000010.000000

C=10 M=100 Y=50 K=0CMYKPROCESS10.000000100.00000050.0000000.000000

C=0 M=95 Y=20 K=0CMYKPROCESS0.00000095.00000020.0000000.000000

C=25 M=25 Y=40 K=0CMYKPROCESS25.00000025.00000040.0000000.000000

C=40 M=45 Y=50 K=5CMYKPROCESS40.00000045.00000050.0000005.000000

C=50 M=50 Y=60 K=25CMYKPROCESS50.00000050.00000060.00000025.000000

C=55 M=60 Y=65 K=40CMYKPROCESS55.00000060.00000065.00000040.000000

C=25 M=40 Y=65 K=0CMYKPROCESS25.00000040. 00000065.0000000.000000

C=30 M=50 Y=75 K=10CMYKPROCESS30.00000050.00000075.00000010.000000

C=35 M=60 Y=80 K=25CMYKPROCESS35.00000060.00000080.00000025.000000

C=40 M=65 Y=90 K=35CMYKPROCESS40.00000065.00000090.00000035.000000

C=40 M=70 Y=100 K=50CMYKPROCESS40.00000070.000000100.00000050.000000

C=70 M=50 Y=80 K=70CMYKPROCESS50.00000070.00000080.00000070.000000

Оттенки серого1

C=0 M=0 Y=0 K=100CMYKPROCESS0.0000000.0000000.000000100.000000

C=0 M=0 Y=0 K=90CMYKPROCESS0.0000000.0000000.00000089.999400

C=0 M=0 Y=0 K=80CMYKPROCESS0. 0000000.0000000.00000079.998800

C=0 M=0 Y=0 K=70CMYKPROCESS0.0000000.0000000.00000069.999700

C=0 M=0 Y=0 K=60CMYKPROCESS0.0000000.0000000.00000059.999100

C=0 M=0 Y=0 K=50CMYKPROCESS0.0000000.0000000.00000050.000000

C=0 M=0 Y=0 K=40CMYKPROCESS0.0000000.0000000.00000039.999400

C=0 M=0 Y=0 K=30CMYKPROCESS0.0000000.0000000.00000029.998800

C=0 M=0 Y=0 K=20CMYKPROCESS0.0000000.0000000.00000019.999700

C=0 M=0 Y=0 K=10CMYKPROCESS0.0000000.0000000.0000009.999100

C=0 M=0 Y=0 K=5CMYKPROCESS0.0000000.0000000.0000004.998800

Яркость1

C=0 M=100 Y=100 K=0CMYKPROCESS0. 000000100.000000100.0000000.000000

C=0 M=75 Y=100 K=0CMYKPROCESS0.00000075.000000100.0000000.000000

C=0 M=10 Y=95 K=0CMYKPROCESS0.00000010.00000095.0000000.000000

C=85 M=10 Y=100 K=0CMYKPROCESS85.00000010.000000100.0000000.000000

C=100 M=90 Y=0 K=0CMYKPROCESS100.00000090.0000000.0000000.000000

C=60 M=90 Y=0 K=0CMYKPROCESS60.00000090.0000000.0031000.003100

Adobe PDF library 15.00 endstream endobj 3 0 obj > endobj 11 0 obj >/Resources>/ExtGState>/Font>/ProcSet[/PDF/Text/ImageC/ImageI]/Properties>/XObject>>>/Thumb 31 0 R/TrimBox[14. ,ѻ>’LNKndq47]=՟OLH!y9M>5㉘tTq4mGB4ُ*VcF7o?=-pSHڎb-%\&Y: 3 I)7=p}z%ܯu%)2eymN|vXd~xg[c`cxh~:T9F\#@lP$ 3z@2AދbEp

GZmw؂B~@ﱶ1Y~c0gP@ܔSx~}uH9&rnڨ

История веб-дизайна Основы веб-дизайна

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

Как жил дизайнер в 1990-2000 году?

2000 год. Интернет только начал активно появляться в СНГ. Не было wi-fi, не было планшетов, смартфонов. Были только кнопочные телефоны и то не у всех.

Монитор дизайнера был выпуклый и похожий на огромную коробку, на то время плоских мониторов тоже не было.  А чтобы выйти в интернет, надо было подключать визжащий модем через телефонный шнур домашнего телефона.  И все грузилось очень и очень долго. А за интернет вообще надо было платить за мегабайты. Не было понятия безлимитный трафик. Часто приходилось в браузере отключать картинки, чтобы прогуливаясь по интернету не растратить все деньги.  Из всего доступного и нормального софта для веб-дизайнера был только Photoshop.  Программа была весьма ценная и передавалась из рук в руки через знакомых и друзей, часто ее качали через локальные сети, которые проводились внутри дома между соседями. Торрентов не было и сильного пиратства как сегодня тоже. Софт было достать не всегда просто. Хотя еще были рынки. Да! Представляете? Чтобы установить Photoshop вам надо было пойти на рынок и найти продавца и купить у него CD диск. Полки с дисками выглядели именно так:

Все шедевры создавались именно в этой программе:

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

Я даже больше скажу, Photoshop использовался только для того, чтобы просто нарисовать какую-то картинку для сайта. Такого понятия как «нарисовать макет сайта» изначально не было. Все эксперименты с внешним видом сайта делали исключительно кодом посредством HTML разметки. Код этот создавали в обычном блокноте.  

Я не буду вдаваться в подробности HTML об этом обязательно подробно поговорим в других главах. Суть в том, что все старые дизайнеры разбирались хорошо в HTML,  другого выхода у них не было. Был только блокнот и Photoshop. Рисование макетов в графическом редакторе пришло намного позже.

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

Все сайты в 1990-2000 году выглядели примерно так: 

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

И как вы можете заметить, на cкриншоте выше, рекомендуемый размер экрана был 800×600 — это скажем так, был эталон. Такой размер экранов был практически у каждого. Так как все мониторы были весьма стандартизированы. И выбора было очень мало.  Далее появились экраны 1024×768 —  и это считалось очень крутым и модным разрешением.  И то, как я помню, переход с  800×600 на  1024×768 был очень мучительным. Все кто был в тренде, давно уже старались делать сайты 1024×768, но клиенты очень сильно упирались и не верили в быстрый переход и смену разрешения экрана. Но в итоге 1024×768 все равно очень быстро стал новым стандартом.

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

В интернете, даже по сей день сохранились многие старые гифки. Как они выглядели можно посмотреть на сайте, где парень собрал всевозможные гифки в стиле «Under Construcion» http://textfiles.com/underconstruction/. Эти гифки часто использовали на страницах заглушках, когда сайт был в разработке. 

А вот так раньше выглядели сегодняшние гиганты:

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

Поэтому, раньше и веб-дизайнера не было. Люди которые создавали сайты — назывались веб-мастерами. Они и картинки рисовали и программировали. 

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

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

Люди выжимали по максимуму из всех доступных и скромных технологий.  

Приход Javascript (1995)

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

Ответом на ограничения HTML был Javascript. Хотите вывести всплывающее окно? Или вам нужно настроить динамическое изменение расположения элементов? Ответ один — Javascript. Однако главная проблема заключалась в том, что Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно. Нередко ленивые разработчики использовали его для создания быстрой заплатки для кода, однако в умелых руках он способен превратиться в очень мощный инструмент. В наши дни мы предпочитаем избегать использования Javascript, если тот же самый элемент может быть реализован с помощью CCS, но даже несмотря на это, JavaScript сегодня не теряет своей актуальности как в разработке интерфейсов (jQuery), так и в программировании серверной части (Node. js).

Flash технология (1996)

Потом появилась Flash технология. Adobe Flash (ранее Macromedia Flash), или просто Flash, по-русски часто пишут флеш или флэш) — мультимедийная платформа компании Adobe Systems для создания веб-приложений или мультимедийных презентаций. Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео- и аудиозаписей.

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

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

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

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

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

CSS (1998)

Примерно в то же время, что и Flash, появился другой, лучший с технической точки зрения способ структурирования дизайна — Cascading Style Sheets (CSS). Его базовая концепция заключалась в разделении функций контейнера содержимого и функций его представления, таким образом, что сам контент помещался в HTML, а его визуальное форматирование происходило при помощи CSS. Первые версии технологии были далеки от гибкости, однако самой большой проблемой была медленная скорость адаптации браузеров к ней. Для введения полной браузерной поддержки CSS потребовалось несколько лет и нередко его использование сопровождалось немалым количеством багов. Одновременно с этим нередко получалось так, что самые новые CSS-свойства поддерживались только в одном браузере, в то время, как в других этой поддержки не было. Для разработчиков это стало настоящим кошмаром. Здесь также важно пояснить, что CSS не является языком написания кода, скорее — языком объявления свойств объектов и, если вопрос о том, надо ли дизайнерам учиться писать код остается открытым, то ответ на вопрос «Следует ли им понимать, как работает CSS?» совершенно точно будет положительным.

СSS очень актуален и современен и по сей день. Он никогда не переставал развиваться и развивается до сих пор.  Учить CSS современному дизайнеру обязательно надо. Во всяком случае понимать как он работает. 

Подъем мобильного контента — сетки и фреймворки (2007)

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

После нескольких итераций победу одержала сетка в 960 px, а разделение на 12 столбцов стало использоваться дизайнерами преимущественно. Следующим шагом была стандартизация широко распространенных элементов, таких как формы, меню навигации, кнопки, а также создание возможности их быстрого и простого использования или, попросту говоря — создание библиотеки визуальных элементов, которая содержит в себе весь необходимый код. Победителями здесь стали Bootstrap и Foundation, что также говорит о том факте, что грань между веб-сайтом и приложением стала стираться. Недостатком подхода стало то, что новые дизайны стали чаще выглядеть одинаково. Сами же дизайнеры при этом по-прежнему не могли получить доступ к их изменению без понимания того, как работает код.

Адаптивный веб-дизайн (2010)

Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу, предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления, назвав это термином «Responsive web design» (адаптивный веб-дизайн). Формально, мы все еще продолжаем использовать HTML и CSS, поэтому речь здесь идет больше о концептуальном улучшении.

Относительно этого подхода существует немало заблуждений. Для дизайнера «адаптивность» означает создание множества набросков разных макетов, а для клиента это значит, что все будет работать на телефоне. Разработчик при этом думает о скорости загрузки страницы, о том, как представить пользователю изображения, о смысловой нагрузке элементов, о приоритете мобильной или десктопной версии и так далее… Главное преимущество такого подхода заключается в сохранении одного и того же контента на разных макетах. На практике это значит, что один и тот же веб-сайт работает везде. Надеюсь, что хотя бы с этим определением согласны все.

Упрощение (2010)

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

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

Светлое будущее

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

Формально, сегодня существует несколько новых идей, которые поддерживают движение в этом направлении. Новые юниты CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов. Они также решают проблему, которая удивляла многих дизайнеров: почему центральное выравнивание по вертикали в CSS делается с таким трудом? Еще одна крутая идея, ставшая частью CSS — Flexbox, который позволяет создавать макеты и изменять их при помощи одного свойства, вместо написания кучи кода. Ну и наконец, web components — еще более основательная попытка, которая представляет собой связанный вместе набор элементов, таких, например, как галерея или форма регистрации. Это создает возможность упростить рабочий процесс, так как элементы становятся строительными блоками, которые могут быть использованы много раз, в том числе и самостоятельно.

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

Вернемся в сегодняшний день

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

Появилось огромное количество новых слов: ТЗ, макет, svg, css, js, cms, контент, скрипты, сервер, хост, ftp, ssh, домен, админка, вёрстка, слои, mysql, sketch, afiinity, ретина, grid system, фреймворк, гайдлан, презентация, брендбук, руководство стиля, флэт, технический дизайн, текстуры, паттерн, mock-up, вектор, растр, иконки, шрифты, параллакс, иллюстрация, palette, artboard, кривые, спрайт, адаптивный дизайн, pixel perfect, ui/ux, скевоморфизм, метро-интерфейс, плитка, длинная прокрутка, лендинг, wow эффекты, эмоциональный дизайн и прочее прочее. 

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

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

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

Эволюция веба

Кто сильно заинтересовался историей, может еще изучить вот этот сайт:

http://www.evolutionoftheweb.com — тут можно глянуть развитие различных технологий.

Назад в прошлое

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

Для этого используйте сайт https://archive.org — глобальный проект с казалось бы невыполнимой миссией — создание архива всех сайтов, когда либо размещенных в интернете. Причем, сайты сохраняются не в виде скриншотов, а в виде полноценно работающих веб-страниц со всеми ссылками, картинками и стилевым оформлением (CSS). Причем, для каждого сайта за время его существования в сети в этом архиве может накопиться и по несколько сотен копий, датированных разными этапами жизни ресурса.

Эволюция иконок

Иконки в дизайне — это целый тренд и мода, которая постоянно меняется. Как развивались иконки можно посмотреть на вот этом прекрасном сайте: https://historyoficons.com 

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

Дизайн VR сайтов? Голографический дизайн сайтов? Виртуальные 3d сцены заменят сайты? 

Одно я точно могу сказать. Сначала технологии создают дизайн. А потом дизайн создает технологии. 

Яркий пример с телевизорами:

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

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

Материалы используемые в этой главе:

wikipedia.org — сводобная энциклопедия

https://habrahabr.ru/company/web_payment_ru/blog/245153/ — краткая история веб-дизайна

Краткая история веб-дизайна. Как выглядел интернет тогда и что происходит сейчас. | ADDEO про DIGITAL

Интернет в современном виде появился около 40 лет назад и за этот короткий период дизайн веб-сайтов претерпел несколько этапов своего становления.

Примитивный (лихие 90е)

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

Скриншот из archive.org (w3.org 1996г.)

Скриншот из archive.org (w3.org 1996г.)

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

Скриншот из archive.org (Google 1996г.)

Скриншот из archive.org (Google 1996г.)

У сайтов формируется Header и Footer страницы, появляется левый и правый сайдбар с навигацией и дополнительной информацией. Веб обретает цвет, фон и креатив.

Скриншот из archive.org (Яндекс 1998г.)

Скриншот из archive.org (Яндекс 1998г.)

Верните мой 2007й

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

Скриншот из archive.org (Яндекс 2000г.)

Скриншот из archive.org (Яндекс 2000г.)

Появляются личные кабинеты, социальные сети и первые интерфейсы. Люди начинают думать об UI/UX.

Скриншот из archive.org (Facebook 2007г.)

Скриншот из archive.org (Facebook 2007г.)

И конечно любимый всеми стиль Web 2.0 с его закругленными углами, тенями, объемными формами и первыми попытками материализовать веб сайт. Он был особенно популярен в сегменте шаблонных сайтов и встречается до сих пор.

Скриншот из archive.org (Apple 2007г.)

Скриншот из archive.org (Apple 2007г.)

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

К сожалению ваш компьютер не поддерживает Flash. Наш тоже. Оставим Flash в нашей памяти и не будем его тормошить =)

Мобайл с 2008

iPhone возбудил всех: разработчиков, дизайнеров, инвесторов, клиентов, конкурентов. Nokia умерла как и все кто не начал делать сайты адаптированные под мобильные устройства.

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

Скриншот из archive.org (Apple 2010г.)

Скриншот из archive.org (Apple 2010г.)

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

Скриншот из archive.org (Angular 2015г.)

Скриншот из archive.org (Angular 2015г.)

Параллельно с минимализмом развивается, максимализм в виде WebGL и других подобных технологий.

Скриншот сайта https://2050.earth (2019г.)

Скриншот сайта https://2050.earth (2019г.)

Мы не стали писать про Metro стиль, который предлагался компанией Microsoft. Возможно мы ошибаемся, но на наш взгляд он изначально был мертворожденным.

Что дальше?

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

Возможно на смену минимализму вернется максимализм, а возможно откроется новая веха в истории веб дизайна.

Друзья, если мы что-то не учли или у вас есть отличный пример пишите в комментариях и не забывайте критиковать или хвалить наш контент, большое спасибо =)

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

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

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

https://cds.cern.ch/images/CERN-HOMEWEB-PHO-2019-004-1

Сегодня у нас есть доступ к, казалось бы, бесконечному количеству информации.По состоянию на декабрь 2019 года индексированная сеть содержит около 6 миллиардов веб-страниц, для просмотра и чтения которых в режиме 24/7/365 потребуются сотни миллионов лет — и это только текущий объем контента, доступного сегодня! С тысячами твитов и сотнями часов видео на Youtube, не говоря уже о миллионах постов на таких сайтах, как Facebook и Reddit, каждый день добавляется так много нового контента, что пытаться читать в Интернете сегодня, вероятно, было бы бесконечной задачей. .

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

История веб-дизайна: 90-е

Как пела Джули Эндрюс в «Звуках музыки» Роджерса и Хаммерштейна, давайте начнем с самого начала — это очень хорошее место для начала.Было бы невозможно приписать изобретение Всемирной паутины только одному человеку, и прежде чем Интернет мог стать чем-то большим, чем просто концепция, человечеству нужно было изобрести компьютер.

Известный как Электрический числовой интегратор и калькулятор, ENIAC общепризнанно считается первым успешным высокоскоростным электронным цифровым компьютером (EDC) и продуктивно использовался с 1946 по 1955 год». Произведенный Джоном У. Мочли и Дж. Преспером Эккертом из Пенсильванского университета, этот технологический гигант использовал слово из 10 десятичных цифр вместо двоичных, как в предыдущих автоматических калькуляторах/компьютерах, для обработки информации и был очень инновационным для своего времени.При этом он был невероятно большим и легко перегревался, а компоненты еще не были очень надежными — хотя компьютер был отличной идеей, он все еще нуждался в большой работе, и чтобы механические части догнали футуристическое видение инженеров и идеи.

https://www.computerhistory.org/revolution/birth-of-the-computer/4/78

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

По мере того, как компьютеры становились все более мощными, росла идея о том, что можно разработать систему, которая объединит компьютеры по всей стране в единую коммуникационную сеть.Таким образом, в октябре 1969 года «появился первый работоспособный прототип Интернета… с созданием ARPANET, или Сети Агентства перспективных исследовательских проектов. Первоначально финансируемая Министерством обороны США, ARPANET использовала коммутацию пакетов, чтобы позволить нескольким компьютерам общаться в одной сети». Хотя он потерпел крах почти сразу после запуска, это была первая попытка установить, что такое Интернет сегодня. По мере того как технология росла и развивалась на протяжении 1970-х годов с помощью ученых Винтона Серфа и Роберта Кана, запуск протокола управления передачей и интернет-протокола, или TCP/IP, стал огромным прорывом для инженеров. «Модель связи, которая устанавливает стандарты того, как данные могут передаваться между несколькими сетями», это привело к принятию TCP/IP в ARPANET в 1983 году, и оттуда в конечном итоге Интернет был разработан с помощью Тима Бернерса-Ли, которому приписывают изобретение всемирной паутины. Так родилась потребность в веб-дизайне!

1990-1994

Начало 1990-х с энтузиазмом встретило Всемирную паутину благодаря ЦЕРН в 1992 году, и первую веб-страницу можно посетить и сегодня здесь: http://info.cern.ch/hypertext/WWW/TheProject.html. Как вы могли догадаться, сама по себе возможность успешно запустить веб-страницу на этой новой платформе была достижением в то время, поэтому концепция веб-дизайна все еще находилась в зачаточном состоянии. Эта веб-страница также является отличным примером того, как выглядел веб-дизайн в то время.

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

http://info.cern.ch/hypertext/WWW/TheProject.html

Год спустя появился ALIWEB (Archie Like Indexing for the WEB). Эволюция ARCHIE, которая считается первой поисковой системой, ALIWEB продемонстрировала первые попытки реализации веб-дизайна с привлекательным ярко-желтым фоном. «К концу 1993 года насчитывалось 623 веб-сайта, согласно исследованию исследователя Массачусетского технологического института Мэтью Грея», а по мере развития технологий развивался и веб-дизайн. Простые целевые страницы уступили место более сложным, а первый рекламный баннер появился в 1994 году и был создан для AT&T.«К середине 1994 года, согласно статистике Грея, насчитывалось 2738 веб-сайтов; а к концу года — более 10 000», а веб-дизайн продолжал развиваться по мере дальнейшего развития технологий.

https://www.theatlantic.com/technology/archive/2017/04/the-first-ever-banner-ad-on-the-web/523728/

1994-1998

Темп действительно начал набирать обороты в середине-конце 1990-х годов. По мере того, как новые элементы веб-дизайна внедрялись быстрыми темпами, маятник быстро качнулся от унылого к невероятному.С более чем 250 веб-безопасными цветами, которые теперь доступны дизайнерам, веб-страницы стали чрезвычайно яркими, калейдоскопическими, вплоть до чрезмерного избытка, временами делая текст почти неразборчивым. Имея под рукой новые инструменты, веб-дизайнеры охотно экспериментировали с разнообразными красочными кнопками и 3D-эффектами. Кроме того, развертывание яркой, кричащей рекламы, предназначенной для привлечения внимания пользователей, которая могла всплывать и мигать, теперь стало возможным благодаря внедрению Javascript в 1995 году, который разорвал границы статического веб-дизайна HTML.

Хотя это, безусловно, было новшеством и используется до сих пор, вопиющие ограничения Javascript вскоре были омрачены введением Flash в следующем году. «Дизайнер мог проектировать любые формы, макеты, анимацию, взаимодействие, использовать любой шрифт и все это в одном инструменте», что уступило место «золотой эре заставок, вступительных анимаций и всевозможных интерактивных эффектов».

https://blog.hubspot.com/marketing/look-back-20-years-website-design

Только в 1996 году доступ в Интернет и его использование расширились до более чем 36 миллионов человек, а количество веб-сайтов резко увеличилось с 25 300 до более 250 000.Потребление, возможно, было на рекордно высоком уровне, но по мере того, как создавалось все больше и больше веб-сайтов, средний показатель посетителей на страницу снизился с 1908 до немногим более 300. В результате веб-дизайн стал более важным, чем когда-либо, для привлечения большего количества требовался трафик на каждую страницу, и по мере создания новых страниц это становилось все более важным для успеха страницы. К счастью, именно в этот период технологические оковы веб-дизайна, наконец, были освобождены, и с приближением начала 2000-х креативность дизайнера могла выйти из-под контроля.

История веб-дизайна: новое тысячелетие 

1998-2002

На тот момент у разработчиков программного обеспечения было достаточно технологий, чтобы иметь возможность размещать все более сложный контент во все больших и больших объемах. В 1998 году бета-версия Google была представлена ​​пользователям компьютеров во всем мире, и, учитывая, что слово «гуглить» стало глаголом в Оксфордском словаре английского языка в 2006 году, кажется излишним подробно обсуждать здесь его успех. Успех и популярность Google, возможно, косвенно вдохновили на разработку CSS или каскадных таблиц стилей примерно в то же время, поскольку CSS был создан в ответ на растущее количество посетителей веб-сайта, создавших потребность в более обтекаемом дизайне.

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

Сам контент также начал сокращаться по сравнению с веб-страницами «на вашем лице» начала середины 90-х годов, что также ускорило время посещения, что также увеличило количество веб-сайтов, которые пользователи Интернета могли просматривать каждый день.Неудивительно, что веб-дизайнеры также начали приглушать яркие и кричащие элементы своих страниц. Чтобы создать более приятный пользовательский опыт, дизайнеры обратились к темным и цветным фонам, а также сделали все возможное, чтобы спланировать и реализовать нейтральные и эстетически приятные макеты и элементы дизайна. Все, казалось, двигалось в положительном направлении, но угроза 2000 года всегда вырисовывалась и приближалась.

https://www.theepochtimes.com/the-evolution-of-google-search_378873.html

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

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

https://www.dezeen.com/2014/04/30/fuseproject-yves-behar-creates-mobile-friendly-paypal-brand-identity/

2002-2006

Эти годы передали силу веб-дизайна в руки людей. В 2003 году WordPress позволил «обычным» интернет-пользователям, практически не имеющим опыта проектирования, создавать свои собственные блоги с помощью системы плагинов и шаблонов, и остается настолько популярным, что сейчас WordPress является ведущей в мире системой управления контентом (CMS). Взяв дизайн в свои руки, люди создавали то, что хотели видеть, что усиливало акцент на удобочитаемости и функциональности.В следующем году MySpace пошел по стопам WordPress и познакомил целое поколение с базовым кодированием HTML и веб-дизайном.

Для многих это было их первое знакомство с созданием всего, от простой графики до плагинов Flash и многого другого, при этом соединяя пользователей с сетями их сверстников. Тем не менее, дизайн некоторых страниц быстро стал напоминать некоторые веб-страницы середины 1990-х годов, а анимированный контент был тонко интегрирован в веб-сайты, поэтому неудивительно, что элегантный дизайн Facebook был невероятно хорошо принят в 2006 году.С более чем 2,38 миллиардами пользователей сегодня нет никаких сомнений в том, что их веб-дизайн определенно способствовал их общему успеху.

Беспокойные подростки веб-дизайна

2006-2010

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

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

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

https://www.slideshare.net/DianaEkaMartiandani/skeuomorphism-vs-flat-design

2010-2015

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

Примерно в это же время адаптивный дизайн также стал главной тенденцией. Адаптивный веб-дизайн, созданный веб-дизайнером Итаном Маркоттом в 2010 году, все еще широко используется сегодня — и вы определенно посещали веб-сайт, использующий его раньше.Адаптивный дизайн берет один и тот же контент с одной страницы, но размещает его в разных макетах, отформатированных для разных устройств.

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

https://www.webfx.com/blog/web-design/understanding-the-elements-of-responsive-web-design/

История веб-дизайна: бурные двадцатые и последующие годы 

2015 – Сегодня

По мере того, как технологии развивались и по сей день, мы продолжаем сталкиваться с усилиями веб-дизайнеров, раздвигающих границы творчества и бросающих вызов условностям. Одной из самых последних тенденций веб-дизайна является «разорванная сетка» и «асимметричный макет», которые привлекают взгляд посетителя по всей странице для эффекта, который стремится выделиться и отличаться от остальных.Традиционная сеточная система создает ощущение единообразия; пользователи могут обычно видеть определенные элементы в определенных областях страницы, например, вход в систему в правом верхнем углу целевой страницы. Буквально ломая сетку, дизайнеры экспериментируют с выходом за рамки текущих норм веб-дизайна. Это не новая концепция, но, безусловно, за последние несколько лет ее популярность росла.

https://www.secretstache.com/blog/how-to-efficiently-break-out-of-the-grid/

Тенденции в дизайне, как и в моде, цикличны.Еще одна тенденция веб-дизайна, возвращающая популярность, — это возвращение к монохромным макетам и преднамеренному отсутствию цвета. По данным thenextweb.com,

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

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

https://www.mockplus. com/blog/post/black-and-white-website-design

История повторяется. Чему мы можем научиться из этого?

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

Готовы узнать больше о проектировании с помощью VisualFizz?

Свяжитесь с нами сегодня.

Вам также может понравиться…

Краткая история адаптивного веб-дизайна

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

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

В этой статье мы рассмотрим ранний веб, различные способы адаптации сайта разработчиками к разным размерам экрана и современный адаптивный дизайн.

Первый веб-сайт

6 августа 1991 года в сети появился первый веб-сайт.Сайт был создан Тимом Бернерсом-Ли и подробно описывает проект World Wide Web (W3). Первоначально он работал на компьютере NeXT в CERN, Европейской организации ядерных исследований.

Хотя первоначальный сайт отключился, в 2013 году ЦЕРН запустил проект по «сохранению некоторых цифровых активов, связанных с рождением Интернета». Все, от исходных имен компьютеров, IP-адресов и URL-адресов первого веб-сайта, было восстановлено в меру своих возможностей.

Хотя исходная версия веб-сайта 1991 года была утеряна, им удалось восстановить версию 1992 года.Если вы хотите проверить себя, теперь он находится по адресу http://info.cern.ch/hypertext/WWW/TheProject.html.

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

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

В начале 90-х веб-дизайн был очень простым. Большинство веб-сайтов использовали простые теги заголовка, абзаца и раннего списка, такие как теги

,

и

для организации информации.

Yahoo в 1994 г. (Источник)

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

Хотя методы оформления веб-сайтов в той или иной форме существовали, Хокон Виум Ли впервые предложил CSS в 1994 году, когда работал в ЦЕРНе. Затем, в 1996 году, Консорциум World Wide Web (W3C), также основанный Бернерсом-Ли, выпустил первую официальную спецификацию каскадных таблиц стилей уровня 1 (CSS1).

С помощью CSS и других технологий, таких как JavaScript и Flash, веб-разработчики могут стать более креативными и играть в своих проектах.

Интернет-архив в 1997 году (источник)

К концу 90-х — началу 2000-х годов в веб-дизайне и взаимодействии с пользователем появились шаблоны, и веб-сайты стали выглядеть так, как мы используем сегодня:

DeviantArt в 2000 году (источник)

Ранний адаптивный дизайн методы

С более широким распространением CSS разработчикам приходилось тратить гораздо больше времени на такие вещи, как макет, дизайн и типографика. Но одна вещь, о которой им не нужно было сильно беспокоиться, — это адаптация к разным размерам экрана. В то время у большинства людей были мониторы с разрешением 640×480, 800×600 или 1024×768.

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

Жидкие макеты

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

У MDN есть несколько хороших примеров как фиксированной ширины, так и гибкой разметки.

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

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

Пример жидкого дизайна (Источник)

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

Макеты, зависящие от разрешения

В 2004 году Кэмерон Адамс написал сообщение в блоге, в котором подробно описал метод использования JavaScript для замены различных таблиц стилей в зависимости от размера окна браузера.

Этот метод стал известен как макеты, зависящие от разрешения, по имени сообщения в блоге Адамса. Несмотря на то, что в то время это было немного дополнительной работой для разработчиков, это позволяло более точно контролировать макет сайта и функционировало как ранняя версия точек останова CSS до того, как они появились.

Пример макета, зависящего от разрешения, предложенный Адамсом (Источник)

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

В то время было много браузеров, и иногда они по-разному обрабатывали HTML, CSS и JavaScript. На самом деле, это одна из основных причин, по которой jQuery впервые стал настолько популярным в то время — он абстрагировал многие различия браузеров, так что вам приходилось писать свой код только один раз.

Мобильные поддомены

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

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

Мобильные субдомены, иногда называемые m-dots или m субдоменами, — это просто мобильная версия сайта, размещенная на субдомене, обычно m .

Например, настольная версия Facebook находится по адресу facebook.com или, точнее, по адресу www субдомен, www.facebook.com :

Настольная версия Facebook

Но мобильная версия Facebook находится по адресу m.facebook.com :

Мобильная версия Facebook

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

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

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

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

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

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

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

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

Адаптивный веб-дизайн

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

Даже для простых макетов разработчикам приходилось использовать такие вещи, как max-width: 100% трюк для гибких изображений и float с четкими исправлениями, чтобы ничего не ломалось.

Затем, в 2010 году, разработчик по имени Итан Маркотт опубликовал статью в A List Apart, в которой изложил новый взгляд на гибкий веб-дизайн. В статье Маркотт перечислил три важных компонента для создания адаптивного веб-сайта: гибкие сетки, гибкие изображения и медиа-запросы.

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

Гибкие сетки

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

Веб-сайт Итана Маркотта на мобильном устройстве (Источник) Та же страница на десктопе (Источник)

Вы можете прочитать больше о Маркотте мысли о плавающих сетках в этой предыдущей статье.

Гибкие изображения

Гибкие изображения — это идея о том, что изображения должны увеличиваться или уменьшаться вместе с изменяемой сеткой, в которой они находятся:

Меньшие фотографии на мобильном устройстве (Источник) Большие фотографии на рабочем столе (Источник)

Обычный способ сделать это можно с помощью упомянутого выше трюка max-width .

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