Category: Practicum

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.

 

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.