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