Landing Page Overhaul

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.

• Make the contact form user friendly and simple to use to encourage higher CTR
• Create a layout with content that encourages greater scroll depth
  
• Strategically organize the layout to include company’s UVP, important selling points, social proof, and benefits

• Have a robust contact form section for lead generation and re-marketing
• Keep the templates sections simple to apply to clients in different industries
• Allow ample space for copywriters to create content for SEO and ad campaign optimization.

• Effortless design process with global styles and responsive auto layout
• Versatility in page layout depending on client needs
  
• Rapid turnarounds for revisions

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.

Global styles for the win

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!

Atomic design thinking

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.

Components make everything easier

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.

my favorite figma plugins

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.

Lorem Ipsum

Great for adding placeholder text to give the idea of a content rich page.

Batch Styler

An excellent tool for batch updating text and color styles.

Text Styles Creator

Great for establishing typographic scale and global styles.

Styles Organizer

A QA must to insure colors and text are linked the global styles.