-
Тёмный век веб-дизайна
Cамо начало веб-дизайна можно назвать тёмными временами, ведь экраны были в прямом смысле черными, вмещая в себя всего лишь небольшое количество одноцветных пикселей. Дизайн тогда создавался при помощи символов и табуляции, поэтому мы переместимся вперед, в то время, когда графические пользовательские интерфейсы были главным инструментом веб-серфинга. Те времена табличной верстки можно назвать Диким Западом веба. -
Таблицы — начало
Появление на свет браузеров, способных показывать изображения, было первым шагом в веб-дизайн — такой, каким мы его знаем сегодня. Самым доступным способом структурирования информации была концепция использования таблиц, которые на тот момент стали доступны в HTML. Поэтому помещение таблиц внутрь других таблиц и смешивание статических ячеек с ячейками относительных размеров началось с книги Дэвида Сигела "Creating Killer Sites". -
Javascript приходит на помощь
Ответом на ограничения HTML был Javascript. Хотите вывести всплывающее окно? Или вам нужно настроить динамическое изменение расположения элементов? Есть Javascript! Однако главная проблема заключалась в том, что Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно. Нередко ленивые разработчики использовали его для создания быстрой заплатки для кода, однако в умелых руках он способен превратиться в очень мощный инструмент. -
Золотая эпоха свободы – Flash
Появившаяся в 1996 году технология обещала невиданную ранее свободу и ставила своей целью разрушить барьеры, которые сдерживали развитие веб-дизайна в то время. Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента — технологии Flash. Конечный результат работы упаковывался в один файл, а после этого отправлялся в браузер для отображения. -
CSS
В то же время, что и Flash, появился другой, лучший с технической точки зрения способ структурирования дизайна — Cascading Style Sheets (CSS). Его базовая концепция заключалась в разделении функций контейнера содержимого и функций его представления, таким образом, что сам контент помещался в HTML, а его визуальное форматирование происходило при помощи CSS. Первые версии технологии были далеки от гибкости. Для введения полной браузерной поддержки CSS потребовалось несколько лет. -
Подъем мобильного контента — сетки и фреймворки
Просмотр веба на мобильных телефонах уже сам по себе был испытанием. А кроме различия размеров макетов для разных девайсов появилась также проблема соответствия дизайнов: стоит ли отображать на малом экране тот же вариант сайта, что и на большом, или от отдельных его частей необходимо отказаться? Скорость работы также была проблемой, поскольку загрузка большого количества контента сжигает весь ваш мобильный баланс довольно быстро. -
Адаптивный веб-дизайн
Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу, предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления, назвав это термином «Responsive web design» (адаптивный веб-дизайн). Формально, мы все еще продолжаем использовать HTML и CSS, поэтому речь здесь идет больше о концептуальном улучшении. -
Упрощение
Отрисовка большего количества макетов требует больше времени. Исходя из этого, к нашему общему счастью, дизайнеры решили рационализировать процесс, избавившись от замысловатых эффектов теней и вернувшись обратно к истокам дизайна, отдав приоритет содержимому. Качественные фотоматериалы, подбор шрифтового оформления, красочные иллюстрации и продуманные макеты — таков дизайн, каким мы создаем его сегодня. -
Светлое будущее
Все эти годы визуализация дизайна и разные попытки его представления в браузере были Святым Граалем веб-дизайна. Представьте себе, как дизайнеры с легкостью перемещают элементы на экране, а готовый код при этом появляется сам! Речь идет не про изменение порядка элементов как таковое, а про полную гибкость и контроль! Представьте себе, что разработчикам не нужно беспокоится о совместимости с браузерами и они, вместо этого могут полностью сосредоточиться на решении реальной проблемы!
