Devouring Details — это интерактивное справочное руководство для дизайнеров, интересующихся взаимодействием, содержащее 20 глав с 20 загружаемыми компонентами React.
Здравствуйте, меня зовут Рауно. Я работаю штатным инженером-дизайнером в Vercel над нашей платформой, системой дизайна, маркетинговыми страницами и инструментами разработки Next.js. Ранее я работал в The Browser Company, где занимался проектированием и созданием браузера Arc.
Я написал известные эссе о дизайне, такие как «Невидимые детали интерактивного дизайна» , и выпустил программное обеспечение с открытым исходным кодом, такое как cmdk , которое загружается миллионы раз в неделю и используется в интерфейсах командных меню самых современных приложений для повышения продуктивности в Интернете.
Платформа
Прежде чем приступить к работе над этим проектом, я подумал: «А чему я научился сам?» Я пытаюсь воплотить идею и понимаю, что на практике она никуда не годится. После достаточного количества итераций, а иногда и случайно, я дохожу до того момента, когда мне становится по-настоящему хорошо и я вдруг начинаю понимать, почему это никуда не годится.
«Поглощающие детали» — это ваш кратчайший путь к моментам, когда вы чему-то учитесь.
Это не курс в том смысле, что он не предполагает линейного прогресса. Вы не будете решать задачи по программированию, отвечать на вопросы тестов или следовать пошаговым инструкциям. Вместо этого вы будете взаимодействовать с прототипами на специальной платформе и узнавать подробности, на которые я обращаю внимание.
Каждая глава легко усваивается благодаря возможности прокрутки, которая не требует от вас слишком многого.
Я сам использую его в качестве справочного руководства, к которому периодически возвращаюсь при разработке. Я часто возвращался к нему, чтобы скопировать какой-нибудь код или лучше понять концепцию.
Для кого?
Для дизайнеров и инженеров. Приведено множество примеров кода. Вы можете скачать многие интерактивные компоненты, созданные с помощью React, Tailwind и Motion React (предыдущее название. Framer Motion). Примеры кода предполагают наличие некоторых знаний о веб-экосистеме, React и Motion React.
Тем не менее, если вы не знакомы с этими инструментами, содержание не покажется вам непонятным. Концепции и примеры кода могут быть применены на другом языке или платформе, например Vue, SwiftUI, UIKit, из-за сжатого характера декларативной модели программирования.Черт возьми, в наши дни вы, вероятно, могли бы даже применить полученные знания в инструментах без кода, таких как Figma Make, фреймерные сайты или оригами.
Я предлагаю примеры кода на React, потому что это инструмент, в котором я разбираюсь лучше всего, так что в конечном итоге кто-то, разбирающийся в React и интересующийся дизайном, получит от этого максимальную отдачу.
Как это использовать?
По моему опыту, никто не сможет развить ваши навыки за вас. Я советую вам использовать DD в качестве справочного руководства, к которому вы будете периодически обращаться, а также скачивать код для того, что вам нравится, и изменять значения или удалять строки, чтобы посмотреть, что произойдёт.
Например, я иногда возвращаюсь сюда, чтобы скопировать компонент или поделиться ранее сформулированной проблемой, связанной с взаимодействием.
Какой формат?
На платформе вы найдёте макет с тремя колонками, который включает в себя боковую панель навигации, серию прокручиваемых слайдов, на каждом из которых представлен отдельный прототип, скриншот или видео.
Для интерактивных прототипов вы можете просмотреть код, а также скачать сжатую ZIP-папку со всем исходным кодом для конкретного примера.
Можно ли использовать на телефоне?
В некотором роде. Лучше всего просматривать на компьютере, потому что на экране мобильного устройства недостаточно места, чтобы уменьшить многие прототипы с отладочными аннотациями до удобного для просмотра размера.Однако вы можете прочитать весь текст на мобильном устройстве и просмотреть все видео, но некоторые интерактивные элементы будут работать только на компьютере.
Структура
«Поглощающие детали» разделено на 3 части: Принципы, Прототипы и Ресурсы.
Принципы подробно рассматривают концепцию дизайна на различных примерах пользовательских интерфейсов и готовых приложений.
- Вывод о намерении
- Метафоры взаимодействия
- Эргономические взаимодействия
- Имитирующая физика
- Хореография движения
- Адаптивные интерфейсы
- Сдержанные жесты
- Черпая вдохновение
Прототипы — это подробное описание одного компонента со ссылками на Принципы и Ресурсы. Всё, что вы здесь видите, доступно для скачивания в виде исходного кода.
- Линейная Миникарта
- Полоса прокрутки
- Радиальная Временная шкала
- Трансформировать Поверхность
- Линейный график
- Next.js Инструменты разработки Бесплатно
- Карусель Логотипов
- Реакция на Движение
Ресурсы содержат полезные фрагменты кода, информацию о моём подходе к дизайну, личные закладки, загружаемую библиотеку компонентов и многое другое.
- За кулисами Бесплатно
- Фрагменты кода
- Рабочий процесс проектирования
- Библиотека компонентов
- Общедоступные закладки
- Часто задаваемые вопросы
- Философия дизайна
- Руководство по React
В настоящее время регистрация закрыта и возобновится в сентябре.
А пока вы можете присоединиться к списку ожидания и получать уведомления, когда регистрация снова откроется.
