Premises
In this one-week project, Coyote Photography (Fictitious name), a freelance photographer, asked me to design a portfolio. He wanted a responsive website where his work could be showcased, and people could contact him. For this project, I used paper, Figma and Framer.
Analysis and sections
To design a responsive website tailored to client's needs, I needed to study his work and vision first. Then I proceeded to establish some sections: Hero, Works, About, and Contacts.
I also decided to add a Godard's famous quote about photography: "Photography is truth." It perfectly recalls his work and vision of art.
Color palette and accessibility
The customer didn't want a colorful website, so I studied a very clean and essential palette. The goal was to give proper focus to client's photos, so I chose white, off-white, grey, and black.
This palette passed the Web Content Accessibility Guidelines’ AAA test for both texts (both normal and large), for graphical objects, and user interface components.
HEX FFFFFF
HEX FAFAFA
HEX 3E3D3D
HEX 121111
From wireframes to Framer
Then I started drafting the website's wireframes on paper. I did some iteration and then I moved my improved wireframes on Figma.
Typography and fallback fonts
For what concerns typography I decided to use Outfit, a unique yet classic style sans serif font. It recalls popular sans serif fonts, so it won't create friction and confusion to visitors' eyes. It also has great readability and legibility.
Since Framer does not permit selecting fallback fonts, I then tested the new website with some common fonts. I did this using Helvetica, Arial, Times New Roman, and Georgia.
Finally, I started working on the proper website on Framer.
OUTFIT
Outfit
Aa
ABCabc
1234567890
About animation, interactive elements and responsiveness
I opted for a slightly-animated website that people could navigate easily from desktop, tablet and smartphone. To create a dynamic experience I used fade-in effects for text and slideshows for photos.
I removed the ability of selecting interactive elements to improve the users' experience.
For responsiveness, I used two slideshows on the desktop hero page and only one on tablet and mobile. I aimed to create a website that loads smoothly even under less-than-ideal internet conditions.
For the mobile viewport, I used a hamburger menu. When clicked, it shows shortcuts to the website's sections. With Thumb positioning rules in mind, all the interactive elements are placed on the right.
Final result
The final responsive website fulfills all the requests and also achieves a premium, polished look. It provides a fluid navigation experience allowing visitors to admire Coyote Photography's photos and easily connect with him. I am satisfied with the result!
Copyright
All the photos used in coyotephotography.framer.website.com are downloaded from Unsplash. All rights reserved to Christian Holzinger, Danie Franco, Lucas Gouvea, Prince Akachi, See Plus, Florian Schindler, Grigorii Shcheglov, Leon Rohrwild, Marsumilae, Max Bohme, Ashim D Silva, Jeremy Cai, John Fowler, Marek Piwnicki, Randy Fath, Ayo Ogunseinde, Gabrielle Henderson, Milad Nady, Samuel Dixon, Shahin Khalaji, Bryan Brittos, Seth Reese, and Karsten Winegeart.