Category: Readings

User Interaction

Josh Brown and the Lost Museum are of a time in which user interaction looked significantly different than today’s web. Then Flash websites could provide some interaction in slow loading and clunky websites. Online gaming was in its infancy and the major ways people interacted with websites was through “guest books” or the very young social web where Myspace was king. In this world, the Lost Museum was novel and somewhat sophisticated. Yet, Brown’s self critiques ring true, the site lacked the unrestrained and immersive world of Myst, its inspiration. Now even virtual worlds like Second Life are passe. It seems that the historical web has had trouble interacting with public audiences compared to other disciplines. There have been marginally successful “crowd sourced” projects, and commercial sites like Ancestry.com are popular. Yet, historical websites frequently lag behind in allowing users to interact with sources, maps, or documents.

One area in which new technology could provide some of this needed interactivity is in javascript charting languages like D3. Where Jquery makes websites scroll smoothly and look more professional (but reduce accessibility), D3 provides users the opportunity to fully explore a project’s data. This is used to great affect with Lincoln Mullen’s Maps of Slavery’s expansion. The article provides a clear argument, but users can still interact with the underlying data by changing dates, hovering over specific counties, or playing with a variety of other options. This becomes a model for more active learning because users can see how changing options affect the population of slaves and free blacks across time and place. Plus it just looks cool!

My comment on Ben’s site.

The Vintage Web: What’s New is Old

Our reading load has begun to taper off with the expectation of more assignments due in the coming weeks: an image and design assignments, plus the looming final project. In light of this, my viewing of Lynda.com and messing around with Photoshop has increased proportionally. Speaking of practical photoshop techniques, I enjoyed Cameron Moll’s “vintage” suggestions and intend to employ them in my upcoming assignments. When I saw the “2004” date on his posts, I was extremely skeptical. Fortunately, neither the advice, nor the design was stale (I wish I could say the same for his links to “other experts“- all broken). The sharpened blur and “machine wash cycle” are really great image effects which  should work well in my design (maybe a fake vintage beer label similar to Moll’s example?).

For the image and design assignments, I think I’m going to re-design a website for my side gig/hobby: beer history consulting.

I created a website banner using this photo from the incredible and historic Schlenkerla Brewery in Bamberg, Germany.

Schlenkerla Brewery Mural
A mural of gnomes brewing beer at the Schlenkerla Brewery in Bamberg, Germany.

Here’s another picture to give you an idea of the scale of this incredible mural. Of gnomes. Making beer.

Peter Jones with Schlenkerla Brewery Mural
A photo with the author at Schlenkerla.

My original attempt wasn’t bad, but with my new skills and more work, I think I’ll be able to do a much more interesting header. I really like the colors in the banner, so hopefully I can use these earthy yellows and reds (I know.. everyone in class is using earthtones).

If anyone has other design suggestions, please leave them in the comments.

Comment on Alyssa’s blog.

Ethics of Photography

It was fascinating to read Errol Morris’ series of posts on the ethics of photojournalism in reference to FSA photographers. Morris looked at Arthur Rothstein’s and Walker Evans’ most controversial photos from nearly as many angles as Edward Steichen photographed his cups and saucers.

Migrant Mother Photo
One of the most famous FSA photos, Dorothy Lange likely directed her subject to a degree. How much does this impact how we view it? Photo at LOC

Morris engaged the photos and photographers in an attempt to get at their core ethics and answer the question: what does photographic evidence mean? This article contrasted interestingly with the spirit behind the Lynda.com tutorials on digital photo editing. Morris admits that photoshopping images is only one of the newest forms in a long line of techniques to use photography for political purposes. Interestingly, the Lynda.com tutorials, especially the tutorial on photo restoration, are not trying to allow an editor to change a photo for their own purposes, but to present what the original photographer would have wanted to convey. By stripping the damage that time has done to a photograph, the editor can extract the essence of the original.

Morris’ series also impressed on me, how important a sense of ethics around web images is to any historical website I create. Rothstein and Evans were trying to tell particular stories, though felt they presented their subjects fairly. Many in America strongly disagreed and as a result, Rothstein, in particular, was discredited. As Morris concludes: “It should not be lost on any of us that these controversies are still with us.” It’s an important lesson for all historians on the web.

Comment on Steve’s Post.

Update: Weight of Font

I mentioned in one of my blog posts about how much I enjoyed the “HRDWRKCO” design in Ellen Lupton’s Type On Screen. While googling some of the techniques in the Lynda.com photoshop video, I stumbled upon a blog post explaining how the designer, Josh Brewer, created the original. The post also describes his techniques to ensure it looked good even if there were problems displaying the font he used. He created a website that toggles between the intended fonts and the “backup” fonts to show their minimal differences. Josh is a designer at Twitter and very skilled at using web typography. The blog, on the Typekit website, is a wealth of information on all things web typography. It even brought a very cool and well designed history website to my attention: The Burning of Columbia, South Carolina (150 years ago).

Playing With Color

This week’s readings played with a variety of visual effects: Photoshop and images, and color. Much like the readings on fonts, I felt like I knew something about color as I could recognize differences among fonts. But before the past week’s readings I didn’t know how to describe differences in fonts beside the “emotion” they gave to particular text. This week’s readings were similar in that I knew when colors “didn’t look right” but I now have a better vocabulary to describe color relationships than merely what I remember about color wheels from middle school art class. Experimenting with hues and tints provided a much larger field of colors with which I could experiment. Using split complements added an interesting technique for choosing complementary colors that I can use in my image or design work. I intuitively knew that colors opposite of each other on the color wheel “looked right” together, but now I understand why and how to best use them.

