About David Luhr
I’m currently UX Development Manager at DockYard, a fully-remote digital product agency, where I lead UX development and product design teams. I was previously a UX Developer and worked closely with design, engineering, and QA teams to build complex and accessible UI. My projects have centered on building and maintaining robust design systems and architecting performant markup and styles that scale.
Before DockYard, I was Senior Web Designer and then UX Lead at Westminster College, in Salt Lake City, Utah. I oversaw Westminster’s UX design, front-end development, accessibility, content strategy, and web governance. In these roles, I sketched, mocked-up, prototyped, coded, and user-tested designs. I also conducted user research to inform information hierarchy and UI design. These cumulative efforts produced a 15% increase in academic applications and a 22% drop in global average bounce rate.
About this site
My portfolio site is a showcase of my favorite tools and approaches, with a focus on accessibility and simplicity that doesn’t compromise on polished visuals.
I used Figma for the design, and the evolving design files are open-source for public viewing. My design process focuses on componentization with a design system structure based on Brad Frost’s Atomic Design.
On the styling side, I opted for a single CSS stylesheet without any pre- or post-processor dependencies, and took advantage of CSS custom properties (variables) and CSS Grid throughout. I faithfully followed BEM methodology for class naming, save for some instances of algorithmic layout inspired by Every Layout’s Stack component. To optimize performance, I progressively enhance the typography to use variable fonts if they are supported.
I had an opportunity to employ some of my favorite accessibility and usability patterns. All interactive elements have custom, dedicated focus styles and are fully keyboard accessible. Card elements use Inclusive Component’s pseudo-content trick to ensure link text is unique. The light and dark theming detects the user’s preferred OS color scheme to provide a sensible default, while still allowing for customization. For elements that rely on hover/focus states to reveal content, I have a fallback-first approach of showing all content by default, and only enhance the experience if I detect hover is a supported device interaction.
Lastly, this website does not have any analytics or tracking. Enjoy!