Through the Designer’s Lens
How photography has influenced my design
Many moons ago, when I was a couple of years out of college working at a digital agency in London, I was given the responsibility of directing my first photo shoot. I was pretty anxious about it. As a junior designer back then, I had limited experience with professional photography and didn’t possess the skills needed to convey the ideas properly. It seemed like magic watching the photographer and his assistants make it happen — their technical knowledge combined with an efficient process was fascinating. I knew from that moment that I wanted to learn more.
There are two aspects of photography I am most passionate about — designing with light and connecting with your subject. I draw parallels to design because I am first and foremost a designer, and it occurred to me that many of the skills acquired in photography influence and assist my design abilities. This article will uncover some of those, and provide tips on how you can get started if you are a designer relatively new to photography.
Be comfortable as an art director
Understanding photography will make you a better art director — this is a role that interaction designers should be comfortable in. Being able to identify not only the subject but also the photographic styles that will work with your concept adds richness to the message. Photography can also be a good place to start when looking for inspiration. For example, is the experience you are creating intended for families or teenage fashionistas? Should the audience feel part of the story or challenged by the subject? Does the graphic design feature geometric lines or organic shapes? Answering questions like these and choosing appropriate imagery with consideration for lighting, color, tone and camera perspective will help define the experience.
Rich colorful images with a myriad of visual elements immerse the viewer in the scene. This example has been shot from above, we are part of a captive audience as all eyes are focused on the woman preparing food.
Motion can help to liven up static images and communicate texture. This is also true with interaction design. Google material design is a great example of this:
“Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.”
In this fashion example, high contrast lighting and a simple color palette create graphic forms that compliments the design.
Look for geometry or grid patterns in your environment — these can create interesting compositions. What may seem like a boring concrete wall can be the basis for a new visual structure. Lots of industrial buildings provide interesting color accents and textures in contrast to their muted grey surfaces.
Architecture is a powerful source of inspiration. Looking for rhythm and patterns within structural elements creates a visual music that is powerful and engaging.
As with all good design, the devil is in the details. Cropping an image to focus on one particular element can draw the audience’s attention. A family friend (and lifelong car buff) once said that after looking at some photographs of classic cars I’d taken, he found a new appreciation for the vehicle’s form. In these shots, I focused in on various details like badges and curvature. Here, we can draw comparisons in user interface design, as we focus attention on elements we wish the user to interact with.
Seamless UI & photography
As a UX/UI designer you will definitely face the challenge of placing UI elements or type over photography. The most common problems are trying to maintain the legibility of text, important links and buttons. Often times you can get away with using a dark tint (usually an opacity of black) over the image, although this can appear dark and muddy. Use a gradient overlay rather than a full tint. It will look less heavy. Video tends to be more forgiving as your eye can distinguish the type more easily against the moving content.
Choose an image with areas of equal tonal values or color so that UI elements stand out more clearly. It is beneficial to limit your color palette and reduce visual noise. In this sense photographic composition translates well to design composition. If the image you want to use isn’t quite right, then take time to edit it in Photoshop. Also in responsive design you can’t get precious with everything lining up.
Capturing People
Most people aren’t comfortable in front of the camera, and I don’t blame them — it can feel awkward and vulnerable. Creating a good rapport with the subject can ease their stress and is essential to capturing their true character.
“Building trust is essential to successful design research.”
This is my favorite aspect to portrait photography — connecting with people — and this can be hard to do in a limited period of time. Ann Kim, design researcher at IDEO says, “Building trust is essential to successful design research.” Spending a moment trying to break the ice before diving into the interview — it’s similar to trying to get to know a person before you just start shooting away.
As an exercise, photograph a colleague or acquaintance. Spend some time getting to know them before shooting their portrait. Share your final image with a few people. Ask them who they think the person is, and what they are like. It will be interesting to compare their thoughts to the experience you had with your subject.
Document your design process
It is good practice to document your process during each stage of a project, this can help you tell the final story. Capturing images during user research or inspiration trips means you can continuously update your client. It also ensures you have assets for sharing your work with colleagues or collaborators. Capturing user interactions as client deliverables through video and photography is also a great way to help tell the story.
Color, tone and filters
If you are using photography from an external source like a stock library, you should take a look at the tone, and try to adjust the color values to match your design. For example, if your design uses a palette with predominantly blue hues, you may want to cool down the image.
In Lightroom a simple way to do this is to use the temp and tint sliders. You can essentially warm an image up (make it more yellow) cool it down (make it more blue) or give it a magenta or green tint. Here’s an example, using the same photo:
Less stock. Shoot your own placeholder images
Shooting your own placeholder images rather than relying on stock photography means you get exactly what you need — and in some cases — this can be faster than scouring stock libraries. You never know, your images may end up being used in the final design. If you do use stock though, I highly recommend Offset — they have a lot of great stuff.
Simple setup to get started
Compact cameras are getting really good these days. However it is important to learn how to shoot with a DSLR with interchangeable lenses. Fortunately there are some amazing cameras available for a reasonable price. Here are a few suggestions currently on the market:
DSLR camera with 50mm lens: Canon Rebel T6i
I used to have one of the older models, and it was fantastic. Fairly lightweight, good quality and an amazing sensor. One thing to keep in mind with the more affordable DSLR cameras is they typically have a cropped sensor. This means they are smaller than 35mm full-frame sensors, or the size of regular 35mm film. The field of view will be different and lenses will behave differently. Read more about it here.
Compact camera: Sony RX100 III
Sony are making some of the best compact cameras around in my opinion. With a fast f/1.8 lens and WI-FI connectivity, the RX100 III is incredibly versatile.
Camera bag: Thinktank Retrospective 5
Once you start shooting more frequently you will want all sorts of bags for different situations. To start with though, I recommend a bag like the Thinktank Retrospective 5 that doesn’t look like a camera bag. If you are traveling it will stand out less.
Lightroom (free trial)
Use Lightroom to process images, perform simple editing, and to keep things organized.
Simple lighting setup
If you want to start using lights I recommend Alien Bees. They are great strobes and very reasonably priced. If strobes seem a bit scary to start with then a simple continuous lighting kit is fine to learn the basics.
Learning new skills as a photographer has been immensely useful to my design work. The overlapping values in each discipline have sharpened my focus and demanded a constant reassessment of line, color, and composition. I would love to hear how other designers and creators connect with photography — both the process and the perspective it gives. How has it influenced your work? What has it helped you to see more clearly? What hurdles has it helped you to clear?
I hope this article has been useful, have fun shooting!
Tom Kershaw
Senior Interaction Designer
IDEO
All images other than my own are from unsplash.com
