Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Стокс Элиот Джей

Веру Ли

Эндрю Рэйчел

Фадеев Дмитрий

Балкан Арэл

Хейлманн Кристиан

Боуг Пол

Эдвардс Марк

Уолтер Аарон

Шварц Бен

Кларк Энди

Хей Стивен

Стори Дэвид

Стать невероятно гибким: создание атомов и элементов

Автор: Энди Кларк

 

 

Есть три слова, которые, я думаю, обобщают работу в Интернете для многих из нас. Вот они:

• Отзывчивый

• Сеть

• Дизайн

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

Тем не менее отзывчивый дизайн это не просто то, как дизайнеры и разработчики используют такие технологии, как медиазапросы CSS3, и это не то, как мы решаем проблемы с отображением картинок разных размеров или как справляемся с табличными данными. Это просто технические проблемы; стать отзывчивым – это не просто преодоление технических проблем. Это не означает, что надо изучать языки и то, как их лучше использовать. Хотел бы я, чтобы все было просто. Но, к сожалению, это не так. Отзывчивый дизайн очень и очень сложный процесс.

Нравится вам это или нет, отзывчивый веб-дизайн ставит под сомнение все, что мы знаем о Сети у всех, кто включается в процесс. Вот почему в этом разделе мы хотим продемонстрировать, что старые способы разработки больше неуместны, а я хочу представить новый путь создания отзывчивого веб-дизайна, который работает на меня и моих клиентов.

 

Ядро ваших действий

Не думаю, что я одинок в своем мнении о том, что отзывчивый веб-дизайн представляет собой фундаментальное изменение того, что для нас значит разработка для Интернета. Энди Хьюм пишет:

«Для меня отзывчивый дизайн – это еще один пример того, как веб-дизайн возвращается на путь Дао. Вот почему он не является дополнением или свойством. Он является ядром того, что вы делаете».

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

«Все, что неподвижно и нечувствительно – это уже не веб-дизайн, это нечто другое. Если вы больше не улавливаете прирожденную изменчивость веба, вы не веб-дизайнер, а некто другой. Веб-дизайн – это отзывчивый дизайн. Отзывчивый веб-дизайн – это самый правильный веб-дизайн».

Я не преувеличиваю. Я настаиваю на этом, даже если некоторые думают, что я немного помешался на этом. Я считаю, что принимать во внимание реакцию дизайна при отображении на миллиардах устройствах разных размеров, форм и возможностей, это один из самых важных аспектов работы веб-дизайнера на сегодняшний день.

 

Как, когда и зачем?

Отзывчивый веб-дизайн изменяет то, что мы делаем для Сети, поэтому это также означает, что мы заставляем его изменяться. Это касается не только дизайнеров и разработчиков. Отзывчивый веб-дизайн затрагивает каждого, кто придумывает, разрабатывает, создает, оплачивает или пользуется Сетью.

• Контентный стратег? Вы.

• Интерактивный, графический дизайнер или разработчик пользовательского опыта? Да.

• Разработчик пользовательского интерфейса или серверный программист? Тоже вы.

• Босс, клиент и заказчик? Держу пари, вы.

• Пользователь? Тоже вы, в хорошем смысле этого слова.

Отзывчивый веб-дизайн задает больше вопросов, чем дает ответов. Он влияет на рабочие взаимоотношения и взаимодействие между всеми, кто участвует в каждом процессе, – от специалистов по работе с контентом, дизайнеров и разработчиков всех мастей, до наших боссов и заказчиков, которые, в конце концов, утверждают нашу работу и платят за нее.

Отсюда возникают проблемные вопросы: как, когда и зачем.

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

 

Просто. На самом деле просто

В 1998 году, когда я открывал нашу крошечную дизайн-студию, самыми серьезными техническими вопросами, с которыми я столкнулся, были различия в том, как отображается мой дизайн в браузерах Internet Explorer 4 и Netscape 4.

По правде говоря, даже если мне приходилось работать с незрелыми технологиями и ужасными браузерами, все было тогда достаточно просто. У всех.

