Category Archives: HIST 697

Laying it out on the line

After finishing this week’s readings and tutorials, I feel like I glimpsed into the life of graphic and web designers and it was both exciting and terrifying. I am slowly gaining a more discerning eye with manipulations of design to draw in the user. By recognizing how audiences approaches on and off screen content we can create better and stronger utilized finished products. Last semester, we talked about using Google Analytics to track clicks on adverts and visits among other things. Marketers and web designers use heat mapping to gleam the best placement for adverts. When I googled eye tracking Kissmetrics blog on 7 Marketing Lessons from Eye Tracking Studies had interesting screenshots of heat mapped eye tracking that prove our readings. It’s just using the 5 steps to visual success outlined in White Space is Not Your Enemy.

1. Establish a clear focal point
2. Have a minimal number of groups for the eye to scan
3. Guide eye movement with visual sightlines
4. Set type well
5. Be simple – less is more

I feel like the cart came before the horse a little bit. It would have been nice to use these techniques during our first foray into web design. Using fixed or custom grids is now such an obvious first step or check to make before completing your layout to not overpower or create an imbalance in the layout. Likewise, manipulating flow of movement through the use of S curves or diagonal lines pointing to the start of the text seems like such a subtle way to guide the reader.


As soon as I uploaded my Dreamweaver portfolio site, I realized that while I worked out positioning in the various browsers, my site did not transfer well in mobile. The “Works that Work” in Type on Screen gave great examples to consider for changing the design to fit multiple platforms. Many of the screenshots of layouts and interfaces were fascinating, I was extremely excited at the prospect of creating something so well planned – using hide and reveal, gradients, and/or type as navigation. I just really wish the captions went more in depth in HTML and CSS – a little more guidance to see how that element breaks down in the coding would be so helpful. I can’t seem to get the various sections laid out for mobile. How should a mobile site handle block quotes? How did you guys reformat the navigation to fit for mobile?

I posted on Tamara’s Blog.

Typography and Putting Through the Ringer

As we dove head first into HTML and CSS in class last week I realized that Paul (the guru) and I had not spent nearly enough time together. But with his help, the developer tool, and I started to get the hang of it. In particular, I love using the developer tool on websites and actually kind of understanding its construction.

The biggest issues I had in creating my page revolved around positioning. I wanted a roughly three column layout. I continually tried using the floating and clear sections, but it only moved to a point. The section was not going where I wanted it considering Paul made it look so easy. The CSS Position property reference laid out the differences between the properties. I assigned “absolute” to the left and right side sections and relative to the middle section. I also used the developer tool to see how other websites dealt with their block quotes and side menus. This all seemed to do the trick in Dreamweaver’s live version but when I previewed it in Google Chrome and Microsoft Edge the block quote moved into the footer. I eventually played around with it enough to get a delicate balance that showed close to my vision in every available browser. Amidst configuring the position it helped that Dreamweaver is so responsive. You see any changes immediately in live view.

I was wondering though what browser views are available in the Apple version? I would have liked to see how my page translates into Safari. Mac users, do you have any idea which browser mimics Safari most?

Errol Morris’s “Hear, All Ye People; Hearken, O Earth,” study on the effects of typography in journalism results didn’t surprise me. I’ve always had a love affair with Oldstyle type, but I never understood why. As we read earlier, design is supposed to emit or draw out emotion and that must juxtapose in some way with what David Dunning describes as personality. In the case of Baskerville, its formal “starchiness” seems to produce a certain level of trust. In contrast, Comic Sans is childish and almost comical, especially when CERN used it to make its epic scientific breakthrough. I’ll admit until recently I had my phone font set to Comic Sans because it makes me happy and reminds me of childhood, but I would definitely think twice about using it in a professional setting.

The biggest takeaway from this weeks readings was to recognize that less is more. You can integrate a decorative font like Comic Sans but only for emphasis and depending on the seriousness of the topic. Keeping it simple with 3-4 font choices and only 1 per font type. All I want to use is the fun decorative fonts so this will definitely be a challenge.

Eventually I want to set up a link from my WordPress page, but for now here is my portfolio page.

Commented/thanked Josh for his instructions.


Week 1

I started the readings this week a little hesitant, not knowing quite what to expect from this course. I really enjoyed learning the most basic aspects of design and look forward to applying everything to our big projects. I fancied myself an artist growing up and this class looks to be an interesting mix of artistic application and hardcore break downs of software and coding.

The practical exercises at the end of the chapters in White Space is Not Your Enemy showed how omnipresent design is in our society. I broke down the design aspects on a pair of running shoes – and the form versus function debate. For the most part I feel like the shoes are predominantly function, even the fancy reflective colors help keep runners safe. That being said I have definitely spent more money on the same pair of shoes in a different color simply because I liked (or was emotionally drawn to) a certain and inevitably more expensive color.

Having taken Clio I last semester, I felt I had a pretty good grasp of what constitutes digital humanities. Stephen Ramsay’s second article offered a great summation that I definitely plan on using. On the one hand “Procedural literacy,” could be seen as just a fancy way to say “learn by doing.” On the other hand, when you are forced to break down elements of your project to the bare data level and rebuild using various tools of the trade, you undoubtedly discover new roads to take in your research. The journey is often more important than the end.

I was able to get about halfway through the Dreamweaver course and I feel a little overwhelmed. One of my classmates told me about the website. With their HTML reference page split screen I started to grasp the concepts a little better. I look forward to getting hands on help in class this week because I really had a hard time getting past the most basic concepts.