Three Approaches to Design in Dreamweaver
It’s no longer enough for a photographer to simply have a website. Today, if you want to stand out from the pack, you need a cutting-edge, state-of-the-art, multimedia presence to showcase your images and attract new clients. If you’re serious about your brand and your craft, you’ll want to take a closer look at the three photography websites showcased in the following pages.
These sites not only demonstrate that it pays to differentiate yourself but they also show that it’s the best websites that are often rewarded with new clients and new levels of success.
The three sites featured in this article were selected from sites submitted by Layers’ readers as great examples of photography sites. Thanks to all who contributed.
Editor’s Note: The new Jeremy Cowart site that we have previewed in this article is now live. Click on the link below the image and check it out
Pushing the Web Envelope
Jeremy Cowart is trading a website that most photographers would covet—an ultra-cool, Flash-intensive site that comes at you like a music video—for the next step in Web design. The new site is truly Web 2.0, using the latest technologies, including AJAX, Ruby on Rails, and RSS. It’s all about functionality; about allowing art directors and clients to find what they want quickly and easily, and then share it with others with the click of a button.
“I want clients and art directors to love this site,” Cowart said. “I want it fast, even with large images, and I want it searchable, sortable, easy to navigate, and capable of being viewed from a mobile browser.”
It’s an ambitious goal, but after looking over the preliminary design and testing the site’s functionality, it seems he may just pull it off. Although his new site was not yet launched at the time of this article’s writing, he gave Layers magazine a sneak preview and permission to feature pictures of the new design.
“We’ve been working on this new site for over a year now,” he said, “and I really believe—and I know this is a bold and cocky statement—but I really believe this new site is reinventing the photography site.”
One of the most powerful features of the dynamic site is that everything is “taggable.” As Cowart adds new images, he identifies them with keywords, or tags, such as “beauty,” “entertainment,” or “music.” If you’ve ever used a tool such as del.icio.us (a social bookmarking site) you should grasp the power of this right away. If you’re new to the concept, Cowart’s site works like this:
Everything in the site is organized by the tags Cowart creates as he adds photos to the site, even navigational elements. The result is a highly customizable site that can be easily rearranged to feature different collections of images, or different specialties, simply by selecting the corresponding keywords or tags.
“We’re doing a lot of things with Folksonomy,” said Jeremy Pinnex, owner of Pixelgrazer, the design firm that’s building the site. “The idea is that you can categorize things with multiple terms, so we’re able to categorize any of the types of elements he [Cowart] wants to portray.”
Because navigational links are based on the tags selected, Cowart, and any of his clients, can easily create a mini site within the site, complete with corresponding navigation.
“All the time, clients tell me, ‘Hey, I just did screenshots of these images of your website and sent them to a co-worker,’” Cowart said.
Now clients can search for keywords, select the tags they want to include, and create their own special version of Cowart’s site that they can easily share with anyone else. Not only does that make it easier for clients to pass on his images, it means Cowart has more control over the quality of the images they pass on and how they’re displayed.
“There is much more to me than my current site displays,” he said. “I think I’m losing a lot of clients because of that. There’s a lot of beauty work out there, but because my site features so much of my cool music work, they don’t get to see the bulk of the girls that I’ve shot. On the new site, I want to showcase the different types of photography—music, editorial, beauty, travel—I want the client to know right away that I’m not just a music photographer.”
As part of the redesign, Cowart is also building out the personal side of the site. “People are going to get to know me a lot more,” he said. Instead of his “generic, stupid bio,” he’s creating a section that “gives people more insight into the way I think.”
He’s also integrating his Twitter blog and creating a section where he’ll post a daily camera phone picture. “It sounds cheesy, but it’s a fun thing to keep people coming back. I want to make the site great for art directors, but I also have a lot of fans, and I’m trying to make the site fun for fans to come and visit.”
Will the new site have music like the old site did? “Maybe,” Cowart said. “We found that even with a lot of the artist sites we do, people like the music the first time, but the second time they turn it off, and the third time they really want to turn it off. More than anything, I want this site to be a tool for art directors, and they are not there to be entertained.”
“I’m kind of over all the bells and whistles,” Cowart said. “Just because you can have a feature doesn’t mean you should. For this site I wanted to dream up the most insanely perfect, functional website with a focus on the needs of the client.”
How they DID it
The Web design company, Pixelgrazer, deserves credit for Cowart’s old and new websites. “I guess you could say I very heavily art directed the site and the guys I work with produced it,” he said. Cowart founded Pixelgrazer but turned the company over to Jeremy Pinnix in 2005 when he left to become a full-time photographer.
The new site combines several cutting-edge technologies, including CSS, RSS, and Ruby on Rails. “Everything scales,” Pinnex said, explaining that the site is designed to look good on everything from a cell phone to a PlayStation Portable. “The pages can be dynamically created for visitors,” he added. “So if the browser doesn’t have certain capabilities, we provide them with smaller graphics.”
“The site is 100% CSS driven,” he said, “the only images on the site are the photos. All the navigation and everything else is CSS. We also have an RSS feed to notify clients when there are more features or new photos added.”
The goal was to build the client’s dream website so if a client is looking for an old vintage effect with a country setting they can find similar photos quickly.
“The most beautiful thing about this new CSS site is that it’s just so dang fast.”
Photographer: Jeremy Cowart
Email: Jeremy@jeremycowart.com
Website: www.jeremycowart.com
Representation: Caryn Weiss/WeissArtists, Inc. (www.wreps.com)
Website Design: www.pixelgrazer.com
Bio
Jeremy Cowart is a graphic designer turned photographer from, and currently living in, Nashville, Tennessee. As a full-time photographer for only two years now, Jeremy has spent that time shooting mostly for the music and TV entertainment industries. His clients include ABC, FOX, A&E, FX, Universal Music, Sony Music, and Warner Bros. Records. Jeremy also released his first book in 2006 called Hope in the Dark. The work in the book was shot on his first trip to Africa and proceeds go to African relief organizations.
MATTHEWMAHON.COM
Matthew Mahon Throws His Photos at the Web
Matthew Mahon’s website looks like a petulant three-year-old knocked a stack of his photos onto a linoleum floor—and it’s made him a small fortune. The jarring postindustrial look and feel has entranced creative directors who have emailed the link to friends and clients, turning MatthewMahon.com into a certified viral marketing hit. Here’s how it works:
Mouse clicks make you zoom dizzingly around a page strewn with small images—a layout that violates the basic ironclad rule of photography websites, which mandates that the images appear huge. Intrigued, users poke around and find that most of the images can be flipped over to reveal hand-scrawled details on the back. Seemingly random, Matthew and his assistant magically appear hovering over the photos in a clever effect that integrates video into the still image, bringing the photographer to life as he humorously describes how and where the images were shot.
When the site launched in 2005, it created a sensation on the Web, attracting the attention of designers and Web enthusiasts who were intrigued by the innovative design and the clever effects.
“In the first few months after it went live, the phone was literally ringing off the hook,” Matthew said. “I was turning down work.”
“It completely changed my career,” he said. “I have a rep now, I’m getting ad campaigns, I’m getting calls to shoot covers…I’m getting interviewed.”
Mahon credits the site with bringing him more than $100,000 in new business the first year, including a cover shoot for Atlantic Monthly and several shoots for a major ad agency.
“I wanted people to not only know my photography, but to get an idea of what it would be like to work with me,” Mahon said. “I wanted people to see that I’m fun, engaging, creative. I didn’t become a photographer because I wanted to be worked into the ground, I did it because it’s fun.”
Most visitors to the site take a few minutes to find their way around. There are no instructions for how to zoom in and out, and if you’re looking for Matthew’s biography, you’ll find it spread over a series of ID tags mixed in with the other images. If you were a busy creative director trying to find his contact information, you might get frustrated with this design, but that hasn’t stopped Matthew from getting a ton of new business from the site.
“I’ve had people tell me that it’s hard to navigate,” Mahon said. But any business he’s lost because the site is tricky to use has been more than made up for by the viral marketing power of the site’s entertainment factor.
Matthew’s website was created by the talented and irreverent duo of Jordan Stone and Martin Hughes of www.WeFail.com. Dedicated to originality, the pair has a reputation for creating unique designs and demanding control of the projects they work on—even if a client objects.
“We nearly made Matthew cry during the creation of the site,” Stone said. “I still have the recording on an old answering machine, which is a mechanical device from the early ’90s.”
Matthew is more politic, allowing that “We didn’t see eye to eye on everything.” At one point, Mahon said, he was having trouble with the video and suggested maybe they should leave out the “talking parts.”
“They insisted and offered to refund my deposit. That’s when I realized these guys were truly visionary—they didn’t want to put something out there that was diminished. They had worked on it for two and a half months, but they were willing to walk away rather than compromise.”
“Quite honestly, they were right. We’ve become very good friends now and they’ve gone on to do sites for the Dixie Chicks and Eminem. I paid them a fraction of what they’re making now.”
Mahon spent about $12,000 on the site, an amount that seemed like a lot to him at the time, but far less than what WeFail charges these days.
“Man, Matthew got a steal,” Hughes said when reminded of the final bill. “The site took us around three months to put together based on an engine that took six months to make, so if you spilt that fee between the two of us, full time for the duration, well you’re looking at two destitute [beep!]. We’re not too dear but we instantly turn down the village idiots.”
How they DID it
To create MatthewMahon.com, WeFail used a combination of programs and design techniques. The initial site design was done in Photoshop, while the effect that flips over the photos was created using 3D Studio Max and Flash.
To create the video, Matthew and his assistant took the low-tech approach and filmed themselves against a white wall. Next, he photographed them standing against the same white wall with their arms stretched out in different poses. The team at WeFail then dropped the video of their heads into the image and animated the photos, creating a kind of puppet effect.
To integrate the video with the photos, Stone said: “I hate to admit it, but Microsoft SparkleMotion does most of the work for you. It’s a matter of clicking the right button (and oftentimes the left one) in the right order.” (Sparkle was the beta code name for Microsoft’s new Expression Blend.)
When asked what advice they had to offer other photographers, Hughes said “Never go cheap on your site, false economy is serious.”
Stone added: “If you false economonize [sic], you could disappearius!”
Photographer: Matthew Mahon
Website: www.matthewmahon.com
Email: matthewmahon@earthlink.net
Representation: Renee Rhyner and Company
Website Design: www.WeFail.com
Bio
Matthew Mahon studied fine art at Rutgers University in New Jersey. After a disappointing stint in NYC, Mahon moved to Detroit where he found work as a production assistant with an ad agency. Upon attending a photo shoot for Pampers, Mahon fell in love with photography and took several night classes at the International Academy of Design & Technology. His work appears regularly in TIME, Newsweek, Wired, and Forbes. Mahon now lives in Austin, Texas, but still dreams of making it big in NYC one day.
Create a Gallery for Your Images
The stark white space and minimalist aesthetic at www.ArtofGregMartin.com evokes the open, light feeling of a high-end art gallery, drawing the visitor’s attention to the images.
“For many designers, the instinct is to do something pretty, something that looks cool, that’s all sparkle and chrome,” said Greg Martin. I’m a sucker for white space, and I wanted the barest, most minimalist navigation. I wanted it to be very pure.”
Unlike the other two photography websites featured in this article, Martin built his site himself, but then Martin isn’t a full-time photographer like the other two, either.
“I’m an interaction designer,” he said, describing the work he does for Ziba, a product and experience design firm. At Ziba, Martin focuses on what he calls “the design experience,” whether he’s working on a new cell phone design or an interactive display for a new condominium.
“We try to add an interactive element to everything we do, and we really think about how people will use it,” he said. “Our goal is to create the best experience, not just use what’s in our bag of tricks. I bring that same sort of approach to the website.”
Martin’s advice to other photographers: Focus on the experience, and if you have to pay someone, make sure you have a good person do it. You’re paying for the website and technical expertise to really work with you. The thing is you have to look at that price tag as an investment rather than an expenditure.”
In one section of the site, Martin takes visitors on a “walk-through” where he shows them how he creates his images on the computer.
“In the past I haven’t always had the lickety-split computer I have right now, so I’ve gotten in the habit of working on an image until I feel good about it, then I flatten all of the layers and try again,” Martin said. “That way it stays really quick and I have something to fall back on. The nice thing about that is that I’ve got these ready-made stages that I can come back to; that’s where those individual pictures came through for the walk-throughs.”
“I try to keep them very general,” he said, “because I’ve written a couple of tutorials and I didn’t like how they were used. The temptation when you have a cookie cutter in front of you is to cookie cut with it, to just follow instructions without thinking. I didn’t like how people were using my tutorials, so now, I try to speak to the broad strokes, even the narration is decidedly informal, almost like you’re standing over my shoulder and I’m muttering crazily to myself.”
How he DID it
“This is a gallery, and the word ‘gallery’ figured into how the site was going to look,” Martin said. “I’m sure you’ve been to art galleries with big white walls and lots of open space so you can focus in on the paintings or photos.”
Martin created the page designs in Adobe Photoshop and Illustrator and then built the site in Adobe Flash, integrating images saved from Photoshop. He then used Dreamweaver to put it all together in a simple HTML shell.
“I used Photoshop to figure out the effects and look I wanted and then moved over to Flash,” he said. “Anything that could be Flash is Flash because it’s faster if it’s vector than pixels. The glow on the front page is all Flash.”
“For me, Flash just seemed like the logical choice. I know among the blogger community, there’s kind of an anti-Flash bias. There are many Web 2.0 issues, but for me, using Flash is about the creating an experience. The upside is that Flash is getting better and better and you can do more and more things with it,” he said. “It’s not the clunky little dancing icon animator that it used to be.”
Photographer: Greg Martin
Website: www.artofgregmartin.com
Email: greg@artofgregmartin.com
Web Design: Greg Martin
Bio
Greg Martin is a semiprofessional illustrator and landscape photographer with a deep appreciation for the Pacific Northwest. He recently graduated from the University of Washington with a BFA in Visual Communication Design. He lives in Portland, Oregon, working full-time as an interaction designer.
Deconstructing Photography Sites: The Technology of Web Design
Here’s a quick look at some of the technologies and applications being used to pioneer the future of the Web.
Ruby on Rails: One of the hottest new Web development options on the Internet, Ruby on Rails is an open source Web framework that enables rapid development with the speed of PHP and the structure and power of Java. It’s fully object oriented and very extensible. (www.rubyonrails.org)
AJAX: Asynchronous JavaScript and XML, or AJAX for short, combines a collection of Web technologies to create highly interactive Web applications. One of the advantages of AJAX is that it enables users to make changes to a webpage without reloading the page. For example, you can open and close windows, move elements around a page, and launch new kinds of information using AJAX.
Adobe Photoshop: Not surprisingly, the creators of every website featured in this article used Adobe Photoshop. From image editing to creating page designs, Photoshop is an essential tool for Web designers and photographers alike. (www.adobe.com/products/photoshop/photoshop)
Adobe Fireworks: Designed to create Web graphics, Adobe Fireworks includes many features specifically designed for mocking up websites, slicing images for the Web, and optimizing graphics and animations. Fireworks doesn’t have all of the advanced image editing features you’ll find in Photoshop, but it’s so good at creating Web graphics that Adobe includes Fireworks and Photoshop in its new Adobe Creative Suite 3 Web Standard and Premium editions. (www.adobe.com/products/fireworks)
Adobe Flash: A large percentage of photography websites are created with Adobe Flash. This vector-based design program is ideal for creating complex animations and integrating video, audio, and images. You also get great design control when you use Flash and pages that display consistently across many different kinds of browsers. So why doesn’t everyone use Flash for their photography sites? For one thing, the learning curve is steep (it takes longer to learn Flash than Dreamweaver, for example). But increasingly, photographers like Jeremy Cowart (featured in this article) are redesigning their websites with CSS and database technologies that are faster loading, more flexible, and more search engine friendly than Flash. (www.adobe.com/products/flash)
Adobe Dreamweaver: The most popular Web design program among professional Web designers, Adobe Dreamweaver is a full-featured Web tool that supports XHTML, CSS, XML, and many dynamic technologies, including PHP, ASP, JSP, ASP.NET, and Adobe’s Cold Fusion. (www.adobe.com/products/dreamweaver)
Adobe GoLive: If you’ve been using Adobe GoLive, now’s the time to make the switch to Dreamweaver. Since Dreamweaver has replaced GoLive in the Creative Suite, Adobe recommends that all GoLive users migrate their sites to Dreamweaver. (www.adobe.com/products/golive)
Expression Web: The newest contender in the Web design software arena, Microsoft’s Expression Web is a major improvement over the much-criticized FrontPage. Expression Web supports XHTML, CSS, XML, and ASP.NET. (www.microsoft.com/Expression/products/overview.aspx?key=web)
Expression Blend: Microsoft’s advanced design tool for creating graphical interfaces that blend the features of both Web and desktop applications. Expression Blend allows you to mix video, vector art, high-quality text, animation, pixel images, and 3D content to create user interfaces. (www.microsoft.com/Expression/products/overview.aspx?key=blend)
Expression Design: Microsoft’s new image editing tool combines many of the features you find in Photoshop and Illustrator into one comprehensive tool. (www.microsoft.com/Expression/products/overview.aspx?key=design)
