Назад на softculture.cc

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

HistoryOfWebDesign-2 (1)

По случаю перезапуска курса DigitalDesign.Lab попросили преподавателя курса Елену Сахарову подготовить вишлист из лучших статей на тему UI, UX, визуального и веб-дизайна. Первая ласточка – статья Сандижса Рулукса из Froont  c краткой историей отношений веб-дизайна и кодинга.

A brief history of web design for designers
Автор: Sandijs Ruluks
Оригинал статьи: http://blog.froont.com/brief-history-of-web-design-for-designers/

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

Одна вещь, которая все время заставляла меня удивляться – это почему существует четкое разделение между дизайном и кодингом? Почему сложные вещи становятся более простыми, а простые – более сложными?
Так что, вместо того, чтобы спорить, должны ли дизайнеры изучать код или разработчики должны изучать дизайн, давайте найдем общее в том, как развивался дизайн для веба и как преодолеть разрыв между кодом и дизайном.

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

01-Tab_keys-1

Sandijs Ruluks

Самое начало веб-дизайна было достаточно темным, поскольку экраны были в прямом смысле черными и в них находилось лишь несколько монохромных пикселей. Дизайн создавался при помощи символов и табуляции (клавиша Tab). Так что давайте быстро перемотаем до тех времен, когда Дизайн Пользовательского Интерфейса был главным способом поиска в вебе – к эре Дикого Запада таблиц.

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

02-Tables-1

Sandijs Ruluks

Рождение браузеров, которые могут отображать изображения стало первым шагом к тому веб-дизайну, который мы знаем. Ближайшей доступной опцией структурирования информации была концепция таблиц, уже существовавшая в HTML. Так что помещение таблиц внутрь таблиц, выдумывание хитроумных способов сочетать статичные ячейки с подвижными, было делом, начатым книгой Дэвида Сигела «Создание потрясающих сайтов». Хотя это и не казалось совсем правильным, поскольку основное предназначение таблицы – структурировать числа, на протяжении некоторого времени  это оставалось достаточно распространенным методом дизайна. Другой проблемой была сложность в поддержании таких неустойчивых структур. Это также было временем, когда стал популярен термин «slicing designs». Дизайнеры создавали модный дизайн, но разбить его на слайсы и придумать лучший способ заставить этот дизайн работать – все это оставалось на совести разработчиков. С другой стороны, таблицы имели несколько удивительных свойств, таких как возможность выравнивания по вертикали, определяться в пикселях или процентах. Главным преимуществом было то, что это было ближе всего к сетке, которую ты тогда мог получить. Это было время, когда многие разработчики предпочитали не любить фронт-енд программирование.

JavaScript спешит на помощь (1995)

03-Javascript-1

Sandijs Ruluks

JavaScript был ответом на ограничения HTML. К примеру, вам нужно всплывающее окно или вы хотите динамически менять порядок чего-либо. Ответ – JavaScript. Однако, основной проблемой было то, что JavaScript наслаивается поверх структуры, которая заставляет веб работать и должен загружаться отдельно. Очень часто он используется как простой patch для ленивого разработчика, хотя он доcтаточно мощный, если его использовать мудро. Сейчас мы избегаем (использовать) JavaScript, если тот же самый компонент можно разработать, используя CSS. Хотя JavaScript сам по себе по-прежнему остается мощным инструментом как во фронт-енде (JQuery), так и в бэк-енде (Node.js).

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

04-Flash-1

Sandijs Ruluks

Чтобы разрушить ограничения, существующие в веб-дизайне, родилась технология, обещающая невиданную до тех пор свободу. Дизайнер мог создавать любые формы, лейауты, анимации, взаимодействия; использовать любой шрифт – и все это в одном инструменте – Flash. Конечный результат паковался в один файл и отправлялся браузеру для отображения. Что, в случае, если пользователь имел последний flash-плагин и немного свободного времени подождать, пока он загрузится, работало, как по волшебству. Это была золотая эра для splash-страниц, интро-анимаций и интерактивных эффектов любого сорта. К сожалению, он был не очень search-friendly и конечно же использовал слишком много производительной мощности. Когда Apple решили отказаться от него на их первом айфоне (2007), Flash начал угасать. По крайней мере, для веб-дизайна.

CSS (1998)

05-CSS-2

Sandijs Ruluks

