Photography portfolio template

The project was designed using Figma and implemented by Webflow. And was delivered as a contribution to the Webflow & Figma community.

View Live
Year

2022

Project Type

Web Design and Webflow Development

Role

UI Designer

Project Overview

From design to live website, laverging #nocode

The opportunity to give back to the Webflow community was recognized as a result of the high demand and low supply of Webflow portfolio templates.

Goal

Design a website that is as visually interesting as it is easy to edit & change.

Features

• Access to Figma files.
• Wireframes & mockups included.
• Client's first system.
• CMS collections included.
• Easy to edit style guide included.

Wireframes & mockups

Interesting yet simple layout

To generate an overall impression of the art direction, I browsed several websites like lapa.ninja, awwwards.com and others for inspiration.

Wireframes

I explored a variety of layouts to determine which type of layout would create an easy and engaging user experience.

Figma file
Open in Figma

With over 100 downloads already the file includes wireframes, design mockups, organized text & colors styles.

Style Guide

Easy to edit both on Figma & Webflow on a global level

Typography

Two typefaces were chosen for their appeal both on an appearance level and readability at small scales.

Color Palette

The color palette was derived from a mood board of inspiration and was adjusted.

Style System

Making it easy to understand & use

Client-first Webflow Style system by {finsweet
Learn more from {finsweet

A naming convention that make Webflow projects easier to use that is:
‍
• Perfect for beginners and experts
• Simple logic for creating class names
• Marketer friendly

CMS Collections

CMS template pages were used to build the website, so showcasing work is as simple as typing and dropping images.

Final Design

A design focused on highlighting the work and reviews

Home Page
Key Features
  • An appealing colors combination and interactions that draws the user in through connected visuals.
  • Animated graphics add an additional layer of interest and visually communicate the copy they’re paired with
  • Imagery is treated to both pop and move on scroll into the background to draw attention and create a distinct visual language throughout the site
About page
Key Features
  • Scale down scroll animation to give a sense of intrigue.
  • A floating effect of images through out the website giving a unique artistic direction.
Project CMS page
Key Features
  • a fascinating header animation on scroll that takes you quickly to the main images.
  • Wide 2 columns structure that displays the imagery.
  • A more projects section to link the viewer to another work piece.

    More Case Studies

    Sheavy

    Cultur