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.
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...
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.
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.
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.
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.
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.
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.
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.
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.
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.
I also created designs for the office sign and business card using the new identity and contextualised them on Photoshop mockups.
