html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

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

Своим зарождением Интернет обязан Министерству обороны США и его секретному исследованию, проводимому в 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 на главной странице показывает суть магазина детской одежды. Они используют мягкие цвета, которые создают спокойную и элегантную атмосферу.

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

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

 

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

 

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

48
    +30 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции