Architectura's Landing - Framer Site 🚀
Abdullah Qureshi
Landing page design for Architectura, an architectural design agency
Disclaimer: This was a learning project, exploring framer and building a responsive landing page. Role
- UX Designer
- No Code Development
Tools
- Framer
Time
- 1d
Overview
Creation of a minimalistic landing page for a architectural design agency. The landing has a brief intro, projects and a contact form.
Process
I have been working with framer for sometime now. So I had this landing as a time boxed exercise to start from a blank canvas to the complete design. I first tried to use the framer AI to help me but it kept doing things I didn't like. To start of I generated a design as a baseline and started working with it.
✧ Framer Project: I created a new project with different breakpoints for responsive designs.
✧ Generating Baseline Design: Using framer AI, I played around with prompts to generate a landing page design. The generated designs were not what I wanted. But after some bad prompts it helped with the baseline design and the page structure.
✧ Breaking & Making Components: So with the baseline design, I started to break and make things. To have consistent visual design, I made reusable components.
✧ Project Styling: With the baseline design and the reusable components. I started to add text and color styles to the components and the page.
✧Animating & Publishing: After completing the landing design. I started adding animations to the UI elements. The animations made the landing a lively.
Result
I learned how to work with Framer AI, it's quite awesome by the way but comes with a few kinks, but it will get there. Alongside I was able to explore and learn more about Framer's-
- Responsive design
- Color and text styles
- Animations & scrolling
- Project assets creation for scaling design
- Configuring and publishing websites.
Here's the live link, do checkout it out!
Thinking about remixing? I got you!
