Hello! I’m Dave Rau. Fueled by curiousity, I’m a thoughtful designer who makes friendly, useful and clear websites and apps.
Let’s talk! dave@redlabor.com
Kong
The Kongruent design system helps organize website core elements and content components.
Half of my work at Kong was focused on the Marketing website, while the other half focused on Product Design and the app experience. Plus a few special projects for the co-founders that required a designer who knew code and worked well with other Engineers.
Roles
- Lead Web Designer
- Sr. Product Designer
Deliverables
- Design system
- UX flows
- Figma components
- UI audit
- Standards for empty states, icons and error pages
Early Kongruent design system essential patterns
Before/after grid and vertical rythym work
It's always fun to design some tshirts!
Product logo explorations for Konnect, Gateway and Mesh
Next project: 
Resist Today
Art, design and web shop
Fueled by Russian constructivist posters and late-night screen printing in our garage, Resist Today was an art collective and independent business I started with a friend. More than 4,000 people from all over the world enjoyed our unique screen printed clothing and art goods (including @dhh). Before the days of Etsy and Shopify, we built this from the ground up and ran it ourselves at nights and on weekends. I enjoyed the range of being a hybrid designer, database architect and artist. Also, packing orders and hand-writing thank you notes to every customer was very satisfying.
Next project: 
Revs Institute
This one-of-a-kind car collection and museum was a client while I lead design at Big Sea in Florida.
Roles
- Lead Designer
Deliverables
- Modular design elements
- Designed templates
Next project: 
Optimizely
As a senior member of the design team I created processes and tools to increase design quality and consistency.
Roles
- Design System Lead
- UI Designer
Deliverables
- UI Kit
- Style Guide
- Roadmap
- Design Tools
Growing a Design System
During my four years at Optimizely, my work shifted as our design system matured. In the beginning we had a pattern library and my focus was on developing new features, writing initital documentation, and providing support on how to use these new components.
After the first major product redesign we started seeing design debt between old and new components. To solve these gaps I met with the Design team weekly to identify eye sores and inconsistencies, prioritizing issues that a developer or product manager might not. We fixed 100+ product design issues this way, and design quality across all of Front-End Engineering increased. Read about Polish Day in this Medium post.
Finally in 2020 Optimizely rebranded and the product required a design update to match. I was in charge of implementing the vision of the rebrand, updating the design system and product to feel fresh, on-brand, and with attention to detail.
As our design system matured and new uses became standardized, we updated the documentation to include more context, best practices, and detailed examples showing variety of uses.
Documentating Design Decisions
I created many core pages of our style guide regarding layout and flexbox, color and typography, custom CSS and helper utilities. Good documentation includes insight into the design process, revealing helpful contexts and constraints that went into specific solutions.
After seeing the same inconsistencies over and over, I created a UI checklist of common issues and worked with frontend engineers to ensure what we shipped met the standards of the design team for a high-quality user experience. And it worked! Frontend engineers became more aware of issues and consistency increased significantly as a result.
Developers as Users
Our design system documentation included live React component code snippets, an auto-generated properties table, and a list of helpful and specific guidelines for when to use and avoid specific components in combination.
These examples of React component documentation includes a mix of real examples using actual code, clear descriptions of available properties and options, and what to do when you get stuck.
Tools Over Rules
Like most products, Optimizely added many CSS colors over the years. So I created a tool to warn developers about non-standard colors on every build, and suggested the nearest design system token. The Eng team loved it!
I made this color tool which converts your custom color into the closest color in our design system.
For the Walls, Too
During a company hackday I went back to my roots in art and high jump. Optimizely’s company story mentioned the evolution of the high jump technique. This artwork hung in the San Francisco and Amsterdam offices.
Hackday poster, 36x48 in.
Next project: 
Elsevier on Inkling
I created the design system for Elsevier on Inkling that served almost 1,000 responsive books used by 500,000 doctors, residents, and medical students globally.
Roles
- Lead Designer
- Lead Developer
Deliverables
- Design Tools for Scale
- Style Guide
- Responsive eBooks
These Elsevier medical textbooks contained a wide variety of content patterns from tables, lists, nested lists and image sizes all nicely solved by the design system.
Style and Code
I created the Elsevier style guide to democratize design and allow us to translate nearly 1,000 unique print textbooks into elegant, useful and flexible digital books. By following simple steps, anyone could create a unique theme using a combination of color, typography and style variables. This made creating families of books, as well as individual titles easy and reliable. Textbooks tend to have a wide variety of content patterns, which made for interesting design constraints. New designs must work well across a variety of reading devices like phones, tablets and desktops.
The power of this design system allowed for anyone to style a complete book that was consistent with the print textbook simply by setting a handful of design variables.
Converting HTML at Scale
I was lead designer on a task force to imagine, prototype, and ship a tool to batch convert XML into HTML patterns. A user would select a series of XML elements and map them to a corresponding HTML/CSS design pattern. The tool would match all elements throughout a book and transform them into well-formed markup that looked great using our starter CSS template for ebooks.
I was lead designer on this prototype (left) and final Mapper (right) tool used to convert hundreds of textbooks by content experts.
Enabling Good Design
Each of the nearly 1,000 books required creating chapter thumbnails images, a process that often involved a designer. I created a web tool anyone could use to export attractive chapter thumbnail images, including icons for frequently used chapter types like glossary, index, quizes, etc. This tool was loved by non-designers, saved hundreds of hours, and helped ship books faster.
This simple tool creates consistent chapter thumbnail images within a range of theme options.
Next project: 
O’Reilly on Inkling
I created the design system for O’Reilly on Inkling serving mobile-friendly versions of their 50 most popular programming books.
Roles
- Lead Designer
- Lead Developer
Deliverables
- Design Tools for Scale
- Style Guide
- Responsive eBooks
From Print to Web
My work at Inkling began translating print textbooks into refined sets of design patterns and templates. This process started with single books, then grew to series of books, and finally to entire libraries of content spanning nearly 1,000 titles.
The O’Reilly books required print to digital translation as well as design refinements to make them mobile-friendly.
Iconic Minimalism
O’Reilly books have a good reputation, and I was grateful for the opportunity to work on these iconic books. All Inkling books can be purchased by the chapter, so to retain branding each chapter header was designed to include the cover drawing. Part of my design work involved reading books on my phone, looking for ways to refine the user experience and ensure it was up to my standards.
My designs had to account for a variety of chapter header styles, image sizes, and other dynamic content patterns.
QA Tools for Scale
I built several tools to treat books more like databases, making it easy to transform or analyze parts. The Figure Enhancer tool helps authors mark figures in a book that require further code and image enhancement, a manual and error-prone set of tasks until my tool helped automate several steps in the process. And the Discover tool helps analyze HTML patterns in a book and spot inconsistencies and frequency of HTML patterns and code reuse, offering a visual histogram of HTML elements and CSS class names.
Both the Figure Enhancer and Discover tools helped save production time making books and finding errors and inconsistencies at scale.
Next project: 
Eats
I built this simple food and mood journal to track how I felt after meals, and it helped me discover a better diet.
Roles
- Visual Designer
- Fullstack Developer
Deliverables
- Responsive web app
- Better health
Simple Calorie Tracking
Most other apps that track foods offer complicated calorie lookups with tens of thousands of foods— Eats tracks whatever you manually enter, which typically is about two dozen basic ingredients, plus complete meals and healthy snacks eaten on the regular.
This newest version of Eats shows a single focused daily calories goal as a clear prompt for action.
Get a summary view of foods you eat frequently.
Tracking basic moods is simple and adding notes is completely optional.
The calendar view averages your mood for the day for a nice concise overview of the month.
Next project: 
WaterMatters.org
For 10 years I ran the website for this 700-person Florida state environmental agency. I collaborated with scientists and environmentalists to author, edit and develop web content and custom apps.
Roles
- Lead Web Designer
- Web Developer
Deliverables
- Website & Intranet
- Award-winning web projects
- Inventory and online ordering system
- Work tracking systems
- Custom web apps
Various webpages on desktop view for the Southwest Florida Water Management District, a state government agency in charge of protecting water for 16 counties in the Tampa Bay area.
Water Calculator
I designed and built this water use calculator to visualize household water use as jugs of water and translate numbers into a meaningful and impactful visual image.
This water calculator helped students and residents visualize their water use at home—lawn sprinklers have a huge impact—and pledge to reduce their use by 10%. This was one of our most effective web campaigns.
Alafia River
I designed, coded, and shot field photography for a series of educational websites exploring Tampa Bay’s rivers and watersheds.
This remains one of my favorite projects to date, getting the opportunity to take photography in the field, do historic research for content and photos, work with maps of my local watershed was a treat.
Next project: 
Art
Collage and photo-montage
Illustration
Graphics and screen prints
Photography
Digital and analog
First project: 