My latest web conquest--wireframing!

This week found me learning about something new that I had never had the opportunity to work with before: wireframing. I liken it to mapping out and moving blocks on a CMS (content management system) with the added ability to position everything exactly as you want it (and not have to stick to the block limitations of a CMS). It's essentially another way to map out the layout of a page.

When I had done this in the past, I would use pencil and paper to map out where certain pieces of content would go, and make notations for special pieces of content. Basically, I would sketch out the page before I created it. Wireframing accomplishes the same thing, except it's a lot easier and faster to make changes to a design that you're not happy with. The program that my internship site uses is Mockingbird. Each of the items that you put on the page (text, links, drop-down boxes, etc.) are called "widgets," which I think can be a little misleading. When I hear "widget," it makes me think of an object that does something--like my desktop widgets. The widgets in Mockingbird don't do anything except act as place holders.

And that's something that I had to get used to--the idea of a placeholder for content, not the content itself. It took me some time fiddling around with links to figure out that there is no way for me to get them to link to anything--they are only there to show where on the page they will be. You can put in the text of the content to see how much of the page it will take up and how you want to arrange it, but links, buttons, images, and the like are only represented and will not work like they will when you create the final page. You're putting together the layout for content, not the content itself. If you put in a drop-down box widget, it won't act like a drop-down box--because it's not the actual box, just the representation of it. I think I had to play around with the Mockingbird program for almost an hour before I really understood that concept. Once I did, my comfort level with wireframing dramatically increased and my progress went much smoother and faster.

The whole point of this project was to put together the layout for a page where patrons would go to find out about the online books clubs offered by the library. But in the process of putting that together, I learned a whole new (and better) way of doing layout. I will definitely take note of this for my future personal and professional online web design/development projects.

Oh, and the feedback from my first project was overall very positive. But since there seems to be some bugs with posting blogs on the staff site, I had to go back and modify it to exclude those features that are still "buggy." My site supervisor and I agreed that it would be better to do so to prevent staff from getting frustrated with not being able to "do it the way the guide says."