10+ Websites That Make Good Photography Work for Them
Student Guest Post Author Info
Student Bio: Michael Hawker
Student Website: Website
Student Bio: Michael is a NCARB and CSI-certified architect -- and creative artist at heart -- that apprenticed with the Frank Lloyd Wright-established Taliesin Fellowship in 1994. Since, he has made Organic Architecture and Design principles and advocacy a lifelong endeavor through his own practice, education, volunteer involvements, and writings. His specialty in practice are residences and stained glass designs, under his firm names of Zoetic Architecture and Zoetic Arts. He studied with Canadian Gold Medalist architect Douglas Cardinal while a graduate student and worked in the reknown architectural firm of Gunnar Birkerts. Currently, Michael is active on the Board of Directors for Friends of Kebyar, Inc., and has formerly served on the board for The Taliesin Fellows, Inc. and Mission de Los Ninos, Inc. For each, Michael has held the healm of Editor, writing articles and producing full-color print journals. Most recently, Michael was Editor-in-Chief and a Public Relations Specialist for The Globe newspaper, Salt Lake Community College's student-run paper. Michael holds a Master of Architecture from Lawrence Technological University, a Master of Science in Management from National-Louis University, and earned his undergraduate degree at Washington University in St. Louis. In 2012, as part of reinventing his career, he completed advanced studies in Energy Management while continuing study in Sustainability, and Ecological Design. He also embarked in 2012 on degree paths in Visual Art and Design and Mass Communication, adding experience in website design, graphic communication, journalism, video/audio production, and radio broadcasting.
Published Date:
by Michael Hawker
Here are ten websites, plus a bonus, that use photography to enhance their site. The photographs are well done, as good photographic skill and fine quality results cannot be overstated, but these are not photographers’ websites. These sites do rely on their visual medium, but any website can make use of photography to create an inviting and enticing website.
I am an architect, and thus, many of these sites are architectural firms. Of this list, I have two favorites…can you guess which ones, and which are yours?
[hint: the sites that use good photography with clever navigation — my answers are at the end of this post]
FFKR Architects: www.ffkr.com
The use of photography in this site is simply beautiful. The opening page has a very clean arrangement of navigational menus along the top and bottom, sandwiched between a professionally shot photograph of a project. The opening page is a slide show of various projects using fine photography. The company’s logo provides a zestful punch of color. By using the photograph to fill the page entirely, the site has a high quality – almost magazine – feel. It is easy to be drawn into site to explore further.
FFKR’s home page features a slide show
FFKR’s “people” page uses photography as a backdrop to the text
Swaback Partners: www.swabackpartners.com
Swaback Partners has a long history of doing high quality projects. Their portfolio is second to none, and so the use of professionally shot photographs truly complements their website. A black background helps to set the photographs off, almost gallery feel. The main menu is located to the left in a simple column, with hierarchy designated by the use of bold typefaces. A secondary menu is located along the bottom.
Swaback Partners home page has a clear menu on the left, balanced with fine photography in a slide show
Clicking one of the menus leads (in this case) to the firm’s residential work, where the photographs of each project are larger and more engaging. Professional photography and the time of day in the Arizona desert made for a beautiful setting to display the beauty of SkyFire.
Swaback’s “Custom Residences” page also displays high end professional photography – large photos balancing its menu along the left side
Kokomo Opalescent Glass: www.kog.com
Kokomo is a glass manufacturer. It has a luxury of providing a medium that is bright and colorful. Creative photography may be used to exhibit their site, and Kokomo does a fine job. The site uses a white background; it works. Truly effective is the clean arrangement of the home page. The company logo and menus are at the top, and just below is a repeating highlights/slide show that includes three other featured pages. Below this are other links within the site. So, in this regard, everything seems accessible right from the home page, with exception of having to scroll down to see the bottom menus of links.
Kokomo’s home page takes advantage of its colorful medium
Exploring deeper into the site, the clarity of the layout makes even higher content pages easy to read and attractive. The layout is simple single photo above a two-column arrangement. The photographs continue to display the color of the material and even the heat of the process.
Inside one of Kokomo’s pages, the format slightly changes
Olson Kundig Architects: www.olsonkundigarchitects.com
This firm used a single photograph to fill their home page, then inserted a strip menu across it about 1/3 down the photo. No scrolling, and all the menus are easily seen. Every time you visit the site, the opening image is different. This provides interest, but only for second and third-time (and beyond) visitors. The photos themselves, though perhaps not professionally shot, have a lot of interest by virtue of their subject and framing.
Olson Kundig’s home page is a slide show with full, unframed photographs
Olson Kundig’s “About” page uses the photo to express the idea behind its page
The “About” page has an effective photograph with menus aligned at the top and bottom. Hovering over one of the bottom menus enacts a slide up window from which to choose to ”Learn More.” While many architectural firm sites use photos shot and framed from a distance to show a wider angle perspective. Olson Kundig, meanwhile, seems to enjoy photos shot close, or from a unique angle.
Santiago Calatrava: www.calatrava.com
Calatrava’s site opens with an announcement page, advertising his latest book.
From here, one may enter the site. This is what seen when selecting the full screen option:
After the initial splash, you are dipped into this slider page showing cities…select one
The cities revolve (scrolling right) as the mouse hovers over them. Once selected, an image appears for that city. Note the photo is screened back.
After clicked, the photo emerges fully.
The image first appears translucent
Finally, the image appears full and bright
Of all the sites listed here, Calatrava’s is perhaps the most complex in its opening sequence. Is this overdone in its cleverness? Possibly. I do like the photography itself, and the sequence of an image graduating from transparent to opaque is effective. What the site does, however, is make the interactivity for the user almost interfere with the fine photography.
Cranbrook: www.cranbrook.edu
Cranbrook’s site employs a technique of having a different opening image each time the site is visited. This keeps the site fresh. This page is truly more a portal to several other sites, all of which have unique designs. Hovering over the “Academy of Art” link, a new photo appears, screened back, and it emerges fully once clicked. Overall, simple layout of a menu banner at the top, key link buttons across the photograph, which provides the backdrop. The color is neutral, not black or white, but an effective warm gray that seems to complement the photograph. Here are two examples of the home page with revolving slides.
The latest version of Cranbrook’s opening “home” page is actually a portal to all its other sites
An earlier version
After hovering over one of the links, a brief synopsis is given, plus the link to visit that site.
Inside one of the links on Cranbrook’s site
The Academy of Art’s opening page (above right) has an image that morphs into other designs as the mouse hovers over it. The feel of this site is wholly different from Cranbrook’s main home page. Each of the various sites – from the Academy to the Art Museum, from the House & Gardens to the Schools – has its own unique web identity. This approach seems effective for umbrella-type organizations with unique organizations within that umbrella. The Frank Lloyd Wright Foundation does something similar in its site, and its effective (www.franklloydwright.org), particularly as the photographs feature people.
Art Institute of Chicago: www.artic.edu
The Art Institute’s web site employs some of the approaches seen in site noted above. One large photograph—something visually interesting—provides the background for the menus noted at the top. The photograph revolves to different images (5 or 6 depending when it’s visited) that feature key exhibits or events. Clicking that image when visible leads to a page devoted to that subject. In addition, to the right of the menus are six icons that provide links to various aspects of the organization, such as dining options, museum hours, and calendar of events.
The Art Institute of Chicago has a sophisticated and well done home page
The photographs, once the visitor gets deeper into the site, are set against a neutral gray background. This allows the photos color to be emphasized. The use of text overlaying the photos (on the home page) offers the look and feel of a magazine. While in one of the linked pages, the overall arrangement is similar with main menus at the top along with the icons. In this case, however, hovering overoneof the main menus offers a drop down banner of choices in bright red. Note the same menu choices are visible along the left margin. It’s very clear how to navigate the page, with many options available. Photos are seemingly chosen to represent the user’s experience at the Institute.
Inside the “Visit” page of the Art Institute of Chicago’s website shows multiple menus/buttons, information content, and (of course) good and descriptive photos
Bohlin Cywinski Jackson: www.bcj.com
BCJ’s website uses professional photography quite well, set against a white background. Very clean a look, but not quite the “gallery feel” of the black background sites. Similar technique to other sites is utilized: photos rotate and eventually repeat, displaying feature projects.
The photographs are engaging and offer a variety of views, interior, exterior, some at night, etc.
Once the visitor explores more, the menus become visible, etc.
Bohlin Cywinski’s opening page is also a slider
Once inside Bohlin Cywinski’s site, they feature a gallery style layout of links – all with vignettes of their good photographs
Kiku Obata & Company: www.kikuobata.com
The firm has the luxury of a super portfolio and outstanding client base. The variety of their work in visual communication lends itself to truly having an image-rich website. Given this, the site is very simple and not flashy and achieved by how the photographs are used in relation to the overall layout. Obata’s firm has a simple layout on their website, and also makes use of professionally photographed and interesting shots of their work. The menus are located along the top and the company name is set at the bottom edge of the menus’ text, unique from many sites. Many menu options are present here. A white background allows the photos to provide the color.
Kiku Obata’s home page is simple, almost understated
This is not a photograph rich site, though it has many many photographs to accompany its text blocks. The images are never large to the extents of the page, and so its feel is very “quiet”. There are even some pages that have no photographs at all. Some photos, as shown below, are just clever for the viewer.
Another version of Obata’s home page. This one uses a very clever photograph
Perkins + Will architects: www.perkinswill.com
The use of photography and how it is arranged is beautiful. The opening page has a very clean arrangement of navigational menu along the top. The opening page is a slide show of various projects using fine photography. The look is very magazine-like. The photograph slide show presents various slides with teaser headlines to prompt interactivity. Below the main larger photograph are smaller story headlines and photographs.
Perkins + Will’s home page is very clean in layout
Additional pages employ a similar clean look and have a similar arrangement. Below is the bottom of the home page:
After scrollling down on the home page, this is the bottom half
Grimshaw architects: www.grimshaw-architects.com
Grimshaw’s website implements a number of elements that I appreciate: 1) the use of a large single photograph and a slide show for its home page, 2) the use of the black background sets the photographs as though it were a gallery, 3) the clean look of the subsequent pages is very clear and understandable to read, 4) the basic menu at the top of the home page is also very clean and navigationally easy to understand.
The home page adds to the photograph some text statements (single words) that help define the company’s values.
The home page for Grimshaw takes cues from many others we have seen: good and large photograph, and simple menu layout
Moving deeper into the site, such as to the Profile page, the photographs are not quite as dramatic, but nonetheless are interesting for telling a story about the firm.
Into one of their pages, their photograph matches the idea behind the page
…………
There you have it: great photographs, if used strategically, can make all difference for creating an enticing, visually stimulating website. One must start with good quality photographs, rich in color, descriptive in content, visually arresting. Second, use the photographs to extend or expand the idea of the page. Third, balance the photograph with good navigational layout, buttons, links, and information (text).
My favorites? I like Cranbrook’s site and the Art Institute of Chicago’s site. Both had clever navigational layouts, though handled differently, without becoming overly annoying. Some sites seem to just overthink it. I like the simplicity of these sites, but also their sophistication.
Which of these sites were your favorites? And why?
Send me a message if you like at: mchawker@yahoo.com