Действительно просто.

Посмотрите, как я работал. Спорим, что вы делали то же самое? А может, и еще делаете?

1. Я делал дизайн в Adobe Photoshop или Macromedia Fireworks – дизайн, который предназначался для всеобщего обозрения. Без разницы, какой бы браузер использовался или какого размера был бы экран.

2. Потом я показывал этот дизайн – в виде композиции или макета (я называю это статическими изображениями, потому что они неоживленные и не интерактивные) – своим клиентам.

3. После этого я делал изменения, основанные на обратной связи. Я переделывал и экспортировал новые статические изображения. Когда они утверждались по второму, третьему или четвертому кругу, я нарезал дизайн для верстки на HTML и CSS, публиковал его, забегал домой на чай и включал телесериал Animal Magic.

Оглядываясь назад, я понимаю, что создать простой дизайн было несложно, потому что для нас и наших боссов и заказчиков Интернет был доступен только на настольных компьютерах. Но сегодня мы не можем делать только один дизайн. Это уже не так легко. Если раньше у нас было два важных браузера на компьютере, то сейчас у нас их сотни на всех видах устройств, которые люди используют для доступа в Интернет.

 

Превратности быстрой смены положения дел

Даже на рубеже тысячелетий, мы должны понимать, что Интернет фундаментально отличается от других медиа, и что часть его уникальности в том, что мы не можем достаточно контролировать, как люди просматривают и взаимодействуют с контентом и сервисами, которые мы предоставляем. Правда в том, что мы всегда должны были разрабатывать дизайн для гибкой природы Интернета.

На самом деле некоторые люди это понимали, и они пытались предостеречь нас от глупых решений. В 2000 году Джон Олсоп написал статью, которую многие считают самой важной о веб-дизайне, которая когда-либо была написана: «Дао веб-дизайна». В ней Джон писал:

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

Хороший совет.

Приняли ли мы его?

Нет. Глупцы.

Что мы делали?

Мы дурачили себя тем, что думали, будто у нас все под контролем. Мы пытались влиять на те же уровни контроля, что и для печати. Мы совершенно игнорировали проблему гибкости Интернета и старались сделать его неподвижным. Вот как.

 

Разработка в сжатых рамках

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

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

Те первые прямоугольники были размерами: 640 пикселей шириной на 480 пикселей высотой, потому что таким было разрешение большинства мониторов в то время. Разработчики привыкли все контролировать, поэтомуделали безумные вещи наподобие написания скриптов для фиксирования размеров окон браузера, чтобы точно вписаться в размер и размещали контент, используя пять или более фреймов. Этот 640 пиксельный прямоугольник был тесным. Если вы помните, заказчики не хотели, чтобы люди прокручивали сайт для просмотра (вообще), и все, что было на нем, должно было вмещаться в первый экран без прокрутки. 640-пиксельные экраны вскоре уступили место 800 (на 600) пиксельным, поэтому дизайнеры стали рисовать большие прямоугольники. Ощущение широко открытого пространства было опьяняющим. Но продлилось оно недолго, до того момента когда эти большие прямоугольники стали тесными, и мы начали рассматривать размеры от 800 до 1024 (на768) пикселей.

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

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

Я брал интервью у Джейсона Санта Марии о его редизайне сайта A List Apart, который он создал для людей, делающих сайты. Мне хотелось знать, почему Джейсон выбрал для сайта фиксированную ширину 1240 пикселей вместо того, чтобы внедрить тянущуюся разметку, основанную на процентном соотношении. Джейсон ответил мне:

«ALA всегда старался быть одним из тех сайтов, которые идут впереди. Мы уже не поддерживаем размеры 800 × 600 и 640 × 480. А вы? Людей бесило, когда сайты переставали поддерживать 640 × 480… теперь никто не говорит ни слова. Времена меняются. Поверьте мне, вы увидите больше сайтов, которые расслабились».

Люди возмущались этим новым расширенным сайтом List Apart.

