Fields & Flowers is a concept project that I created to show my process from designing and prototyping in Figma to developing in Webflow!

Inspiration

I'm always looking for interesting images on Pexels and Unsplash to make projects with. For this project I came across the account of Anastasiia Chaikovska on Pexels and found her photos to be very unique and striking. I had recently purchased a typeface called Seriously Nostalgic by Nicky Latz and thought this would be a great pairing for it because I think the photos have a nostalgic feel to them.

Figma

I began designing a landing page in Figma with the images that I had found. I created a full desktop design as well as a mobile design. I had recently watched Jonathan Morin's course on Awwwards and took some inspiration from that. Specifically the smaller images in between text just below the hero section. ( His animations on his personal site are crazy!)

I took the image that I found the most striking and designed it to cover the full width of the page as I felt it to be impactful to the overall page design. I tried to write copy that contributed to the overall tone of the design while also referencing the photos paired with it.

Prototype

I created a basic scrolling prototype in Figma to get a sense of how the page will look when scrolled through. After making some adjustments I felt confident enough in the design to start developing it in Webflow.

Webflow

I've recently made the decision to have Webflow as my go to for developing my ideas. There's a lot of freedom especially with animations which I explored in this project. I'm by no means an expert and feel there's still so much for me to learn but I find the possibilities of what can be done with it to be very exciting. I'll be looking to design, develop and post more of my creative ideas with Webflow.

Credits

Photos: Anastasiia Chaikovska via Pexels

Fonts: Seriously Nostalgic and Inter

Programs: Figma, Webflow, Davinci Resolve and CleanShot

Thanks!