Mousebird Consulting—Wireframes

Overview

In addition to enhancing the chosen concept for the homepage of Mousebird Consulting, I created wireframes for the main blog (“News”) page and blog posts. By marking up the wireframes with measurements, I allowed the company to start thinking about how to code the site.

Go back to the main Mousebird page.

Wireframes

Homepage

A change from Concept 1 was the use of a colored background for the header.

Wireframe for homepage of Mousebird Consulting, one of three wireframes, shown at five breakpoints in greyscale. Below the header, the <h1> is on the left and a semicircular placeholder for an image is on the right. Text in red indicates dimensions for elements and white spaces, in pixels.

Main Blog Page

The image at the top would relate to Mousebird as an organization. A search bar would sit below the h1 and main image, followed by topics in the form of buttons. From the homepage, I carried over the idea of setting images related to new stores as small squares. The most recent stories would get larger, rectangular images.

Wireframe for main blog page of Mousebird Consulting 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.

Blog Post

This versatile layout offered:

  • An option to include an overarching image under the h1.
  • Configurations for the h2, h3, and text.
  • A menu of choices for image sizes, reflecting how an image at a particular width would play out across the breakpoints.
  • Details for code blocks (shown here in dark grey) and callouts (light grey).

As on the main blog page, topics would show as buttons.

Wireframe for blog post of Mousebird Consulting at five breakpoints, presented in greyscale. Below the header, the <h1> spans the top. There are various configurations for the <h2>, <h3>, text, images, and callouts. Text in red indicates dimensions for elements and white spaces, in pixels.