Но не серьезно.

Джереми Кейт поддержал мысли Джона Хикса о раздельной дихотомии «между чувствительностью дизайнеров и предпочтениями пользователя». Джереми сказал:

«Спорить о 640, 800 и 1200 пикселях – это все равно, что спорить о том, что вкуснее – «Пепси» или «Кока-Кола», когда на самом деле стакан простой воды был бы намного более освежающим. Игра в цифры – отвлекающий маневр. Большой отвлекающий маневр постоянной ширины».

Годами мы дурачили сами себя, думали, что если 640, 800, 1024 и выше – это самые распространенные разрешения, то мы можем разрабатывать дизайн для этих постоянных размеров. Мы отчаянно цеплялись за дизайн с постоянной шириной, потому что в реальности Интернет – эта изменчивая среда без общепринятого размера холста, без границ – был слишком устрашающим.

 

Интернет не знает границ

Так как сегодня мы не можем предвидеть размер или формат, в котором будет просматриваться наш контент, Интернет фактически не имеет границ. Так что же делать дизайнерам?

Когда 640 пикселей превращались в 800, а затем в 1024, мы использовали все большие холсты с постоянными размерами как отправные точки наших разработок. Мы рисовали все большие и большие прямоугольники и заполняли их нашим контентом от границ холста внутрь.

Когда в 2007 году Стив Джобс (благослови Господь его душу) вытащил из кармана свой первый iPhone с браузером Safari, в одном устройстве было две ориентации. «Жесты» прокрутки, уменьшения и увеличения также подкрепили тот факт, что границы не имеют значения. С того самого дня благодаря этому одному устройству Интернет изменился навсегда. Так что же сделали дизайнеры?

Мы нарисовали маленький прямоугольник. Шириной в 320 пикселей и высотой в 480 пикселей.

После того как Стив присел на диван и продемонстрировал первый iPad, мы сели и создали наш холсты размерами 1024 на 768 пикселей. Мы придерживались постоянных размеров холста, потому что это было то, что мы знали и то, чего ожидали наши боссы и заказчики.

Вы слышали, как определяется невменяемость? Делать каждый раз одно то же, но ожидать при этом разных результатов. Вот так мы работали до сегодняшнего дня. Расширяли прямоугольники, сужали, потом снова расширяли. Все то время, пока они изменялись, наши размышления оставались одними и теми же.

 

Нож в перестрелке

Нам не следует слишком жестко относиться к себе. Программные средства, которые мы холили и лелеяли, сделали все что могли, чтобы сохранить жизнь постоянным размерам. Подумайте об этом. Что мы делаем прежде всего, когда начинаем разрабатывать новый дизайн в Fireworks и Photoshop?

Жмем Файл → Новый

или клавиши Ctrl+N.

Потом мы задаем документу постоянный размер холста.

Спросите себя, в чем причина того, что многие сайты имеют постоянную ширину и центрированы на экране. Не результат ли это видения наших клиентов, подписания ими фиксированных изображений?

Хотя поставщики ПО наподобие Adobe встраивают средства веб-разработки в свою продукцию, в них нет ничего, что может помочь нам создать отзывчивый дизайн. Они даже не могут помочь нам продемонстрировать состояние по наведению или другие события, которые могут показать как гибкий макет влияет на изменение положения текста и других элементов. И снова Джейсон Санта Мария:

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

Наше текущее ПО, в частности Photoshop и Fireworks, просто неспособны к обработке требований адаптивного дизайна. Они как нож в перестрелке.

 

Этот неудобный факт

Долгое время самая трудная часть разработки сайта не имела отношения к тому факту, что люди, использовали наш дизайн на экранах разных размеров. Все это потому, что большую часть времени мы не занимались этим.

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

Когда iPhone заставил нас осознать, что наша работа не всегда будет «[наилучшим образом] просматриваться на современном браузере в 1024 пикселей или больше», нашей первой реакцией было создать специфический дизайн страницы для iPhone в дополнение к тому, что есть для настольного компьютера. Это тут же увеличило время на разработку, обратную связь, корректировки и утверждение.

