Richard Oliver

Design Concepts - D300.18 (June 25, 2007) - Astrid Garcia

Main Project - Re-design of the American-Cassinese website.

Week 1

Week 2

In week two I tried to apply the principles of line and balance. the line under the logo/navigation graphic establishes an upper edge for the three elements in the body. The line also serves to unite the three different elements under the line: 1) photo, 2) text, and 3) alternative navigation and contact. The base of the photograph establishes another line that, although invisible, creates a base for the composition.

Although I read that logos should normally be in the upper left, the direction the eagle faces in the coat of arms is unchangeable. Placing the logo on the left, draws the eye up to the navigation bar that will support drop-down menus for each word—possibly becoming buttons— except the first, "Home."

The heavy amount of black in the photo on the left—Benedictines have been know as "The Black Monks" since the tenth century—is balanced by the logo and a much lighter space on the right.

Week 3

I added subsidiary navigation at the bottom, a frame around the content and a dark background.

In the readings I noted a designer's good advice never to include text in a graphic. I had intended to use JavaScript for the top navigation bar that is part of the graphic, but I would rather try using a script-free, pure CSS menu, then only the eagle would be a graphic.

I haven't been able to find a clean original version of the coat of arms for the Congregation, but I think I can create one in color from other elements.

Week 4

Objective: Incorporate Texture, Pattern or value, and rules of composition into your main project and a separate graphic, image or logo.

Select the graphic at left for the latest comp. Sadly, I was not able to create a separate additional graphic or banner.

I added a textured background to the heading and reversed the color of the text. I took a close-up, digital photo of my bedspread, darkened it and created a background tile. The rough texture adds, I think, a masculine element and the dark color—perhaps it could be darker—might suggest the characteristic black clothing of the monks.

I had no time to work on a colored version of the logo, but I much reduced its size. A Web Developer add-on to Firefox allows one to add guide lines. These are better seen in an full-size screen capture.

Week 5

Objective: Focus on color and typography in your main project.

Since the Congregation has its roots in the Commonwealth of Pennsylvania, I looked for the colors of the state flag and stumbled upon the proposed new design of the state flag.

Cooking up a colorful interpretation of the Congregation's coat of arms that I had been using in the black and white comps, I dissected an American Eagle and colorized the original graphic.

Dissatisfied with both possibilities, I opted instead for a detail of the Medal of Saint Benedict from a photo I had taken of this symbol frequently used among the Benedictines.

The palette consists of only five colors: light blue, dark blue, gold, white and black. The main colors: blue and yellow are strikingly complimentary. I had considered navy blue for the body text, but black is more legible, supports the graphic on the left, and recalls the black horses on the flag of the Commonwealth!

The bottom reverses the blue and gold of the top. Hovered links in the bottom and the "Sitemap" button restate the gold over blue scheme of the top and help maintain unity and harmony. The drop-down links in the top CSS navigation menu use dark blue type on white with a reminder of the light blue background introducing harmony and variety.

Georgia,¹ a highly legible Web serif font, is used for the name of the Congregation. The letters are spaced apart somewhat to fill the space, to create interest, and to convey importance. All other typography uses Tahoma,² a Web sans-serif font that suggests a modern and contemporary institution. I'm not certain the initial drop cap is effective.

Although Web designers today seem to favor the smallest sized fonts available, many visitors to the Congregation's website might not be comfortable with a highly reduced font.

The design, I think, works rather well with subsidiary pages: Vow Formula (a cursive font mimics handwriting), Directory of Monasteries, and the Sitemap.

Week 6

I incorporated almost all of the comments and suggestions from the peer review process that ended the course. Making the background darker much improved the Revised Am-Cass Website that launched 24 August 2007.

--
¹ Font-family: Georgia, 'Palatino Linotype', 'Times New Roman', Times, serif;
²Font-family: Tahoma, "Trebuchet MS", Verdana, Arial, Helvetica, "Gill Sans MT", sans-serif;

Check out the Weekly Labs.

Contact

Bro. Richard Oliver OSB
Saint John's Abbey
31802 County Road 159
Collegeville, MN 56321-2015
Comments, questions, or suggestions? Write to me.

Rev. 06 Nov 2007 / Disclaimer
www.employees.csbsju.edu/roliver/hwg/design/project.html