There’s no law against bad design.
Good thing, because many popular websites are terrible. For media outlets, the challenge of presenting reams of rotating content often produces visually unfriendly pages. The New York Times may practice great journalism, but according to Andy Rutledge, the website “presents a rather typical example of terribly-designed news.” It doesn’t take Nancy Drew to find good journalism content burdened by bad design.
As visual professionals, there’s no rationale to ignore the tenets of good graphic design. It is not an aesthetic frivolity to make sure your best content is easy to navigate online. Photojournalists love to snicker at how amateur photographers don’t understand how much practice and work it takes to become a professional. Well, graphic design is a craft that takes just as much study and practice to perfect.
Combining strong photojournalism with strong graphic design is a win-win. In the crowded and competitive photojournalism marketplace, it behooves you to make every part of your online presence look thoughtful and professional.
This is the final part of a series on how you can plan, design, build and maintain a successful photojournalism portfolio website. Part 1 explores planning your website and Part 2 discusses working with templates, HTML, CSS and plug-ins.
• Don’t overdesign
“What I really like are sites that are really simple and easy to navigate,” says Alina Grosman, the manager of sales and assignments at VII in New York City.
“I think simple is better,” says Mark Lennihan, a photo editor at the Associated Press.
Notice a pattern?
Simple, though, can be difficult to design. How do you make something simple without looking amateurish or unfinished?
The key is to simple design success is a purposeful hierarchy for your page. That means certain elements of the page are clearly bigger- and thus more important visually- than others. The recent Facebook timeline redesign is a perfect example of establishing a hierarchy. Without the timeline, Facebook pages were a visually-muddled list of elements presented at roughly the same size.
One dominant image per page is the obvious hierarchy for a photojournalism portfolio site. But simply plopping a big image on a generic template can look rushed and unfinished.
• How can I improve on a basic design?
The difference between a professional site and an amateurish clunker often comes down to padding (negative space inside the box) and margins (negative space outside the box). Simple design is in fact a studied, proportional, restrained attempt to let the content, not the design, do the heavy lifting.
Take a look at a website like Hammerpress. Do you see how the clear hierarchy works, with one prominent rotating slideshow and three icons below divided into thirds of the main image? Notice, too, how the space between each element is about 25 pixels, which gives the site an easy-to-manage feel. There’s no need for borders and box background colors if you use margins and padding correctly. Compare Hammerpress to a site like this, and you’ll see the importance of spacing your website’s elements generously.
Make sure each element of your page- header, menu, photo, whatever- has its own space to breathe. That idea should be familiar to photojournalists, all of whom have wished there wasn’t a telephone poll growing out of a subject’s head at some point in their career!
• Popular Styles of Photojournalism Websites
The Clean and Simple
Damon Winter’s personal portfolio website is a great example of a fully realized minimalist design. By exaggerating the negative space on the page, Winter emphasizes the strength of his images.
Many photographers work with some variation of a design like Ron Haviv’s website. When working with such a simple layout- logotype in the top left, menu along the left, big image, and clean background- it’s especially important to refine every adornment and detail.
Choose a smart logotype and make sure that it stands out. Whether through color, a larger font size or all caps, it should be clearly differentiated from your menu.
Don’t be afraid to use touches of color, as long as you keep it consistent. Space the margins in a purposeful way.
The Horizontal Slide
The horizontally scrolling photo portfolio website has become popular in the past few years. You can see the effect in Alec Soth’s website. Columbus Dispatch photographer Brooke LaValley used Indexhibit, which I mentioned in Part 2, to design this type of site.
The upside of designing your website with a horizontal scroll bar is that it’s still rare enough to feel like a trendy design, and it lets you present multiple picture stories in a palatable way. The downside is that Apple, Facebook and Google are making scrollbars harder to maneuver.
The Full Screen
The disadvantage of this approach is that a full-screen image demands that you overlay a menu or caption on the picture. Many photojournalists frown at disrupting the integrity of an image.
There are plenty of website templates built with Adobe Flash. For a photojournalist, there are three main problems with Flash site. First, iPhones and iPads do not support Flash. Second, images often take longer to load in Flash than in a more standard HTML/CSS site. Finally, Flash makes S.E.O. trickier because search engines may not index text like captions and menus as completely as non-Flash sites.
• More Tips
-Mark Lennihan at the AP doesn’t like when music starts playing when you visit a website. He also doesn’t like when a slideshow automatically plays.
“I like to be able to click on images and judge how long I want to look at and image, whether it’s one second or 20 seconds,” he said. Web surfers want to control their own experience online.
- Every page should either have your contact information or a clear link to the contact page.
- Add Google Analytics, which is free, to your website. It gives you a wealth of data about the visitors to your site.
• Save Images to Load Quickly
First, size your image to the exact pixel dimensions you need on your site. Then, use “Save for Web and Devices” to prepare your pictures. The goal is to make the image as small a file size as possible before the quality visibly degrades. Usually, choosing “jpg” and “medium”- between 30 and 50 on the slider, depending on size- let’s you hit that sweet spot. Don’t be overly concerned about having a museum-quality image: online, making people wait for your pictures to download is a more serious problem than a slightly lower-quality picture.
If you have a cutout image or need a transparent background, save as a png or gif.
• Update frequently
As obvious as it sounds, many photojournalists fail to update their websites frequently. If you aren’t dedicated to refreshing your photographs every month or two- and much more frequently on a blog or on social media- then you’ll bore your audience.
• Focus group your website with a friend or teacher.
Most photojournalists have had the experience of falling in love with a picture that everyone else thinks is mediocre. Part of good design- just like good writing- is listening to feedback and revising when necessary.
The burden is not on the viewer of the website to understand how brilliant your design is. It’s your job as the designer to provide an easy-to-navigate experience that highlights your best work.
How can you vouch for that kind of good experience? Watch how a friend or teacher navigates around your site. See what they like and what they ignore. See how long it takes them to find your email, and see if they can figure out how to get back to the home page.
• Have fun designing your website!
“It’s phenomenal to me the capacity people have with an air card and a laptop and a digital camera to produce stories and video and get things online and show their work,” AP photo editor Mark Lennihan told me.
“I think someone who’s intrepid and enterprising can have a go at it and succeed. There’s room for every photographer out there.”
Brian McDermott teaches web design, photojournalism, and multimedia journalism at the University of Massachusetts Amherst. He is the chair of the NPPA’s Student Quarterly Clip Contest and designed the logo above.