Краткая история веб-дизайна для дизайнеров

Краткая история веб-дизайна для дизайнеров

Дизайнер должен разбираться в коде? Разработчику нужно понимать нюансы дизайна? Внятный ответ на эти вопросы дал Сандис Рулукс, со-основатель студии веб-дизайна FROONT. Мы прочитали и перевели его концентрированную мудрость для вас.

Статья о том, как развивался веб-дизайн и где художник пересекается с программистом.

Краткая история веб-дизайна для дизайнеров

Мой интерес к созданию кода для собственных проектов исчез, когда я понял, сколько нужно уловок, чтобы все заработало. Казалось бы, простые задачи можно решить разными способами. Но хоть в одном из браузеров что-нибудь да отвалится. Больше всего меня удивляет существующее разделение между кодом и дизайном. Почему сложное упрощается, но простое становится всё сложнее? Не стану разглагольствовать о том, должны ли дизайнеры учиться кoдить или же разработчикам нужно изучать дизайн. Лучше рассмотрим, как в общем развивался веб-дизайн и как сократить разрыв между кодом и дизайном.

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

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

Таблицы — начало (1995)

Первым шагом навстречу современному веб-дизайну стало появление браузеров, которые отображали картинки. Ближайшей альтернативой структурирования информации стала концепция таблиц в HTML. И после появления книги Дэвида Сигела «Создание потрясающих сайтов» (David Siegel «Creating Killer Sites») программисты стали вкладывать таблицы в таблицы и вычислять более удобные способы совмещения статистических и динамических элементов. Это не казалось абсолютно верным, ведь основное назначение таблиц — структурировать цифры, однако метод долгое время был ведущим при разработке веб-дизайна. Но сложность сохранения этих хрупкий структур стала другой проблемой. В это время становится популярным понятие «слоеного» дизайна (slicing designs). Дизайнеры могли создать фантастический макет сайта, а разработчики решали, стоит ли разбивать его на маленькие части и вычислять лучший способ, чтобы заставить этот дизайн работать. С другой стороны, таблицы имели шикарные возможности: выравнивать данные по вертикали, определяться в пикселях или в процентах. Тогда многие программисты разочаровались в front-end разработке.

JavaScript приходит на помощь (1995)

JavaScript JavaScript преодолел ограничения HTML. Понадобилось всплывающее окно или хотите динамично поменять порядок чего-то? Это сделает JavaScript. Но проблемы остались, ведь JavaScript — вершина структуры, которая обеспечивает работу сайта, и должен загружаться отдельно. Ленивые разработчики используют JS, как простейший патч, хотя это очень мощный элемент в умелых руках. Сегодня JavaScript не используется там, где можно задействовать CSS. Но по-прежнему остается важным инструментом в front-end (jQuery) и back-end (Node. js) разработке.

Золотой век свободы — Flash (1996)

Flash in web design Снять ограничения существующего веб-дизайна была призвана новая технология, манившая небывалой свободой. Теперь дизайнер мог проектировать любые формы, макеты, анимацию, взаимодействия, задействовать какие угодно шрифты в одном-единственном инструменте — Flash. Конечный результат отправлялся в браузер в одном файле. Если пользователь установил последнюю версию flash-плагина и был достаточно терпелив, чтобы немного подождать при загрузке, то технология работала просто чудесно. То был золотой век splash-страниц, анимации и различных эффектов. Увы, этот дизайн был доступен не всем, был не особо удобным для поиска, а также требовал много вычислительной мощности. После отказа Apple использовать его в своем первом iPhone (2007), эпоха Flash закончилась. По крайней мере в веб-дизайне.

CSS (1998)

CSS Одновременно с Flash появился более совершенный, с технической точки зрения, подход к созданию дизайна — Cascading Style Sheets (CSS). Основная идея здесь — разделить контент и его визуальную составляющую. Таким образом, внешний вид и формат задаются в CSS, а контент — в HTML. Основной проблемой первой версии CSS стало отображение верстки в разных браузерах. Прошло немало времени, пока браузеры стали поддерживать этот язык, однако баги находились часто. Кроме того, в те времена кошмар разработчика заключался в том, что один браузер был оснащен новейшими возможностями, а другой нет. Если быть точным, CSS — это больше декларативный язык, чем язык кодирования. Так стоит ли дизайнерам учиться кодировать? Может быть. А нужно ли им понимать, как работает CSS? Без сомнения!

Революция мобильных устройств — сетки и структуры (2007)

Grids and frameworks Выходить в интернет через мобильный телефон — вот что стало настоящим вызовом. Но, помимо разных макетов для девайсов, появилась серьезная проблема с контентом: стоит подгонять его под маленький экран или сделать возможность пролистывать вниз? Куда на таком экране вставить мигающую рекламу? И скорость загрузки стала острым вопросом, ведь чем медленнее загружается страница, тем быстрее интернет сжигает ваши деньги. В начале успешных изменений придумали колонки. После нескольких испытаний победила система сеток 960, и восторжествовало деление на 12 колонок, которое дизайнеры использовали постоянно. Следующим шагом стандартизировали основные элементы, кнопки, формы, навигацию. Таким образом создали целую библиотеку визуальных форм, содержащих код. Безусловными лидерами стали Bootstrap и Foundation, продемонстрировав, что грань между сайтом и приложением стирается. Минусом стала однообразность дизайна, но дизайнеры не могли это изменить, не разбираясь в коде.

Адaптивный вeб-дизайн (2010)

Responsive web design Гений по имени Итан Маркотт изменил существующее положение дел, придумав адаптивный веб-дизайн: используем одинаковый контент на разных дизайнерских макетах. Технически используются те же HTML и CSS, поэтому прорыв скорее концептуальный. Это порождает определенные недоразумения. Дизайнер считает адаптивным дизайном создание нескольких копий макета. Клиент понимает, что может использовать его на телефоне. Разработчик представляет способ отображения картинок, скорость загрузки страницы, семантику, мобильный/рабочий стол и тому подобное. Но главный плюс не вызывает споров, ведь сайт с адаптивным дизайном работает на любых устройствах.

Временa flat-дизaйна (2012)

Flat design Создание множества макетов отнимает достаточное количество времени, к счастью мы отказались от заигрываний с теневыми эффектами и упростили работу, вернувшись к первоисточнику, контенту. Качественные фотографии, читабельные шрифты, стильные иллюстрации и содержательные макеты — так мы создаем сайты сегодня. Flat-дизайн, плоский дизайн с более простыми визуальными эффектами, стал тенденцией времени. Основное внимание уделяется созданию копий, иерархии файлов и в целом контенту. Иконки заменили блестящие кнопки, что позволяет использовать векторные изображения и иконки шрифтов. Шрифты обеспечивают великолепное оформление. Забавно, что веб-дизайн с самого начала был близок к этому. Однако молодость предназначена для ошибок и поисков.

Блестящее будущее (2014)

The future of the web design Святой Грааль веб-дизайна — визуализация и работа в любом браузере. Вообразите, дизайнер просто двигает картинки по экрану и складывается чистый код! Я не имею в виду волшебное преображение, а говорю о полном контроле и гибкости. Только представьте, что разработчик больше не заботится о совместимости с браузером, но концентрируется только на важных проблемах. Существуют несколько концепций, разрабатываемых в данном направлении. Новые элементы CSS, например, vh, vw (viewport height and width) позволяют добиться большей гибкости для расположения модулей. Это решает проблему, которая мучает многих дизайнеров, — почему в CSS так трудно расположить что-то вертикально по центру? Еще один концепт CSS, Flеxbоx, позволяет проектировать и видоизменять макеты благодаря одному свойству вместо длинного кода. Наконец, всё большее внимание уделяется веб-компонентам — набору связанных элементов, например, галерея, форма регистрации и т. д. Работа идет быстрее, ведь такие компоненты становятся строительными блоками, которые можно использовать снова и обновлять по отдельности.

А что вы думаете о будущем веб-дизайна?

P. S. Годы в скобках лишь определяют начало этапа. Каждый этап разворачивался длительное время. Поэтому, не значит, что с 1998 по 2007 годы ничего не происходило. Именно тогда и свершилась эволюция.

Здесь A brief history of web design for designers можно почитать оригинал статьи.

Похожие посты

Мы подобрали посты, которые могут быть вам интересны

Комментарии

Тут без вас никак. Поделитесь с нами вашими мыслями

Горячие вакансии