Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Дизайнерские решения, принимаемые разработчиками, оказывают существенное влияние на восприятие сайта пользователями. Освоив язык дизайна, вы сможете принимать полноценное участие в создании оформления, сотрудничать с коллегами-дизайнерами и обосновывать выбор тех или иных подходов при создании приложений. Книга раскрывает основные принципы дизайна и особенности пользовательского восприятия, которые должен знать каждый веб-разработчик. Читателю определенно понравится, как автор демонстрирует новые идеи на примерах популярных сайтов и пользовательских интерфейсов. Откройте методы исследования поведения юзеров и научитесь использовать цвет, типографику и верстку для создания удобных и привлекательных веб-интерфейсов. К концу книги вы поймете, что хорошее чувство дизайна действительно является ценным подспорьем для разработчика!
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 329
Veröffentlichungsjahr: 2024
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчик С. Черников
Стефани Стимак
Дизайн для разработчиков. — СПб.: Питер, 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 рассматриваются взаимосвязи между пользовательским опытом и разработкой, а также приводятся некоторые другие соображения.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).
Мы выражаем огромную благодарность компании «КРОК» за помощь в работе над русскоязычным изданием книги и их вклад в повышение качества переводной литературы.
Мы будем рады узнать ваше мнение!
На веб-сайте издательства 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 отдает должное изобретательности и предприимчивости компьютерного бизнеса, используя для обложек тематических книг подобные иллюстрации. В них отражается разнообразие региональных культурных особенностей многовековой давности, о котором нам напоминают картины Грассе де Сен-Совера.
Часть I. Основы дизайна
Эта часть во многом является вступительной. В ней я постараюсь заложить основу для остального материала книги и представлю принципы дизайна, которые необходимо усвоить до начала работы над визуальной составляющей проекта.
В главе 1 я определяю цель книги и объясняю, почему разработчику полезно ознакомиться с базовыми принципами дизайна. В главе 2 изложены основы дизайна и описаны его принципы, их предстоит изучить. Каждый принцип, обсуждаемый в этой главе, крайне важен для понимания того, как устанавливать взаимосвязи между фрагментами контента, которые будут представлены в части II. Эти принципы могут быть применены ко всем визуальным элементам, что и будет продемонстрировано в части III. Чем лучше и глубже вы освоите фундаментальные принципы, тем более смело и осознанно сможете их применять для создания все более выдающихся решений. Изучив вступительную часть книги, вы будете готовы приступить к стадии проектирования пользовательского опыта.
1. Преодоление разрыва между дизайном и разработкой
В этой главе
• Этапы разработки веб-дизайна, рассматриваемые в книге.
• Эволюция роли веб-разработчиков.
• Преимущества, которые фрилансерам и штатным разработчикам дает понимание основ дизайна и процесса проектирования пользовательского опыта.
Всемирная паутина — это постоянно изменяющееся пространство. Новые технологии и фреймворки появляются каждый год. Язык HTML и каскадные таблицы стилей (CSS) по-прежнему лежат в основе веб-сайтов и веб-приложений и при этом продолжают развиваться, удовлетворяя все новые потребности разработчиков.
При реализации веб-проектов необходимо постоянно следить за технологиями, используемыми для их построения. А как это связано с дизайном? Несмотря на постепенное усовершенствование инструментов, многие основополагающие концепции остаются прежними. Мы наблюдаем лишь смену тенденций с течением времени.
Знакомство с темой веб-разработки оказалось чрезвычайно ценным для меня как специалиста в области веб-дизайна. Когда меня спрашивают: «Следует ли дизайнерам научиться писать код?», я отвечаю утвердительно. Понимание того, что возможно внутри мира веб, за его фасадом, является огромным преимуществом. Это значительно облегчает общение между дизайнерами и разработчиками. В сфере технологий коммуникационный и концептуальный разрыв между дизайнерами и разработчиками обычно считается одним из самых труднопреодолимых. Гораздо реже задается вопрос: «Следует ли разработчикам учиться дизайну?» И на него я тоже отвечаю утвердительно, по крайней мере, когда речь идет о понимании основных принципов.
Освоение навыков дизайна позволяет разработчикам быстро обновлять пользовательский интерфейс, давая команде дизайнеров возможность больше работать над пользовательским опытом, чем над внесением небольших изменений на уровне пикселей. Однажды генеральный директор поделился с моей командой разработчиков мнением о том, что пользовательский интерфейс одного из наших инструментов кажется ему не столь же эффективным, как у конкурентов. Под этим он подразумевал слишком большое свободное пространство между компонентами. Пользовательский интерфейс был недостаточно совершенным. Один из разработчиков уменьшил расстояние между компонентами, сделав дизайн более компактным. Ему не требовался дизайнер для создания макетов, он самостоятельно внес изменения, представил их дизайнеру, чтобы ввести команду в курс дела, а затем внедрил изменения в пользовательский интерфейс.
Если разработчик способен сравнить дизайн вашего продукта с другим, выявить разницу, которая в вышеописанном примере заключалась в чрезмерном количестве пустого пространства, и внести изменения, то вы, как дизайнер, можете сосредоточиться на решении более сложных проблем, связанных с пользовательским опытом. Хороший разработчик понимает, что небольшие визуальные изменения позволяют сделать дизайн более отточенным.
1.1. Почему разработчикам полезно знать основы дизайна и проектирования пользовательского опыта
Как правило, дизайнеры и разработчики говорят на разных языках и владеют разными наборами навыков. Дизайнеры ориентируются на пользователя и создают визуальные образы. Разработчики стараются преобразовать эти визуальные образы в интерактивные элементы, с которыми будут взаимодействовать потребители. Однако эти две области пересекаются, поскольку разработчики воссоздают то, что создали дизайнеры, делая это с помощью кода, обычно с использованием языка CSS: он позволяет стилизовать веб-интерфейсы. Понимание того, что и зачем воплощается в жизнь, сделает разработчика более эффективным и позволит ему уверенно принимать дизайнерские решения в отсутствие коллеги-дизайнера.
Дизайн — это не только визуальное оформление и эстетика. Они, безусловно, важны и являются первым, на что обращают внимание посетители, когда заходят на сайт, но и остальные аспекты пользовательского опыта являются не менее значимыми. Если сайт медленно загружается или посетители не делают на нем того, что от них ожидают, например, не покупают товар, то становится очевидно, что одной эстетики недостаточно. Разработчики должны понимать, как принимать решения, касающиеся пользовательского опыта, которые лягут в основу разработки визуального дизайна. Когда я начинала свою карьеру более десяти лет назад, типичная схема работы над проектом сайта выглядела следующим образом.
1. Дизайнер изучает проект заказчика, проводя сравнение с сайтами его конкурентов и оценивая, что там было сделано хорошо, а что нет.
2. Дизайнер изучает потребности и опыт нескольких пользователей, на которых ориентирован проект, и предлагает решение конкретной задачи на сайте (например, поиска информации, покупки товара, записи на прием, сравнения отелей и т.д.).
3. На основе результатов исследования конкурентов, изучения пользовательских персон и бизнес-требований дизайнер создает так называемые вайрфреймы (wireframes) — простые схемы, или макеты, сайта, отражающие расположение фрагментов контента, а затем представляет их на суд заказчика для получения одобрения.
4. Наконец, дизайнер приступает к визуальному оформлению, предоставляет заказчику макеты, соответствующие будущему дизайну с точностью до пикселя, дорабатывает их, получает одобрение, а затем передает проект разработчику для написания кода сайта.
5. Разработчик берет статические макеты и создает на их основе интерактивный сайт.
6. После проверки качества, выявления и устранения ошибок и проблем сайт запускают в эксплуатацию.
Все эти этапы имеют место и сегодня, и в данной книге мы будем рассматривать именно этот рабочий процесс — проектный цикл, начинающийся с проектирования пользовательского опыта (разработки вайрфреймов) и завершающийся применением визуальных элементов для воплощения дизайна в жизнь. Однако попытаемся скорректировать описанный выше проектный цикл, чтобы сфокусироваться на современных рабочих процессах, которые предполагают более итеративное проектирование и разработку, более тесное сотрудничество специалистов из различных областей, непрерывное тестирование и анализ, направленные на улучшение дизайна.
Приведенный выше рабочий процесс разделен между дизайнером и разработчиком. Дизайнер пользовательского опыта может сосредоточиться исключительно на исследовании проектов конкурентов и создании вайрфреймов. При этом он работает в тандеме с визуальным дизайнером или интерактивным дизайнером, который принимает решения, связанные с типографикой, цветом, расстоянием между компонентами и анимацией — теми визуальными аспектами сайта, которые будут рассмотрены в этой книге. Очевидно, что работа в целом все равно разделяется между дизайнерами и разработчиками, участие последних начинается лишь с момента передачи им готового дизайна.
Такой способ работы не предполагает тесного сотрудничества. Разработчики обладают знаниями и опытом, которых обычно нет у дизайнеров, поэтому их привлечение к работе на более ранних этапах могло бы положительно сказаться на всем проектном цикле. Вне зависимости от того, идет ли речь о сокращении объема ненужной работы при невозможности реализации той или иной дизайнерской идеи или об озвучивании альтернативного мнения, способного повлиять на направление творческой мысли, это было бы выгодно обеим сторонам.
1.1.1. Улучшение взаимодействия и коммуникации
Дизайнеры не ожидают того, что их коллеги-разработчики будут экспертами в области дизайна, так же как и разработчики не ожидают от дизайнеров знания JavaScript. Специалисты упомянутых профессий играют каждый свою роль по вполне очевидной причине, но результаты их деятельности взаимосвязаны. Код, который пишут разработчики, может повлиять на дизайн, а то, что создают дизайнеры, может повлиять на решения, принимаемые разработчиками при написании кода. Иногда возможности разработчиков оказываются ограниченными в силу неких технических особенностей или вариаций кода, которые негативно сказываются на пользовательском опыте, например, анимация иногда замедляет загрузку веб-страницы.
Понимание того, что именно лежит в основе принятия дизайнерских решений, позволяет сделать сотрудничество и общение между дизайнерами и разработчиками более эффективным и минимизировать топтание на месте, обусловленное техническими ограничениями. Освоив необходимые инструменты и терминологию, разработчики могут предоставлять дизайнерам более действенную обратную связь и задавать им более содержательные вопросы, а также лучше разбираться в причинах, лежащих в основе принимаемых дизайнерами решений.
Эта книга призвана научить разработчиков эффективному взаимодействию с командой дизайнеров на протяжении всего процесса реализации проекта. Даже если они не сотрудничают с дизайнерами, прочтение этой книги придаст им уверенности в принятии дизайнерских решений самостоятельно, а уж эти решения приведут к созданию безупречного конечного продукта. Или, скажем, изложенный материал наверняка поможет внештатным разработчикам, которые хотят иметь возможность вносить изменения в визуальное оформление сайта, но не располагают бюджетом (или просто не хотят нанимать дизайнера).
Так или иначе, следует для начала освоить несколько базовых принципов дизайна и научиться их применять.
1.1.2. Понимание причин, лежащих в основе дизайнерских решений
Однажды мне довелось руководить проектом, целевой аудиторией которого были разработчики. Разрабатывался инструмент, который анализировал код сайта или веб-приложения и предлагал рекомендации по улучшению доступности, производительности и безопасности. Хотя это был проект с открытым исходным кодом, большинство членов команды, работавшей над ним, являлись сотрудниками компании Microsoft. Я знала о том, что в целом веб-разработчики не очень хорошо относятся к Microsoft, и, когда эта компания выпускает очередной инструмент для разработчиков, они тщательно изучают каждую его деталь. Я решила, что, по аналогии с другими инструментами для разработчиков, частью нашего брендинга будет талисман, который мы сможем использовать в графическом оформлении сайта.
По моему замыслу, дизайн талисмана должен был вызывать чувство сопереживания у посетителей нашего сайта. Для достижения этой цели было крайне важно на каком-то этапе мониторинга пользовательского сценария разместить на экране определенную иллюстрацию (рис. 1.1). Первые несколько версий работы сайта ставили претендентов на анализ кода в очередь, поскольку наш бэкенд мог обрабатывать лишь ограниченное количество URL-адресов одновременно. Люди вообще склонны проявлять нетерпение, когда дело касается использования интернета, а разработчики — тем более.
Я предположила, что пользователи будут жаловаться на необходимость ожидания, поэтому на соответствующей странице была размещена иллюстрация с нашим персонажем, сидящим в темной комнате за столом с лампой и в поте лица обрабатывающим очередь из URL-адресов.
Позднее моя гипотеза подтвердилась в ходе обсуждения созданного инструмента и сайта с одним из разработчиков-клиентов сайта, который сказал мне: «Я уже был готов рассердиться из-за того, что мне пришлось ждать, но посочувствовал вашему персонажу».
Рис. 1.1. На странице очереди к сканеру веб-сайтов был изображен нарвал, работающий сверхурочно, чтобы выполнить все задачи, поставленные разработчиками
Формирование эмпатии к целевой аудитории позволяет улучшить пользовательский опыт
Понимание характера целевой аудитории нашего сайта и ее нужд позволили мне принять дизайнерские решения, которые помогли снизить количество жалоб. Со временем бэкенд был модернизирован для одновременного анализа большего объема кода. Этот пример служит прекрасной иллюстрацией взаимосвязи между решениями разработчиков и пользовательским опытом. В данном случае исходная версия бэкенда заставляла пользователей сайта ждать, и это неудобство пришлось временно компенсировать, скрасить ожидание с помощью дизайнерского хода. Сегодня, когда передача данных осуществляется практически молниеносно, люди не готовы ждать, пока загрузится веб-страница, и стремятся как можно быстрее получить результат. Правильная организация их работы с сайтом крайне важна для бизнес-показателей.
Итак, для улучшения пользовательского опыта разработчику крайне необходимо понимать целевую аудиторию и уметь ей сопереживать. В случае с сайтом, предназначенным для анализа кода, разработчик мог бы реализовать несколько решений без участия дизайнера. Например, использовать анимацию загрузки или создать промежуточную страницу с сообщением наподобие «Зайдите чуть позже, чтобы получить результаты». Подобный пользовательский опыт не обязательно плох, но он является стандартизированным и не учитывает особенностей целевой аудитории и того, что она не готова к длительному ожиданию при использовании инструмента. Особенно нового инструмента, который должен произвести хорошее впечатление при первом применении.
Технические решения — это решения, связанные с пользовательским опытом
Если разработчики будут знать причины, лежащие в основе принимаемых решений, связанные с дизайном и пользовательским опытом, они смогут лучше понять, как именно их решения, начиная от исходного кода и заканчивая способом его компиляции и выбором хостинг-провайдера, в итоге влияют на опыт пользователя. Технические решения являются такой же частью дизайна сайта, как и визуальные элементы, поэтому очень важно уметь обсуждать выбор дизайнера с точки зрения разработчика.
Допустим, дизайнер обдумывает создание сайта, на котором большая часть пользовательского взаимодействия будет сопровождаться анимацией. Мнение разработчика о том, как это повлияет на производительность сайта, является критически важной обратной связью, которую необходимо предоставить дизайнеру на ранних этапах работы. Действительно ли вся анимация будет необходимой частью пользовательского опыта? Если нет, то обсуждение этого вопроса до начала написания кода поможет сэкономить время и даст возможность дизайнеру и разработчику вместе найти решения, позволяющие достичь желаемого результата и не оказывать негативного влияния на пользовательский опыт посетителя сайта.
1.1.3. Написание лучшего кода благодаря пониманию основ визуального дизайна
Знание основ визуального дизайна дает разработчикам преимущества, которые не ограничиваются улучшением взаимодействия с коллегами-дизайнерами. Во-первых, понимание того, как различные элементы сочетаются друг с другом, позволяет разработчику создавать более четко организованный код, который легче поддерживать в долгосрочной перспективе.
Понимание структуры страницы дает ему возможность писать код отзывчивого интерфейса, меньше зависящий от «хаков» при адаптации его для более компактных экранов. Кроме того, разработчики получают возможность самостоятельно определить потенциальные проблемы с тем или иным компонентом или разметкой страницы на небольших экранах (например, кнопка может оказаться слишком маленькой при просмотре страницы на мобильном телефоне) и поправить это или предложить соответствующие коррективы.
В более широком масштабе понимание того, как одни и те же элементы, например заголовки и кнопки, используются в различных компонентах пользовательского интерфейса, также влияет на группировку кода, особенно в CSS-файле. Выявление таких многократно используемых элементов позволяет увеличить объем кода, общего для нескольких компонентов, и уменьшить количество кода, обслуживающего конечного пользователя, а это всегда положительно сказывается на производительности веб-интерфейса.
Дизайн также может повлиять на решения, принимаемые при написании кода бэкенда. Некоторые базы могут предполагать отправку запросов из определенной формы или сохранение данных. Понимание пользовательских сценариев в подобных ситуациях позволяет разработчику начать их кодирование раньше, не дожидаясь получения дизайна. Благодаря этому улучшается коммуникация и повышается скорость реализации проекта, что опять же выгодно всем его участникам.
1.1.4. Более качественный код (и дизайн) благодаря меньшей зависимости от сторонних фреймворков
Многие мои знакомые разработчики используют сторонние библиотеки компонентов или фронтенд-фреймворки для ускорения реализации необходимых в проекте элементов пользовательского интерфейса. Обычно сторонние инструменты можно быстро установить и начать использовать, а если разработчик не доверяет своим дизайнерским способностям, то эти компоненты помогут ему спроектировать более качественный пользовательский опыт. Однако использование таких библиотек имеет множество недостатков как с точки зрения дизайна, так и с точки зрения написания кода.
Чаще всего разработчик будет вынужден задействовать библиотеку, объем кода в которой существенно превышает объем кода, используемого на сайте. Кроме того, этот код будет написан не им самим, что может усложнить понимание того, как взаимосвязаны или как повторно используются различные компоненты пользовательского интерфейса. А попытка удалить или изменить ненужный на этом сайте код может привести к ошибкам в работе этого интерфейса. Кроме того, разработчик будет зависеть от авторов фреймворка в том, что касается обеспечения соответствия его кода новым веб-стандартам и лучшим современным практикам.
Понимая принципы визуального дизайна и то, как они применяются при компоновке страницы и компонентов веб-интерфейса, разработчики могут создать собственную систему необходимых элементов и минимизировать объем кода, предоставляемого конечному пользователю. Такую кодовую базу легче поддерживать, переиспользовать и пополнять новыми элементами, кроме того, подобный подход позволяет разработчикам не замыкаться в определенной экосистеме, которую они не могут контролировать.
Сторонние фреймворки предусматривают несколько широко распространенных шаблонов компоновки веб-страниц. Обычно это макет с крупным главным изображением в верхней части и горизонтальными полосами, разделяющими содержимое страницы, или макет с главным изображением и расположенными под ним тремя столбцами с контентом (рис. 1.2).
Рис. 1.2. Пример одного из распространенных шаблонов, предусмотренных в сторонних фреймворках
Подобная компоновка неплоха по своей сути. Она выполняет определенную функцию, но в действительности предназначена только для создания главной целевой страницы, поэтому в итоге можно получить главную страницу с хорошим дизайном и несколько менее проработанных страниц нижнего уровня. Кроме того, такая компоновка элементов на странице используется чрезвычайно широко, и если вы хотите, чтобы создаваемый сайт выделялся на фоне других, то использование этих шаблонов в готовом виде не рекомендуется.
Разработка хорошо оформленного веб-сайта или веб-приложения не ограничивается выбором шаблона для макета. Понимание принципов дизайна, связанных с применением теории цвета, типографики и пространства в макете, позволит предоставить пользователям гораздо более качественный результат. Это также означает, что вместо попытки вписать содержимое своего сайта в чужой шаблон разработчик научится строить и адаптировать структуру создаваемого сайта под нужды своих пользователей. В плане компоновки страниц и пользовательского сценария интернет-магазин, созданный индивидуально, будет значительно отличаться от новостного сайта или блога.
Конечно, мы живем в быстро меняющемся мире, и проекты по разработке могут иметь жесткие временные рамки, так что может просто не быть выбора между использованием готового шаблона и созданием сайта с нуля. Однако знания о том, как использовать цвет, типографику и пространство, можно применить к любым шаблонам и значительно улучшить создаваемый дизайн.
1.1.5. Пользовательский опыт и разработка
Дизайн — тема очень обширная. Существует множество различных областей, в которых можно специализироваться, и пользовательский опыт — это, пожалуй, одна из самых обширных сфер веб-дизайна, которая может быть разбита на такие области, как исследование аудитории пользователей и дизайн их взаимодействия с системой. По большей части пользовательский опыт зависит от дизайна, однако решения, принимаемые разработчиком, также оказывают на него влияние. Не все аспекты пользовательского опыта напрямую связаны с разработкой кода сайта. Однако знание их основ поможет разработчикам научиться делать выбор в интересах пользователей и находить технические решения, которые принесут наибольшую пользу.
Эволюция роли разработчика предполагает понимание нужд целевой аудитории и взаимодействие с ней для создания решения, отвечающего ее потребностям. Методологии проектирования пользовательского опыта позволяют разработчикам научиться создавать продукты, ориентируясь на пользователей. Опять же, это может повлиять на то, как разработчики пишут свой код, и на то, какие инструменты они используют для достижения своей цели.
Допустим, разработчик из небольшой компании работает над продуктом, сайтом или веб-приложением и собирается внедрить новую функцию. Поскольку компания небольшая, у нее нет специалиста по исследованию целевой аудитории или бюджета на проведение подобных исследований. Поэтому компания планирует выпустить функцию без проведения пользовательского тестирования и наблюдения за ее применением. Тем не менее для успешного проведения эксперимента необходимо разработать план тестирования. Понимание процесса тестирования дизайна и сбора обратной связи для совершенствования функции имеет решающее значение при разработке продукта.
Каждое решение, принимаемое разработчиком, влияет на опыт пользователя веб-сайта или приложения. Благодаря пониманию важности каждого аспекта пользовательского опыта и соответствия этих аспектов этапам жизненного цикла проекта разработчики могут в большей степени ориентироваться на пользователей и выявлять их проблемы до того, как на разработку будет потрачено слишком много времени и придется возвращаться к ее предыдущим этапам, чтобы учесть вновь выявленные обстоятельства. Например, проработка деталей и функционала компонентов на этапе создания прототипа гарантирует, что функции будут работать ожидаемым образом. Так, может сократиться количество ошибок в производственном коде веб-сайта или веб-приложения, что, в свою очередь, будет способствовать улучшению опыта конечного пользователя.
Проектирование пользовательского опыта и веб-разработка тесно связаны между собой, и поскольку разработчики стремятся к более глубокому пониманию бизнеса и его клиентов, им полезно понимать основы пользовательского опыта и их связь с фазой разработки. В итоге эта информация поможет разработчикам писать более качественный код, выпускать его с меньшим количеством ошибок и учитывать интересы своих пользователей на этапе принятия технических решений. При правильном подходе понимание основ проектирования пользовательского опыта не только положительно скажется на достижении конечных бизнес-целей, но и предоставит разработчикам инструменты для быстрой корректировки того, что не соответствует ожиданиям, прежде чем проявят себя негативные последствия.
1.2. Путь к пониманию лучшего дизайна и пользовательского опыта
И визуальный дизайн, и проектирование пользовательского опыта являются чрезвычайно обширными дисциплинами, охватывающими множество областей специализации. Одни профессионалы в сфере проектирования пользовательского опыта сосредотачиваются на таких аспектах дизайна, как создание вайрфреймов и проектирование взаимодействия, другие — исключительно на исследованиях. Люди тратят годы на приобретение и развитие навыков в выбранной сфере. Однако любое совершенствование в профессии начинается с освоения основополагающих принципов, которые мы рассмотрим в этой книге в контексте веб-дизайна.
Основными сферами визуального дизайна являются композиция, создание макета, цвет и типографика, а также то, как все эти элементы взаимодействуют между собой, создавая визуальную иерархию страницы. Мы рассмотрим основы верстки, в том числе принципы симметрии, и изучим макеты, основанные на распространенных паттернах чтения, выявленных исследователями. Что касается цвета, то нам предстоит вникнуть в принципы использования цветового круга и способы создания цветовой палитры. Даже инструменты, позволяющие сгенерировать цветовую палитру, не предусматривают руководства по выбору сочетаний цветов, это может привести к созданию слишком пестрых сайтов, которые проигрывают другим в изысканности.
Что касается пользовательского опыта, то эта сфера предусматривает огромное множество специализаций, но мы коснемся лишь информационной архитектуры и определения пользовательского сценария. Среди разработчиков, с которыми я общаюсь, очень востребовано понимание различных видов пользовательского тестирования и способов сбора обратной связи без большого бюджета. Кроме того, разработчиков часто интересует вопрос о том, как внедрить сбор обратной связи в процесс реализации проекта и научиться определять момент, когда продукт уже можно начинать тестировать.
1.2.1. Процесс разработки дизайна, рассматриваемый в книге
Процесс разработки дизайна, описанный в книге, является итеративным. Итеративный процесс — это непрерывный цикл выпуска продукта, в нашем случае веб-сайта или веб-приложения, и постепенное внесение изменений с целью его улучшения. Однако этот процесс работает и с проектами, которые не предполагают непрерывной доработки. В последнем случае он состоит из тех же этапов, просто они не являются непрерывными. Все этапы представлены на рис. 1.3.
Рис. 1.3. Итеративный процесс создания веб-дизайна или веб-приложения, описанный в данной книге, включает такие этапы, как определение проблемы, исследование пользователей, проектирование пользовательского опыта, разработка дизайна и построение, тестирование и оценка
Первым этапом, который мы рассмотрим, является этап исследования пользовательского опыта (UX-исследования), когда устанавливается и формулируется проблема клиента, которую необходимо решить путем создания сайта или веб-приложения. При первоначальном исследовании выясняется, что пользователю нужно от сайта, и определяется целевая аудитория. В зависимости от того, что именно вы создаете, на этом этапе вам может потребоваться убедиться, что проблема, которую вы решаете, действительно актуальна для пользователя.
Вторым этапом является проектирование пользовательского опыта, в рамках которого рассматриваются требования клиента и бизнеса к проекту, они объединяются с потребностями, выявленными на этапе исследования аудитории пользователей, и после этого формируется структура веб-сайта. Здесь закладывается основа для расположения визуальных элементов, которые будут использоваться на следующем этапе. Основное внимание при этом уделяется компоновке страниц, размещению контента и пользовательскому сценарию (то есть тому, как пользователи попадают из точки А в точку Б).
Третий этап включает в себя фазы разработки создания дизайна и программной разработки, которые предполагают применение элементов визуального дизайна, таких как цвет, типографика и планы анимации, и собственно написание кода. Я намеренно сгруппировала этапы именно так, поскольку большинство современных команд профессионалов, с которыми я сталкивалась, уже не работают изолированно, как раньше. Разработка может начаться после согласования структуры сайта на этапе проектирования пользовательского опыта. Визуальные решения, связанные с цветом, изображениями и типографикой, могут приниматься и корректироваться по ходу дела.
Четвертый этап делает этот процесс итеративным. Необходимо убедиться в том, что созданная система эффективно удовлетворяет потребности пользователей. Если это не так, надо возвращаться к началу процесса, чтобы выявить проблему и внести необходимые изменения. В зависимости от типа проекта можно добавлять новые функции и осуществлять итерации постоянно. Если речь идет о небольших или внештатных проектах (например, о разовой работе над сайтом интернет-магазина), то, скорее всего, сайт будет запущен, а затем уже будет понятно, что он функционирует и отвечает всем требованиям бизнеса. Когда сайт будет передан клиенту, тот может самостоятельно провести тестирование и оценку, убедиться, что сайт работает должным образом. Если выявятся проблемы, клиент сможет вернуться к началу и внести необходимые коррективы или произвести настройки.
Фазы этого цикла можно разделить на две категории: а) основы проектирования пользовательского опыта, к которым относится исследование, так сказать, вайрфрейминг проекта (то есть определение расположения и взаимосвязей между компонентами) и тестирование, и б) основы визуального дизайна: визуальные элементы накладываются поверх вайрфреймов, возведенных на этапе разработки пользовательского опыта, чтобы вдохнуть в сайт жизнь, привнести характер и иерархичность с помощью цветов, отступов между компонентами, типографики и анимации.
Основы проектирования пользовательского опыта
Пользовательский опыт — это не просто одна из составляющих проекта; его часто связывают с этапом разработки дизайна, однако он не ограничивается рамками только дизайна. Опыт пользователя сайта или приложения создается совокупностью бизнес-требований, особенностей дизайна и веб-разработки. В книге мы сосредоточимся на понимании целей и важности таких этапов, как исследование, планирование и создание вайрфреймов, которые мы рассмотрим в первых нескольких главах, а также прототипирование и тестирование в их взаимосвязи с веб-разработкой. Речь о ней пойдет в последних нескольких главах.
Из понятия «пользовательский опыт» можно дополнительно выделить, например, опыт разработчика, который подразумевает взаимодействие разработчика с продуктом. Однако при этом мы окажемся ограничены чрезмерно узкими и специфическими сценариями. Освоение базовой методологии проектирования пользовательского опыта поможет вам научиться создавать продукты, ориентируясь на разных пользователей, и понимать, какие еще виды опыта могут быть применимы к вашему сайту или приложению, если ваша целевая аудитория не ограничивается одними потребителями.
Хотя каждый выбор в ходе веб-разработки влияет на пользовательский опыт, мы остановимся на наиболее специфических технических решениях, принимаемых разработчиком, которые могут изменить визуальное восприятие сайта или приложения. Мы также рассмотрим решения, которые могут повлиять на опыт пользователей, не взаимодействующих с сайтом визуально. Осознание этих решений и их влияния поможет разработчикам лучше понять целевую аудиторию своего продукта и спроектировать более качественный опыт, ориентируясь на ее особенности.
Основы визуального дизайна
Дизайн — язык визуальной коммуникации, которому можно научиться. Фактически это способ решения проблемы или предоставления информации с помощью визуальных средств. Поняв его основы, можно овладеть инструментами для принятия дизайнерских решений и их обоснования. Когда речь заходит о дизайне, многие разработчики часто говорят о том, что они в нем не разбираются, поскольку либо не обладают творческими способностями, либо могут распознать хороший дизайн, но не знают, как создать его самостоятельно.
Прежде чем приступать к выбору шрифтов, цветов и способов компоновки элементов, необходимо определиться с основополагающими принципами дизайна, к которым относятся такие концепции, как близость, контраст, симметрия и выравнивание. Эти принципы крайне важно понять до начала этапа проектирования пользовательского опыта, поэтому в следующей главе мы начнем именно с них. Они являются основополагающими для установления взаимосвязей между расположением элементов страницы, построением иерархии и наполнением контента, который привлекает пользователей на сайт. Ознакомившись с этими принципами, вы сможете приступить к проектированию пользовательского опыта, прежде чем переходить к этапу разработки визуального дизайна, который предполагает работу с цветом, типографикой и анимацией.
Когда я спрашиваю разработчиков о том, с чем они испытывают наибольшие трудности, они чаще всего упоминают такие аспекты визуального дизайна, как теория цвета, выбор палитры и ее применение на сайте или в веб-приложении, типографика и верстка, в частности, вопросы создания хорошего макета. В следующей главе мы рассмотрим основные принципы дизайна в контексте разработки веб-сайта или веб-приложения. И только потом более подробно обсудим каждый из элементов дизайна. Умение сочетать такие элементы дизайна, как цвет, шрифт и пространство, и создавать с их помощью иерархию страницы и ее компоненты — это навыки, которые может освоить каждый вне зависимости о того, считает он себя творческой натурой или нет.
1.2.2. Профессиональные дизайнеры против умного дизайна
Как и веб-разработка, дизайн — область, предусматривающая множество направлений и специальностей. Эта книга не является заменой формальных или даже неформальных образовательных программ. Она также не может заменить опыт, накапливаемый в процессе работы в области дизайна. Ведь некоторые специалисты по дизайну сосредоточиваются на нишевых областях: на типографике и анимации, в то время как другие занимаются поддержкой библиотек компонентов и дизайн-систем.
Эта книга не сделает вас экспертом в области дизайна. Она не снабдит вас исчерпывающими знаниями обо всех его аспектах, включая логотипы и брендинг, она даже не предполагает особенно глубокого погружения в различные области дизайна и проектирования пользовательского опыта применительно к веб-сфере. Она не призвана превратить разработчиков в дизайнеров. Дизайн и веб-разработка представляют собой две взаимодополняющие и часто пересекающиеся области. На мой взгляд, понимание принципов дизайна полезно разработчикам в той же мере, в какой дизайнерам, разрабатывающим веб-приложения, полезно умение писать код.
1.2.3. Объединяем все вместе
Итак, в следующих главах вы узнаете об основополагающих принципах графического дизайна в контексте веб и научитесь использовать эти принципы для создания иерархии веб-страницы. После этого мы поговорим о процессе проектирования пользовательского опыта, о месте визуального дизайна в нем и о том, как эти знания соотносятся с процессом веб-разработки, что, как я уже показала выше, позволит вам повысить свою эффективность как разработчика.
