Sitemap and Wireframes

My sitemap and wireframes are up on my site.

Design Concepts

I think that I have a really good grasp on whether a design looks good or not. I’m sure most people do. It’s fairly subjective. But this weeks readings have reminded me that there are many guidelines that, when used properly, are more likely to result in a design that most people, or a particular audience, will find appealing.

Wroblewski’s post on visual organization was a great start to thinking about how to weight content visually. Boulton backs this up, with a more in depth explanation of scale and setting for type, color and layout. Since I want to work on history sites, I think I will feel drawn to incorporate font styles that were popular during the time period of the site’s content. But uncommon type can be hard to read or unsupportable on some browsers. Futhermore, choosing a font is just the beginning of type decisions, there is still weight, tracking and leading to be dealt with.

Honestly, I thought I knew more than I do about design. I felt a little ill at ease at my ignorance of some of the basic issues discussed in the readings. I had heard of the rule of threes, but I don’t have any real design training. I felt a little better when Guevin discussed light sources and a lot better when Boulton discussed lead room and composition.

I know a lot about composition and the use of negative space, if I can choose a frame of something that is already existing. Creating something from scratch is a whole different ball game. I have done some graphics before, but usually for organizations that gave me some print materials to look at and a logo to work with.

Shea’s tonal variations is a really good trick that I hope to use when choosing my color palette. Something I like to do in Photoshop is, pick a color I like and then move the color bar up and down. This keeps the brightness and saturation the same and a lot of the time the colors look okay together. Particularly if they are fairly muted.

Thoughts on Sitemaps and Wireframes

One of the issues that Jeremy Boggs mentioned in class, and which I have seen in some of the recent writings that have been assigned, is that detailed wireframes take a good deal of design work out of the hands of designers. As someone with an interest in design I find this disappointing. In many ways I would like a design framework created by a designer to determine the way content is presented. I think, for some intuitive reason that the final product will just ‘look better’ this way.

But, a cool looking site, is of course not the only consideration for web site development. And as Dan M. Brown and others have reminded us, sitemaps, wireframes, flowcharts, etc. are communication documents, often used to present to stakeholders and to be used by the web site staff. Designers might not have a solid grasp on which content should be prioritized, something the IA team spent a great deal of time on. Wireframes and sitemaps communicate this to designers. Wireframes are not the design of the page, or often even the final structure used for web pages. And hey, given the smaller staff many of us might be working on, the wireframe designer and the graphic designer will often be the same person. Overlap is everywhere.

Okay, so maybe a lot of that was obvious, but I recently had a wireframe conversion experience. At CHNM, I am working on a information architecture redesign. As the site is now, many pages consist of a subject heading, like Online Resources with the content consisting of a list of links. The links are simple titles like, Operational Archives. I’m sure you could guess what that is, but I wanted to suggest some contextual information for these lists of links (the scope and content of the document holdings held in the Operational Archives, for example) and I think a wireframe will help me communicate this.

Honestly, with smaller sites like the one I am working on for this course, it is harder to see the importance of these steps to the process. I feel like I can visualize the entire project in my head, that I am just communicating this information to my professor and classmates. It seems that sitemaps and wireframes are amply able to do this, and working through them revise my assumptions only slightly. On larger projects however, playing with sitemaps has made me think in different directions entirely and has made me appreciate wireframes, which make up for the limitations of presenting pages as just a box with a title in a sitemap.

I found Watson’s Page Description Diagrams post, and Litanzious’ Content Sitemaps to be very valuable. I have a tendency to want to jump ahead to complex layout diagrams for wireframes, but content description and priority are the real reason for creating wireframes, and these text heavy documents helped me understand that more clearly.

Teaching History with Video Games

So Trevor is not the only one. Rob McDougall has a new blog post about teaching theories of technological change with “tech trees” from Sid Meier’s Civilization.

His title “Technology Grows on Trees”, was inspired by a post written by our classmate Trevor Owens, that some of you may remember.

CMS modifications

I am still working on my modifications. It is noon on Sunday and I have done all of the minimum requirements, so I am posting now, but I will be revising this later tonight and tomorrow.

Here is my omeka installation. I have modified the minimalist theme, changing some of the font sizes, and colors. I added an image to the header. This took me some time to figure out, but now I am comfortable with a basic php command, which is exciting. I had a good deal of trouble with the title display in different browsers. I hope it is all on one line on just about everyone’s computers now. I definitely know how to set margins, well at least where top, right, bottom and left are in CSS.

I have added a number of items to my site, with varying levels of metadata. Tonight I hope to tweek the show page. I don’t need to display much metadata and I want to avoid a lot of ‘no text’ fields.

Lastly, I installed exhibit builder. I was interested in using exhibit builder, in order to use different styles on my site for each of the five sense sections. I made some minor changes to the modern theme, just changing the text color and text size. I used one of the exhibit templates for a gallery type display page and the formatting didn’t come out how I wanted it to. I might also play around with that more. Also navigating to this gallery page might take more navigation than I think I want for my site.

Scope, strategy, information architecture

So, I played with Omeka a little bit. I really like to play with design, but as this weeks readings convinced me, that’s really the surface, the last part of the process. I really liked Garrett’s suggestion that rather than wait to finish one plane to start another, try to finish the first plane before work on the next one can finish.

I thought I finished up my scope last week, but now I think I might be able to do more. I have been thinking about adding physical items to help guide my narrative, rather than just video and text (my original plan). This is a response to working with Omeka. I know that I should be bending the tools to fit with my content. But is there anything wrong with rethinking the content to fit the medium?

Some Progress…

So I got a site, installed Omeka, and played around with the CSS a little bit. It’s not much, but I thought I would link to it.

Capitol of Punk

So, I was rethinking my project to be about punk history landmarks in dc. But there is already a site about that, and better than I could have done. If you are not so into punk stuff, check out the rest of the yellowarrow site.

Bulletproofing and Tutorials

I have to admit I am not a big tutorial person.  I prefer to have a project to work on and then solve problems as I go along.  This process is, of course, right around the corner, and I feel that by working through the tutorials and reading Cederholm, I now a have an okay hold on how CSS works and what the possibilities and restrictions are.  Hopefully, I will not have to experience every column drop and style conflict on my own project, and I will be able to avoid a bit of trial and error.   Though I regret not having very much experience with designing websites, I do think it is fortunate that I am not attached to doing layout with html tables and spacer gifs.

I want to learn how to write clear, concise code, but I have to admit that importing Photoshop files and using layers for links is quite alluring.  That’s the way I did things when producing DVDs.  It’s really too bad that method doesn’t account for changing text sizes, cross-browser compatiblity and numerous other problems that require bulletproof design.  I was already aware of some of these problems, but now I know exactly why they are problems, and have a good understanding of workable solutions.

Andrea Odiorne

History Photoshop

WWII era photos of Russia matched up with new ones.