Overview
Building on the success of the website design that I had created for Mousebird Consulting, I designed the homepage and blog of Wet Dog Weather, a sister company that offers real-time sensor data dissemination and display. By reusing the framework that I had built for Mousebird—including breakpoints, grid, and fonts—I reduced the number of decisions that Wet Dog had to make. I also established a visual relationship between Mousebird and Wet Dog.
Selected Work
Homepage
The startup had recently finalized the main elements of its branding: logo, colors, and graphics. I developed the overall page design, styled the text, and decided how to use the colors. I employed the graphics to separate content areas and add a sense of personality and fun.
Wet Dog can replace the photo at the top with an image or video that is representative of the company's work—a weather map, for example.
![Website design for Wet Dog Weather at five breakpoints. The logo is in blue and purple, and the nav is in purple. Below is the <h1> in white against a blue background and a black-and-white photo of a dog shaking water off itself. Following is the main content. In the section titled 'About Us,' each staff member has a unique illustrated avatar of a dog. Ornamental graphics continue the blue-and-purple theme throughout.](https://dawncavalieri.com/wp-content/themes/dawn/img/graphic-design-and-art/mb-wdw/wdw/homepage/wdw-homepage@2601px.jpg)
Blog Post
Wet Dog asked me to wireframe a blog post as I had done for Mousebird. I provided configurations for headers, text, captions, and images. Dotted lines indicate how an image at a particular width would expand across the breakpoints. The company indicated that a main blog page, such as the one that I had wireframed for Mousebird, would not be necessary at this stage.
The graphics at the top and bottom relate the blog post back to the homepage.
![Wireframe for blog post at five breakpoints. Below the logo and nav is an ornamental graphic in purple and light blue. Following is the <h1>, which spans the page. Below there are various configurations for the <h2>, <h3>, text, images, and captions.](https://dawncavalieri.com/wp-content/themes/dawn/img/graphic-design-and-art/mb-wdw/wdw/blog/wdw-blog@2601px.jpg)
Style Guide
The owners of Mousebird had expressed appreciation for the guide that I had written, saying that I had done “an amazing job structuring the formatting in CSS-friendly ways that made implementation much easier across a broad range of screen sizes.” I replicated that structure for Wet Dog. By providing the document in Microsoft Word, I gave the company the freedom to edit it as needed.
This slideshow exhibits five of the eleven total pages.