Beefree Website

Beefree is a drag and drop visual builder for crafting beautiful emails, landing pages fast 
and easily. The website gives a complete overview on Beefree and Beefree SDK  pricings, resources and a catalog 1550+ of instantly editable email and landing page designs.

Project Start

2021

Status

Pattern Library

Designers

2

Tech stack

Figma, Wordpress

What’s the current status?

We started mapping all the existing components of the website in 2021, to create a Pattern Inventory. Then we started designing our foundation elements such as colours, typography, iconography and so on.  
Today we are building our Pattern Library, starting from our current website. In the coming months, Beefree will redesign and refactor the beefree.io website with a refreshed look & feel and some improvements that should further enrich the end user experience.

What we have done

2021

Creation of a Pattern Inventory based on the current website.

2021

Synthesis of elements using the worst-case scenario logic

2021

Define style guidelines and foundations (colors, typography, grids...)

2021/2022

Creation and maintenance of components.

Inventory and wireframes

We started categorizing every sections, types of behaviours and contents that makes up our marketing website. This helped us capture the status quo of every style (colors, typography, spacing, borders) and content. 

From that point, we tried to declutter the interface, simplyfing  and deleting some redudant and similar section. We used the “worst-case scenario” logic in order to have more consistency, a more maintanable code and less waste in terms of design patterns.

Defining the style guideline

After the Inventory phase, we started creating the foundations in Figma 
(colors, typography, spacing, grids, elevations and border radious) based on our already existing Brand Guideline, optimized for web use.

Pattern library in Figma

The step after defining the foundation was to realize every single component using the Atomic Design methodology: we started with atom, then molecules (buttons, cards, input types, badges, lists etc..) and finally we created the complex patterns as sections and divs up to entire pages. 
The main goal is to create the foundations to create a brand new website using a Desing System methodology together with new developing languages and frameworks, in order to build a performing website and a consistent experience for our users

Other Design Systems

Beefree

Read more

Beefree SDK

Read more

Growens Website

Read more