UI-дизайн

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

Делюсь личной подборкой книг по веб-дизайну. Здесь практичный комплект материалов для увлекающихся веб-дизайном: стратегия и тактика организации работы и развития, тонкости проектирования сайтов и веб-проектов, материалы о сторителлинге и айдентике, а также советы по переговорам (в том числе на международном рынке). Однажды помогли стать продуктивнее и точнее в веб-проектах.🌿👇
Иллюстрация Evelina Bukhanets: https://dribbble.com/shots/17407273-Stylised-illustration

Веб-дизайн штука мультидисциплинарная. Если вы планируете серьезно заниматься веб-дизайном, то приготовьтесь побывать во множестве ролей и попробовать разные фронты работ: проектирование и дизайн интерфейсов, создание фирменного стиля, работу с клиентами, продажи и переговоры, копирайтинг и сторителлинг, исследования аудитории (UX-исследования), поле стратегии и брендинга и это даже не финал списка.

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

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

Траектория из книг комплексная — вас ждет плотная и ритмичная прокачка по всем аспектам дизайна сайтов: профессия и международная система работы, стиль с характером и эстетика, психология для дизайнеров, основы проектирования интерфейсов, копирайтинг и знакомство с технологиями разработки сайтов👇👇👇

Как получить максимальную отдачу от книг по веб-дизайну

Мне нравится читать книги в бумажном виде. Забираюсь с ногами в кресло с пледом и чаем под боком и устраиваюсь там с книжкой. Книги, которые важно прочитать, обязательно держу перед собой на столе, чтобы все время мелькали перед глазами — работает как напоминалка, которую нужно дожать и внедрить в практику.

Цифровых книги тоже люблю, но читать их сложнее и поэтому они теряются где-то в Dropbox, на планшете или в аккаунтах интернет-магазинов c названием ‘.../drive/03_resources/books/design/the-big-book-of-web-design-by-terry-felke-morris.pdf‘.

Книжка для меня – это инвестиция в развитие. Цена хорошей цветной книги о дизайне 2000 рублей. Оплата здесь ключевой момент. У того, что вы купили будет особенный вкус, который вы лучше запомните, проверяла! Плюс к бумажной книге можно делать Заметки, отмечать ключевые мысли стикерами, чтобы потом можно было к ним вернуться.

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

В общем держите мой список топ-книг по веб-дизайну, которые крайне рекомендую.

1. Бесплатное руководство по Основам Web-дизайна, Рафаль Томаль

Оригинальное название: Intro to Web Design.

Автор емко и клево раскрыл культуру современного веб-дизайна: с чего начинался дизайн сайтов, кто такой веб-дизайнер, как подойти к тренировке навыков и что такое современный веб-дизайн.

Руководство по Основам Web-дизайна, Рафаль Томаль

Моя любимая цитата из руководства по Основам Web-Дизайна от Рафаля Томаля:

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

Где найти: Официальный сайт

2. Эмоциональный веб-дизайн, Аарон Уолтер

Оригинальное название: Designing for emotion.

Книга про основы разработки айдентики в диджитал по методу «Бренд как персонаж». Автор подробно разбирает алгоритм, который помогает выразить характер и ценности бренда через визуальные и поведенческие паттерны. Авторский алгоритм создания айдентики в диджитал Аарон подкрепляет личным опытом в MailChimp и множеством примеров успешных веб-проектов.

Эмоциональный веб-дизайн, Аарон Уолтер

На момент создания книги, автор был ведущим дизайнером MailChimp.com — сервиса, которым до сих пор вдохновляются многие дизайнеры/проектировщики как ярким примером качественного и успешного SaaS-решения. Сейчас Аарон работает на руководящей должности в InVisioin Studio и популяризирует проектирование и дизайн.

Моя любимая цитата из книги Эмоциональный веб-дизайн | Аарон Уолтер:

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

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

Где найти: Лабиринт, OZON, МИФ

3. Онлайн влияние, Жорис Гроэн и Бас Вютерс

Оригинальное название: Online influence. Boost your results with proven behavioral science

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

Онлайн влияние, Жорис Гроэн и Бас Вютерс

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

Моя любимая цитата из книги Онлайн влияние:

«Проектирование поведения»… Нам тоже понадобилось некоторое время, чтобы привыкнуть к этой формулировке. Обычно создают дизайн объявления, сайта, продукта. Но «проектировать поведение людей» – это звучит так, будто вы и в самом деле можете заставить человека делать все, что вам угодно. Однако создатель дизайна поведения Б. Дж. Фогг нашёл гораздо лучшее определение. Для него дизайн поведения означает побуждение людей сделать то, что они уже хотят сделать.

