Designer+Developer Workflow: Head-Down Work

Following up on the video Dan and I recorded that shows how we collaborate as designer and developer, I recorded a video of me doing a bit of head-down development work.

Dan and I mention in our first video that we work extremely close to one another, but that doesn’t mean we’re constantly on a Zoom call doing all of our work in tandem in real time. We still need our own time to explore, set up some architecture, and do some front-end prep chef work. So that’s what this video is. Check it out here:

Some of the topics I cover in the video:

• An update to my vanilla Pattern Lab starter kit
• Sticky Smooth Active Nav
• Treating development as design
• Stealing Your Way to Original Designs
• Frontend Guidelines Questionnaire
• Sass mixins
• Where to write CSS rulesets
• Pseudo-patterns in Pattern Lab
• Working with dynamic data
• Single declaration margin declarations
• Multi-Line Padded Text
• Avoiding grandchild selectors in BEM
• color: inherit

I want to stress that the purpose of this head-down work is so that me and Dan can have another conversation about this design once I’ve roughed out the basic shape of the page. The idea isn’t for Dan or me to go away for days and only touch base when we have high-fidelity, polished work to show. The work produced on our own should be the minimum amount of work required to have a thoughtful conversation about where to take the design.

Hope you enjoy! If you find this valuable, let me know and me and (hopefully) Dan can record more.