Основные навыки современного диджитал-дизайнера

Далее текст от лица автора

Что нужно знать дизайнеру, чтобы проектировать цифровые продукты

Самые важные навыки, которые я приобрёл за последние 5-10 лет, связаны с кодом, написанием текстов и дизайном. Все вместе они помогли мне стать всесторонне развитым создателем цифровых продуктов и оказались полезны, чтобы начать собственные проекты, в частности проекты типа «от 0 к 1», где нужно быстро запустить продукт. Необязательно быть экспертом в каждом из этих направлений, но они дополняют друг друга. Владение каждым из них поможет создавать много нового в будущих проектах.

Я написал эту статью преимущественно для самоанализа того, о чём я думаю и что часто использую на практике. Она также предназначена для людей с разным уровнем навыков/знаний, поэтому я старался детально объяснить концепции, которые могут показаться банальными некоторым из вас. Отдельные темы я наоборот затронул поверхностно, поэтому если вы что-то не поняли или вам нужны дополнительные разъяснения, напишите мне личное сообщение или письмо на электронную почту: tyler@angert.com. В статье нет чёткой последовательности, в которой вам следует развивать эти навыки, поскольку многие из них можно изучать параллельно, а некоторыми вы, возможно, уже владеете.

Создавайте для веба

Многие люди говорили об этом в прошлом, но веб имеет некоторые удивительные преимущества для запуска новых проектов, которые включают (но не ограничиваются):

• Сверхбыстрое распространение и обновление
• Кроссплатформенность
• Огромные экосистемы инструментов
• Всемирное сообщество

Круто, если вы создаёте игры, занимаетесь разработкой мобильных приложений или нативной разработкой*. Для этих направлений в дизайне существует множество наборов инструментов и платформо-ориентированных системных сред. Специалисты в этой области усиленно работают над созданием кроссплатформенных инструментов и проектов, управляемых сообществом, для обеих платформ (к таким можно отнести Unity и Flutter). Все они имеют свои преимущества, но для меня нет ничего лучше портативности, скорости запуска новых сайтов и использования веб-технологий для воплощения идей в жизнь.

*Примечание переводчика. Нативная разработка — создание продукта, который пишут на оригинальных языках программирования, созданных специально для выбранной платформы (для IOS или Android)

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

Существует также давление рынка, которое предполагает, что фокус на веб-технологиях принесёт долгосрочную выгоду. Например, развитие wasm, продвинутые браузеры и приложения для совместной работы становятся нормой.

Что это значит на практике?

• Изучите основы HTML и CSS. Их нетрудно освоить, но с помощью этих знаний вы станете экспертом и научитесь создавать сложные вещи. Языки разметки и стилей по-прежнему лежат в основе цифровых инструментов независимо от конкретного формата или языка (HTML, SwiftUI и т.д.)
• Изучите JavaScript и сделайте несколько прототипов без использования библиотек. Узнайте, что такое DOM и научитесь в нём работать. Выясните, как браузеры на самом деле обрабатывают код. Я предлагаю это потому, что не думаю, что вы должны полностью зависеть от конкретной библиотеки, чтобы сделать простой и интерактивный веб-продукт. Скорее всего, вам придётся изучить определенные библиотеки, например, D3.js для визуализации данных. Но вы можете создавать простые сайты, работать с SVG, использовать CSS-анимации и прочее без специальных инструментов, и всё это отображается в браузере по умолчанию
• Выберите одну современную UI-библиотеку, которую вы хотите освоить. React, Vue и Svelte — хорошие варианты. Обратите внимание на TypeScript, если сможете в нём разобраться, после того, как освоите базу

У меня нет конкретных рекомендаций относительно источников знаний, на которые стоит обратить внимание. Курс Дэна Абрамова и Мэгги Эпплтон под названием «Just JavaScript» замечательный. Там они разбирают основные ментальные модели работы JavaScript.

Я не включаю сюда базы данных, real-time приложения и всё, что связано с бэкендом, потому что инструменты для работы с ними постоянно меняются. Честно говоря, они являются вторичными по сравнению с основами программирования фронтенда и создания простых статичных сайтов. Тем не менее, базовое моделирование данных, взаимодействие с REST и GraphQL API, понимание websockets и webhooks имеет первостепенное значение, если вы собираетесь углубиться в веб-разработку.

В качестве бессовестной рекламы я бы также посоветовал завести аккаунт в Replit, ознакомиться с Vercel, GitHub и git, или просто посмотреть семестровый курс MIT под названием «The Missing Semester of Your CS Education». Есть множество других вещей, связанных с вебом, о которых я мог бы сказать здесь (например, понимание HTTP, создание и проектирование API и т.д.), но лучше я расскажу о тех навыках, которые в большей степени влияют на мою повседневную жизнь.

Основные концепции вычислений

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

Примитивы и абстракции

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

Хорошие абстракции помогают:

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

В Lego примитивы — отдельные кирпичики. Вы соединяете их вместе, чтобы построить двери, дома, оси, машины и другие объекты, которые можно повторно использовать в разных наборах Lego. Таким образом, набор Lego — это абстракция поверх отдельных кирпичиков Lego. Мы видим подобные модели повсюду, и под таким углом полезно посмотреть на всё, что нас окружает: город, приложение, спор. То есть разложить модель на основные компоненты и понять, как они взаимодействуют друг с другом.

Система : Примитивы : Абстракции

