Capturing the flavor
Diana is a photographer specialised in food photography, prop and food styling.
With years of experience in food photography, she’s creating stunning food photos that will make your mouth water.
The customer desired a simple yet beautifull website where they could showcase their photos and videos.
One of the biggest challenges was to integrate photos and videos together, while keeping the page load speed as low as possible. This was challending as the photos and videos had to be sown with high quality, which significantly increased their size.
This challenge was overcome by using 3 different enhancements for loading content:
- One is called lazy-loading, where you only load the images that the user sees on the page. When the user then starts scrolling, or opening images, the website will then begin loading the other images. This helps reduce the initial load time for the page, as the browser will not load all 200 images that are available on the page, but only the first 20 or so that you can actually see.
- Another improvement made here was to allow the website to load even if not all images were loaded. This way, a first time visitor of the website would experience e fast initial load time for the page itself, and not wait tens of seconds for every image to finish loading.
- The third and last enhancement in this area was to load the videos in the background, even if the user hasn’t yet started viewing them. This way, when someone actually clicked on a video, the content was already available for the visitor to view.
A photography website needs to be very flexibile from a design standpoint, as the photos themselves define the website. As an example, during specific times of the year, the customer could add representative images and have a totally different website than a few months before. See the next section with a comparios between summer photos and winter photos.
To accomodate for this, we used a slender navigation area, a slim font, dark color and lots of white space. White space is king also when viewing images one by one, since the focus needs to remain on the image itself.
Simple grid structure
The desire was to have a grid-like gallery which would allow for ultra-wide images to be shown right next to portait images, without affecting the layout of the page or the aspect ratio of the image.
This was achieved by using a combination of row & column structure, where rows would have a somewhat fixed size, dynamically set, and the columns would then be automatically adjusted to fill the row. As such, one row could have 2 images (if they are very wide), or even 6, if they are very narrow.
Website focus points
The website is 100% content-focused. 85% of the page is comprised or images or videos when viewed from the desktop, with only 15% reserved for navigation items and other information.
Besides the integration of videos and images in the same grid-like gallery, having the possibility to view the content in a bigger size was also required. This was acomplished by using a lightbox, where an image or a video would be on focus. On desktop, this lightbox has a simple navigation, comprised of 2 arrows (left and right) and image thumbnails, used to easily browse through the available content. On mobile, an even simpler view is available, where user can swipe left or right to browser accross.