Идеальный дизайн дается с болью: выверенный до пикселя

Брендон Джонс — редактор сайта Wptuts+ из Южной Калифорнии. За последнии годы чего только Брендон не делал. Создавал дизайн, кодил, фотографировал, рисовал.  В этой статье Брендон предлагает теорию дизайна макетов, выверенных до каждого пикселя. Статья сложная, не судите строго. Перевод организовал Hronofag.ru

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

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

Идеальный дизайн дается с болью

great_design_hurts

Несколько лет назад, на конференции SXSW 2008, я впервые познакомился с идеей “идеального пикселя” при создании мокапов. Майкл Лопп (автор нескольких замечательных книг о дизайне и главный инженер в компании Apple) читал лекцию, на тему “Идеальный дизайн дается с болью”.

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

“Вот оно!”, было моей первой мыслью, — “идея, которая произвела революцию в моем сознании”. Стремитесь доводить каждый свой дизайн проект до пиксельного совершенства. Даже если вы не уделите дизайну должного внимания, само намерение задаст вашей работе нужный тон.

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

Так что же делает макет идеальным и выверенным до пикселя?

По сути — это разработка макета таким образом (особенно веб макета, хотя это не так важно), как будто вы уже верстаете его или подготавливаете финальный вариант. Если вы владеете CSS/HTML, то вы понимаете о чем я.

  1. Идеальные отступы (margins и padding)
  2. Ясное и последовательное применение шрифтов
  3. Идеальные задние фоны и рамки
  4. Выверенное использование цвета
  5. Умные и обоснованные отклонения от предыдущих 4х правил.

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

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

Быть “Идеальным”?

perfect

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

Отступы, поля и выравнивания последовательно соответствуют друг другу во всем макете. Если каждый боковой блок имеет 10px отступа, то этот отступ должен быть у всех элементов дизайна, относящихся к боковому блоку.

Цвет и шрифт пронизывают дизайн сайта. Создавайте дизайн шрифта так, как если бы он был прилинкован к HTML элементам (все H1 18px, шрифт Georgia, черный цвет).

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

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

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

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

Аргументы против совершенства

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

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

Справедливый аргумент  имеющий определенный вес, но не достаточный чтобы сорвать эту статью (: Запомните — цель этого подхода не в том, чтобы доводить каждый дизайн и макет до идеалистического совершенства (это было бы сумасшествием). Цель — изменение вашего подхода к дизайну. Добиваться совершенства во многих ситуациях не очень практично, что не должно мешать вам стремиться к этому.

Пройдемся по преимуществам такого подхода к работе и снова вернемся к контр-аргументам.

Преимущества макетов, выверенных до пикселя

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

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

Никаких объяснений разработчикам. Такой подход становится очень полезен, когда клиент отправляет дизайн разработчикам в Индию. Уменьшение длительности переписки с разработчиками сложно описать словами. Если работа разработчика сводится к тому чтобы сверстать ровно то, что он видит на экране, то и ситуации, в которых разработчик толковал ваш макет неправильно, сводится к нулю. А для программистов задача становится совсем простой. Теперь они могут сконцентрироваться на коде, а не на выяснении вопросов — нужно ли вам 10 пикселей или 15.

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

Довольный Арт Директор/Клиенты. Если ваш Арт директор (или любой начальник) потратит меньше времени на список деталей и исправлений и больше времени на непосредственное концептуальное руководство, его кровяное давление (и ваше) будет в пределах допустимой нормы во время работы над проектом.

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

Контрольный выстрел

counter

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

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

У вас уйдет значительно меньше времени на поправки. Выбирайте из двух — либо мы тратим 6 часов на создание макета и получаем апрув. Либо тратим 4 часа и еще 4 тратим на исправления.

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

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

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

Заключительные мысли и предостережения

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

У вас другая точка зрения? Тогда напишите свой комментарий на эту тему.