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.
A change from Concept 1 was the use of a colored background for the header.
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.
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.