25 лет истории веб-дизайна в 9 GIF-файлах

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

Компания Froont из Сан-Франциско, занимающаяся разработкой инструментов для веб-дизайнеров, создала 9 анимированных GIF-файлов, чтобы показать, насколько далеко шагнули вперед разработки в области веб-дизайна за четверть века. Задумывались ли вы, почему каскадные таблицы стилей (CSS) важны и почему технология флэш умерла? Об этом по порядку.

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

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

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

Таблицы. Начало (1995)

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

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

Java скрипт спешит на помощь (1995)

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

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

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

Каскадные таблицы стилей (CSS) 1998

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

Мобильный бум: сетки и фреймворки (2007)

появление в 2007 году iPhone, создало огромную проблему для дизайнеров: как отобразить страницу на маленьком экране смартфона? Первым решение стали системы на основе сеток, убиравшие колонки в зависимости от разрешения экрана устройства.

Отзывчивый веб-дизайн (2010)

В 2010 году Итан Маркотт (Ethan Marcotte) придумал еще одно решение для отображения страниц на экранах мобильных устройств — отзывчивый веб-дизайн.

Итан Маркотт решил бросить вызов существующему подходу к конструированию сайтов и предлагает использовать один контент, но разные макеты для дизайна. Технически это всё тот же HTML и CSS/ Для дизайнера это означает несколько макетов, для клиента — гарантия работы на смартфоне, для разработчика -способ отображения изображений, скорость загрузки, семантика, мобилный браузер или настольный и многое другое. Один и тот же сайт работает везде.

А теперь посмотрим, что именно отличает в дизайне отзывчивого сайта

отзывчивый	адаптивный
плавающий	статичный
относительные величины	абсолютные величины
контрольные точки	без контрольных точек
максимальная ширина	без максимальной ширины
вложенные объекты	объекты без вложений
настольный важнее	мобильный важнее
системные шрифты	веб-шрифты
векторные изображения	пиксельные изображения

 Настали плоские времена (2010)

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

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

Что ждёт нас в будущем? Основа основ — истинная гибкость. Довольно скоро наступят времена, когда дизайнерам не нужно будет задумываться о совместимости браузеров. В их распоряжении имеются все необходимые технологии, чтобы сайт выглядел одинаково на любом устройстве. Технологические ограничения более не являются помехами. Дизайнеры смогут сконцентрироваться на вопросах проектирования взаимодействий с пользователем и пользовательского интерфейса, не затрачивая время на устранения неисправностей.

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

Технически есть несколько новых концепций, которые поддерживают движение в этом направлении. Новые опредения в CSS, такие как VH и VW (высота и ширина области просмотра) придают большую гибкость для позиционирования элементов. Это так же позволит решить давнюю проблему дизайнеров — вертикального позиционирования, которая доставила немало боли дизайнерам. Другая набирающаяя обороты технология — flexbox, являющаяся частью CSS. Она позволяет создавать макеты и изменять их с помощью единственного свойства, вместо написания громадного количества кода. Наконец, веб-компоненты: набор готовых элементов (галерея, регистрационная форма и т.д.), что существенно позволит облегчить рабочий процесс, где элементы становятся строительными блоками, которые можно использовать и изменять отдельно.

 

Источник: FastCoDesign FroontBlog Изображения: Froont