• About
  • Portfolio
  • Stream
Concept 1 of 3. After determining the responsive breakpoints and the column grids for the site, I wireframed three possible layouts for the homepage. In the first two, short sections on Mousebird's products and apps would flow into secondary pages to be designed at a later stage; in the third, all information on the products and apps would reside on the homepage itself.
Concept 2 of 3.
Concept 3 of 3. Mousebird chose this concept. I envisioned a half globe as the main image, for which the semicircle on the right was a placeholder. The images under "Apps" would be composites of screenshots, with the smaller graphic to be placed in a frame resembling a mobile device.
I refined the chosen wireframe for the homepage. Marking up the wireframe with measurements, I began to build a comprehensive style guide.
I created a wireframe for the main blog ("News") page. Marking up the wireframe with measurements, I began to build a comprehensive style guide.
I created a wireframe for blog posts. Marking up the wireframe with measurements, I began to build a comprehensive style guide. Since the images in Mousebird's blog posts vary in size, I delineated image widths and placement for several scenarios at each breakpoint. I also included measurements for callout boxes that contain code snippets and lists.
I examined Google's font offerings and narrowed down the possible combinations of typefaces for heads and text to six. I prepared mock-ups in HTML/CSS using Mousebird's real copy to show how each combination would look within the basic design. Mousebird preferred this option (I'm only showing one of six here for reasons of space).
After placing the half globe that I had imagined in the first step and setting the type with the chosen typefaces (I changed the font for the subhead from serif to sans serif), I presented seven options for color. These involved the logo, header behind the logo, nav text (in the rollover and active states), and buttons (standard and rollover/active). They also included variations of logo placement. Mousebird selected this option (I'm only showing one of seven here for reasons of space). I would go on to change the green of the nav text and buttons.
I reset the text of Mousebird's logo, considering visibility needs at a small size. Mousebird chose black and white for the bird symbol in the header (see previous image).
For the bird symbol in the footer logo, I decided to use an extended version of the bird, with a white outline (and supplemental red and green).
Using screenshots provided by Mousebird, I designed the composite images that I had conceived in the earliest design stage (I'm showing only one of six here for reasons of space). My work entailed: 1) Determining effects such as transparency, drop shadows, and rounded corners. 2) Drawing the frame of the mobile device in vector format so that it could be adjusted to accommodate differently proportioned screenshots. 3) Supplying final, web-ready images sized for the various breakpoints. 4) Providing a Photoshop template and written instructions that would allow Mousebird to create composites for future apps.
I designed the final visuals for the homepage at the five breakpoints, incorporating all of Mousebird's decisions and feedback. (The second layout from left in this compilation displays the nav as a dropdown at the narrowest breakpoint.)
For the main blog ("News") page, I selected the hero image and designed topic buttons and a search field. Styles from the homepage for elements such as heads and text formed a basis for styles here and for blog posts. I had worked out the widths of images and callout boxes for blog posts at the wireframe phase.
Pulling together the work of all the previous stages, I wrote a detailed style guide for the entire site—homepage, main blog page, and blog posts. It comprised all of the CSS specifications needed to replicate the visual design at the five breakpoints, facilitating Mousebird's coding work. This is the first of eleven pages.
This is the second of the eleven pages of the style guide (I'm not showing the remainder for reasons of space).
  • o
Website Redesign for a Tech Company

I redesigned the website of Mousebird Consulting, a company that engineers geospatial data display for mobile devices. I reorganized the content of the homepage, modernized the site's appearance, implemented responsive-design practices, and refined the company's branding. In addition to the homepage, the project encompassed the main blog page and blog posts.

In its review of my work, Mousebird wrote:

"Dawn did an excellent job on the graphic art, providing a clean and consistent look to the web site. She also did an amazing job structuring the formatting in CSS friendly ways that made implementation much easier across a broad range of screen sizes."

View Website
Available
Freelance, Full-time
Dawn Cavalieri
Designer, Artist, Photographer, Editor, and Writer New York, NY