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

История появления и развития Интернета

Своим зарождением Интернет обязан Министерству обороны США и его секретному исследованию, проводимому в 1969 году с целью тестирования методов, позволяющих компьютерным сетям выжить во время военных действий с помощью динамической перемаршрутизации сообщений. Первой такой сетью была ARPAnet, объединившая три сети в Калифорнии с сетью в штате Юта по набору правил, названных Интернет-протоколом (Internet Protocol или, сокращенно, IP).  В 1972 был открыт доступ для университетов и исследовательских организаций.

Ну а как же Интернет стал столь популярен и развит? Толчком к этому стало появление World Wide Web (Всемирная Паутина) — системы гипертекста. Идея связывания документов через гипертекст впервые была предложена и продвигалась Тедом Нельсоном (Ted Nelson) в 1960-е годы, однако, уровень существующих в то время компьютерных технологий не позволял воплотить ее в жизнь.

Первые веб-страницы

Основы того, что мы сегодня понимаем под WWW, заложил в 1980-е годы Тим Бернерс-Ли (Tim Berners-Lee) в процессе работ по созданию системы гипертекста в Европейской лаборатории физики элементарных частиц (European Laboratary for Particle Physics, Европейский центр ядерных исследований). В результате этих работ в 1990 научному сообществу был представлен первый текстовый браузер (browser), позволяющий просматривать связанные гиперссылками (hyperlinks) текстовые файлы on-line. Доступ к этому браузеру широкой публике был предоставлен в 1991, однако распространение его вне научных кругов шло медленно.

В августе 1991 года Тим Бернерс-Ли опубликовал первый веб-сайт — простую, текстовую страницу с несколькими ссылками. Сайт имел множество ссылок и рассказывал людям, что такое World Wide Web.  Копия оригинальной страницы 1992 года все еще ​​существует в Интернете. 

Последующие страницы были похожи — полностью текстовые с множеством ссылок. Первоначальные версии HTML (язык разметки гипертекста) поддерживали только заголовки ( <span><span><h1></span></span> , <span><span><h2></span></span> и др.), параграфы ( <span><span><p></span></span> ), и ссылки ( <span><span><a></span></span> ). Последующие версии HTML разрешали добавление изображений ( <span><span><img></span></span> ) на страницах, и в конечном итоге  была добавлена поддержка таблиц (  <span><span><table></span></span> ).

Новым историческим этапом в развитии Интернет стал выход  первой версии графического браузера Mosaic в 1993 году, разработанного в 1992 Марком Андресеном (Marc Andreessen), студентом, стажировавшимся в Национальном центре суперкомпьютерных приложений (National Center for Supercomputing Applications, NCSA), США.

Залогом успеха браузера стали интуитивно понятный интерфейс, стабильность работы, простота установки и кроссплатформенность (Mosaic стал первым браузером, доступным одновременно для всех действующих на тот момент операционных систем, включая Windows, Macintosh и Unix). Вслед за этим появились браузеры  Netscape Navigator и Microsoft Internet Explorer.

Именно с этих событий берет начало взрывообразное распространение популярности WWW, и как следствие Интернета, среди широкой публики сначала в США, а затем и по всему миру.

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

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

1996 год — нужно запомнить, но никогда не повторять

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

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

Этот сайт 1996-го года дизайнера  Betsey Johnsonа. Цвет фона больше, чем просто яркий. Хотя в наше время мы также можем найти подобные страницы.

Индийский сайт музыки с анимированным флагом вверху демонстрирует достаточно интересный выбор градиента — белый/зеленый/оранжевый/белый. Такое дизайнерское решение визуально разрезает страницу сайта пополам.

Системные шрифты и синие ссылки

1996 год — первый дизайн веб-сайта от Altavista. Просто и полезно. Логотип был использован в качестве заголовка. Учитывая, что это была первая попытка Altavista, нужно отметить, что их сайт на то время был одним из самых лучших.

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

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

Вот сайт компании Lego.  Его попытались сделать достаточно интерактивным (без использования flash/jquery). Поскольку продукция использовалась для детей, на сайте были размещены анимационные картинки с ссылками возле них. 

Цвет фона, иконки, шрифты 

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

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

 1996 год, веб-сайт типографии 

Кнопки! Что бы мы делали сейчас без них. Но в 1996 году это были только серые варианты для создания интерактивности.

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

Пример раннего сайта Angelfire. Вы можете обратить внимание на эксперименты с размерами, цветом окон, а также использование кнопок и белого шрифта на синем фоне.

BBC пытались  перенести информацию из телевидения в Интернет. Просматривается меню со списком ссылок, а также некоторые приложения, например, прогноз погоды. 

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

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

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

Яркие и красочные кнопки над серым фоном с легкой текстурой.  Внимание привлекает белый текст на ярких цветах. 

2008 год характерен тенденциями мобильных веб-приложений. В 2007 году, iPhone определенно послужил сильным толчком для развития мобильного веб-дизайна. Профильные компании стали создавать мобильные веб-сайты и разрабатывать приложения. Большие социальные сети, устанавливают виджеты для перехода на блоги, веб-сайты — виджеты для перехода на социальные сети. Также 2008 год — год стиля ретро в дизайне.  Цветовая гамма стала более стильной, дизайн сайтов — лучше и контрастнее.

2011 год. Веб-дизайн становится лучше и лучше.

Дизайн Neve на главной странице показывает суть магазина детской одежды. Они используют мягкие цвета, которые создают спокойную и элегантную атмосферу.

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

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

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

По материалам:

• Web design history, a complete journey
• The Evolution of Web Design