Тут вы, возможно, запротестуете: погодите-ка, но если люди уже хотят что-то сделать, к чему их убеждать? Но именно здесь и кроется проблема. Тот факт, что мы чего-то хотим, не означает, что мы автоматически это сделаем.

Где найти: Лабиринт, ЛитРес, ArtLebedev

4. Кради как художник, Остин Клеон

Оригинальное название: Steal Like an Artist: 10 Things Nobody Told You About Being Creative

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

Кради как художник, Остин Клеон

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

Моя любимая цитата из книги Кради как художник:

Начинайте копировать то, что вам нравится. Копируйте. Копируйте. Копируйте. Копируйте. И найдете себя». © Йоджи Ямамото, дизайнер одежды.

Мы не знаем, откуда берутся идеи. Ясно только, что не из ноутбука. © Джон Клиз, актер

Крадите все, что вступает в резонанс с вашим воображением или подпитывает его. Жадно поглощайте все впечатления и явления: старые и новые фильмы, музыку, книги, картины, фотографии, стихи, сны, случайные разговоры, архитектуру, мосты, уличные указатели, деревья, облака, потоки воды, свет и тени. И крадите лишь то, что находит живой отклик в вашей душе. Если делать так, ваша работа — ваша кража — будет оригинальной. © Джим Джармуш

Где найти: Лабиринт, OZON, МИФ

5. Веб-дизайн. Элементы опыта взаимодействия, Гарретт Джесс

Оригинальное название: The Elements of User Experience

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

Веб-дизайн. Элементы опыта взаимодействия, Гарретт Джесс

Пять уровней Гаррета — это уже канон поэтапного проектирования среди веб-дизайнеров, UX/UI-дизайнеров и проектировщиков интерфейсов.

Моя любимая цитата из книги Веб-дизайн. Элементы опыта взаимодействия:

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

Где найти: Символ-Плюс, OZON, ЛитРес

6. Сначала мобильные!, Люк Вроблевски

Оригинальное название: Mobile First

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

Сначала мобильные!, Люк Вроблевски

Люк Вроблевски — сооснователь и руководитель социальной сети Bagcheck, которая была приобретена компанией Twitter Inc. всего через девять месяцев после создания. До этого он занимал пост директора по дизайну в компании Yahoo!.  Кроме того, Люк получил опыт работы старшим дизайнером пользовательских интерфейсов в eBay Inc, где руководил разработкой дизайна потребительских продуктов (таких как eBay Express и Kijiji), основать компанию LukeW Ideation & Design, предоставляющую консультации в области продуктовых стратегий и дизайна, и выступить сооснователем Ассоциации интерактивного дизайна (IxDA).

Где найти: Лабиринт, OZON, МИФ

7. Slide:ology, Нэнси Дуарте

Оригинальное название: slide:ology: The Art and Science of Creating Great Presentations

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

Slide:ology, Нэнси Дуарте

Практичная книга о культуре визуального сторителлинга от основателя Duarte Design, одной из крупнейших компаний в Кремниевой долине, занимающихся дизайном, и общепризнанного лидера в сфере разработки и создания презентаций.

Моя любимая цитата из книги Slide:ology:

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

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

Где найти: Лабиринт, OZON, МИФ

8. Дизайн. Форма и хаос, Пол Рэнд

Оригинальное название: Design, Form, and Chaos

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

Дизайн. Форма и хаос, Пол Рэнд

Пол Рэнд — выдающийся американский арт-директор и дизайнер. Влияние Рэнда на индустрию дизайна огромно. Благодаря его работе в области рекламы и графики профессия дизайнера стала значимой и ценной для бизнеса, дизайнеры перестали восприниматься как обычные оформители.

Пол Рэнд стал известен благодаря работе над логотипами крупных компаний. Среди его клиентов IBM, UPS, Enron, Morningstar, Westinghouse, ABC, и проект Стива Джобса NeXT.

Моя любимая цитата из книги Дизайн. Форма и хаос:

Дизайн — это больше, чем просто упорядочивание и компоновка визуального материала. Дизайн — это привнесение ценностей и смыслов, просвещение, упрощение, разъяснение, преобразование, облагораживание, преувеличение, убеждение и, возможно, даже развлечение. Дизайн превращает прозу в поэзию. Дизайн расширяет наше восприятие, умножает наш опыт и обостряет наше «зрение». Дизайн есть плод чувства и разума, продукт идеи, возникшей в голове дизайнера, которая (как надеется дизайнер) передастся зрителю и сработает в его сознании. © Из главы «Форма+содержание».

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

Где найти: OZON, Читай город, ArtLebedev

9. Воплощение идей, Скотт Белски

Оригинальное название: Making Ideas Happen: Overcoming the Obstacles Between Vision and Reality

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

Воплощение идей, Скотт Белски

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

