Assignment Blog: Design

For weeks I’ve been blogging about how I thought that black, white, red, and blue were the colors that best represented  the period I was trying to evoke visually on my Web sites — World War II.  Professor Petrik chided me to be more adventurous in adding color to my sites — that it wasn’t a horrible thing to “stretch” a little. My standing fear had been that stark color contrasts might fail to capture the World War II era and, most concerning of all, cause my site to appear “cartoonish” and disrespectful to the men who died on D-Day. But after learning how to colorize photographs in Photoshop and locating actual color images of D-Day, I realized that I could bring more color into my sites and still capture a proper visual representation of the era. Most importantly, though,  I couldstill do justice to the sacrifices made by the men who assaulted the beaches.  Therefore, I was determined to add more color to my Design assignment in order to complement my newly discovered color D-Day photographs and to make the site more visually appealing.  And, above all, I wanted to bring to bear all the skills I had learned throughout the semester, so I used my colorized image of Eisenhower and other design features to add some visual appeal that had been generally lacking in my other assignments.

The background image was going to be my greatest challenge, though.  But before I tackled backgrounds, I wanted first to add something visually appealing and colorful to my <h1> header, which seemed a bit dull. I located a nice color digital image of the Supreme Allied Headquarters Expeditionary Force (SHAEF) shoulder patch. Using what I learned about “position: absolute,” I inserted it to the right of the <h1> header area, and it looked great. The color hinting in the patch allowed me to bring in more colors to the site.  The image’s placement  worked just fine when viewed in Internet Explorer, Chrome, and Firefox. Unfortunately, the SHAEF patch appeared offset when viewed in Safari. After several hours of toying with the CSS, I somehow combined some commands for “position: absolute” with “float image: right,” and everything worked fine. Don’t ask me what I did; all I know is that it worked. It was an annoying glitch — to say the least.

For the background image, I selected a color D-Day image of GIs posing in front of their landing craft in England. The picture had some rich blues, reds, khakis, and greens — all colors that would work nicely with my site design. When I set the image as a background, it fit beautifully. I was particularly happy that the image featured a black GI, a much needed visual acknowledgement of the all-inclusive nature of the American contribution on D-Day.  The only problem is that the image was too clear and bright, taking away from the central focus of my Design site, the subject of which was Eisenhower’s “Great Crusade” message on D-Day. Professor Petrik urged me to lighten the image’s opacity in Photoshop, which I did — with excellent results. When I added the  image as my background, the color was still there but not as pronounced — or as overwhelming — as before. The main body of the site stuck out nicely, and I even changed the font color of my <h2> headers to green, which also worked well.

For the moment, I’m happy with the site. I plan to use a lighter opacity on the background images for my Final Project’s Web pages, and I’m excited to see how they will look.  In the meantime, I’ll keep plugging away!

Steve Rusiecki


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>