Чем больше появлялось смартфонов, электронных читалок и планшетов, тем прочнее у боссов и заказчиков входило в привычку просить специфические версии сайта или приложения для них.

• iPhone

• Android

• iPad

• Kindle Fire

Но разработка отдельных версий могла означать увеличение работы в три, четыре, а то и пять раз. В три, четыре, пять раз увеличивался период утверждения. Встречи назначались три, четыре, пять раз!

Сегодня иметь дело с таким большим количеством характеристик, возможностей и размеров, создавать множество фиксированных макетов неуместно, неэкономично и непрактично, и не лучшее применение времени и талантов дизайнера. Также мы ничего не выгадываем технически, создавая несколько фиксированных макетов, когда мы хотим преобразовать эти изображения в код.

Как говорит Стефани Ригер в своей статье «„Проблема“ с Андроидом» («The ‘Trouble’ With Android»):

«По факту разработка под фиксированный экраный размер никогда не была хорошей идеей. […] слишком много вариантов, даже среди «популярных» устройств».

Так, вместо того чтобы думать об индивидуальном дизайне для отдельных устройств, мы должны подумать, как советует Итан Маркот, о простом дизайне, имеющем много аспектов, которые находятся в непрерывном и гибком ряду:

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

Я люблю такой метод объяснения дизайна в отзывчивом контексте – много аспектов в одном опыте использования, потому что он хорошо отражает, что такое «смена положения дел», как описывал в своем «Дао» Джон Элсоп.

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

Отсюда возникают вопросы. Если бы мы не могли делать отдельные макеты с неизменяемой шириной, что бы мы делали? Как бы выстроили процесс? Как бы создавали дизайн для Интернета без границ?

 

«Эй, а я вот что сделал!»

 

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

 

Для дизайнеров

Photoshop и Fireworks – невероятные инструменты для творческих экспериментов и наши помощники в решении проблем и определении визуального направления проекта. Иногда даже сам процесс использования Photoshop и Fireworks помогает нам, порой случайно, достичь результата, которого трудно добиться другими средствами. В конце концов, результат – это нечто, на что мы можем ориентироваться и сказать нашим боссам и заказчикам: «Эй, а я вот что сделал!»

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

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

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

 

Для разработчиков

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

Но на сегодня разработчики должны согласиться с тем, что когда они получают статический макет, он представляет собой всего лишь руководство о том, как может выглядеть сайт. Разработчики должны научиться принимать решения по верстке макета, включая адаптацию к различным размерам экрана и устройств.

 

Для заказчиков

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

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

 

Дизайн – это не всегда разметка

 

Вам когда-нибудь говорил клиент, что ему не нравится дизайн? Если это случалось, вы копались немного глубже и выясняли, что это за детали, против которых они возражали. Спорю, что это была не гарнитура или способ обработки, который вы выбрали. Они прошли незамеченными. Дело не в цвете, который вы используете. И не в вашем «ювелирном» вычерчивании линий, рамок и затенений. Возможно, это была фраза: «Колонка должна быть слева, а не справа».

Короче говоря, ваш заказчик прокомментировал разметку, а критику навел на дизайн. Для боссов и заказчиков привычно включать разметку в тот же диалог, как и другие аспекты дизайна: типографика, цвет и текстура. Дизайнеры тоже так делают, потому что годами мы создавали и демонстрировали макеты с неизменяемой шириной, которые включали все эти вещи.

С этого момента нам надо понять, что дизайн и разметка должны быть разделены. Дизайн компонентов и их расположение на сетке горизонтально и вертикально – это два разных вопроса. Несмотря на то что расположение компонентов в разметке вне сомнения будет разным в зависимости от размеров экрана, дизайн тех самых компонентов почти точно, будет за ее пределами.

 

Сначала дизайн компонентов

Подумайте на мгновение о компонентах, которые вы разместили почти в каждом дизайне. Ваш список почти всегда будет включать следующие пункты:

