web & identity design
my role
UI design  ·  branding
a concept design for a fictional photography and videography studio.
new skills in practice

I started this project to showcase some of the new visual design skills I learned from courses on Awwwards and Domestika . This project focused on creating branding, UI design and animation concepts for a fictional company. Please check out my portfolio redesign project if you’d like to read a standard case study about solving user pain points.

Research - Designing the right thing
design brief

I looked online for a design brief to give me an initial direction. I found an interesting brief for a photography/videography agency, modified it a little and used the revised version.


The deliverables of this project are listed below...

Client Questionnaire

I wanted to dig deeper than the client-provided brief, so I completed a client questionnaire for the studio (acting as the studio myself) to collect the verbal and theoretical material to feed my design work.

client questionnaire
problem definition
The Challenge

The insight gathered from the research phase helped me to define the challenge differently.

Create a visual identity for web and print that takes inspiration from vintage analogue cameras, dark blue tones and gradients to create an alternative, modern, mildly technical look and feel.

develop - Designing the thing right

I created a mood board of 15 visuals, mainly from graphic design and photography, to convey the future mood of the website. I wanted to capture colours, typography and emotions.

Logo and Wordmark

I created a logo symbol representing an aperture, the opening in a lens through which light passes to enter a camera. I selected PP Fraktion Mono as the brand's typeface due to its expressive clarity and monospaced design, which helps to reinforce the grid, creating a slightly technical feel.

Logo and Wordmark
Brand Identity Posters

Using the moodboard and the brief, I created two brand identity posters to visualize the brand's mood. Small text, symbols, geometric shapes, outlines, the heavy use of grids, a shimmering grain effect, offsets and blurs categorize the brand's visual identity.

Brand identity posters

The offsets and blurred effects reference vintage camera lenses. When looking through a vintage camera viewfinder, the image looks blurred and is offset on the top and bottom until the user manually focuses the image.

Responsive web

To communicate the brand identity on the web, I used a shimmering grain animation in the page background, a strong grid layout on all pages, and the offset and blur effect on images. I used small text and custom geometric icons to help create that technical feel.

loading screen

On the loading screen, as the logomark, representing an aperture, opens and closes, the brightness of the background images changes to reference more or less light coming through the lens.

landing page
project page
about page
deliver - refined solution

Once I finalised the designs, I used mockups to contextualise the web concepts fully animated on a Macbook and mobile using After Effects and Photoshop.

macbook & mobile

I also created designs for the office sign and business card using the new identity and contextualised them on Photoshop mockups.

office sign & business card
Thanks for reading!
pronounced: keer · in
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.