about arkitrave web design services
colophon
Since you may be interested in some of the technical details of this site, we have included some facts and figures about the typography, photography, and design.
Typography
The body text is set in Trebuchet MS, an oft-maligned typeface which we have grown quite fond of. The lowercase “g” in particular is a selling point. In addition, Trebuchet has a hint of modern-meets-conservative to it, giving it more intrigue than, for example, Arial. The body text has been given a little extra space in between the lines using CSS; this gives it a more open appearance in keeping with Trebuchet's clean, modern look.
The heading text (“about arkitrave”) is an image, using an image-replacement technique. The code is marked up in XHTML as a heading, but the image is substituted. If you could look 5000 pixels to the left of your screen, you would see the heading text in a plain font where it has been moved. The typeface used for the headings is Commercial Script BT, which we felt was a nice contrast to the rest of the site typography.
Photography
You may notice that the front page photo changes periodically. Maybe we drink too much Jones Soda; this photo is a random example of photos we have taken recently. In addition, each topic section contains a fragment of a photo as part of the header image. These are as follows:
| Site Section | Work | Designer | Location |
|---|---|---|---|
| Home | “The Red Cube” | Isamu Noguchi | Marine Midland Building, NYC |
| About | Albright-Knox Art Gallery Addition | Gordon Bunshaft | Buffalo, New York |
| Portfolio | SeaTac Int'l Airport | ? | Seattle, WA |
| Log | Lever House | Gordon Bunshaft | Park Ave, NYC |
| Contact | Selden Street Townhouses | Robert Macon | Rochester, New York |
It really wasn't intentional to have two Gordon Bunshaft buildings; they just happened to be photos that worked well with the header colors. Actually, the building behind Noguchi's sculpture was designed by SOM, so it is probably Bunshaft as well. We suppose it's somewhat a testament to the influence SOM had in New York City, and somewhat a giveaway of our love of Modernist architecture.
All photographs are copyright Eric Shepherd, and may not be reproduced or used without permission. But you wouldn't do that.
Graphic Design
The design of the site began with the header graphic. We wanted to use the “sliding doors” technique for the navigation bar, and chose a background graphic from squidfingers, with color modification for each section of the site. The navigation tabs blend into the header. The background color on the portfolio site is left a charcoal gray to allow the variety of portfolio items to shine.
The images were chosen to complement the dominant background color of the header for the site section, with the requirement that they be pictures of built objects that we really liked, preferably close to home (they are all in New York state except for the Seattle Airport, which is in, well, Seattle, where we lived for several years.
The two-column layout was chosen because it works well for presentation of the type of content we were going to be displaying. We are able to use the right narrow column for news items, portfolio navigation, and secondary content on our weblog.
Known problems: Internet Explorer 5.x doesn't do the dropdown subnavigation on “about” or “portfolio”. In addition, it doesn't center the content (which we could fix easily) and doesn't do the background images correctly on the navigation bar (which we can't fix easily). Internet Explorer 6 performs the subnavigation dropdown list beautifully through no skill of its own; the “whatever:hover” of Peter Nederlof is used to simulate the effect for Internet Explorer. We love you, even though your browser is old and crabby. Safari overlaps the subnavigation dropdowns on “about” and “portfolio,” probably a float problem. Now that we're using Safari, we will get annoyed and fix this soon.
Our graphics are done in Adobe Creative Suite, and our XHTML and CSS are hand-coded in skEdit, a fabulous editor which we can't say enough good things about for Mac OS X.
The computer is an Apple Powerbook G4, seventeen inch. The furniture is IKEA.