This week was focused on creating my final intermediate project, my “Design” page. For this page, I wanted to go with a entirely new style and organization, breaking from the earlier projects and trying out ideas for how to design and organize my final project. Since I want my final project to be focused on primary sources, I used a photo of a post journal for my background image. Overtop of this was my main content, using a color scheme of various blues that were inspired by the Army uniforms of the day.

I used a couple of fonts (traveling typewriter and vanilla whale) that I felt were connected to my period and topic for the header and the nav menu, but decided that I would stick with a standard font-family for the main body of the page for readability. The page is relatively simple, as my skills with web design, while miles ahead of where they were at the beginning of the semester, are still fairly rudimentary. I did include float over footnotes, and inserted a cropped and underlined photo of the primary source. For my final project I am also considering including a clickable option for the footnotes that would take the user to a full size photo on a new page.

 

 

Interactivity is the heart of what the web has to offer, both in general and for digital historians. This, however, is not without its difficulties, as illustrated by the Lost Museum website and Josh Brown’s article. I’d seen the website before in CLIO I, and thought it a bit clunky and dated (it first went live in 2000. Yet Brown brings up an even more important issues than the somewhat AOL-like feel…in trying to create an interactive historical mystery, the creators of the Lost Museum had actually limited, rather than broadened user’s options. By limiting users to the options within the website, a lot of historical context was removed. The end result was somewhat like exposing a user to the woodcut’s from Leslie’s Illustrated while not allowing them access to the text…or for that matter any other of the contextual sources that abound for the period.

This is an serious concern, one which hadn’t really occurred to me when I first viewed the Lost Museum website, or, to be honest when I first thought about interactivity and digital history. My main concern originally, as  a historian, was how I could demonstrate my argument in an interactive format, where a user could pick and choose where to go, and in what order. The idea that interactivity was actually shaping (limiting?) users had not seemed that big an issue.

Yet clearly it is. The web’s main attraction for historians is that it opens up the ability to do stuff on a scale not possible in the non-digital world…if instead of opening up accessibility and data we are instead limiting a user’s options we’re kind of missing the point.

 

Comment’s on Eric’s Post: Interactivity

For this week’s blog entry I’m providing some comments on Michael Williams’ Image Assignment. Hopefully this will provide some useful feedback both for Michael going forward and to start our in class discussion of his page.

Overall, Michael did an excellent job. His cropping allows him to eliminate a lot of work during the restore phase without losing anything from the photo. Even with that though, there remained quite a few scratches and other defects, which he skillfully removed, leaving a focused and very clean photo.

I am really impressed with the color work on the dress, the lines are very clean and he was able to add color without losing the detail of the shadows and folds. The skin color still looks a little bit off, but skin color is probably the hardest aspect of colorization.

Michael’s engraving matting was also done very well, he was able to add the background in without losing any of the detail of the engraving itself. However, while his background is very close to the color of his webpage, it is still possible to see the slight difference in the color from his image and the website itself.

This week’s readings combined so very straight forward, hands-on considerations for using and altering images with some of the more theoretical issues with image use and image manipulation. Dr. Petrik’s entry on managing engravings was very helpful for the nuts and bolts of working with historical images, and especially old style engravings, as part of web design. Not for the first time I found myself wishing I had read ahead in this class, as I struggled with exactly this same issue in trying to insert the War Department Seal engraving as a header image in my Typography assignment. Her tutorial would have been extremely useful, and probably would have saved me a great deal of time in addition to resulting in a better final product.

In contrast, the multipart article by Errol Morris deals with some of the more abstract questions raised by photography, and image manipulation in general. As Morris points out, this question predates photoshop, as even before the advent of image-altering software there was significant debate over the staging of photos and whether they accurately represented reality. Photoshop merely slightly adjusted the issue by moving the question of representativeness from the original photos depiction of reality to the end photos depiction of the original photo. While Morris’ article occasionally got a little too “artsy” in its debate over this issue, I felt that his discussion of photography and reality closely relates to the ever present question of existence of positive, objective truth dealt with by historians. Perhaps the most useful of his observations was the concept that photographs should be treated with the same “close reading” we apply to textual documents.

 

Comment on Steve’s Post#5: “Image Power”

This week’s readings helped me think about color in a more systematic manner than I have in my early attempts at web design. On my portfolio and type pages I used colors that tied to my theme and content, but never worked through in any sort of organized process how they worked with each other. Clearly, a novice mistake, and something I can improve upon going forward.

For this purpose, I found the chapter in Robin Williams’ work a useful primer, although at times it felt like a rehashing of 2nd grade art class. But perhaps that’s what I need at this point. And while Williams covers considerations of color for both print and the web, the articles from creativebloq and Clagnut offered numerous (to be honest, slightly overwhelming) options for tools to help web designers choose and use colors. In addition to just assisting with finding complementary colors, so of these applications allow you to derive a color palette from an image you upload. This is a very powerful tool for designers, especially when constructing a web site places a heavy emphasis on visual image over text, and something I’d like to experiment with more moving forward.

Complementing the use of color in general, and the use of images and color together specifically, was the chapter on image use and selection from Golombisky and Hagen. In addition to covering the art of image selection and use (using image to provide visual cues and entry points, asymmetric balance, tight-cropping, etc.), I found this reading especially useful in breaking down some of the more technical aspects of images that I am less familiar with, such as resolution and file format.

Finally, the Lynda.com course was perhaps the most pragmatically useful in preparing me for the future projects that are part of the CLIO II course. While providing a fairly comprehensive introduction to photoshop, and more specifically to the use of photoshop for web design, I found it both too basic and too advanced at times. Thus while there were some sections that repetitively covered fundamental topics we’ve already learned there was also significant time spent on tools and topics that are likely more advanced than we will cover in the scope of CLIO II. In particular, it seemed odd that a class that seemed targeted at fairly beginning-level designers/developers was structured around designing and building a website for a client. Not there is not some benefit in doing a wireframe or a mock-up, but as we will not require outside approval for our pages we probably won’t be doing them in such distinct steps.

 

Comment on Alyssa’s Post#6: Color

So as I sit down to write this it is once again snowing, layering a couple more inches on top of the snow that canceled our class last week. And, since we had no assigned readings this week, I will concentrate in this post on the web page project I worked on in lieu of class. Reverse engineering a website offers some significant challenge compared to an objective based design, especially for a novice digital historian such as myself. Since I could see the outcome but not the method I had to use several stages of trial and error to recreate the Columbine page.

Creating the header and nav were fairly straight forward as we did essentially the same design in class. Getting the text aligned properly was more difficult, especially someone of my rudimentary skill level. I was eventually able to get it where I wanted it by creating a CSS for #content-inner and floating it right with a width termed in percentages that aligned it off of the nav bars. However, this caused the text from my footer to pull up underneath the nav bar and beside the text, looking all messy and out of place. I’m sure there is a more elegant way to do it, by I eventually got it back down at the bottom of the page where I wanted it by inserting enough <br> to push it below the content text. I also had to play around with the various margins to get the nav bars and the text to align evenly below the header.

The pull quote was relatively easy, although I played around with the font-weight to get it somewhere in between the body text and the header texts (I decided on 500). Borders were easy to insert, and I choose a lighter variant of the background color for the header and footer. I’m not entirely satisfied with way the words lay out, I might still go back and play with the leading and letter spacing to make it more even and visually appealing.

Finally, I inserted the columbine flower image and resized it to fit inside the header bar. The one thing I could not figure out was how to get the content’s ivory background to extend above the header and below the footer. I tried playing with the margins and padding of the header and footers to no effect; I was able to get it there by making the body color ivory, but that threw off the borders across the rest of the page (and was also clearly not the method used in the screen shot example, which has a gray body visible around the ivory content). Maybe I can still figure it out before Monday’s class, or one of my classmates can post in the comments how they figured it out.

 

Comment’s on Mason’s Post#4: Putting the Pieces Together

Things I wish I’d done before building my portfolio page: read these chapters in Lupton and Golombisky & Hagen and watched the Lynda.com tutorial. These three sources provide a lot of great info and ideas on web design (and design in general) and construction, and compliment each other well. The Golombisky and Hagen chapters provided a great base for general layout ideas and design principles (several of which I violated on my first stab at my portfolio website…boxes anyone?) The Lupton reading extended this general basis a little further, providing more detail on the application of these design principles to the web as well as giving a good sampling of options available for web design, many of which are well advanced beyond my abilities. Finally, the lynda course went through the nuts and bolts of actually turning these design concepts into a website using dreamweaver. Combined with the feedback I received in class last week, I have a pretty good laundry list of updates and improvements to make to my portfolio page.

The Lupton readings were useful in providing web-specific design ideas, but I felt that the Golombisky and Hagen chapters were actually the most beneficial to me moving forward in the class, and my overall progression in digital history. the seven elements of design, six principles, and four laws of Gestalt theory provide a structure way to look at and evaluate my website, while chapters four and six provide some examples of good dos and don’ts of layout design. This conceptional framework is certainly more cohesive and effective than my previous system of simply “does this look good?”

Finally, the Nielsen article offered some good (and very specific) guidelines on a very important element of web design: clearly denoting where your clickable links are. This is perhaps the most important single element of a webpage, as it shows user how to navigate through your site, and this user-controlled (but designer influenced) navigability is the defining feature of the web. While some critics accuse Nielsen of attempting to “destroy design and bring back blue links on white pages,” his guidelines are more flexible than that an merely represent some best practices for ensuring that your links are easily and intuitively identifiable, and conversely that no other elements of your page are mistaken for links.

A final thought for the week is that for future semesters of this course it might be useful to switch the scheduling of this week and last week’s readings. While going through and fixing typographical issues on our pages would be fairly easy, having these design concepts before turning in our portfolio pages (especially the Lynda course!) might have saved a good segment of the class from a lot of mistakes and avoided some extensive revising this week. Although maybe doing it wrong the first time had some learning value.

 

Comment on Stephanie’s Post #3: Geocities called…

This weeks readings were a revelation in that I’d never really thought about type before. Obviously I knew that my Microsoft Word had multiple fonts, but I’d never really paid attention to them; if a professor didn’t specify a font I would just stick with the word processor’s default. Most of the time I couldn’t have even told you what font a paper was in when I turned it in. I’ve also been a “hard copy guy” for most of my career; to this day I still prefer whenever possible to do my reading and editing in actual print rather than on a computer screen.

So the various complications and intricacies of type on the web had never really occurred to me. I thought the readings from Ellen Lupton’s book were especially useful in providing a basic introduction and breakdown of factors to consider when choosing and employing type on the web. I can easily imagine myself having it open on my desktop (“hard copy” desktop that is) while I work on my on webpage designs during this class.

The most intriguing take away from this week’s reading however, came from the Morris article. The idea that choice of font could actually have a statistically meaningful impact on readers’ assessment of the believability of your content is amazing. I almost don’t believe it, but his article was in Times New Roman, so I guess I’ll give him the benefit of the doubt. It is clear from this article, and the others we read this week, that typography is a critical part of design and should be considered just as importantly as the overall layout when designing a webpage (or a paper…I guess my dissertation will either be in Georgia or Baskerville). This is not limited to font choice either, as both Lupton and Williams illustrate the importance of line spacing, alignment, size, and the differentiation between body and headings.

A secondary issue dealt with this week is the difficulty in applying footnotes on the web. While I agree completely with Dr. Petrik’s reasoning for the continued use of superscript notes, simply reproducing the form of print media on the web (with the notes at the bottom of the page) seems to fail to take advantage of the abilities inherent in the new medium of  the web. Some form of navigation between note and body seems a better use of the web’s capabilities (otherwise just make it a downloadable PDF so guys like me can easily print it out). While jump navigation from the body to the note (as in Wikipedia) is one method, the use of pop-ups as recommended in Alan Jacobs article (and given as an example in Dr. Petrik’s) seems much more elegant. That said, I worry that a novice digital historian such as myself attempting this method could easily make enough errors to make this method more obscuring than user-friendly.

While I might not be ready to dive into pop-up footnotes or a statistical experiment to choose the font for my next paper/webpage, I will certainly pay a little more attention to my typographical choices than I have in the past.

 

Comment on Eric Gonzaba’s Post#2: Bye TNR, Hello Georgia

 

While this week’s readings were fairly diverse, I felt the major theme stretching across them was the important relationship between design and content. According to the results of the Stanford Credibility project, a webpage’s design and appearance are, in many cases, more important than its actual content in determining its perceived credibility to the average user. Nor is this phenomenon limited to the web, as Hagen and Golombisky make the same point, if less explicitly, in their discussion of design considerations for print media.

Clearly then, any website that hopes to achieve credibility, not to mention actually attracting and keeping visitors, must consider its design and aesthetics as a element almost as important as its content. Additionally, as pointed out by Hagen and Golombisky, this design should compliment the content rather than just provide a pretty interface for the cutting and pasting of content. Design and content must be developed side by side, not independently and joined together in the final product.

Perhaps the most interesting element of the intersection of design and content is provided by Donald Norman in his article on why “Attractive Things Work Better.” Norman argues for the use of design to engage the overlapping of the three levels of brain processing: visceral, behavioral, and reflective. Essentially, by using to design to engage a visceral reaction we can improve the reflective processing of the content. For websites, the implication of this is that a design that provokes a positive affective response will encourage the curiosity, creativity, and learning ability of viewers (resulting in prolonged visits and increased understanding of content). An important consideration for the design of websites (and other media), this also perhaps partially explains the results of the Stanford Credibility Project.

But while website designers will primarily want to focus on achieving positive affect, in certain circumstances the use of negative affect is also useful. Negative affect, according to Norman, produces high focus and concentration (often to the point of tunnel vision), which may be more desirable to designers for some tasks than the creativity engendered by positive affect. Norman’s example is of the monitoring station at a nuclear power plant, which uses positive affect (attractive, pleasant environment) during normal operations but imposes negative affect (alarms) to achieve increased focus. This also has important implication for designs that are intended to be used in situations with externally introduced high stress. In these cases, rather than designing to introduce affect, designers need to focus on accounting for the visceral effect of outside factors. The designer of a Heads-Up Display for a fighter aircraft, for example, should concentrate on making the display as simple and intuitive as possible, so that even during the tunnel vision resulting from high stress combat pilots will be able to quickly and effectively use the display.

A second major theme engaged by this week’s readings is the permanence or impermanence of the web. Despite the efforts of projects like the Internet Archive and its Wayback Machine, millions of websites have been written over or deleted. More importantly, even those that have been saved can be difficult to find due to the problems with navigating Web Archives. While not as a big a concern for our projects this semester as the intersection of design and content, this obviously holds huge implications for the future of our profession as historians. While historians increasingly use the web for research and citations, and digital historians especially argue for the increased transparency of using links in footnotes, the credibility of this methodology is called into question when these links are dead, or more dangerously, overwritten with new material. Thankfully, perma.cc provides at least a partial solution to this problem by saving a permanent link to the website as cited. Yet this solution suffers from the fact that its viability is dependent on the continued existence of a third party institution, and also will obviously only work for links to digital scholarship, and does nothing to protect websites listed in footnotes of print works.

 

Comment on Jordan’s post #1: Credibility of Design