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

8. Покажите клиенту скриншоты прототипов, представляя их как графический дизайн.

9. После одобрения дизайна (необязательно) доработайте HTML-прототип и представьте его (например, для пользовательского тестирования).

10. Если все сделали правильно, большая часть кода может использоваться для создания сайта.

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

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

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

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

Об авторе

Стивен Хей (р. 1970) родом из Оранжа (штат Калифорния, США). Живет в городе Леуварден на севере Нидерландов. После получения степени бакалавра по графическому дизайну и изобразительному искусству он отложил в сторону свои мечты стать художником и прошел путь от дизайнера до арт-директора в дизайнерском агентстве, где специализировался на фирменном стиле и дизайне упаковки. Стивен сделал свой первый сайт в 1995 году и влюбился в веб. Сеть казалась ему идеальным сочетанием дизайна и технологий. После 10 лет работы креативным директором в фирме, связанной с веб-разработками, он стал независимым консультантом, и это дало ему больше времени для занятий любимыми делами. Ему нравится помогать людям учиться, он получает удовольствие, когда рассказывает или пишет про веб. Работа занимает не всю его жизнь: он играет на баритон-саксофоне и состоял в джазовом квинтете. Еще он любитель фокусов, искусства и кино. Важнейшие уроки, которые Стивен получил за свою карьеру: критически мыслить, заниматься тем, что доставляет удовольствие, делать все настолько хорошо, насколько ты можешь, и продолжать учиться.

О рецензенте

Брайан Ригер родился в год, когда распались «Битлз», Джими Хендрикс стал номером один, а население мира достигло 3,6 млрд человек. Он родом из Торонто и обычно большую часть года проводит в Эдинбурге, а оставшуюся часть старается провести в Бангкоке. Он довольно часто переезжал и рассматривал много мест в качестве своего дома, включая Шарлоттаун, Ванкувер, Сурабаю, Пхукет, Гонконг, Манилу, Лондон, Глазго и Брайтон. Дом там для него, где оказался сейчас, что хорошо сочетается с его жизненной позицией: «Удобно где бы то ни было!» Образование Брайана включает немного занятий дизайном, театром и анимацией в разных школах, в разное время и на разных уровнях. Брайан любит путешествовать, его любимый цвет белый, потому что он дает ощущение возможностей. Самый большой урок, который он получил за свою карье-ру, – спрашивать все и всегда. Его послание читателям: «Plus ça change, plus c’est la même chose („Чем больше меняются вещи, тем больше они остаются прежними“. – фр.). Будьте гибкими, принимайте перемены…»

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

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

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

• Отзывчивый

• Сеть

• Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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