Поглощающие детали [devouringdetails]

Devouring Details Язык: английский 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-папку со всем исходным кодом для конкретного примера. Можно ли использовать на телефоне? В некотором роде. Лучше всего просматривать на компьютере, потому что на экране мобильного устройства недостаточно места, чтобы уменьшить многие прототипы с отладочными аннотациями до удобного для просмотра размера.Однако вы можете прочитать весь текст на мобильном устройстве и просмотреть все видео, но некоторые интерактивные элементы будут работать только на компьютере. This is not a course in the sense that it is not linearly progressive. You won’t solve code challenges, answer quizzes, or follow step-by-step tutorials. Instead, you’ll interact with prototypes on a custom platform and be exposed to details that I pay attention to. Two column layouts offer better navigation through long-form content Each chapter is digestible with bite-sized efforts through a scrollable experience that doesn't ask for too much at once. I myself use this as a reference manual that I periodically revisit while designing. I would often return to copy some code or to reinforce my understanding of a concept. Structure Devouring Details is split into 3 units—Principles, Prototypes, and Resources. Principles explores a design concept in depth with different examples from custom interfaces and production apps. Inferring intent Interaction metaphors Ergonomic interactions Simulating physics Motion choreography Responsive interfaces Contained gestures Drawing inspiration Prototypes are deep dives into a single component with references to Principles and Resources. Everything you see here includes downloadable source code. Line Minimap Scroll Strip Radial Timeline Morph Surface Line Graph Next.js Dev Tools Logos Carousel Motion React Blur Reveal Time Machine Resources contains useful code snippets, insights into my design process, private bookmarks, a downloadable component library, and more. Behind scenes Code snippets Design workflow Component library Public bookmarks Frequent questions Design philosophies The registration is open until September 16 after which it will temporarily close until the next release. Upon registering, you'll receive immediate access to: