Wandering but not Lost

I have hit the point when perfectionism becomes counter-productive and so am declaring my final project done.

The design has been modified from the earlier draft. I replaced the border with a drop shadow and gave the header image a thorough re-thinking. The structure of the site is largely the same, but I added an Omeka install to preview the document viewing, the search functions, and the browsing options. After researching CMS options, it seems that the best option for both the management of the documents and the blogging/forum functions of the site is to do a combination of WordPress and Omeka. This, however, would result in a complicated site to maintain and some of the desired functions may need to be rethought. The project for the summer is working with Richard to import all of the documents into the database and to move the site onto his servers.

My final project is available at www.jeriwieringa.com/projectcanterbury.

(So part of the assignment was to provide feedback on the design assignments. These comments apply to Margaret’s webpage.)

To start, I like the look of the site! Your design is very clean and very easy to read. I like the h2 font and color a lot and the font for your body text is both interesting and readable (a difficult balance). I also like what you did with header image, both in terms of using the fonts creatively, and in isolating images for a very interesting and entertaining collage effect.

A couple of structural concerns that need mentioning. Currently your major elements are set to a width of 1040px with a left margin of 350px. While this works on a larger screen, it makes the site appear far right in smaller windows. Setting the left margin to auto should fix that shift. I would also recommend making the width smaller, so that it will fit more comfortably on smaller screens. Second, the title of your site is currently “George Mason University | History 697 | History & New Media | Margaret Barkovic | Portfolio Page”. This should be shortened to something more descriptive.

Running through CARP:

Consistency: You do a great job of keeping the colors and fonts consistent. The use of red for the major text is striking, particularly with the blood of the autopsy images. I have one suggestion with the fonts. I think it is because all the other fonts are serif, but the sans-serif on the pull-out quote feels a bit disjointed. Also, the color of the header and navigation bar is a showing up a bit green in chrome, which makes it seem disconnected from the rest of the colors on the site. This could just be a rendering issue, but one to consider.

Alignment: The main sections of the page lines up well. One suggestion would be to move the navigation left so that it also lines up with the body text or to move it more centered. The image is an interesting puzzle. Since the main figure’s eyes are looking left, one thought would be to float it right and wrap your narrative around it so that focus stays within the site (I always forget this).

Repetition: The site uses repetition well. I also looked at the “17th c. Anatomy” page and you are repeating the same structure and design elements there as well, which gives the site a good feeling of coherence. The repetition of fonts pulls the site together and the fonts themselves are well suited to the time period of the material.

Proximity: There are a couple things to point out with proximity. Your header is great, but the space between the header and the navigation unfortunately detaches the header from the rest of the site. Also, the space between your paragraphs and h2s is just a bit too much. Reducing that space would pull the elements closer together. Otherwise, your elements are well situated to guide the reader through the material.

All in all, good job! It is a beautiful design and makes a potentially gruesome topic both interesting and artistic.

My design assignment is live. There is a brief description to provide some context as part of the page, but the gist is that the design is to go over a wordpress installation. As such, many of the links and the search do not work yet! Mea Culpa.

“The Lost Museum” digital exhibit and Josh Brown’s discussion of it and other digital projects that CHNM and other organizations have put together brought me back to “The Differences Slavery Made: A Close Analysis of Two American Communities” by William Thomas, which we read in Clio1 in the fall. In this piece, Thomas discusses the process of creating a “digital article,” a piece of scholarship that started with the structure of the web, rather than the structure of the journal article. In the fall, we discussed the original web “article” and its goals, successes, and failures. While the idea of creating an article that rethinks the process of scholarship from the ground up is good and necessary, “The Differences Slavery Made” is a persuasive piece of evidence that we have not yet figured out what exactly that means or how to make such a work that is effective and accessible.

“The Lost Museum,” while interesting (though I had trouble with flash and couldn’t continue the mystery past the second room) is another early example of experiments in digital exhibits and collections. It has its quirks but it is an engaging attempt.

However, these early examples are not exciting to me because of what they are. They are exciting because they show very clearly how much innovation has already taken place and how much room there is for more creative thinking and experimentation. The flaws in these pieces are not important, other than as reminders of what didn’t not work. What is important is communicating information and making arguments, and it seems to me that these pieces are good reminders that there is a lot of room for finding new and engaging ways of doing that digitally. These exhibits and articles are inspirations points, because they represent a willingness to innovate and a challenge to be worked on.

Failure is just a chance to learn and try again. And these opportunities to try and fail and learn are why digital history is so exciting!

The readings for this week focused on creating visual hierarchies between the various elements of ones site, which creates the argument structure of a website. While I had been thinking of information architecture in terms of the back-end of the website, it was good to be reminded to focus on the visual organization of information and the visual coding given to pieces of information. As Jakob Nielsen’s piece argued, while there are many inventive things one can do with design, there are simply some things which make the user-experience more difficult. By doing such things as signaling links in consistent and expected manners, you can increase the usability and effectiveness of your site for a broader audience. Luke Wroblewski also offered a good reminder that, for effective visual narratives, the most important elements of the website should be visually coded as such, by position on the page, by size, and by relationship to other elements.

The TED video of Hans Rosling illustrates very clearly the value of well done visual design. I found his visualizations to be very compelling and the software he has created seems extraordinarily powerful for allowing users both to trace large-scale trends and to gain greater clarity by breaking down the data into more detailed visualizations. I think this type of dynamic visualization is an under-utilized approach to public history on the web and one that offers a lot of potential for enabling the kind of creative, read-write, engagement that Larry Lessig promoted in his TED talk.

Finally, it was helpful to look again at White Space is not your enemy. Some of the design sins were starting to creep into my mock-ups for the design/final projects (but I like centering…) so it was good to be pushed back out of those ruts.

One point I keep coming back to is that design is continually evolving, both because I am never “done” with a design, and because the  community’s ideas and standards about design are also in flux. The aesthetic expectations and standards against which design work is judged shift, which means work must also be updated to keep from becoming visually outdated. At least the modular approach that using an external style sheet provides means that the content can be separated from the design, reducing the amount of work that needs to be reworked over time to keep my designs visually compelling.

Addendum: I posted on Sheri’s blog this week.

Accessibility and visual arguments. While there was some debate as to whether the Tufte piece was indeed on the list for today, I found the combination of Tufte with the accessibility pieces to be productive. Much of the reading on accessibility dealt with the needs of visually impaired, blind, or mobility impaired users. These users require the information on websites to be organized logically and  well annotated. And the tips for creating websites that are sensitive to the needs of these users were very helpful and seem relatively easy, if perhaps time consuming, to implement.

There is a high emphasis on text and textual information in the accessibility pieces. And yet, there are other users who will understand visual arguments more easily than textual arguments. Tufte’s instructions on well-crafted visual argumentation provided helpful guidelines for creating visual pieces that argue well for a particular position or interpretation. But, then, how does the creator also provide access to that visual argument for users who cannot see it?

I really enjoyed the Tufte text, particularly chapters 4-7. But then, I am fond of anyone who quotes Salmon Rushdie. As someone with minimal artistic training, I know well the impulse to over label. The reminder to simplify and to focus on clarity of presentation was a good one. I was particularly interested in Tufte’s endorsement of confections and juxtaposition. I was not expecting this form of visual argument to be promoted. Perhaps because my impression of confections is that they are old and complex, a collection of symbols that can be more than challenging to interpret. The confection is an argument by association and layering and a simplification of the confection is a powerful form of visual argument. His example of El Lissitzky’s self portrait is one such simplification, layering symbols but each symbol remains distinct, thus retaining it’s individual symbolic function.

Images like Lissitzky’s cannot be communicated easily or well in words, making it accessible to someone who is blind or has impaired vision would be challenging. It is an interesting challenge to balance the visual nature of the web and the need to be aware of the broader audience.

The readings for the week reminded me of the need to be aware of and sensitive to the needs of users who have various disabilities. Making websites that are more easily read by screen readers and other adaptive technologies is labor intensive, but seems to me that it also results in more semantically rich html. But not all visual arguments can be effectively annotated. It may be the case that some arguments will need to be made twice – once visually and once textually – offering parallel arguments to increase the accessibility of the information.

Tools:

Since Megan already mentioned the Chrome development tool, I should tip my hat to firebug for firefox. It is very handy, though I am afraid my browser is becoming a bit bloated with addons.

For those who are interested in other tools for hand-coding website, I am using a trial version of Coda by Panic and really like it. It is a text editor, CSS editor, file-transfer tool, generates previews, and a number of other things that I haven’t even tapped yet. It is well priced, given everything it offers, but isn’t cheap, which is its main drawback.

One more, but I am still figuring this out. I have been attempting to use Github for some of my development, as it provides an easy way to create backups and provides version control.

Update: I commented on Beth’s post.

Wow.

Well, that took awhile. But my image assignment is up and feedback is welcome and appreciated as always! The trouble with these images is that it takes so long (or is impossible, really) to fix anything without starting over. Ah well! Can just attempt to make it better the next time.

There is not much to say that I didn’t include the narrative on my page. So please refer there for a brief description of where and how I altered the images.

And so I fear it will be a short blog post this week.

My conclusions from the image assignment: Photoshop is not as bad as I thought. But it is not an easy tool to work with and one can spend all of ones time in the program attempting to make things “just right”. However, that is a critique more of the user than the tool and I am glad to have gained an ability to manipulate images so that they better communicate the desired information.

Addendum: I commented on Claire’s blog post.

*Please pardon my dust. I was experimenting with themes and homepages and general web presence but have yet to make this one beautiful. *

I really enjoyed the readings for today. The extended piece by Morris was very interesting, both because Morris is a good story teller and because it required me to think about expectations surrounding images in general and photographs in particular. Personally, I find myself generally confused by the debates about truth and authenticity that surrounded the FSA photographs. Photographs conceal as much as they reveal – they record a moment in time but do not record the context. They are as true as they are untrue. And they are the product of an intentional creator – even if the content is unmoved, the frame is chosen and some things are intentionally excluded. They are not neutral – they are created intentionally and need to be used critically.

But I wonder if these questions about truth and authenticity need to be contextualized. Why was it so important during the 1930s and 40s for images to be “true”? Why do my own intuitions align more with those of Bill Ganzel, who dismisses much of the controversy surrounding the photographs because they are “true” to the larger reality, regardless if the particulars of the situation were altered? Have expectations about images changed? Or are similar expectations and ideas expressed when dealing with digitally enhanced images? (In other words, why do H&M’s digital models cause a stir?)

My intuition is that questions about truth and authenticity are both unanswerable and unhelpful, but that discussing expectations about images and focusing on reading images critically provide a way to deal with some of the questions that the FSA images raise. The images were created within a particular context, a particular thought-space about what images do. And I think investigating that thought-space is helpful in interpreting the images themselves, both as shaping and being shaped by the larger culture.

But I think I am not the only one to respond that, yes, images must be dealt with critically, just like text. Megan and Geoff have already written eloquently of the need to treat all of ones evidence critically.

In other news, I spent some time this week experimenting with the tools described in Lynda and, while I have nothing that is ready to be seen, I am happy to report that there is a general easing of tension between Photoshop and myself. The program is incredibly powerful and after it dealt beautifully with some ink spots, I have become less antagonistic toward its complexity and adobe-ness. Which is good, because I am going to have to spend a lot of time with it in the next two weeks…

*I commented on Megan’s post.

Oh Photoshop.

