Posted by: smdeane | March 23, 2009

Sitemap and Wireframes

It’s hard to believe, but another week has gone by and we have another assignment due. This week it’s the Sitemap and (3) Wireframes. Even though this assignment was time-consuming, I enjoyed it! Since I tend to be very detail-oriented in general, I took my time to think about my overall methodology by drawing up several pencil-drawn drafts first. After I worked out all of the nitty-gritty details, I then committed my drafts to computer-generated drawings as seen in the attached PDF files, colonial-architecture-in-va-wireframes and sitemap .

My approach was to be certain that my Sitemap and Wireframes were explicit; concise and succinct information that could be easily understood. I even had a friend look at them in order to provide constructive criticism. As a result, I made a few revisions. My goal was not only to consider all of the important details associated with creating a successful website design (like we have read about and discussed in class), but as a type of checklist or inventory. 

For example, in my Sitemap I used a hierachal approach to the mapping of my website content and the relationship between the homepage, hyperlinks (internal and external), navigation/search functions, and other pages. Using varying sizes of rectangles, squares, and ovals, as well as lines, blue arrows and black arrows I depicted the relationships between all of the website elements. I considered the homepage as “primary” and chose to locate a highlighted rectangle in the center of the page to convey its importance. The squares and ovals indicated are “secondary” mapping information but important nonetheless.  The “key” is specific to the mapping information provided. I also included a note to emphasize the fact that the Native Americans would be the main focus in my final project.

Using the Sitemap as a reference for my Wireframes, I generated three total: 1) Homepage; 2) Show Page; 3) Browse Page – each one includes the elements presented in the Sitemap and concentrates on specific elements for this exercise. My approach was to use a grid for a basis for my layouts with the intent of making the content readible, consistent, functional, navigable, and aesthetically-pleasing. As shown, boxes indicate the desired content and accompanying notes (with descriptions) to the side ensure that all material is covered and/or if vital information is missing. This exercise helped me to conceptualize my updated website design, specifically in using Omeka for my final project. There’s definitely room for improvement, but I feel like I covered “most” of the bases. If you have any suggestions, I am open to them!


Leave a response

Your response:

Categories