PlanCo Web Design

Mini Workshop: Flux Academy | Web design practice

Planco Co project thumbnail

Workshop Proposal

This project was part of a mini workshop from Flux Academy, in which we were asked to create a website that encouraged users to fill in a survey for exploring new locations. Through the course I decided to focus on learning more about the components and auto-layout features on Figma.

The Process

1- Mood board and branding

After reading the creative brief, the first step was to create an inspiration mood board and a very simple Logo for the website.

Because the theme for the website is related to exploring off the beaten path locations, I wanted my mood board to include pictures from nature and hiking that evoque the feeling of wilderness and adventurous paths, as well as some inspiration for color palettes.

Planco brandkit, grid with nature photography and color palletes
PlanCo Branding Kit, showcasing the moodboard and Logotype.

2- Colors and Typography

For the colors I chose a dark green and a more vibrant green as the accent color for the website, as I wanted it to feel fresh and connected to nature themes. I tested the colors contrast by using the A11y color checker plugin on Figma.

Color pallete for the website
Final color pallete for the website.

For the typography I chose two different font families. Poppins, which is modern and friendly-looking, and for the body text I chose plain and simple Inter, modern and easy to read. The typography was tweaked for the mobile size too.

Typography scale for desktop and mobile version
Typography scale with desktop and mobile adaptation.

3- Creating the wireframes

The wireframes were based on a sequence we learned through the course which consisted in the user learning about the product, creating trust and finally deciding to fill in the survey.

The website structure goes as follows:

  • On the first section we have the Hero section that informs what kind of product the company is advertising, followed by a section with a product showcase.
Website section 1 with hero section and locations
Website wireframe for the hero and locations section.
  • On the second section we get some information on the team behind the product, to slowly start building trust between company and customer. This is followed by testimonials from previous customers.
Website section 2 with about and testimonails
Website wireframe for the team and testimonails section.
  • On the third section, there's a small FAQ for users who are still in doubt on how the product works and if it's a good fit for them, and finally a CTA (Call to Action) Button for the user to fill in the survey.
Website section 3 with FAQ and call to action
Website wireframe for the F.A.Q.s and call to action.

Because it is a fairly simple website, I used a scroll navigation type.

By following this sequence, the user is progressively learning about the company and product, while keeping information fairly short and relevant to their question to build their trust.

4- Creating the components

Through following this workshop, my main goal was to get more comfortable with creating Figma components with auto-layout properties. The components allow for quickly iterating between designs and automatically apply those changes across the layouts.

I designed the components for the navigation system, such as the top bar, buttons that can be easily switched by their variables, card components that are resizable and responsive, and menus that can have their order easily changed with auto-layout.

Website final components
A few components from the component library.

Final Design

Finally, with my components ready to go, and with my wireframe as a base, I could finally start putting the pieces together to achieve the final design. Because most of the components were created before-hand, it was much faster to build the final design. I used auto-layout on all sections, to have consistent spacing throughout the website and follow the 8pt grid, that is commonly used on UI.

Website final design shots
Website final design shots.

The process for building the mobile version also went smoothly, because all the components were resizing properly with the auto-layout feature, making the process that much easier.

Check the figma files for a complete view of the project:

Lessons Learned

  • Spend more time in the wireframing phase, this will enable me to understand how I need to design my components and prepare them better before going into the final design.
  • Design the mobile version first, and see how the details carry out into larger screens.
  • Use the prototype tool before I auto layout every section of the page (this is mainly to not limit my prototype options and not undo/redo auto layouts).