Переводчик С. Черников

 

Стефани Стимак

Дизайн для разработчиков. — СПб.: Питер, 2024.

 

ISBN 978-5-4461-2193-9

© ООО Издательство "Питер", 2024

 

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

 

Посвящается мистеру Бирреру, мистеру Кэрроллу и мистеру Штайгледеру (Стигги), которые своими наставлениями вдохновляли меня продолжать писать.

А также моей собаке Вог, которая терпеливо и с нетерпением сидела рядом со мной, пока я писала эту книгу.

Предисловие

Я уже очень давно работаю в сфере веб-дизайна. Настолько давно, что мой первый браузер управлялся из командной строки, а моя первая бэкенд-разра­ботка представляла собой CGI-скрипт. За эти почти три десятилетия работы над десятками веб-проектов я пришел к выводу, что наиболее ценным навыком для разработчиков является способность наводить мосты между такими разными по сути областями, как дизайн, улучшение пользовательского опыта (user experience, UX) и разработка как таковая.

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

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

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

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

Аарон Густафсон, автор книги Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

Введение

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

В университете я поступила на программу со специализацией «Дизайн новых медиа», которая охватывала такие темы, как веб, интерактивность, видео и спецэффекты. Хотя я помню, что проходила тогда основы HTML и CSS, большая часть времени уделялась работе с платформой Adobe Flash и языком ActionScript 3.0. Я окончила университет в 2010 году, как раз перед тем, как технология Flash приказала долго жить.

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

Проработав в должности фронтенд-разработчика четыре года, я перешла в команду Microsoft Edge, где занималась тем же самым, обладая при этом совершенно иной степенью свободы. У меня было больше возможностей для освоения новых областей и для общения с разработчиками, что позволило мне понять проблемы, с которыми они сталкиваются. Я научилась пользоваться репозиторием Git и вносить изменения в код (мне часто требовалась помощь в работе с Node и npm, за которую я хочу поблагодарить Антона). Я создавала инструменты для разработчиков, проектировала опыт для них и со временем начала заниматься стандартами и функциями веб-платформ, в результате став DevRel-менеджером (специалистом по выстраиванию отношений с разработчиками).

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

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

Но однажды мне на почту пришло письмо от сотрудника издательства Manning, и проблема дизайна для веб-разработчиков вышла на первый план.

Благодарности

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

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

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

Я выражаю благодарность своему редактору из издательства Manning Саре Миллер за терпение и понимание, которые она проявляла, пока я преодолевала многочисленные препятствия в процессе написания книги. В ходе этой работы мы с ней вместе столкнулись с рядом трудностей, и я хочу сказать ей отдельное спасибо за открытость и чуткое руководство. Благодарю и остальных сотрудников издательства Manning, с кем меня свела судьба: технического редактора Криса Ати, редактора-рецензента Алекса Драгосавлевича, выпускающего редактора Дейрдре Хайама, литературного редактора Алису Ларсон и корректора Мелоди Долаб.

Отдельной благодарности заслуживают рецензенты и люди, предоставлявшие обратную связь в ходе работы над книгой: Адриан Росси, Эл Кринкер, Ален Куньо, Алекс Лукас, Андрес Сакко, Арун Кумар, Банг Нтеме, Бруно Соннино, Кас Петрус, Дэниэл Купер, Дэниэл Карл, Данило Зекович, Давид Кабреро Соуто, Дэвид Криф, Франс Оилинки, Харальд Кун, Харрисон Масеко, Ховард Уолл, Джереми Аллен, Хосе Сан Леандро, Катя Пэткин, Марчин Сек, Мартин Тидман, Мигель Исидоро, Ник Ракочи, Оливер Кортен, Филлип Соренсен, Рамаа Кандасами, Родни Вейс, Сезин Чагыл, Симеон Лейзерзон, Серен Динес Йенсен, Стив Элберс, Стив Прайор, Танудж Шрофф, Таня Вилке, Виорел Мойсей и Вейерт де Бур.

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

О книге

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

Кому адресована эта книга

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

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

Мы не будем уделять много внимания коду, однако, поскольку книга посвящена веб-дизайну и пользовательскому опыту, в ней периодически будут встречаться фрагменты кода. Максимальную пользу из материала извлекут специалисты, которые имеют опыт работы с языками JavaScript или PHP и базовое понимание HTML и CSS, но практически не знакомы с основами дизайна и проектирования UX.

Структура издания

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

Часть II начинается с изложения основ проектирования UX. В главе 3 приводится обзор его многочисленных аспектов, включая исследование, копирайтинг и дизайн. Глава 4 посвящена этапу исследования целевой пользовательской аудитории, здесь рассказывается о том, почему необходимо такое исследование, о различных типах данных, которые можно собрать, а также о некоторых наиболее распространенных методах их сбора. В главе 5 мы начнем закладывать фундамент нашего дизайна, организуя контент и определяя пользовательские сценарии, уделяя особое внимание этапу проектирования пользовательского опыта.

В части III поговорим о дополнительных способах обдумывания компоновки и о том, как наслаивать ключевые элементы дизайна для того, чтобы реализовать на практике те основы, которые были заложены в главе 5. В главе 6 обсудим распространенные типы компоновки элементов, настройку сетки, чтение шаблонов и особенности макета при разработке отзывчивой (адаптивной) версии сайта или приложения. В главе 7 мы поговорим об анимации, способах улучшения макета и пользовательского интерфейса с ее помощью, а также о причинах, по которым анимацию не следует считать чем-то второстепенным. В главе 8 рассмотрим основы типографики и поговорим о том, как выбор шрифта может изменить тон вашего сайта. В главе 9 большое внимание будет уделено цвету и выбору изображений в зависимости от вашей цветовой палитры. В главе 10 мы соберем все воедино и используем то, что вы узнали из глав 4–9, для создания и оформления главной страницы с использованием многоуровневого подхода.

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

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).

Мы выражаем огромную благодарность компании «КРОК» за помощь в работе над русскоязычным изданием книги и их вклад в повышение качества перевод­ной литературы.

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Об авторе

Стефани Стимак — продакт-менеджер, имеет более чем десятилетний опыт работы в области дизайна, специализируется на создании продуктов для разработчиков. Стефани выступала на веб-конференциях по всему миру по темам веб-разработки и дизайна, во многих случаях делая акцент на необходимости и способах преодоления разрыва между этими сферами. Занимаясь дизайнерскими проектами, она сотрудничала с такими компаниями, как Safeway, MBARI, Microsoft Azure, Microsoft Office, Windows, T-Mobile и Blue Cross Blue Shield.

Следуя своему увлечению темами веб, дизайна и разработки, она присоединилась к команде создателей Microsoft Edge, работала над такими инструментами для разработчиков, как webhint.io и DevTools для браузера Edge. В фокусе ее интересов находятся и другие инициативы в области веб-платформ, в том числе Web We Want (webwewant.fyi).

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

Иллюстрация на обложке

Обложку книги «Дизайн для разработчиков» украшает рисунок под названием Fille de Barabinize, или «Дочь Барабини». Он взят из коллекции Жака Грассе де Сен-Совера, опубликованной в 1797 году. Каждая иллюстрация этой коллекции нарисована и раскрашена вручную.

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