Андрей Батурин
В сфере 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-дизайна обещает стать шрифт, как главный графический элемент интерфейса.
От автора: становление веб-дизайна, как и Интернета, в нашей стране пришлось на 90-е годы прошлого века. До этого в компьютерных технологиях царил, можно сказать, каменный век, когда о визуальном контенте сайты и мечтать не могли: они целиком и полностью состояли из текста. Впервые текст «встретился» с изображением в далеком 1993-м году, и с тех пор начала свой отсчет история веб-дизайна, краткому экскурсу в которую и посвящена моя сегодняшняя статья.
Суровые 90-е
Несмотря на то что в эпоху становления веб-дизайна первые веб-страницы представляли собой просто текст со ссылками, а о разнообразии шрифтов и спецэффектов можно было только мечтать, те наивные, дремучие времена вспоминаются веб-разработчиками с некоторой доброй тоской.
Первые сайты, первые провайдеры, первые веб-дизайнеры. Мониторы с разрешением 640х480, поддерживающие всего 16 цветов (!). Черный текст, синие ссылки, красные или розовые заголовки. Красота!
Это сейчас с помощью современных инструментов и технологий даже школьник за один урок информатики может совершенно бесплатно создать собственный сайт. При этом, дизайн, качество и функциональность этого сайта будут на порядок выше, чем у тех первых «ласточек» сайтостроения, когда веб-дизайн создавался с помощью символов и табуляции.
В конце 1993-го в сети произошел долгожданный «прорыв» - появился первый графический браузер Mosaic, который положил начало улучшению визуальной передачи информации. С тех пор история веб-дизайна начала развиваться бешеными темпами. Всего за несколько лет количество сайтов в интернете выросло с нескольких сотен до десятков тысяч.
В 1996-м году в оформлении веб-страниц появились анимированные GIF-изображения, пестрые фоны и чересчур яркие заголовки. Судя по всему, то поколение веб-дизайнеров таким образом выражало свою радость по поводу того, что они наконец-то могут уйти от серости и обыденности.
В HTML и веб-дизайне стали активно использоваться таблицы, с помощью которых структурировалась вся информация на веб-странице. В то время «разрезанием макетов» занимались не веб-дизайнеры, а разработчики.
Правда, сохранить работоспособность хрупких табличных структур было чрезвычайно сложно, а возможность использования хорошей графики (особенно с применением Flash-технологий) сдерживалась низкими разрешениями мониторов и скоростями передачи информации. Вот так разработчики поняли, что перестали любить внешние интерфейсы. Но это уже совсем другая история
Карамельные 2000-е
Еще один качественный прорыв история развития web-дизайна совершила в 2000-е годы, когда технология CSS (Cascading Style Sheets) позволила отделить содержимое веб-страниц от их оформления. 2004–2006 годы считаются началом эры WEB-2.0.
Вначале технологии не особенно поспевали за модой (вспомним те же закругленные уголки, верстка которых делалась с помощью изображений), при этом, мода, в некотором смысле, «подхлестывала» технологии, что нашло свое отражение в улучшении функциональности и юзабилити сайтов. Тогда же мастера веб-дизайна начали использовать в своих творениях:
плавные градиенты и мягкие цвета;
объекты скругленной формы;
зеркальность, глянцевость, «карамель» в кнопках, картинках и иконках;
«специальные предложения» и бейджи на главной странице;
паттерны на фон.
Да здравствует мобильный контент
До 2007-го года просмотр веба на мобильных телефонах был испытанием не для слабонервных. Появление iPhone и массовое распространение социальных сетей дало толчок развитию мобильных приложений и веб-сайтов.
История web-дизайна ознаменовалась новыми проблемами. Стоит ли пытаться отобразить полноценную версию сайта на крохотном экране мобильного телефона, или от некоторых элементов макета лучше отказаться? Куда вставлять рекламу? Как загрузить на телефон весь контент сайта с этой позорной скоростью мобильного интернета?
Использование сеток со столбцами при разработке макета сайта стало первым шагом к улучшению ситуации. Веб-дизайнеры стали использовать сетку в 960 пикселей, разделенную на 12 столбцов.
Следующим шагом стала стандартизация элементов сайта: кнопок, меню, форм, навигации, а также создание визуальной библиотеки с определенным кодом, которая дала возможность быстро использовать каждый элемент. Победителями стали фреймворки Foundation и Bootstrap, которые начали стирать грань между веб-дизайном и программным кодом.
Есть у этого подхода и недостатки, куда ж без них. Новые дизайны сайтов все чаще выглядят одинаково. А веб-дизайнеры по-прежнему не могут изменить готовые шаблоны сайтов без понимания того, как работает программный код.
Скевоморфизм и адаптивный веб-дизайн
В 2010-м году веб-дизайнеры продолжают использовать CSS и HTML, однако, все чаще начинают применять новую концепцию под названием «адаптивный веб-дизайн», которая подразумевает отображение одинакового содержимого с помощью различных форм макетов. При этом, понимание «адаптивности» у клиентов и разработчиков обычно существенно отличается.
Клиент думает: «Ага, адаптивный веб-дизайн… Значит, сайт будет хорошо работать на телефоне». Разработчик же, в первую очередь, думает о количестве набросков макета, смысловой нагрузке элементов, скорости загрузки контента, визуальных способах представления информации, приоритете десктопной или мобильной версии и т. д.
В 2011-м году у веб-дизайнеров наконец-то начинает появляться художественный вкус, и на смену «карамельной» моде приходит натуралистический дизайн, или скевоморфизм.
Характерными чертами скевоморфизма можно назвать «кожаный» фон приложения-календаря у iOS или трехмерную иконку «мусорной корзины».
Вообще, этот визуальный стиль подразумевал использование трехмерных «тисненых букв», ленточек, «занавесочек», элементов, которые выглядят как кожа, ткань и другие материалы с выраженной физической текстурой и реалистичными швами.
От сложного к простому
К всеобщему счастью веб-дизайнеров, в 2012 году маятник моды качнулся в другую сторону. Скевоморфизм стал ругательным словом, визуальные элементы были максимально упрощены, приоритет был отдан содержимому. Так появился термин «плоский дизайн».
Глянцевые трехмерные кнопки были заменены плоскими векторными иконками и веб-шрифтами (прямо как на рассвете веб-дизайна в 1990-е), подтверждая выражение «Все новое - это хорошо забытое старое». В тренде также яркие цвета, интересная типографика, большие фоновые изображения и даже фоновое видео.
Наше время
Сегодня существует несколько новых идей, которые, в принципе, поддерживают движение в направлении «плоского» дизайна (Flat Design), так как он позволяет эффективно использовать пространство и сосредоточить внимание пользователя на наиболее важных элементах сайта.
Прекрасно сочетается с Flat 2.0 такое направление, как Google Material Design (материальный дизайн), с его визуальными подсказками в виде интересной игры движений, света и теней.
Сейчас в моде также длительный скроллинг, винтажный стиль с пикселизированными картинками и галактическими фонами, визуальные элементы с большим разрешением.
Надеюсь, я смог донести до вас основные события из истории возникновения web-дизайна, которые доказывают тесную взаимосвязь изменений в мышлении людей и тенденциях веб-дизайна. Конечно, были и промахи, и удачи, однако, согласитесь, большинство нововведений пошли взрослеющему дизайну только на пользу.
Многие хотели бы заглянуть в будущее веб-дизайна. Но ведь его история ни чем не хуже. Хотя веб-дизайн и развивался в течении всего лишь нескольких десятилетий, он стал неотъемлемой частью нашей жизни. В данной статье рассматривается краткая история разных периодов веб-дизайна. Надеемся, что статья поможет понять прошлое и настоящее веб-дизайна, чтобы потом в дальнейшем вы сами смогли внести свой вклад в его развитие.
История появления и развития Интернета
Своим зарождением Интернет обязан Министерству обороны США и его секретному исследованию, проводимому в 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 (язык разметки гипертекста) поддерживали только заголовки ( , и др.), параграфы ( ), и ссылки ( ). Последующие версии HTML разрешали добавление изображений ( ) на страницах, и в конечном итоге была добавлена поддержка таблиц (