Зарождение интернета происходило в 70-х годах прошлого века. На протяжении 1970-х перед высшим военным американским руководством стоял вопрос о том, как власти смогут производить общение после ядерной войны. За решение была принята сеть, которая всегда считалась ненадежной, в которой каждый узел должен быть суперкомпьютером. Все узлы этой сеты будут считаться равноправными по статусу происхождения, получения и отправления посланий. Сами же пакеты должны быть разделены на часть, называемые пакетами, которые будут отправляться отдельно. Каждый такой пакет будет начинаться с некоторого конкретного узла и отправляться по указанному направлению. Каждый из пакетом в любом сообщении будет проходить по независимому пути, после чего исходное сообщение будет собираться в начальную форму в конечном пункте. Коммуникационный стандарт дал толчок развитию TCP/IP (Transmission Control Protocol — протокол управления передачей информации, который превращает послания в потоки пакетов, и Internet Protocol — Интернет-протокол, который вновь группирует послание на конечном пункте назначения).

На основании этого простого принципа была создана первая пробная сеть для соединения. В Качестве спонсора этого проекта выступал пентагон. Сеть быстро развивалась. В 1969 году в сети было четыре узла, а в 1972 году в ней было уже 32 узла. Она использовалась для сетевой работы на компьютера, но основной ей функций был обмен сообщениями при совместной работе над исследовательскими проектами. В связи с тем, что компьютеры становились все более доступными, их начали соединять с растущей сетью. Для того чтобы классифицировать организации, владеющие узлами сети, эти узлы были разбиты на шесть доменов: gov, com, edu, org, mil и net.

В 1989 году руководству центра ядерных исследований в Швейцарии британский ученый Тим Бернерс-Ли предложил концепцию новой распределенной информационной системы, которую назвал World Wide Web. В то время он считал, что информационная система, построенная на принципах гипертекста, должна объединить всё множество информационных ресурсов, которое состояло из базы данных отчетов, компьютерной документации, списков почтовых адресов и т.п. В 1990 году было положено начало самой популярной и современной сети — Intenrt. На всю работу, выполнявшуюся в течении полугода, было предоставлено четыре дизайнера, разработчик программного интерфейса и программиста, для каждого из которых было предоставлено отдельное рабочее место. Вскоре их работу уже можно было демонстрировать. Уже через год в Internet был установлен анонимный протокол TELNET для доступа в систему. Через полтора года, программа Mosaic, разработанная Марком Андресеном из NCSA, построенная на принципах WWW, обеспечила бурный рост популярности «паутины» и внесла огромный вклад в развитие спецификаций World Wide Web. Эта огромная индустрия росла с каждым днём. В марте 1993 года трафик WWW составил 0,1% от компьютерной сети национального фонда науки США, которая была образована в 1984 году и служила каркасом Internet. В сентябре 1993 года трафик WWW составлял уже 1%, в октябре 1993 года количество зарегистрированных серверов WWW равнялось 500, а к июню 1994 года оно достигло 1500 и продолжало расти.

Первый в мире web-сайт появился 6 августа 1991 года. http://info. cern. ch/ Его создатель Тим Бернерс-Ли (Tim Burners-Lee) опубликовал на нём описание новой технологии World Wide Web (WWW), основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы web-серверов и web-браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Сайты в период с 1990 по 1994 год выглядели как группа текстовых документов, связанных между собой ссылками.

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

В 1996 году была издана очень влиятельная книга Дэвида Сигэла под названием «Creating Killer Web Sites». Система раскладки страниц, описываемая в этой книге, в основном базировалась на использовании таблиц HTML и однопиксельных GIF’ов. Страница раскладывалась по сетке; содержимое, будь оно текстом или графикой, помещалось в ячейки этой сетки. Чтобы предотвратить «сворачивание» пустых ячеек таблицы, использовались прозрачные GIF размером 1 Ч 1 пиксель. Сигэл (и не только он) пошел дальше, и предлагал использовать однопиксельные GIF, как средство управления разрывами между буквами в тексте, и для того, чтобы создавать отступы. Появление таких методов позволило дизайнерам создавать визуально привлекательные страницы, ставя эстетический аспект в сайтах наряду с функциональным.

Одним из важнейших достижений этого времени является программа Flash 1.0. Создателем этой программы является программист Джонатан Гай, который ещё школьником, написал на языке программирования Pascal, свой первый графический редактор «SuperPaint», за который был удостоен награды на научной выставке в школе.

После создания «SuperPaint II» и завершения обучения в колледже, Джонатан начал разработку технологии для создания нового поколения программного обеспечения для работы с графикой, которая сожжет использоваться как на компьютерах Macintosh, так и на компьютерах с операционной системой Windows. Эта технология породила программу под названием «Intellidraw», которая составила конкуренцию «Adobe Illustrator». Уникальность «Intellidraw» заключалась в том, что помимо возможности рисования изображений, она также позволяла добавлять к нарисованным изображениям действия, так что кроме возможности создания линий, которые бы соединялись с каким-либо объектом и другими линиями, можно было добавить так элементы как гистограмма, которая изменялась при введении пользователем чисел в текстовое поле. Позже выяснилость, что «Intellidraw» была не первой программой, которая позволяла это делать, так как существовал редактор изображений «SketchPad», но он был быстро забыт. В своё время «Intellidraw» не вызывала должного уважения у пользователей и когда стало ясно что она обречена, было принято решение действовать иначе. В это время становятся популярными компьютеры, представляющие собой экран, на котором можно было рисовать электронным пером. Очень привлекательной была идея сделать компьютер меньше, чтобы пользователь мог фактически брать его с собой куда угодно. С помощью инвестиций Чарли Джексона в январе 1993 года была создана компания Future Wave Software, целью которой было доминирование на рынке графического программного
обеспечения для перьевых компьютеров. На тот момент главной задачей было
создание сложного продукта, который был бы легок в использовании.

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

Компания Future Wave Software сильно заинтересовалась в создании программного обеспечения для анимации, но на тот момент единственными способами распространения анимации были VHS и CD ROM, и рынок программных продуктов для производства анимации был очень узок. Так же в это время, новое понятие, которое называлось Интернет, дебютировало перед публикой. В теории, казалось вероятным, что сеть станет настолько популярной, что пользователи захотят отправлять и просматривать графику или анимацию, создавая тем площадку для FutureWave Software для создания полезного продукта для двумерной компьютерной анимации. С такими мыслями началась работа над добавлением функций по созданию анимации в «SmartSketch» (рис.5) и созданию интерпретатора, который поначалу был очень медленным, для визуализации анимации. FutureWave Software продолжала разработку, а осенью вышел браузер Netscape с API для подключения плагинов, который предоставил возможность для создания плагина с достойной производительностью.

Особенности дизайна сайтов данного времени:

фоновые картинки часто резались на фрагменты и вставлялись в таблицу;

принципы хорошего дизайна часто уступали новым и популярным «фишкам»;

фреймы стали популярным способом разделять контентную область и боковую колонку с навигацией;

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

Ниже приведены примеры сайтов возданных в 1997 году.

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

В 2000-ом году популярность приобретает CSS. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS. В начале 1990 годов различные браузеры имели свои стили для отображения веб страниц.html развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания. Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS. В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях. В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

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

Особенности дизайна сайтов в 2000 году:

каскадные таблицы стилей (CSS) позволили дизайнерам отделить контент сайта от веб-дизайна

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

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

Особенности дизайна сайтов в начале 2000-х годов:

навигация сайта начала перемещаться в верхнюю часть страницы;

выпадающее меню стало популярным решением для навигации;

формы ввода начали использовать подсказки;

пользователи получают возможность создавать и оформлять контент.

В конце 2000-х годов в web-дизайне популярность приобретает интерактивный контент и web-приложений. Web-дизайнеры широко используют JavaScript и XML для плавной смены контента и разработки приложений. Развиваются социальные сети. Web дизайнеры фокусируются на оформлении контента. Важным достижением становится появление альтернативы Flash — HTML 5.

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

Адаптивный веб-дизайн (Adaptive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств. В 2010 году Итан Маркотт в одной из своих статей ввёл понятие отзывчивого веб-дизайна (responsive web-design), предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления. Среди веб-дизайнеров стали понимать адаптивный дизайн как более широкое понятие, включающее отзывчивый дизайн и постепенное улучшение.

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

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

В наши дни существует несколько новых идей, которые поддерживают движение в этом направлении:

новые элементы CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов и решить такую проблему как центральное выравнивание по вертикали;

модуль Flexbox, который позволяет создавать макеты и изменять их при помощи одного свойства, вместо написания большого количества программного кода;

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