Gust Home Page

Gust is a Tailwind CSS theme for WordPress that provides more advanced website-building capabilities created by a developer, specifically for developers.

Challenge

How can we structure the page and leverage visuals to encourage experienced website builders to understand Gust’s product offerings and feel enticed to try the product?

Context

I came into this project at the stage when all the copy was mostly ready and a skeleton of a website already existed at its domain: getgust.com. Gust’s creator, developer Matt Sanders, wanted the site to transform from just words on a page to a homepage that looks and feels professional and marketable for Gust’s audience. Beyond the visual language of the site, the home page needed graphics to accompany the text so site visitors can better understand the product at a glance.

The details

My role

Verify existing copy and propose strategy of content on the page
Develop visual language and mini design system for a consistent and easier build
Design all visual treatment and graphics

Project team members

Me, designer
Matt Sanders, Gust creator and developer

Tools | Figma, FigJam

User/use case

Developers, website builders/agencies

These are people who have a better understanding of technical terminology than the average person
The site would likely be viewed on desktop

Goals

Market Gust so that it drives the audience to purchase a license to use the product
Instill a sense of trust, legitimacy, and familiarity to the look and feel

Solution in a nutshell

After reviewing tweaks to the hierarchy of the content Matt already provided and aligning on a visual style, we went through a couple iterations of visual treatments before landing on the final design. I also built a mini design system to accompany the final design that included a logo refresh, type styes, colors, spacers, drop shadow styles, grids, and components to ensure consistency in both design and development. While this project was only a homepage redesign, the mini design system allowed Matt to apply the styles to the other pages on his website.

Deep Dive

First steps

After the initial meetings between Matt and I discussing his ask and details about the project, I was ready to start evaluating the materials he already had – a website with content and a skeleton of a structure. I took notes around the things I felt we could improve hierarchically, any questions I had about the copy and the product, and laid out some key areas to explore so I knew the body of work that needed to be addressed. I was able to revise the information architecture as well in hopes of helping him achieve his goal of marketing his product Gust.

Developing a visual language for the right audience

Since Gust has quite a specific audience and one that Matt both belongs to and is extremely understanding of, I asked him to provide a list of sites that his audience would be familiar with. I carried out a comparative analysis of sites like Tailwind CSS, Vercel, and Elementor, with focus on how their visual and hierarchical patterns were consistent or different among the sites.

After pulling out insights on these sites’ style and content, I got to work – or play. With the first pieces of content already existing on his site, I offered three style variations and three color variations for Matt to review and give feedback on.

From there, Matt was able to choose the direction he felt was appropriate for his product. We were then able to collaboratively refine the colors and specific design details. Once we were both satisfied with the visual exploration, I worked through applying it to the rest of the content.

Creating graphics for each section

As there was more technical language than I was well-versed with, I had a ton of questions to ask Matt. He explained thoroughly each of the concepts that I was unfamiliar with, and after I played around with the demo of his product, I set to work brainstorming graphics to accompany the sections of text explaining the benefits of Gust.

I leaned on Matt’s explanations, his live product demo, inspiration from the comparative analysis, some of the copy, and what I knew about his audience to drive forward the graphics.

Mini design system

A collection of styles, colors, and components is essential to me as a designer who cares about consistency and ease of development.

I started with defining a grid and spacing increments, using the base of 8 to drive these decisions. As I was exploring possibilities with the site’s typography and colors and key components, I added in styles and components as I went. I tried to make sure that the number of styles was kept to a minimum. The site is not complex and so the styles don’t need to be either.

Once I had finished designing the site, I laid out all styles and components in organized frames with some annotations so that Matt would be able to understand how and where each style or component was used. This way, he could refer back to this documentation to help him develop the design and use it to create other pages that are consistent with the home page.

Gust home page

The site is live at getgust.com. Below is what the final design looks like.

Wrap up

After everything was finalized, Matt turned my designs and notes for implementation into a reality. He was able to transform a page with just text sections and basic buttons into a visually-appealing, responsive site using my designs and mini design system.