Beyond just a new color vocabulary, the readings gave me tools to interact with colors for web design. I was able to use the Hex Color Generator to find compatible colors for my portfolio site. I also love using Chrome dev tools in my workflow and lo and behold, colorzilla can provide a lot of these features in my browser. I still feel like I’m not a natural at color, but using tints and hues along with a variety of new web tools has already improved some of my designs.

 

My comment on Eric’s blog.

The Weight of Font Pt 2

In this week’s readings, I really enjoyed Ellen Lupton’s Type On Screen chapters about text effects. While I had learned much about font family’s and different typefaces from last week’s readings and Lynda.com tutorials, I figured text effects and usage would be fairly straightforward. There are fewer tools to manipulate text compared to the myriad fonts available, yet these tools can have subtle but just as powerful of an effect on the design’s impact. One of my favorite examples involved a poster for HRDWRKCO on page 67. The space between letters and size of some words waxed and waned to provide a rhythm to the phrase that echoed the rhythm of working hard all day. Simple kerning and font size provided an interesting contrast with great success.

NewWMATAsign1

WMATA’s recent campaign to halt sexual harassment in the system uses effective visual design to get noticed among the many other advertisements and cell phone screens in the metro. One particular advertisement caught my eye due to it’s interesting use of text effects. Similar to the HRDWRKCO example, the kerning technique gives the design movement and in this case, a full stop.

The letters are kerned with wide letter spacing leading to a narrow letter spacing to give movement. A lack of focus also adds to this sense of movement. While this was clearly done with design or publisher software, I was able to use some of the techniques mentioned by Lupton and exemplified in this design on my website. Simply adding additional line spacing made a huge difference to my portfolio’s readability. Adding in-line span elements to certain words- letter spacing, bold, or italics, also improved the impact of important words in my content.

The Weight of Font

I’ve always subconsciously known that fonts bring particular weight to their content. It was exciting to learn from Errol Morris just how important font can be to a project’s authority with its readers. How is Baskerville not used in most web publications after Morris’ experiment?? I previously used all sans serif fonts because it was the default for my blogs “theme” and it had a modern, updated look that I appreciated. I also couldn’t explain the difference between different fonts to save my life. Based on Morris, it makes sense for me to change to Libre Baskerville (a free Google fonts version of traditional Baskerville which is optimized for web and mobile viewing). This provides my blog with a more authoritative feel, though I probably need to experiment with the headers to pair with this change in body font.

Of course there are moments when tradition and authority are not the desired style. Williams and Lupton explain the appropriateness of serif vs sans fonts or when script or slab might provide more impact in a header. But I expect my style will bring my writing authority and scholarly heft. And comic sans is seemingly one of the clearest examples of a font that provides your work with no intellectual weight (Stephanie Seal describes some interesting examples of when a comic sans-like font is appropriate for a dyslexic audience- my comment).

Yet comic sans provided one of the more powerful images of 2014.

I Can't Breathe - Comic Sans
Lebron James, Photo Courtesy of Al Bello/Getty Images at http://www.fastcodesign.com/3039705/why-comic-sans-works-so-well-on-the-i-cant-breathe-shirts

 

The death of Eric Garner sparked a social campaign for justice in America. As John Brownlee argues, the “everyman” font, comic sans, was perfect for providing a message that was as welcoming to all as it forcefully argued against violent police action. The shirt is simple, in font and design, and the message is similarly simple and direct. It doesn’t need Baskerville to help it argue for justice.

While I don’t anticipate using comic sans in my blog or publications, the I Can’t Breathe shirt shows how each font (even comic sans) can have a particular purpose or tone.

 

Drucker’s Difficult Graphesis

 

I especially enjoyed the design-centered readings and the internet preservation readings this week. Jill Lepore persuasively argued why preserving the internet matters and WSINYE and Norman gave a good introduction to some of the nuts and bolts behind why good design matters.

I had problems with Johanna Drucker’s Graphesis. We read Drucker’s 2011 article of the same name in Clio 1 which laid out her argument concerning the uses of “hard” data in the humanities. Classmates agreed and disagreed with parts of her argument, but it seems to be a useful corrective to digital humanists. Yes, we can take all the newly available data and manipulate it, but we also need to think deeply about what is underlying this.

I was expecting the book version to explain this thesis more fully and provide new examples of “graphesis” or humanistic data. But this portion was tacked onto the end and hardly any more extended than the article’s examples. The heavy post-modernist theoretical language doesn’t make it any easier to wade through and it probably deserves another read to absorb everything she is trying to unpack.

grammarofornamen00joneuoft_0023

Page from Jones’ Grammar of Ornament, referenced in Drucker’s Graphesis.

 

While Drucker doesn’t give new answers to what data should look like for the humanities, she does give a fantastic history of how humans have evolved in their ability to represent knowledge graphically. The very early and especially mid 19th century representations of knowledge were powerful in their similarity and difference to modern examples. One of her examples, Owen Jones’ The Grammar of Ornament can be found at the Internet Archive and has some fascinating designs (being published in 1856 means it’s in the public domain). I don’t know how digital history should be reinvented, but there is nothing essential or static about how we’ve represented knowledge. That alone makes a powerful argument for Graphesis.