Примерно в одно время с Flash, родился лучший подход к структурированию дизайна с технической точки зрения – Cascading Style Sheets (CSS). Основная концепция была в том, чтобы отделять контент от его презентации. Так что вид и форматирование оформлялись в CSS, а содержание – в HTML. Первые версии CSS были далеки от гибких, но основная проблема была в adoption rate браузеров. Прошло несколько лет, прежде чем браузеры начали полностью поддерживать его и часто он был достаточно нестабильным.  Это также было время, когда один браузер мог иметь новейший компонент, в то время как у других его не было, что было настоящим кошмаром для разработчика. Если быть быть точным, CSS – не язык программирования, это скорее декларативный язык. Должны ли веб-дизайнеры знать, как кодить? Возможно. Должны ли они понимать, как CSS работает? Безусловно!

Восстание мобильных – сетки и фреймфорки (2007)

06-Grids-1

Sandijs Ruluks

Блуждание в интернете на мобильных устройствах было само по себе вызовом. Помимо разных лейаутов для разных устройств, оно выявило проблему паритетности контента – должен ли дизайн выглядеть так же на маленьком экране или же он должен быть усечен? Как расположить все классные мигающие рекламы на этом маленьком экране? Скорость тоже была проблемой, поскольку загрузка большого количества контента сжигала ваш интернет-трафик очень быстро. Первым шагом к улучшениям стала идея многоколонных сеток. После нескольких итераций, победила система сеток 960 и деление на 12 колонок стало чем-то, что дизайнеры использовали ежедневно. Следующим шагом было привести к единому стандарту часто используемые элементы, такие как формы, навигация, кнопки и легко упаковать их для многоразового использования. В основном – создание библиотеки визуальных элементов, которая содержит код. Победители здесь – Bootstrap и Foundation, что также связано с тем фактом, что грань между веб-сайтом и приложением стирается. Обратной стороной этого было то, что дизайн часто выглядел одинаково и дизайнеры по-прежнему не имели к библиотекам доступа, если не знали, как работает код.

Responsive веб-дизайн (2010)

07-Responsive-3

Sandijs Ruluks

Гениальный парень по имени Этан Маркотт решил бросить вызов существующему подходу, предложив использовать тот же контент, но отличный лейаут для дизайна и придумал термин «Responsive web design». Технически мы все еще используем HTML и CSS, так что это скорее концептуальное усовершенствование. Однако здесь много заблуждений. Для дизайнера responsive означает создание множества макетов. Для клиента это означает, что все работает на телефоне. Для разработчика это способ, как подаются изображения, скорость загрузки, семантика, mobile-desktop first и многое другое. Главным преимуществом здесь является content parity, что означает, что один тот же сайт работает везде. Надеюсь, хоть на этом мы сошлись, как минимум.

Времена Flat (2010)

08-Flat-2

Sandijs Ruluks

Создание большего количества макетов требует большего времени, поэтому, к счастью, мы решили оптимизировать процесс, отбросив модные эффекты с «тенюшками» и вернуться назад к истокам дизайна, отдавая приоритет контенту. Прекрасные фотографии, типографика, точные иллюстрации и продуманные макеты – это то, как мы создаем дизайн сейчас. Упрощение визуальных элементов или так называемый Flat design также является частью процесса. Основный плюс здесь – это то, что гораздо больше внимания может быть уделено образцу, структуре сообщения и содержанию в общем. Блестящие кнопки вытеснены иконками, что позволяет нам использовать векторные изображения и шрифты с иконками. Веб-шрифты являются источниками прекрасной типографики. Самое смешное, что веб был очень близок к такой форме с самого начала. Но, что уж, на то и даны молодые годы.

Светлое будущее (2014)

09-Future-1

Sandijs Ruluks

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

Технически, существует несколько новых концептов, которые лишь подтверждают движение в этом направлении. Новые блоки в CSS, такие как vh, vw (viewport height и width) дают гораздо большую гибкость в расположении элементов. Это также решит проблему, которая занимала многих дизайнеров – почему отцентровать что-то по-вертикали в CSS – это такая боль? Flexbox – еще один классный концепт, являющийся частью CSS. Он позволяет создавать лейауты и модифицировать их одним свойством вместо написания кучи кода. И, наконец, веб-компоненты — еще больший шаг. Это набор элементов, связанных вместе, т.е. галерея, форма записи и так далее. Это представляет более легкий workflow, где элементы становятся структурными элементами, которые могут быть использованы заново и обновлены по отдельности.

А каковы ваши мысли по поводу будущего веба?

Замечание: года в скобках означают начало. Все развивалось в разном темпе с течением времени. Поскольку 1998—2007 не были совершенно пустыми, именно там эволюция и свершилась.

FacebookVKTelegram
SEE YOU!