After determining the responsive breakpoints and column grids for the site, I prepared three possible layouts for the homepage. Mousebird chose this, Concept 1. All information on Mousebird's products and apps would reside on the homepage. 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 taken from apps that Mousebird had built for clients; the smaller graphic would be placed in a frame resembling a mobile device. Testimonials, links to company news, and a second contact button would follow.
Concept 2. In this arrangement, short sections on the company's products and apps would direct the user to secondary pages, which I would design at a later stage. Clients' logos, testimonials, links to company news, and a second contact button would sit below.
Concept 3. This layout has content similar to that of option 2, but the look is different.
Wireframe for homepage. 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. For this, the wireframe for the homepage, a change from Concept 1 was the use of a colored background for the header.
Wireframe for 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 blog post. This versatile layout offered: 1) An option to include an overarching image under the h1. 2) Configurations for the h2, h3, and text. 3) A menu of choices for image sizes, reflecting how an image at a particular width would play out across the breakpoints. 4) Details for code blocks (shown here in dark grey) and callouts (light grey). As on the main blog page, topics would show as buttons.
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. One of the six is shown here; click on the link in the project description to see all the choices.
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. One of the seven is shown here; click on the link in the project description to see all the choices.
Logo. I reset the text of Mousebird’s logo. For the header, Mousebird chose black and white for the bird symbol.
Logo. For the footer, I decided to use an extended version of the bird, with a white outline (and supplemental red and green).
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 is the composite for National Geographic World Atlas; click on the link in the project description to see more client images. 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 to allow Mousebird to create composites for apps that they might develop later.
I designed the final visuals for the homepage at the five breakpoints, incorporating all of Mousebird’s decisions and feedback. This final design for the homepage reflects decisions made by Mousebird throughout the process. Differences from the design at earlier stages include: 1) A taller header, with the full mousebird symbol rather than a cropped version in the logo. 2) A light-blue background for several sections. 3) Positioning of product images in a side-by-side rather than stacked format, except at the narrowest breakpoint. 4) Rounded corners and drop shadows on images. 5) The inclusion of “Technical Details and Thanks” as a regular section rather than as part of the footer.
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.
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 is the first of the eleven total pages; click on the link in the project description to see more pages.
gLike
Website for Tech Company I
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 (see project titled "Website for Tech Company II," in this portfolio).
Some images are truncated for reasons of space. Click on the link below to see the full images.
Available
Freelance, Full-time
Dawn Cavalieri
Designer, Artist, Photographer, Editor, and Writer
New York, NY