Category: hist697

Designing From a Template

This week our class’s design assignment was due. In some ways, this was an page that should build on our previous preliminary, typography, and image assignments. I certainly employed many of these skills in my design assignment. Manipulating images so my work would be more cohesive. I made several images the same size and resolution to add consistency to my design. Likewise, I used a serif font, Libre Baskerville, to affect an older, historic feel.

What was completely new to me, was adapting a complex, responsive layout to my own needs. This is not a simple copy and paste job. It was somewhat simple to sub in my historical brewing content, but it was much more difficult to add sections and content not already included. Even navigating where the relevant css could be found was difficult as there were seven different css files included with the free layout from HTML5 UP. With the jquery and javascript littering my page, it felt like moving from tee ball to the major leagues. Despite the complexity, I now feel much more comfortable with some of the building html/css blocks- anchor links within a page, padding/margins/alignment, and css fonts.

I also learned several new techniques in order to learn how to effectively deploy my layout. Several image features were actually from a font called font awesome. It took me awhile to figure out why there were no icons in the images folder, but this technique will be very useful for my future work. I also learned about css gradients so that I could change the color of the layout to match my header image. I didn’t expect to learn these new techniques this week, but by reading a professional developer’s code I had to understand some of the state of the art in contemporary web design. I have no doubt this will improve my historic web pages.

My comment on Mason’s blog.

 

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.

Accessible Web

How Accessible is my page? Before this week’s readings, I knew some of the very basics of web accessibility. Alt texts in images help screen readers. Section 508 compliance is a thing. That’s frequently on the bottom of government websites? Ok, so I knew basically nothing. The readings provided great context in providing access to the web for the disabled community. Historians’ goals often include telling the story of disadvantaged communities, so ensuring access for all audiences is crucial to our ethics.

But the most impactful part of the readings was actually submitting my website to the WAVE Web Accessibility Tool. This tool showed places where I didn’t use alt text or had other site design issues. I didn’t think that some PDF files would be inaccessible or overly complicated for screen readers to access when adding links to them. I also didn’t think about the small icons that appear next to the author’s name on each post. WordPress automatically posts these based on the theme used, but doesn’t include alt text. I will need to explore how to add alt text to these images to make my site more accessible.

By and large, I did a fair job of including alt text for my images. Yet it’s an aspect of my site that I’ll need to stay vigilant about to ensure the widest possible access to my writing. Being able to submit my work was much more helpful by giving me my own real world examples whereas the readings only provided theoretical examples.

Comment on Rob’s blog. 

 

Eric’s Portfolio Image Page

One of the strengths of Eric’s page is that his images complement a really fascinating story. The recolorization of the black and white nightclub scene makes sense due to the rarity of color photographs in night clubs. Eric’s sense of light vs darkness gives the photo a chiaroscuro effect which is interesting. My favorite aspect is the woman’s red dress which really pops from the darker background. The man’s blue jeans are a nice contrast to the red, but on further reflection, look a little too blue to be real. It’s possible that my current screen (mac) plays a role in this feeling. On a quick initial view with my android cell phone, the blue jeans looked realistic.

His touch ups on the photograph of the bartender are very well done. Eric successfully removes the “noise” in the right side of the photograph which lets the focus on the man (and his reflection in the mirror), which is the focal point of the photograph, shine through. The additional contrast added to the mans face is successful and makes him much less pale. It might go a little too far and appear almost burned (too much burn tool?).

The engraving is a nice find given the time period. I also work in the twentieth century and cheated slightly by making an “engraving-style” image. Because Eric’s chosen engraving is a small detail on another image, making the size large on the website images draws attention to the low quality of the initial image. Given the context of the website and other similar sized images, it would look out of place as a tiny picture, but I think the image works better on a smaller scale.

On the overall page, the color palette matches the feel of disco and contrasts each other well. The alignment and design are tasteful, though perhaps the text could be a little larger to be more readable.

Comments on Nathan’s Image Page

Our Clio 2 class has been busily building up our Photoshop skills and this week we showed off some of the techniques we’ve been mastering through a variety of image assignments. Since there was no reading assignment, we were tasked to review the work of one of our classmates. I am reviewing Nathan Michalewicz’s page.

The first aspect which struck me was how fantastic his recolorization image turned out. The colors are slightly faded, making it appear exactly like an old color photograph from the 1960s or a painting from the 19th century Realist school. The colors chosen seem appropriate for the time period and more importantly, they are added with care and precision down to the gold buttons. The man’s skin is a little pale, but not enough to detract from the overall effect. The decisions on cropping and repairing the photo are also well chosen.

The woodcut of Murad III is also effectively manipulated. Removing the artifacts from the archive: stamps and borders, helps the viewer imagine the Sultan without the materiality of the woodcut. The tan background, blended with the black and white photo is a very effective technique. That, plus the vignette effect, makes the graphic very well suited to the earth tones of Nathan’s page design.

I have very few critiques of Nathan’s photo editing choices. Besides the overly pale skin of the man with the chair, I thought the vignette effect reduced the contrast of lines and cross-hatching on the woodcut of Murad and ultimately was less powerful than the original. I think a smaller diameter of vignette/fading would have the same blending effect with more impact.

A few other small nits that are secondary to the image assignment. First, the text in the background with the very complex images might be a little too busy. A single color or simpler background might work better on this particular page. Second, the copy could use one more pass for typographical errors. Again, not related to the images, but correctness always helps the page’s authority. Finally, the page title (not just the header) should reflect “image” not “type.”

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.