В физическом мире, никто не строит ничего без подробных чертежей, потому что жизнь людей находятся на линии.В цифровом мире, ставки просто не так высоко, .
Это называется “программа” по следующей причине: потому что, когда он бьет вас в лицо, это не больно, как много.Никто не умрет, если ваш сайт идет жить с левого края заголовка в 4 пикселя из выравнивания с картинки в поле ниже его .
Но, в то время как жизнь пользователей не может быть на линии, дизайн чертежи (также называемые проектные спецификации, или данные) может означать разницу между правильно реализованы конструкции, улучшает пользовательский опыт и удовлетворяет customers и запутаннойи дизайн, который противоречит развращает пользовательский опыт и недовольство клиентов .
Для тех из нас, кто создает цифровые продукты, дизайн спецификации может означать разницу между эффективного сотрудничества и расточительного процесса назад и вперед с дорогостоящих ошибок и задержек реализации доставки.Это также может означать разницу между вашего бизнеса зарабатывать деньги и потерять деньги, в этом случае может на самом деле живет на линии .
Короче говоря, данные могут помочь нам построить правильный продукт более быстро и более эффективно .
Какие чертежи (и почему они синий)
Почему чертежи синий?Чтобы найти ответ, давайте вернемся во времени немного, любезно Wikipedia 1 :
“ Проект является воспроизведение технического рисования, документирование архитектуры или проектирование, используя процесс печати контактную на светочувствительных листов.Введенный в 19 веке, процесс позволил быстрое и точное воспроизведение документов, используемых в строительстве и промышленности.Процесс сине-печати характеризуется легкими цветными линиями на синем фоне, отрицательный оригинального .”
Архитектурные чертежи были копировальный 19-го века.Они были дешевые, наиболее надежная технология доступна для копирования технических чертежей .
2 
Чертежи были созданы путем отправки свет вокруг рисунка краски на прозрачной пленке.Свет будет сиять через везде, кроме чернил и ударил мелованную бумагу с светочувствительный материал, превращая эту бумагу синий.Это указано белый копию инженерной графики на темно-синем фоне .
Эти копии затем были распространены строителей, которые были ответственны за реализацию проектов в этих чертежей .
Сегодня многие дизайнеры также распространять дизайн спецификации для интерфейсных разработчиков, которые отвечают за реализацию проектов.не Design данные больше не будут сделаны с бумагой и света, и они больше не синий, но, как и прежде, они гарантируют, что продукт будет построен правильно .
От кирпича в клочья, Bytes
Я узнал значение архитектурных чертежей в моей предыдущей карьеры в качестве девелопера.Один из моих обязанностей было найти великих архитекторов для создания чертежей, так что строители, нанятые мы точно знали, что строить.Где-то по пути, я понял, что развитие недвижимости не был для меня: я хотел, чтобы большее влияние на построении масштабируемых горизонты виртуального, а не реального, мира.Я узнал, HTML, CSS и JavaScript и отправился на поиски стартапов, которые были найма.Мое понимание важности детальных чертежей пошел со мной .
В диком западе World Wide Web стартапов, я должен был построить один-страниц приложений JavaScript, которые выглядели хорошо и показали хорошие результаты, и я должен был сделать это быстро.Проекты часто дошедшие до нас одну неделю до даты выпуска продукта, и мы попросили, чтобы начать спринт.Проекты, как правило, состоял из Photoshop файлов (РСП) с большим количеством слоев и нулевой specs сопровождать их .
Для бывшего девелопера, работы с графическими конструкций без спецификации было как получение набора архитектурных чертежей со всеми чертежами и ни один из номеров.Без необходимой CSS “измерения”, я был вынужден охотиться через слои и подслои форм и текстовых элементов, чтобы выяснить правильное значение HEX для границы вокруг кнопки “Купить” или семейства шрифтов, используемых в “Забыли пароль?”поле.Такой рабочий процесс был очень непродуктивно .
Я голодал для спецификации, когда мой друг Чэнь Blume 5 подошел ко мне с идеей Specctr __30 | 15 6 | __2,инструмент, который принесет знакомые преимущества архитектурных чертежей в мир графического дизайна и веб-разработки интерфейсных.Я сразу же признали ценность и потенциал этогоИдея, таким образом, мы начали работать вместе сразу, и вскоре после этого, первая версия была выпущена Specctr .
Первоначально плагин Specctr было для Adobe Fireworks users 8 только, что в то время — 2012 — казалось, лучший инструмент для UI и веб-дизайнеров.Позже, мы расширили спектр поддерживаемых приложений, и сегодня она включает в себя Fireworks, Illustrator, Photoshop и InDesign .
Фото (и некоторые номера) стоит больше, чем тысяча Words
Они говорят, что картинка стоит тысячи words 9 .Ну, изображения и некоторые значения RGB может быть стоит гораздо больше,
Фраза “картинка стоит тысячи слов” означает, что сложная идея может быть передано с помощью всего одного неподвижного изображения.Это также характеризует также одним из основных целей визуализации, что сделать это можно поглощают большое количество данных quickly.Тем не менее, в проектирования и разработки бизнес, изображение или одного PSD недостаточно .
Разработчикам нужно знать точное дизайн-х атрибуты, чтобы иметь возможность написать HTML и CSS, необходимые для воссоздания текста и формы элементов через код.Если PSD не сопровождается подробными характеристиками, затем сделать приблизительные предположения или охоты через слои могут привести либо к ошибкам или потере драгоценного времени развития .
РазработчикFocus
При разработке-то, я, возможно, потребуется несколько минут, чтобы загрузить необходимые ментальные модели в моей голове, прежде чем я могу быть продуктивным.Любое прерывание может принести вредительство мяч в сложной воображаемой машины я боролся, чтобы собрать в голове .
Это почему необходимости искать значение RGB или обратиться к команде, чтобы спросить, который шрифт используется может привести к большим пробелам в моей производительности .
И если вы член распределенной или удаленной команды, то вы даже не роскошь немедленно получать ответы на свои вопросы от коллегой — вы до асинхронного коммуникационного инструмента, как Skype, Hipchat или, хуже, электронная почта. Как Крис Parnin ставит it 11 :
“ Расходы прерываний были изучены в офисных средах.Прерванная задача оценивается взять в два раза дольше и содержат в два раза больше ошибок, как непрерывных задач.Работники должны работать в раздробленном состоянии, 57% задач прерывается.Для программистов, имеется меньше свидетельств о последствиях и распространенности перерывов.Как правило, число, получает бросил вокруг возвращения в ‘ zone’ по крайней мере, 15 минут после перерыва.Интервью с программистами производить такое же количество .”
Карнавал ошибок: Разработчик Edition
Юлия была на своем компьютере в течение восьми часов подряд и опоздал на ужин с родителями, но она обещала, чтобы этот CSS переход между “продукта” и наложения “купить” накладку на мастер филиала к концудень.Она была почти сделано, но тип на эту кнопку “Отправить” не выглядят так же, как тот, что был в прямом эфире на веб-сайте в настоящее время .
“Это прекрасно,” подумала она.”Я изменю его завтра.”
Столкнувшись с короткими сроками и перспективой рыться Photoshop слоев, некоторые разработчики будут принять удар в темноте с какой тип использовать — Таким образом, отрицая часов дизайна исследования они вложили с одной стресс топливе решения.
В конце концов, мы должны повторить его в любом случае, но сейчас мы встретимся в срок.Это все о developer удобство .
Никто в истории навсегда положить в дополнительных усилий, чтобы сделать неправильную вещь.Ошибки, как правило, результат следующий заманчивый ярлык .
Звукозаписывающей индустрии провалилась попытка остановить цифровую дистрибуцию музыки является хорошим примером этого.__9 Spotify в | весь бизнес model 13 базируется на том, что “люди были готовы сделать правильную вещь, но только если это было так же, как награждение, и гораздо меньше хлопот, чем делать неправильные вещи.”
Дайте передний конец инженера полностью spec’ed дизайн, а затем погреться в лучах, исходящих из благодарности лице.Они будут получать все ваши поля и отступы именно правой;что тонкий градиент будет иметь точные значения, которые вы так долго, чтобы соответствовать;и все это будет сделано быстрее.Зачем они это делают что-нибудь еще?Вся информация, они должны тут же перед ними
Триумф занудство: Дизайнер Edition
Лорен взял второй, чтобы оценить ее готовый дизайн.Это было хорошо сбалансированным и передал ощущение спокойствия, все, направляя внимание на кнопку “Отправить” .
Она устала и готова идти домой после долгого рабочего дня, но она обещала доставить готовый дизайн, так что Джулия может получить фору по разработке его к завтрашнему срока.Она иногда создается спецификации для разработчиков она работала с, но она просто не иметь его в ней тип и вытянуть каждую отдельную аннотацию
“Юля выяснить это,” думал, что она сама себе, она ударила
Это все о designer удобство .
Если дизайн спецификации (т.е. чертежи) есть так много, чтобы предложить, то почему они не часть процесса каждого дизайнера?Поэтому я, как разработчик, может пропустить глядя тип является той же причине многие дизайнеры не создают спецификации: Это проще не .
Это потому, что дизайнеры не используют правильные инструменты.Они вручную измерять и рисовать каждое измерение, и они типа значение каждого пикселя и значение RGB “вручную”, используя те же инструменты рисования общего назначения, которые они использовали, чтобы создать дизайн .
Любое время вы спросите группа, чтобы остановить создание и сосредоточиться на процессе, вы боретесь тяжелая битва.Холм становится круче, когда резко процесс идет медленно и нудно .
С правильные инструменты для автоматизации создания спецификации, дизайнеры могут сократить расходы и позволит всю свою команду, чтобы пожинать плоды создания и распространения проектных спецификаций .
Давайте создавать (и использование) Дизайн Specs
ДваПриведенные выше примеры — с Юлией и Лорен — мнимые, но это не означает, что они не происходят постоянно в реальной жизни.Разработчики не должны делать какие-либо предположения, которые приводят к ошибкам и терять время.С другой стороны, создание подробные спецификации вручную утомительно и занимает много времени дизайнера .
Есть способ лучше?Я считаю, что .
Мы должны начать использовать инструменты, которые помогут нам создать дизайн спецификации с минимумом хлопот.Такие инструменты будут экономить время на дизайнеров и разработчиков, и приведет к более рабочих процессов дизайнер-разработчик .
Ниже приведены некоторые выдержки из документа аннотированной дизайна с Specctr.С помощью плагина Specctr, дизайнер может быстро предоставить значения цвета любого элемента дизайна, наряду с то …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров