Saved

Design Engineers at Vercel blend aesthetic sensibility with technical skills. This allows us to deeply understand a problem, then design, build, and ship a solution autonomously.The team is made up of people with a wide array of skills and a lot of curiosity. We constantly experiment with new tools and mediums. This multidisciplinary approach allows the team to push what’s possible on the web.

Design Engineers care about delivering exceptional user experiences that resonate with the viewer. For the web, this means:Delightful user interactions and affordancesBuilding reusable components/primitivesPage speedCross-browser supportSupport for inclusive input modes (touch, pointers, etc.)Respecting user preferencesAccessible to users of assistive technology

Being part of the Design team gives Design Engineers the autonomy and ability to work on things that would often get deprioritized in an Engineering backlog.

The team puts resources towards polished interactions, no dropped frames, no cross-browser inconsistencies, and accessibility. Examples of design-led projects are:Vercel’s Geist font: A Sans and Mono font. An interactive playground to see every glyph and try the font.Vercel’s design system documentation: An interactive docs playground used by engineers across the company to ship Vercel.Vercel’s Design Team homepage: An exploratory page for testing new web techniques and providing design resources.Delighters in the Vercel Dashboard: Features in the Vercel Dashboard that bring it to life and delight the user.

While no individual is expected to have all the skills, the team collectively is able to execute on ambitious designs because we can:Design in FigmaDesign in codeWrite production codeDebug browser performanceWrite GLSL shadersWrite copyCreate 3D experiences with Three.jsCreate 3D models/scenes in BlenderEdit videos using CGI and practical camera effects

You can see our team’s work across Vercel:Creating and maintaining components for the internal design system used on everything from Vercel.com to the Vercel Toolbar and the Next.js documentation.Websites like the Next.js Conf website and Vercel’s product pages.Product work and docs for Vercel and Next.js.Building proof of concepts for branding and marketing.Improving the accessibility of all Vercel web properties.

The products that we build contain complex flows and highly interactive elements. As a result, there's so many important decisions that we need to make. SwiftUI helps by quickly surfacing all of those important details that need your attention, for example, how an image should look when it's loading or how a button appears when it's pressed. These are the types of things that make a product feel complete. They're easily hidden in static design tools but are quickly surfaced when working in a dynamic tool like SwiftUI.That's because SwiftUI makes it easy to build your designs on device. In doing this, you gain a more complete understanding of what you're making. Separate parts now interact together, and you can begin to evaluate the experience as a whole. This process quickly reveals what's working in your design and what still needs attention or polish. On Maps, we've found this to be tremendously helpful.

So when ex-Telltale Games designer and writer Sean Vanaman announced last month that the first game from Campo Santo, his new video game development studio, was "being both backed by and made in collaboration with the stupendous, stupidly-successful Mac utility software-cum-design studio slash app/t-shirt/engineering company Panic Inc. from Portland, Oregon," it wasn't expected, but it wasn't exactly surprising, either. It was, instead, the logical conclusion of years-long friendships and suddenly aligning desires.

"There's a weird confluence of things that have crisscrossed," he said. "One is that we're lucky in that Panic is the kind of company that has never been defined by a limited mission statement, or 'We're the network tool guys' or anything like that. I mean, we made a really popular mp3 player. Then we kind of fell into network tools and utilities, but we've always done goofy stuff like our icon changer and these shirts and all that other stuff. "I kind of love that we can build stuff, and the best reaction that we can get when we do a curveball like this is, 'That's totally weird, but also that totally makes sense for Panic.'"

"To me," Sasser said, "when you have actually good people who are more interested in making awesome things than obsessing over the business side of things or trying to squeeze every ounce of everything from everybody, then that stuff just goes easy. It's just fun. The feeling that you're left with is just excitement.

Not all design work is done in code, prototyping tools, or sketches. Likewise, not all engineering work is done in code or technical diagrams. Natural language, text, and conversations should be some of your primary mediums for creative work.

one of the most important sub-skills for writing and conversation as a design medium is learning how to create great analogies. Douglas Hofstadter thinks that analogies are actually the core of cognition, which I buy.

the web has some amazing advantages for launching new projects, which include (but aren’t limited to): Super fast distribution and updates Cross platform Huge tooling ecosystems Enormous, worldwide community If you’re into games, awesome! If you’re into mobile or native development, that’s cool too. There are lots of platform-specific toolkits and environments to make those. There’s also a lot of effort in creating cross platform tools and community-driven projects for both domains (like Unity and Flutter). They all have their advantages, but to me, nothing beats the portability and speed of launching new websites and using web tech to get ideas out the door.

using web tech for 80-90% of my projects has a lot of skill transfer effects. Since I’m using similar tools for lots of different projects, I can still refine my core skillset no matter what I’m making. If I’m making a drawing tool concept, a game, or a text editor— I’ll can still probably build all three with React. Of course there are specific libraries or APIs I might need to learn to make each kind of project, but there’s enough in common between all the projects that I can focus on the new content instead of yakshaving and deliberating over unnecessary details.

There are also market pressures that imply focusing on web will have long term payoff, like the rise of wasm, new browsers, and collaborative apps becoming the norm.

You can look at an interface and see it as a clearly signposted user journey you should follow. Or you can see it as a collection of functions and affordances to repurpose. As raw material, rather than a guided path.