top of page

Product Photography & Webpage Mockup

2022

Utilizing a lighting setup and photography equipment, this project involved learning standard practices for product photography to take photos of jewelry. In addition to the photos, a website mockup was created to compliment the jewelry of choice.

Elgin watch photo (adjusted & edited)

Elgin website mockup - Home page

Tools and Process

     For this project, we were required to chose a piece of jewelry to use for product photography. For mine, I chose an Elgin watch. For our concept development, we had to create sketches for three different potential lighting setups (one showed to the left). For the website mockup, each page was sketched out in the concept development phase as well (shown to the left).

     The first half of the project was the product photography. For the setup itself, I used a DSLR camera and tripod, an LED light, and both black and white backdrops (as per requirements). These photos were later brought into Adobe Photoshop and Lightroom for any needed adjustments and editing, such as adjusting exposure or editing out scratches and fingerprints. A document comparing the original photos to their final edited versions was created in Adobe InDesign. The photos themselves consisted of photos on black and white backdrops, each photo taken at a varying angle or distance from the camera.

     For the second half of the project, a website mockup was made. This website was created on Wix, and is interactable though does not function as a real, functional online store. Elements of the website such as the background and photos were created and/or edited in Adobe Photoshop. The Elgin logo itself was created in Adobe Illustrator. The website consists of a home page, store page, contacts page, and historical gallery page.

Top: Lighting setup - Sketch

Bottom: Elgin website - Sketch (home page)

Learning Experience

     This project allowed for me to gain a lot of new experience with product photography and website design. This was one of my first times learning to take industry standard product photography, so I was able to practice new lighting and photography techniques that I was previously inexperienced with. I had to take two attempts at my photographs, for which the first time, due to my inexperience, had some trouble setting up my camera and lights properly. The following attempt, however, I was able to properly take the photos I was aiming for. I also gained a lot of practice with Adobe Lightroom and Photoshop as once I finished taking the original photos, I had to adjust and edit them as needed. Tools in Photoshop such as the Clone Stamp proved to be very helpful in getting rid of scratches and fingerprints on the watch.

     When creating the Elgin website, I was able to gain a lot of useful practice as it was my first time doing so. Though the assignment called for a mockup that could have been done in a program such as Photoshop, I decided to make an interactable website with Wix so I could gain new experience and practice. This practice was especially helpful in making my portfolio website, allowing for much greater speed and efficiency using my knowledge attained through making the

Elgin website.

Top: Elgin website - Sketch (product listing page)

Bottom: Elgin website - Product listing page

Performance Evaluation

     Despite all of my photography experience, I was still able to learn many new things due to being new to the strategies used in product photography. Additionally, despite having experience with Adobe Photoshop and Lightroom, I was still able to gain useful practice as I used tools I was unfamiliar with in the past, such as Gaussian Blur and the Clone Stamp Tool. As mentioned previously, I had to take a second set of photos since I struggled with my first attempt. The second time around, however, I had a much better idea of how to properly set up my lighting and camera, resulting in significantly better photos that of which I chose as my finals. As also mentioned previously, I was very new to designing websites when creating the Elgin website, so learning how to make assets and use Wix’s tools proved to be a fruitful learning experience.

     As for future improvement, I aim to memorize camera settings (ISO, shutter speed, f-stops, and so on) to better prepare myself before setting up my camera. Since using Adobe Photoshop to edit out scratches and fingerprints was sometimes time consuming, in the future for product photography I will clean off my products even more thoroughly to reduce the amount of time spent editing out unwanted marks. For the next website I make, I aim to use fillers to set up the layout of the site before adding my final images, as adjusting image sizes was somewhat of an issue on occasion.

Top: Elgin watch photo - Original

Bottom: Elgin watch photo - Adjusted & edited

The product photography and website mockup project proved to be a very helpful lesson in learning proper product photography, web design, and experience with programs such as Adobe Photoshop and Lightroom. Despite my prior knowledge, I learned countless new skills I plan to use in the future. Even though I learned a lot, I still feel there are many new skills to learn and practice in future endeavors.

Elgin website - Homepage (mobile)

Elgin website - Homepage (Desktop)

Final Elgin website - Link

© Arianna Morese 2023

bottom of page