• прямоугольники (блоки);

• таблицы данных и другие виды информационных панелей;

• изображения (контент и иконографика);

• элементы интерфейса (карусели и галереи изображений и пр.);

• навигация (несколько уровней);

• шрифт.

Обратите внимание: это важная часть! Дизайн в отсутствии разметки становится стилизацией этих компонентов. Как они выглядят сейчас – это то, что мы выражаем через дизайн. Более точно: впечатления и ощущения от этих компонентов – это то, над чем дизайнеры могут и должны работать в первую очередь, задолго до того как у них возникнет мысль о расположении. Мне нравится размышлять о подходе, каким я разрабатываю компоненты страницы сначала на атомарном, самом крошечном уровне.

Теперь я знаю, что идея разработки компонентов, подобная этой, вне контекста и без разметки может звучать странно, особенно если вы привыкли создавать страницы традиционным способом. Но, по правде говоря, мы долгое время рассматривали идеи, подобные этой.

 

Мудборды

Мудборды (mood boards), или карты настроений, долгое время оставались невероятным методом для собрания вдохновляющего материала. Хранили ли мы эту коллекцию на наших компьютерах в приложениях наподобие Evernote, использовали ли онлайн-сервисы типа Pinterest, или просто крепили их на паспарту или пробковую доску, все это комбинация различных элементов, выражающих настроение. Наши мудборды могут иметь современное, безвкусное или традиционное восприятие, но как бы мы их ни называли – образом, настроением или индивидуальностью, – необходимо помнить о важном: мы описываем стиль. Конечно, мы не должны начинать процесс разработки с бумаги, ножниц и клея. Мы можем, если захотим, и не пачкать наши руки.

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

Adobe Photoshop и Fireworks могут оказаться и не лучшими средствами для веб-разработки, но все же будут ценными для создания любого вида компонентов. Чтобы помочь вам избавиться от мыслей о разметке на данном этапе, попробуйте начать с холстов Photoshop и Fireworks, размеры которых составляют 10,000 на 10,000 пикселей и больше.

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

Трент Уолтон писал:

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

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

Последние несколько месяцев я использовал схемы дизайна для демонстрации моим клиентам. Я счел это чрезвычайно эффективным, несмотря на то что требуется несколько минут, чтобы объяснить суть клиенту, который до этого ничего не знал о таком методе работы раньше. Мы можем спросить у любого, кто заинтересован: «Это то настроение сайта, к которому мы стремились?»

Схемы дизайна – это потрясающие средства для прояснения желаний клиента на раннем этапе процесса разработки. Вместо того чтобы поощрять смутные высказывания типа «Мне не нравится дизайн», этот метод помогает нам быть определенными, когда мы обсуждаем дизайн.

• Насколько чистым или минималистичным должен быть дизайн?

• Как мы будем использовать цвет для передачи действий и смысла?

• Сколько будет шагов в тоне и контрасте?

• Как будут использоваться гарнитуры для различия типов контента?

• Сколько уровней будет в типографической иерархии?

Проектирование компонентов таким способом может помочь нам найти ответы на эти вопросы и предоставить всем заинтересованным лицам альтернативы и возможности изменить свое мнение до вложения значительных инвестиций в дизайн или разработку.

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

Одна схема вам известна:

Планирование → Утверждение → Дизайн → Утверждение → Разработка

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

 

Мозайка стилей

 

Абстракция дизайна во впечатлениях и ощущениях от элементов – это нечто такое, о чем думает дизайнер Саманта Уоррен. Она называет эту технику мозайкой стилей.

Саманта поясняет:

«Мозаика стилей – это визуальный трей из элементов цветовой палитры, текстурных узоров и цветовых вариантов, которые поддерживают цели клиентов. У меня есть шаблон в Photoshop со специально замаскированными участками, где […] я представляю образцы стилей клавиш, решения навигации и типографических возможностей».

Саманта считает эту технику эффективным средством коммуникации, так же как и для дизайна на уровне компонентов.

 