Моя любимая цитата из книги Воплощение идей:

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

Где найти: Лабиринт, OZON

10. Одностраничный маркетинговый план. Как найти новых клиентов, заработать больше денег и выделиться из толпы, Диб Аллан

Оригинальное название: The 1-Page Marketing Plan: Get New Customers, Make More Money and Stand Out from the Crowd

Книга поможет увидеть ценность дизайна для развития бизнеса. Книга тренирует собирать ТЗ от маркетологов на один лист A4. Автор упаковал международных и многоотраслевой опыт в лаконичный и наглядный курс по реализации маркетинговой стратегии.

Одностраничный маркетинговый план. Как найти новых клиентов, заработать больше денег и выделиться из толпы, Диб Аллан

Пригодится для погружения в основы онлайн-маркетинга и для работы с клиентами из малого и среднего бизнеса. Дизайн — здесь часть плана. Автор книги Аллан Диб — предприниматель, организатор нескольких успешных стартапов, бизнес-тренер и маркетолог.

Моя любимая цитата из книги Одностраничный маркетинговый план:

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

Где найти: OZON, ЛитРес, ArtLebedev

11. Комикс-путеводитель по HTML, CSS и WordPress, Нейт Купер

Оригинальное название: A Comic Guide to HTML, CSS, and WordPress

Книга поможет понять мышление разработчиков и начать смелее с ними совместно работать. Здесь игровой формат погружения в HTML, CSS и WordPress. Автор увлекательно погружает в инженерно-железную сторону воплощения сайта.

Комикс-путеводитель по HTML, CSS и WordPress, Нейт Купер

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

Моя любимая цитата из книги Комикс-путеводитель по HTML, CSS и WordPress:

Когда ты поймешь, как сделать обучение интересным, оно будет приносить тебе радость.

Где найти: Лабиринт, OZON, МИФ

12. HTML и CSS. Разработка и дизайн веб-сайтов, Джон Дакетт

Оригинальное название: HTML and CSS: Design and Build Websites

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

HTML и CSS. Разработка и дизайн веб-сайтов, Джон Дакетт

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

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

Где найти: Лабиринт, OZON, Эксмо

13. Визуальное мышление. Как «продавать» свои идеи при помощи визуальных образов, Дэн Роэм

Оригинальное название: The Back of the Napkin

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

Визуальное мышление. Как «продавать» свои идеи при помощи визуальных образов, Дэн Роэм

Автор тренирует применяют следующую последовательность действий: собери всё, разложи перед собой → промаркируй и сгруппируй → вникни и зарисуй общую картину → покажи и объясни другим.

Моя любимая цитата из книги Визуальное мышление:

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

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

Где найти: Лабиринт, OZON, МИФ

14. Бизнес без MBA: самые важные знания о бизнесе для тех, кто начинает собственное дело, Тинькофф

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

Бизнес без MBA: самые важные знания о бизнесе для тех, кто начинает собственное дело, Тинькофф

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

Моя любимая цитата из книги Бизнес без MBA:

Держать в голове все отсрочки и предоплаты по одному проекту еще как-то можно. Но когда проектов десятки, нужно их как-то учитывать и контролировать. Люди придумали записывать, кто, сколько, когда будет платить. Если записывают, как двигались деньги в прошлом, это называют отчетом о движении денежных средств — ОДДС (еще иногда — cashflow). Если планируют на будущее — это называют платежным календарем.

Кассовый разрыв — это когда надо кому-то заплатить, а денег физически нет. Кассовый разрыв — не страшно, если у вас все подчситано. 

Сервис — это работа с ожиданиями. Поэтому главный грех клиентского сервиса — не грубость, не хамство и даже не медленная работа. Главный грех — непредсказуемость.

Где найти: Лабиринт, OZON, ЛитРес, Читай город

15. Карта культурных различий. Как люди думают, руководят и добиваются целей в международной среде, Эрин Мейер

Оригинальное название: The Culture Map: Breaking Through the Invisible Boundaries of Global Business

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

Карта культурных различий. Как люди думают, руководят и добиваются целей в международной среде, Эрин Мейер

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

Если вам интересен иностраный рынок для продвижения, можете начать его изучение с консультации в одном из российских агенств, которые занимаются продвижением сайтов в США и Европе.

Автор книги Эрин Мейер, преподает в The Business School for the World | INSEAD — — французская бизнес-школа и исследовательский институт. Кампусы школы расположены в Европе (Франция), Азии (Сингапур) и на Ближнем Востоке (Абу-Даби); исследовательский центр расположен в Израиле. INSEAD близка по духу к Harvard Business School.

Моя любимая цитата из книги Карта культурных различий:

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

Где найти: OZON, ЛитРес, Читай город, ArtLebedev

Выводы и рекомендации

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