NomadBrew (A Figma learning Journey)

Since the last months of 2024 I have been interested designing websites. So I asked ChatGPT what the best tool are for making and prototyping websites.


Occupations during project:
Learning the basics of Figma

For my new journey into knowledge, I chose Figma as my next side quest. I started by learning the absolute basics through YouTube and ChatGPT. To test my understanding, I eventually created a mini-assignment focusing on the fundamentals. ChatGPT provided me with a brand image assignment called NomadBrew, where I’ll design a website from scratch.

I’ll be documenting this entire process, so apologies in advance for any mistakes, delays, or wrong turns along the way—but I had to start somewhere.

Brand Image Assignment: "NomadBrew – Coffee for the Adventurous"

Background:

NomadBrew is a premium coffee brand designed for travelers, digital nomads, and outdoor enthusiasts. The brand focuses on high-quality, ethically sourced coffee that can be brewed anywhere—whether you're in a co-working space, a remote village, or camping in the mountains.

Target Audience:

  • Digital nomads & remote workers
  • Travel enthusiasts & backpackers
  • Outdoor lovers & adventure seekers
  • People who value convenience without compromising quality

Brand Values:

  • Adventure & Freedom – Encouraging a work-from-anywhere lifestyle
  • Sustainability – Ethical sourcing, eco-friendly packaging
  • Premium Quality – Rich flavors and expertly roasted beans
  • Convenience – Portable brewing solutions (instant specialty coffee, drip bags, etc.)

Website Goals:

  1. Engage users with a strong visual identity that reflects adventure and high-quality coffee.
  2. Showcase products – Display NomadBrew's coffee selection and accessories.
  3. Educate visitors – Share brewing guides, travel tips, and sustainability efforts.
  4. Encourage purchases – Integrate a seamless online store.

Design Direction:

  • Color Palette: Earthy tones (brown, beige, forest green) with modern accents
  • Typography: Clean and modern with a touch of rustic charm
  • Imagery: High-quality travel photography, coffee close-ups, outdoor brewing shots
  • Layout: Minimalistic yet immersive, full-width sections, large visuals

Pages to Design:

  1. Home Page – Hero image with tagline, featured products, brand story
  2. Shop – Product catalog with filtering (ground coffee, beans, accessories)
  3. About Us – Story behind NomadBrew, sustainability practices
  4. Brewing Guide – Step-by-step guides on how to brew anywhere
  5. Blog/Community – Travel stories, remote work tips, user-generated content
  6. Contact – Customer support, wholesale inquiries

Bonus Challenge:

Create an interactive feature where users can "Find Their Perfect Coffee" by answering a few lifestyle-related questions. 

 

1. Preparing the base

I finally have all the information I need to get started. I attempted to record my progress using the Game Bar in Windows 11, but unfortunately, I later realized it didn’t capture the Figma screen—probably due to privacy restrictions. So, for now, here’s an image of what I’ve created so far.

I decided to make the header fixed at the bottom of the page, just to see how it would look. Placing the header at the bottom creates more space at the top, allowing for a cleaner and more open view of the content.

This is just the first prototype—it might change as I progress, but let’s see how it evolves!

The journey continues..