BOOTSTRAP

Для других, элементы страницы могут быть компоновочными блоками для будущего дизайна. Возьмем Марка Отто и Джейкоба Торнтона – тандем дизайнеров-разработчиков, которые работают в Twitter. Эти двое стоят за Bootstrap. Интернет может быть безграничным, но контент у него есть всегда. Мы выражаем этот контент через соответствующие HTML-элементы:

• заголовки и их уровни от 1 до 6;

• параграфы, цитаты и элементы на уровне текста;

• списки: определения, нумерованный и ненумерованные;

• медиа: диаграммы, заголовки и изображения;

• таблицы;

• формы: кнопки, элементы и метки.

Так же как у Twitter есть своя сетка, так и Bootstrap включает в себя дизайн по умолчанию для «типографики, форм, клавиш, меток, сеток, навигации и остального». Bootstrap интересен по ряду причин. Не только потому, что это мощный шаблон для разработки, но и потому что в нем есть полный список HTML-элементов, вместе с несколькими стилями по умолчанию, что является идеальной отправной точкой для нового дизайна.

Рисунок 11.1. Сначала вы должны узнать, почему такие средства разработчика, как Bootstrap важны для отзывчивого рабочего процесса. Возможно, вы удивитесь, когда узнаете, что Bootstrap – это великолепная исходная точка для разработки элементов страницы

 

Вы на Дрибле?

Dribbble – это сайт, где дизайнеры обмениваются маленькими скриншотами (максимум 400 на 300 пикселей) дизайнов, над которыми они работают.

Рисунок 11.2. Dribble показывает элементы в нейтральном окружении

Совершите путешествие по страницам Dribbble, и вы найдете много примеров дизайна элементов и деталей, над которыми потеют дизайнеры. Вы найдете дизайн навигации и решения для встраивания изображений. Если формы – это ваше, то вы найдете стили для каждого элемента формы, плюс стили клавиш для любого состояния. О типографике здесь тоже не забыли. Для вас здесь сколько угодно примеров гарнитур и решений.

Шоты сайта Dribbble – это прекрасные примеры разработанных элементов без разметки. Они показывают, как мы можем разработать дизайн и потом продемонстрировать нашим боссам и заказчикам направление дизайна в формате, который не путает стиль с расположением.

 

Руководства по стилю

Когда вы работаете над проектом, в котором участвует группа людей, подробное и хорошо написанное руководство по стилю может стать жизненно необходимым для поддержки целостности дизайна. При организации пользуйтесь руководством по стилю для разных целей – издатели используют его для орфографии и правил пунктуации. А специалисты по печати и рекламе используют их для задания стиля в письменных публикациях. Лучшие руководства по стилю четко устанавливает стиль сайта.

Рисунок 11.3. Global Experience Language (GEL) – 18 документов полного визуального стиля для веба компании ВВС

Один из лучших приведенных примеров полного комплекта руководств по стилю «пришел» из BBC. Его руководство Global Experience Language (GEL) документирует полный визуальный язык BBC для использования в Интернете, с подробной информацией о типографике, иконографике и дизайне элементов интерфейса, таких как наложение, «аккордеон» и карусель изображений.

E-mail-эксперт MailChimp создал свою собственную библиотеку образцов пользовательского интерфейса, чтобы документировать то, как задается стиль таким элементам, как клавиши, формы, таблицы и табы (вкладки).

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

Вещи, подобные Bootstrap в Twitter, GEL от BBC и библиотеке образцов пользовательского интерфейса от MailChimp, – великолепные примеры дизайна элементов. Они детально описывают, как должен выглядеть каждый элемент, появляющийся в дизайне. И делают они это с небольшой ссылкой на разметку или вовсе без нее.

Самое детальное руководство по стилю не просто документирует дизайн сайта – оно само его дизайн. Поэтому зачем ждать окончания процесса до того, как сделать руководство по стилю? Вместо этого рассматривайте эти руководства как еще один пример дизайна на уровне элементов.

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

