Web Design Basics for Photographers
by Wonderful Machine
When my younger brother applied to college, I wanted to support his search for the right school. But as I scrolled through college websites — whether Ivy league or state school, through computer or phone — I grew frustrated with their layout, broken links, and unresponsiveness. Eventually, I told my brother, “If you can’t find information on the website in 30 seconds, move on to the next one.”
The moral of the story: if the school’s website is underwhelming, will it attract students? Likewise, if a photographer's online portfolio is lackluster, will it attract clients? Probably not. We live in an age of instantaneous digital gratification — if someone’s website doesn’t make sense, we close the tab. Having a well-designed site is a crucial part of your marketing.
Wonderful Machine has an article on how to make a website functional. This article will focus on form.
In the image above, Erin Adams displays concise imagery of her food photography with top navigation.
It may seem obvious, but the first thing you need to do when building a website is to understand its use. Who is your audience and what are you trying to say to them? Your site is an opportunity to connect with clients and get assignments. Once you have a clear understanding of who your audience is, you can take the proper steps to ensure your website is doing the job you intended it to do.
Successful websites have simple navigation for easy browsing. Think of your menu as a web of interconnected pages. The easier it is to move around your site, the more likely it is that clients will want to explore your entire portfolio. The navigation should be located in the same place on every page, allowing the client to quickly move from one gallery to another without having to revisit the homepage. You can also use a drop-down menu to access individual projects. As a designer, I like to map out the pages. It may seem like an extra step, but a map is an excellent tool if you have a large body of work to show. Here’s an example:
Clean, right? Simple navigation allows prospective clients to focus on your photographs without struggling through your site.
An essential part of my role at WM is brand development. Brand identity consists of a logo (with all of its variations), a typeface for all of the other text on your website, color palette, as well as additional graphics, illustrations, or patterns that support your theme. If a client loves an image on your site, they should be able to easily connect it with your name and brand. Your brand and photos should reflect one another to make your work memorable.
In the image above, Tropico displays bright, vibrant photos to match their lively brand.
- Your logo must be in the same place on every page. It is important to show your brand and assist with navigation. Instead of backtracking from a gallery to the homepage, logos often hyperlink to your main landing page.
- Since a photographer’s website is photo-based, text and color are great ways to add your brand’s personality. Just make them consistent! The images on your site should provide the majority of color and tone. Stick to 1-2 colors for your branding to keep it clean and simple.
- Additional illustrations or graphics can be used sparingly as transparent backgrounds or overlays as long as they do not overpower your photos.
- While a colorful background is appealing, it often distracts viewers from your work. If you decide to incorporate color, we suggest you use a neutral
In the image above, Nick Wong shares his brand with a logo and side navigation over a rotating gallery of his commercial work.
Composition is a huge factor in taking a high-quality photograph. Similarly, the design of your website contributes to the success of your presentation. Consider your arrangement and the orientation of photos that go into the site.
- Are most of your photos vertical or horizontal? Find patterns in how you shoot and create a layout that works best to display them.
- We recommend choosing a web template that does not crop your photos. The purpose of a website is to display your work and show your skills as a photographer. Cropping your images will only take away from the composition.
- Should your navigation be on the top, on the bottom, on the left, or the right? Since most people around the world read from left-to-right and top-to-bottom, it’s logical that websites display their menu on the left or top of the page. Also, because desktops have a horizontal orientation and mobile devices are more vertical, it’s important to make sure that your website looks good on both. However, because most website templates optimize their layout for one or the other, it’s important to know whether your audience is going to view your website more on desktop or mobile.
Rob Culpepper has a sophisticated, symmetrical layout with top navigation.
Now that your website looks great on a desktop computer, is it going to look good on a mobile device? Responsive websites will automatically adjust the display of the content depending on the size and shape of the window. Whether you build your website from scratch or use a web-hosting platform, we encourage you to check the responsiveness for all devices and browsers.
It is easy to check the responsiveness using "Developer Tools" or selecting "option-command-I" on your keyboard.
How does your website react? Go through the list of devices, located in the top bar. Make sure the ratio adapts to different screen sizes.
You should also check how your website looks in different browsers such as Chrome, Safari, Firefox, and Internet Explorer. A good site is visible and functional in all browsers (and won’t ask you to download Adobe Flash).
A well-designed website is the cornerstone of every photographer's brand. If you need help designing a website, give Wonderful Machine a call at 610.260.0200!
Written by Christine Hughes