Website for Tech Company

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

Products and Services

Web design
Responsive design
HTML/CSS
Typeface selection
Branding

Initial Concepts

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.

Mousebird chose the third option (third slide in this slideshow).

I envisioned a half globe as the main image, for which the semicircle on the right was a placeholder (see “Colors and Logo,” below).
The images under “Apps” would be composites of screenshots, with the smaller graphic to be placed in a frame resembling a mobile device (see “Images,” below).

(For reasons of space, I have truncated the images in this slideshow. Click on an image to expand it and the subsequent images; click again to contract them. If the slideshow is running and the images are expanded, scrolling on the page will stop the slideshow.)

One of three design concepts for a homepage, in wireframe, at five responsive breakpoints.

Wireframes for Homepage, Main Blog Page, and Blog Posts

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.

Since the images in Mousebird’s blog posts (third slide in this slideshow) 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.

Mid-fidelity wireframe for the homepage of a technology company, at five responsive breakpoints.

Wireframe for the blog of a technology company, at five responsive breakpoints.

Wireframe for a blog post of a technology company, at five responsive breakpoints.

Fonts

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 the first.

Font exploration in a mock-up of a website.

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 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 the last option. (I would go on to change the green of the nav text and buttons; see “Final Design for Homepage,” below.)

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 the last slide in the slideshow immediately above). For the footer, I decided to use an extended version of the bird, with a white outline (and supplemental red and green).

Images

Using screenshots provided by Mousebird, I designed the composite images that I had conceived in the earliest design stage. 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 that would allow Mousebird to create composites for future apps.

Design of a composite image to promote a flight-tracking app.

Design of a composite image to promote an app created for National Geographic.

Design of a composite image to promote a weather app.

Final Design for Homepage

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.) Also see the close-up of the design, below.

(For reasons of space, I have truncated this image. Click on it to expand and contract it.)

Final visual design for a homepage at five responsive breakpoints.

Final Design for Homepage (Close-Up)

This slideshow reveals a portion of the full homepage design at a larger size for easier viewing. For all of the breakpoints, I gave Mousebird both the visuals alone (first slide) and the visuals annotated with CSS (second slide); I would add the CSS to the evolving style guide.

(For reasons of space, I have truncated these images. Click on them to expand and contract them.)

Final visual design for a homepage at the widest breakpoint (1280 pixels wide).

Final visual design for a homepage at the widest breakpoint (1280 pixels wide), with CSS markup

Blog

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.

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 of the CSS specifications needed to replicate the visual design at the five breakpoints, facilitating Mousebird’s coding work. This slideshow exhibits five of the eleven total pages.

(For reasons of space, I have truncated these images. Click on them to expand and contract them.)

HTML and CSS specifications for website.