Рисунок 11.4. MailChimp создал свою собственную библиотеку образцов пользовательского интерфейса, чтобы документировать, как задается стиль элементам пользовательского интерфейса

 

Сохранение статических макетов, когда это уместно

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

Дизайнеры должны видеть элементы в отношениях друг к другу. Вот почему важны размеры и пропорции, и ничего не остается, как смотреть, как они подходят друг другу. В этой ситуации, может быть, очень полезно сделать статический макет с одной разметкой. Так я делаю почти в каждом проекте.

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

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

Если наш рабочий процесс вынуждает нас придерживаться полностраничных статических макетов, пусть и немного, не означает ли это, что мы должны отказаться от плюсов разработки дизайна от элементов? Нет. Если мы установим правильные ожидания. Особенно наши боссы и клиенты должны понять, что статические макеты, которые мы можем показать им, – просто расширение атмосферы дизайна и всего лишь возможное его выражение.

 

Атмосфера дизайна

 

Если мы должны продолжить использование статических полностраничных макетов, мы все еще можем выделить дизайн элементов и использовать его на экранах разных размеров и устройствах.

Давайте разобьем любой дизайн на его компоненты:

• Типографика: гарнитура, работа с текстом и пустым пространством;

• Цвет: для пробуждение настроения и операций выделения;

• Текстура: декоративные аспекты, в том числе рамки, затенение и фигуры;

• Разметка: горизонтальное и вертикальное расположение элементов по сетке.

Для начала давайте отделим разметку от остальных компонентов. То, что остается, – цвет, текстура и типографика – я люблю называть атмосферой дизайна, потому что я представляю, как будто все побывали на концерте или на бейсбольном матче, атмосферу которого можно назвать накаленной. Держу пари, что все мы были на одной-двух вечеринках с вялой атмосферой.

Вероятно, вам не посчастливилось ощущать борьбу двух людей под действием атмосферы в комнате.

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

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

 

Извлечение атмосферы

 

Давайте рассмотрим подробно небольшую выборку сайтов. Мы разделим их атмосферу и разметку и выявим, чем отличается атмосфера каждого из них.

 

Food Sense

Начнем с Food Sense, великолепно разработанного, отзывчивого сайта, в котором говорится о растительной пище. Говоря о статических элементах, мы могли бы сначала рассмотреть его двухколонную разметку на компьютере. Но мы ищем нечто большее. Нам нужна атмосфера сайта. Мы разбиваем ее на цвет, текстуру и типографику.

Цвет. Внутри атмосферы любого дизайна цвет вызывает настроение и эмоции, но мы также можем использовать цвет в словах для призыва к действию, сообщений и других точек соприкосновения. Food Sense использует нежные оттенки зеленого, черного и белого для связки элементов дизайна.

Рисунок 11.5. Сайт Food Sense

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

Как пример, мы можем описать работу с контурами. Какие они: простые, двойные или пунктирные? С постоянной шириной? Существует ли иерархия ширины разделительной линии между второстепенными и основными разделами? Если да, то, как выстраивается эта иерархия?

Как затеняется контент? Блоки имеют однородный цвет фона? Они градуированные или с паттернами? Углы блоков закругленные или квадратные? Все это относится к текстуре.

Food Sense имеет плоское цветное затенение для блоков и простые серые пунктирные или сплошные линии, которые разделяют область контента.

Его кнопки и активные ссылки с тонкими серыми подчеркиваниями и тенями. Изображения в контенте даны в белой рамке с серой границей. Представленные в виде рисованных набросков, пиктограммы усиливают атмосферу дизайна сайта Food Sense.

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

Элиот Джей Стокс пишет:

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

Дизайнеры сайта Food Sense выбрали строчный шрифт с засечками FF Tisa Web Pro для заголовков, основного текста и навигации. Этот дизайн допускает много свободного пространства, которое создает открытую и легкую атмосферу.

 

Джейми Оливер (Jamie Oliver)

