Далее текст от лица автора
Что нужно знать дизайнеру, чтобы проектировать цифровые продукты
Самые важные навыки, которые я приобрёл за последние 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 может существенно помочь нам в межкультурном общении: легко создавать эффективные примеры и аналогии, чтобы иметь возможность объяснять концепции людям из разных стран.
А что дальше?
Всё зависит от вас! Если вы только начинаете заниматься дизайном или разработкой, найдите время, чтобы углубиться в любую из этих областей. Если вы хотите учиться более неформально, просто пишите, найдите произведения, которые вам нравятся, читайте о компьютерных науках, создавайте проекты и развлекайтесь. Это те виды навыков, которые вы можете хорошо освоить на своё усмотрение, если будете уделять достаточно времени занятиям, которые вам нравятся и связаны с ними. Но я, наверное, напишу ещё одну статью в блоге, в которой будет немного больше официальных рекомендаций в отношении ресурсов, курсов и учебных программ на эту тему.
Обсуждение
Похожее
Табачный миф в рекламе. Как заставить людей курить
3 шага к хорошему тексту в интерфейсе
Проектируем фильтрацию листинга товаров в приложении