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
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.
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
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.
This one-of-a-kind car collection and museum was a client while I lead design at Big Sea in Florida.
As a senior member of the design team I created processes and tools to increase design quality and consistency.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
I created the design system for O’Reilly on Inkling serving mobile-friendly versions of their 50 most popular programming books.
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.
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.
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.
I built this simple food and mood journal to track how I felt after meals, and it helped me discover a better diet.
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.
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.
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.
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.
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.