At C Squared Social I initiated a series of updates to the existing landing page template to improve the page layout and user experience for client advertising campaigns.
Within Figma, the overhaul consisted of developing variations of section layouts for the hero, benefits/features, contact section and more. I utilized components and auto layout to quickly and easily structure the pages and I implemented the Atomic Design Methodology by Brad Frost in order to design a system of versatile and flexible components.
The previous landing page template used an outdated design and did not encourage users to scroll through the page content to convert.
Create a landing page template that is versatile and modern while converting users from advertising campaigns.
Balancing marketing needs with aesthetic appeal
Elevated and expedited design iteration
During my design phase, I prioritized process in order to ensure efficiency and consistency across my system. In order to maintain a cohesive appearance throughout my projects I like to use various tools and methodologies which I outline below.
For the landing page template I created color and text styles that served as placeholders for quickly updating client brand colors and typography. With this system I could easily brand the template to a client’s needs in mere minutes!
I used the Atomic Design Methodology by Brad Frost to build interchangeable, versatile, and reusable components to create the building blocks of my design.Starting from the smallest elements, ‘atoms’, I could then build out my system to create ‘molecules’, ‘organisms’, and eventually templates that become complete pages.
To make building the landing page easier, nearly every element on the page is a component. I built out form elements, buttons, and icons utilizing auto layout to quickly align and structure each component to make the content dynamic and responsive.
To make building the landing page easier, nearly every element on the page is a component. I built out form elements, buttons, and icons utilizing auto layout to quickly align and structure each component to make the content dynamic and responsive.
Great for adding placeholder text to give the idea of a content rich page.
An excellent tool for batch updating text and color styles.
Great for establishing type scales and global styles with your design system.
A QA must to insure color and text stylings are linked to their Figma global styles.