This section of the course will be my Achilles heel. I have opened Photoshop in the past and the result has been anxiety. There are so many ways to do so many different things – and I have very little understanding of what algorithms Photoshop is deploying. It is both exciting and disconcerting to push a button and have the software “optimize” an image for me.

The Lynda tutorials raised a number of questions for me. I am interested in using Photoshop for wire-framing designs and for the creation of graphics and the manipulation of images for the web. However, I was confused by the creation of buttons and animated gifs. It seems that much of this can be created using CSS3, although browser compatibility makes this a less reliable route to take. But the tutorial, while helpful, made an odd set of assumptions about knowledge of Photoshop. While the setting up the workspace was very helpful, I ran into trouble with using the particular tools – it would be helpful to go through the tools and to explain what each of them do. But perhaps I just need to spend time this week clicking on every button… yikes.

The color resources that were part of the assignment for today were helpful! To this point, I have been attempting to generate color schemes from my mind… an effort that has been only moderately successful. But the types of drawing from the colors within an image or using kuler to draw from already generated color schemes was very helpful. Also, the NonDesigners Photoshop book was helpful, or at least will be helpful when I’m working on the image project, and it will be fun to apply the tools to the images at hand.

Thinking more abstractly for a moment, Sheri and David made some thought provoking comments on their blogs about the ability to manipulate images, which Photoshop enables, and some of the ethical concerns that historians do, or should, consider. This appears to be the “hot topic” of the week and I wanted to add a small contribution. Perhaps it is helpful to think in terms of primary and secondary sources. In adjusting the images, adding color, fixing blemishes, we are creating a secondary source, a source that is an interpretation of the primary material. This seems particularly true in the case of adding colors or restoring missing sections of photographs. However, the creation of these secondary materials does not detract from or replace the primary material. In my mind, digitization should always supports, never replaces the physical object. When does this way, the original photograph remains the same and good scholarship requires returning to the primary material. Just as we already know not to rely on secondary material for quotes and we know to return to the primary material, historical research done with digital tools also must be aware of these limitations in secondary sources. (Geoff makes a similar point in his post – I agree, though it is interesting to consider how digital archives, though secondary, can be used as primary text, similar to scholarly edited editions.)

I did not make any changes to my type assignment yet! I will work on that again soon.

*While I have not directly commented, I am responding to Sheri, David, and Geoff in this post (see links above).

I am unsure what to blog about this week. But I thought maybe I would go through my choices for the type assignment and give a sense of where I am thinking of taking the design.

My goal for the overall design was to promote readability and to provide a clean, but pleasant framing for the material. The left sidebar contains some of the metadata for the site. My thought here was to make citation as easy as possible, and so both publishing information and the copyright restrictions that Richard set up are visible. I also added some anchor tags to allow for some navigation in the text – this will be easier and more obvious with some of the other texts I am dealing with. Another thought for future iterations is linking to either pdf or epub versions of the text so that the pieces can be downloaded easily.

The background for the site is an image I made (or attempted to make) in Photoshop. I wanted to experiment with a fixed background, so that the page had the effect of only the text moving. The text comes from the Book of Common Prayer, but the ratio between the image and the content is too large to make any sense of the words. I had hoped to make the background faded, but I think I will need to wait until I have a better handle of Photoshop to accomplish that.

The color choice is a desperate attempt to move away from what I have discovered is my obsession with sage. The “dusty rose” effect on the activated links works but is not my favorite. But I do like the background being an off-white. I think it makes the text gentler on the eyes for reading.

I used a variety of fonts for the project. I am using Typekit for the header – the font is Great Primer. The other fonts I downloaded from The League of Moveable Type. I used Fanwood Text for the main text and Sorts Mills Goudy for the titles and everything else. I am happy with Fanwood for the major text sections; it has pleasant spacing and line height.

Overall I am happy with how this has turned out, but of course, I have stared at it so long that I’ve become attached! Any suggestions are welcome!

Update: I commented on Claire’s and Beth’s post this week.