Class Project: design a responsive, 3-page website for a fictional Product or Service

For the class project, you will design a responsive landing page for a fictional product or service of your choice using Figma.

In addition to the landing page, you will also create two additional pages, such as

a contact page
a product features page.

By the end of this project, you'll have a fully responsive and interactive website that showcases your design skills and Figma knowledge.

Here are the requirements for the project, followed by additional tips and resources:

Choose a product or service—choose a fictional product or service that you would like to create a landing page for. This product or service should have a clear and defined purpose.
Sketch some wireframes—create wireframes of your landing page layout using Figma's Frames and shapes tools. Don't be afraid to steal from your favourite sites. Remember: building your skills is most important here!
Create a base set of Styles—all you'll need is a basic typography scale, and some shadows. We can use the default Figma colour palette for now.
Create a set of Components—make sure to name your layers and uses Frames to keep your components organised and responsive.
Design your pages—use Figma's design tools to create a visually appealing and cohesive landing page. This includes creating a colour scheme, typography, images, and icons that fit your product or service.
Check for responsiveness—use Figma's auto-layout and responsive components features to make your landing page fully responsive as you resize or edit content.
Add interactions—use Figma's prototyping tools to add interactive elements to your landing page, such as hover effects or button interactions.
Share your project—share your completed website with the class by posting a link to your Figma project in the class discussion section. Make sure to include a short description of your website, including the product or service you chose and any design considerations you made.

If you get stuck

It's okay, don't panic, simply check out my guide to 7 common problems in Figma and how to solve them:

https://uxdesign.cc/7-common-figma-design-problems-and-how-to-fix-them-e07a71ce917e

Example products and services

Here's 3 examples you can use, and save your creative energy for the web pages :).

A meditation app that uses voice-guided meditations and calming soundscapes to help users relax and reduce stress.
A language learning platform that offers interactive lessons, real-time conversation practice with native speakers, and personalized feedback to help users improve their language skills.
A meal delivery service that offers customized meal plans based on dietary preferences and restrictions, with a focus on healthy and locally sourced ingredients.

By completing this class project, you'll have a fully responsive and interactive website that showcases your design skills and demonstrates your Figma proficiency. You'll also have a portfolio of landing pages and additional pages to add to your design portfolio.