FIGMA CLASS

Learn how to use Figma

Create a mock website using the various tools in Figma

Design for a mobile device

In my Figma Fundamentals class, we were tasked with creating a mock mobile website to explore the application's features and get comfortable with its interface. For my project, I designed a travel blog inspired by my trip to Hong Kong. Since friends often ask me for recommendations when planning their own visits, I thought it would be fun to turn the suggestions I typically share into a digital travel guide.

TIMELINE

1 WEEK

ROLE

DIGITAL DESIGNER

TEAM

SOLO DESIGNER


PROCESS

Inspiration for the travel guide

Browsed through the Unsplash catalog to brainstorm ideas for the website project

  • Found a collection of beautiful Hong Kong landscape photos, which sparked inspiration

  • Having recently visited Hong Kong, I decided to create a travel guide based on my experience

  • Wanted to go beyond a typical travel guide—something tailored for millennials

  • Focused on sharing the kind of recommendations I’d want if I were visiting, and the tips I usually give friends when they ask

UNSPLASH

ICONIFY


MOCK UP


CONCLUSION

Final Thoughts

  • This is the prototype I created for the project.

  • I really enjoyed using Figma—the intuitive interface and built-in tools made the design process enjoyable.

  • It was fun to design a travel guide while playing around with the aesthetic and personality I wanted it to reflect.

  • This is as far as I developed it for the class.

  • If I were to continue building it out, I’d aim to turn it into a comprehensive travel resource.

  • Many travel guides focus on highlight reels and lack practical, detailed information.

  • I’d include:

    • Specific directions to each location

    • Realistic expectations (beyond the curated photos)

    • Honest opinions on whether each spot is actually worth visiting

You can click through the prototype!