Изучая атмосферу дизайна, наш взгляд быстро настраивается на разницу между ними. С той же тематикой – о еде– сайт Джейми Оливера выглядит иначе, чем сайт Food Sense. Теперь ваша очередь извлекать атмосферу из сайта Джейми Оливера и анализировать цвет, текстуру и типографику.

Рисунок 11.6. Сайт Джейми Оливера

Цвет. Как видно из логотипа, на сайте используется основное сочетание коричневого или голубого. Вы можете выстроить систему цветов для ссылок? Как используется цвет в навигации?

Текстура. Как на сайте используются фоновые иллюстрации для создания блоков контента? Вы заметили паттерны? Например, как заголовки отделены от контента под ними? Какой стиль у кнопок? Их углы закругленные или квадратные? Есть ли последовательность?

Типографика. На сайте используются обычные предустановленные шрифты. Есть ли легко распознаваемая типографическая иерархия заголовков? Существует ли разница между видами основного текста? Если да, то в чем? Сайт воспринимается как открытый или сжатый? Как поля и отступы влияют на чувство пространства внутри дизайна?

 

BBC Food

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

BBC Food использует цвет, чтобы пояснить, какие элементы являются ссылками. У него приглушенная палитра, возможно для того, чтобы сделать акцент на цвете фотографий. Там, где BBC использует иконки из своего комплекта иконок GEL, они плоские и одноцветные – такие же, как фон блоков контекста.

Края блоков сайта BBC остаются квадратными и острыми. Где контент перекрывает изображения, дизайнеры BBC Food используют полупрозрачные черно-белые прямоугольники. Сами изображения по большому счету необработанные и у них нет никаких границ.

Рисунок 11.7. Сайт BBC Food

Сайт BBC использует полужирный текст «для создания сильной иерархии и драматизма на сайте». Шрифт сайта BBC по умолчанию – Arial, хотя, если копнуть глубже, вы наткнетесь на Helvetica Neue для Mac. Эти шрифты используются для заголовков и основного текста.

Это упражнение, которое будет работать на всех сайтах, и особенно в группе дизайнеров и разработчиков. Оно стало ключевым моментом моих мастер-классов по отзывчивому веб-дизайну и доказало свою высокую эффективность.

 

Стать невероятно гибким

Учимся ли мы сначала разрабатывать компоненты или извлекать атмосферу из статических макетов, нам больше необязательно разделять макеты Photoshop или Fireworks и разметку для каждой страницы, не говоря уже о каждом устройстве. На самом деле я слишком забегу вперед и скажу, что дни разработки множественных статических макетов сочтены. Мы, наши боссы и заказчики понимаем свойственные им неточность и неэффективность. Это значит, нравится нам или нет, мы должны находить новые пути к отзывчивому дизайну.

Знаю по своему опыту за последний год, углубляясь в отзывчивый дизайн, что найти новые пути разработки и рассказать про них не так-то просто. Хотя я продвигаю идею того, что сайты не должны выглядеть одинаково на каждом браузере годами, так или иначе было сложно отпустить контроль над разметкой. Я понял, что моя работа как дизайнера изменилась коренным образом. Я больше не мог ожидать привычного уровня контроля над разметкой на экранах разных размеров.

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

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

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

Работая вместе, мы можем сделать Интернет отзывчивым, каким он всегда и задумывался.

 

Об авторе

* * *

Энди Кларк получил много прозвищ, с тех пор как 10 лет назад начал заниматься веб-дизайном. Его самолюбие тешат такие как «вестник CSS», «пророк индустрии» и «вдохновляющий». Но больше всего он гордится тем, как однажды назвал его Джеффри Зельдман («крестный отец» веб-стандартов). Он назвал его «трижды талантливым ублюдком».

Энди управляет Stuff and Nonsense (), маленькой дизайн-студией, где он работает с такими клиентами, как ISO, STV и правительством Великобритании. Он выступает на конференциях по веб-дизайну по всему миру. Является автором манифеста «Transcending CSS» и принятой на ура книгой «Hardboiled Web Design».