My First UI Design Project: Building A Photography Portfolio Website

Have you ever seen a bad photography website? Being a freelance photographer myself, I have seen many, good and bad. So when I created a portfolio site for my own photography business, I had a few goals in mind. First, I wanted to figure out what makes a photography site good or bad. I also wanted to combine all the qualities a visitor would look for when looking up potential photographers, help them know if I was the right photographer for them, and then encourage them to book my services. 

My audience

I specialize in wedding, elopement and engagement photography. The target audience for my site is newly engaged couples, elopement couples, and the soon-to-be bride & groom.

My goals

  • Communicate the purpose of the website

  • Make the site easy to navigate

Research

I approached this step as if I was designing for a real client. I began with user research to gather feedback on the sort of features and information the website should have. This is to help potential visitors know if the photographer is right for the job. The feedback was based off a survey I created with SurveyMonkey.

I included questions such as:

  • What attracts a client to book a photographer?

  • What should the website include? What should it NOT include?

  • What makes you leave a photography site?

My findings

My survey respondents said these things turned them away from wedding photography sites:

  • Large images that require a lot of scrolling

  • A navigation bar that is too small and almost hidden

  • Poor or confusing navigation

  • Page loads that take too long

  • Not showcasing enough work

  • Portfolios that don't communicate emotions

The things that appealed to my respondents included:

  • Simple layout that doesn’t detract attention away from the key focus

  • A neatly arranged layout, without being too cluttered

  • Easy navigation

  • Portfolio work that captures visitors’ attention

Improving SEO

I also found that SEO (Search Engine Optimization) is very crucial for a photographer’s website. There are a lot of ways to improve SEO, but these are the ones I found crucial to my project:

  • Using alt tags in images. Alt tags describe an image for the benefit of visually impaired users, users who use text-only browser, or users who have turned off images.

  • Optimizing all images before uploading them onto the site. Don’t upload high resolution images or images at their original size! Doing so could slow down the website.

  • Creating content with your viewers in mind. Content should be informative, relevant, timely and entertaining in order to attract viewers.

  • An SEO-friendly home page using calls to action to encourage visitors to visit subpages. This could include showing your latest work and bio, plus your social networks to drive traffic to those platforms. Using full-screen sliders and headlines also make for a better experience for your user.

  • Making the site mobile-friendly. Internet usage has increased more 600% since 2010, so there’s a good chance many of your users will use a phone or tablet to access your site. You should be sure it works on all formats.

A great resource for SEO is Everything a Photographer Needs to Know About SEO by Nata Leo. Michelle Hummel also has a great blog post explaining it.

Establishing User Flow

After gathering all necessary information, I was able to establish the flow of how the user will navigate through the website. The first thing the user will see on the home page is a full screen slideshow with a logo and tagline. The intent of the full screen slideshow is to engage and encourage the visitor to view the photographer’s work right away. As the visitor continues to scroll down the page, s/he will see sections such as About, Investment, and Recent Work sections. Each section has a call to action button that takes them to the subpage of that section.

Some Tough Decisions

With so many design inspirations on the web, I had to think strategically how I wanted to structure my content.

  • Initially I was going to keep minimal content on the home page to prevent the visitor from scrolling too much. I found that I can add more content, as long as the content is relevant and encourages the visitor to want to learn more about the photographer.

  • Another tough decision was whether I should combine the blog page with the photography work. Initially these were going to be 2 different pages. With SEO and image optimization in mind, I figured since I am already displaying a gallery on the blog, there is no need to have a separate page dedicated to just a gallery since the blog itself is the representation of the photographer’s work. In conclusion, I am combining love stories & work into one destination — work.

  • A separate contact page — I was going to have a contact form be on the home page but I decided to have it on a separate page instead for consistency.

Mocking Up the Design

I began sketching out the wireframes to determine which features and elements are wanted and needed and incorporating any additional tools that might offer better usability. Then I fleshed out my wireframes to move closer to the final product. For this, I used InVision Studio, a great free product.

Based on user feedback, I decided to remove the Investment section and replace it with testimonials. Now the home page consists of the full-screen slideshow and the About, Recent Work and Testimonial sections.

mobile wireframe A

mobile wireframe B

desktop/tablet wireframe A

desktop/tablet wireframe B

Final Design

My approach with the final design was to keep it clean, modern and intuitive.

 

Wanna see the live interactions? Check it out on my website.

This blog post was written by Tracy Nguyen, a student in our Immersive program, and was first published on Medium.

 

Author
Guest Blogger

Guest Bloggers for DigitalCrafts