🥱 TLDR

The Contra team hired me to build a simple splash page for an upcoming event they were hosting regarding Portfolio Building for freelancers. I built the webpage in

Framer

❇️ Project Overview

✦ About the client: Contra

Contra

✨ The Spark

✦ What were the client's needs and goals?

The Contra team wanted to build a straightforward one-page website to use as a test for utilizing Framer for more of their marketing landing pages in the future.

I was given the following splash screen design in Figma for reference:

I needed to convert this Figma UI design into a live published website with the help of Framer.

✦ Why did they choose me as an independent?

I teamed up with Erin Horner, Head of Creative at Contra, for this project. She says they chose me because:

🚧 WIP 🚧

🚀 The Process

Erin gave me access to the required Figma file, the fonts used, and the external links to add via their Slack workspace.

I completed the project in the following steps:

✧ Getting a gist of the UI: I took a good look at the Figma document getting to know the base frame size, auto-layout properties, and the different layers used.

✧ Setting up Framer: I created a new Framer project, adding the base frame width as needed and uploading the custom fonts.

✧ Using the Figma → Framer plugin: I used

Figma to Framer plugin

✧ Adjusting the elements: not everything was perfect when I used the plugin, so I had to do some manual work of creating some frames and adjusting the Stacks and their properties to make the layout look pixel-perfect. ✨

✧ Defining components and styles: to make the project scalable and property structures, I created the button and logo components along with the text, link, and color styles like this:

✧ Submitted the first draft: I sent the published link to Erin to get initial feedback/changes to make. I got positive feedback and also some points to take care of.

✧ Made changes and shared some ideas: I added the

Open Graph

✧ Delivered the project: after making the final changes and testing responsiveness on different devices, I shared the remix link of the Framer project.

📊 The Stats

✦ Timeline: 5 days

✦ Budget: $800

✦ Number of text/color styles: 6+4 = 10

✦ Deliverables:

Framer Remix link

and the

published website link

.

💬 Client Testimonial

🚧 WIP 🚧

Impressed? Want me to create a Framer website for you? Check my

Framer service details here

and send an inquiry! 🤝