Mousebird Consulting

Overview

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 Consulting 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.

The owners of Mousebird soon hired me to design a website for a sister company, Wet Dog Weather.

Selected Work

Initial Concepts

After determining the responsive breakpoints and column grids for the site, I prepared three possible layouts for the homepage. Mousebird chose the first option (first slide in this slideshow).

Learn more about the concepts.

Concept for homepage of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. A lot of white space surrounds the elements. Below the header, the <h1> is on the left and a semicircular placeholder for an image is on the right. Concept for homepage of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. A lot of white space surrounds the elements. Below the header, the <h1> is on the left and a rectangular placeholder for an image is on the right. Concept for homepage of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. Below the header, the <h1> is presented against a dark background.

Wireframes

I refined the chosen wireframe for the homepage and created wireframes for the main blog (“News”) page and blog posts. Marking up the wireframes with measurements, I began to build a comprehensive style guide.

Learn more about the wireframes.

Wireframe for homepage of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. It fleshes out the first concept from the previous section. Text in red indicates dimensions for elements and white spaces, in pixels. Wireframe for main blog page of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. Below the header, the <h1> is on the left and a rectangular placeholder for an image is on the right. Text in red indicates dimensions for elements and white spaces, in pixels. Wireframe for blog post of Mousebird Consulting, showing top portion of page at five breakpoints, presented in greyscale. Below the header, the <h1> spans the top. Text in red indicates dimensions for elements and white spaces, in pixels.

Fonts

I examined Google’s font offerings and narrowed down the possible combinations for heads and text to six. Using Mousebird’s real copy, I prepared mock-ups in HTML/CSS to show how each combination would look within the basic design. Mousebird preferred the first.

Font options for homepage of Mousebird Consulting, showing top portion of page. Headers are in IBM Plex Sans and text is in IBM Plex Serif. Font options for homepage, showing top portion of page. Headers are in IBM Plex Serif and text is in IBM Plex Sans. Font options for homepage, showing top portion of page. Headers are in Aleo and text is in Lato. Font option for homepage, showing top portion of page. Headers and text are in Libre Franklin. Font options for homepage, showing top portion of page. Headers are in Roboto Slab and text is in Roboto. Font options for homepage, showing top portion of page. Headers are in Crete Round and text is in Rubik.

Colors and Logo

After placing the half globe that I had imagined in the first step and setting the type with the chosen typefaces, I presented seven options for color and logo placement. Mousebird selected the first.

Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is complete and is white with a black outline, against a blue header. Text of logo is white. Button is green; button in the active state is blue. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is complete and is white with a black outline, against a split green and blue header. Text of logo is white. Button is blue; button in the active state is green. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is cropped and is transparent with a white outline, against a blue header. Text of logo is white. Button is in a green different from previous; button in the active state is blue. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is cropped and is white with a black outline, against a blue header. Text of logo is white. Button is in the second green; button in the active state is blue. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is cropped and is white with a black outline, against a split green and blue header. Text of logo is white. Button is in the second green; button in the active state is blue. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is cropped and is transparent with an amber outline, against a blue header. Text of logo is white. Button is blue; button in the active state is amber. Color options for homepage of Mousebird Consulting, showing top portion of page. Mousebird symbol in logo is cropped and is white with a black outline, against a split amber and blue header. Text of logo is white. Button is amber; button in the in active state is blue.

Logo

I reset the text of Mousebird’s logo. For the header, Mousebird chose black and white for the bird symbol. For the footer, I decided to use an extended version of the bird, with a white outline (and supplemental red and green).

New design for the logo of Mousebird Consulting. The mousebird symbol is white with a black outline. The company name is all lowercased and in white. 'Mousebird' is in bold and 'consulting' is in regular-weight type. The background is blue.
New design for the logo for the webite's footer. The mousebird symbol is transparent with a white outline. A white branch extends from the bird's mouth; there is a green leaf and red berries. The background is blue.

Images

I designed the composite images that I had conceived in the earliest design stage. These images showcased apps that Mousebird had built for clients; shown here are the composites for National Geographic World Atlas; NATS, the National Air Traffic Control System of the UK; Dark Sky; and Saildrone Forecast.

My work entailed:

  • Determining effects such as transparency, drop shadows, and rounded corners.
  • Drawing the frame of the mobile device in vector format so that it could be adjusted to accommodate differently proportioned screenshots.
  • Supplying final, web-ready images sized for the various breakpoints.
  • Providing a Photoshop template and written instructions to allow Mousebird to create composites for apps that they might develop later.
Composite image of app created for National Geographic World Atlas. Bottom image is a portion of a globe showing Europe. Top image is a globe showing Africa on the left and a list of countries and their flags on the right. Top image sits within the frame of a tablet in landscape view. Composite image of weather app created for the National Air Traffic Control System of the UK. The bottom image is a map of northern Europe in blue, with flight patterns marked by airplane icons in white. Top image is a map of the UK showing airports as dots and flight patterns as lines, all in blues, greens, and purples. Top image sits within the frame of a tablet in landscape view. Composite image of weather app created for Dark Sky. Images are US maps overlain by weather patterns shown in red, orange, yellow, pink, and blue. Top image sits within the frame of a smartphone. Composite image of weather app created for Saildrone Forecast. Bottom image is a globe, overlain by a spectrum of colors denoting temperature and by dark-grey lines denoting patterns. Top image is a map of California overlain by patterns shown in blues, purples, and yellows; temperature and precipitation data for South Lake Tahoe are below. Top image sits within the frame of a smartphone.

Final Homepage

I designed the final visuals for the homepage at the five breakpoints, incorporating all of Mousebird’s decisions and feedback.

Learn more about the homepage.

Blog

For the main blog (“News”) page, I selected the hero image from Mousebird’s collection 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.

Design for blog of Mousebird Consulting showing top portion of page. Hero image is an image of Earth in dark blue and black, with power networks shown in yellow; background is space with stars. Within the image is the header 'Mousebird News.' Below the hero image is a list of blog topics. Each topic is a green button with white text.

Style Guide

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 the CSS specifications needed to replicate the visual design at the five breakpoints, facilitating Mousebird’s coding work. I created the document in Microsoft Word, giving Mousebird the ability to update it as they modified the site.

This slideshow exhibits five of the eleven total pages.

Table showing CSS specifications for the homepage of Mousebird Consulting, with details on the page grid and header for 5 breakpoints. Table showing CSS specifications for the homepage of Mousebird Consulting, with details on the header area, <h1> tag, buttons, and main image, all for 5 breakpoints. Table showing CSS specifications for the homepage of Mousebird Consulting, with details on the <p>, <a>, <h2>, <h3>, and <div> tags, all for 5 breakpoints. Table showing CSS specifications for the main blog page, with details on the grid, hero image, <h1> tag, search field, and buttons, all for 5 breakpoints. Table showing CSS specifications for a blog post, with details on the grid, <h1> tag, date, buttons, images, and captions, all for 5 breakpoints.