Happy 2009! Here at Sapsucker Woods, we’re starting the new year deep in thought about our redesigned All About Birds website, set to debut in the spring. Here’s a little something called a “wireframe” to give you an idea of what we’re cooking. We’d love to know what you think.
For anyone not fluent in web lingo, a wireframe is a schematic of a page that’s used to focus on organization and layout, before we spend time designing pleasing colors, graphics, and fonts. (It’s sort of the same idea as drawing up a dinner party seating chart before choosing details like tablecloths, flower arrangements, and flatware.)
So, bear in mind that the final product will look a bit nicer than this wireframe. A few examples:
- we will be using more colors than just gray
- we will be using more fonts than just Myriad Pro
- the blank “placeholder” boxes will contain pretty graphics (including Birdshare photos)
- the buttons and tabs will actually work
The wireframe we’re showing you here is one page in the All About Birds online bird guide, which is redesign priority No. 1. These species profiles get a huge portion of our site’s traffic, so we know it’s critical we get them right. We want to make them more comprehensive, use more pictures, sound, and video, and give you more help in identifying and learning about the species.
Now, here’s lead web designer Alex to walk you through some of the features of the wireframe:
The first thing you’ll notice is that we’re adding an identification section to help you figure out if you’re looking at the right bird. We’re taking a slightly different approach from a typical field guide that focuses on field marks straightaway. We start by briefly covering four keys of identification – size/shape, color, behavior, and habitat – to help you make sure you’re in the right ballpark. Then when you look at field marks they serve as a way to fine tune your identification.
We’ll also provide photos of similar species so you may compare them against the species you’re currently looking at. The working version of the page will let you click on the photos to zoom in to a larger version and then flip through other photos. Clicking on a similar-species photo will place enlarged versions of the primary species and similar-species photos side by side for easier comparison.
The “Life History,” “Sounds,” and “Video” tabs above the ID section will display cool facts, species details, and multimedia players for you to learn more about the species. We’re finishing up those wireframes, too, but we haven’t posted them yet for fear of overwhelming you.
Please have a look at the large version and let us know if we’ve got it, what might be missing, and any other thoughts you may have. If you’d like to see wireframes for the rest of the species account tabs, just let us know and we’ll post them. Have fun!