Лего : Кирпичики : Здания

Scratch : Блоки : Игры

Photoshop : Слои : Дизайн

Музыка : Ноты : Аккорды

Физика : Атомы : Молекулы

Школа : Классы : Ступени

Язык : Слова : Предложения

Программирование : Целое число : Функции

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

Функции и ввод/вывод данных

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

Теперь возьмём распознаватель изображений. Например, приложение, которое скажет вам, является ли животное на картинке собакой или нет. Здесь входящий сигнал — изображение животного, функция — приложение, которое оценивает, собака это или нет, а выходной сигнал — результат: да или нет.

В системе обработки данных концепции, когда исходные данные попадают в систему, она их обрабатывает, а затем результат используется в других процессах, распространены повсеместно. Самые яркие примеры — файловый ввод/вывод, unix pipes, модель «клиент/сервер», REPLs и даже чат-боты и google-поиск. Всем знакома концепция маленького текстового поля, в котором вы набираете текст, нажимаете ввод и получаете список результатов. Работа браузера строится на похожем механизме. Когда вы вводите URL, то получаете результат в виде веб-страницы. Все модные ML-инструменты, которые вы видите сегодня, генерирующие изображения/видео по текстовым подсказкам, в конечном итоге являются функциями, правда очень сложными.

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

Другие темы и мозговые штурмы

Существует множество концепций, с которыми я время от времени сталкиваюсь в работе. Они не ключевые и, возможно, немного более продвинутые. Ниже неполный список того, о чём я ещё не упомянул:

• Рекурсия
• Клеточные автоматы
• Парсеры (синтаксический анализаторы) и интерпретаторы
• Системы типов
• Поиск в глубину, поиск в ширину, общие стратегии поиска
• Неизменяемость
• Императивное и декларативное программирование
• Графы, деревья
• Конечный автомат
• Предсказание последовательностей: цепи Маркова, рекуррентные нейронные сети (RNNs), преобразователи
• ER-модель (модель «сущность — связь»), связи между типами сущностей «один к одному», «один ко многим», «много к многим»
• Шейдеры и графика в режиме реального времени
• Программирование на видеокартах GPGPU (неспециализированные вычисления на графических процессорах)

Основы графического, визуального и информационного дизайна

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

• Информационная иерархия, чтобы организовать данные в таком виде, в котором пользователи будут легко их усваивать
• Композиция, чтобы правильно визуализировать информационную иерархию
• Цвет, чтобы понимать, как направить визуальное внимание пользователя на печатных или экранных материалах, и разбираться в стандартах доступности
• Типографика, чтобы знать, как подбирать различные шрифты, понимать уровень их читаемости и связь с цветом и композицией

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

Рисование, составление диаграмм и создание набросков помогают наглядно выражать мысли. Умение выражать свои мысли визуально — важнейший навык для дизайнеров. Но составление понятных диаграмм, графиков и карт также чрезвычайно полезно в любой области. Интерактивность цифровых инструментов — ещё один дополнительный слой сложности, но важны и актуальны основы. Люди строят многомиллиардные бизнесы, используя инструменты визуализации, построения диаграмм и презентаций. Powerpoint и Keynote предназначены для создания общих презентаций, BioRender — для множества научных диаграмм, а FigJam — для проведения совместных мозговых штурмов.

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

Письмо как инструмент

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

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

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

Или же я часто использую скобки для организации списков, как в коде, чтобы можно было легко отличить [группы, от, элементов]. Если вы научитесь правильно структурировать данные в списки, что является разновидностью информационного дизайна, это будет действительно полезно для всех видов коммуникации, например, умения:

• писать электронные письма понятным языком
• перечислять этапы (например, описывать маршрут к определённому месту или писать рецепт)
• объяснять то, как работают списки

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

Аналогии

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

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

• Мне приходится уточнять, о чём я думаю, поэтому это помогает мне сосредоточиться на том, что я хочу сказать
• Мои друзья узнают больше о том, чем я занимаюсь, без необходимости разбираться в бессмысленных для них понятиях
• Если мои друзья хотят говорить со мной на профессиональном языке, мы можем это сделать. Но у них нет необходимости разбираться в чём-то сложном. Попутно замечу, что мне нравится проект под названием Nutshell. Он позволяет легко создавать «расширенные объяснения», которые помогают людям глубже погрузиться в тему, но при этом не перегружает их большим количеством деталей в самом начале
• Это помогает провести аналогии с другими вещами и сделать разговор более развёрнутым. Если моя мама сможет связать теорию чисел со своей жизнью и высказать уникальную точку зрения на этот счёт, я думаю, это гораздо интереснее, чем если бы я прочитал ей сложную лекцию, используя непонятные для неё термины

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

Практические примеры

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

Например, вы объясняете, что такое Snapchat человеку, который никогда раньше не видел смартфон и, возможно, знаком только с аналоговыми камерами. Не стоит говорить: «Это просто приложение для отправки исчезающих фотографий друзьям». Что такое приложение? Что значит «исчезает»? Как оно отправляет фотографии другу?

Логичнее было бы сказать: «Это устройство похоже на камеру, которая посылает фотографии друзьям по почте. Подобно тому, как в Polaroid фотографии проявляются практически моментально, здесь всё наоборот, отправленные фотографии исчезают после открытия. Они исчезают, потому что предназначены для личного пользования и их можно увидеть только на мгновение».

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

А что дальше?

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