Gameboy – Framer Concept Interactive Micro Website

Chris Nutbeen

Low-Code/No-Code
UI Designer
Framer Designer
Framer
Nuttifox

A interactive Gameboy template on

Framer

to experiment with nested components and design without the need of Figma.

The Gameboy only uses 1 svg for the Nintendo logo, no other images and 100% no code.

The Design

It was important to see how far I could design the visuals directly in Framer, instead of using Figma to create the UI and elements.

Everything on this Gameboy was created directly in Framer with no external resources, except the blue Nintendo SVG logo. Even the pixelated Nintendo logo on start-up is a font.

I was very impressed with the outcome I was able to achieve soley using Framers features. The only aspect I think Figma could have improved in the Pad, as the shadows and lighting to achieve a clean look was tricky in Framer.

Nested Component Navigation in Framer
Nested Component Navigation in Framer

The Experiment

This experiment was to review the capabilities of nested components before having to use code. While code would make this a little more elegant in terms of component structure, the outcome is ultimately the same, whereas with no-code the navigation has to be within one-level of the screen to work correctly.

Loading Animations in Framer
Loading Animations in Framer

✦ The Stats

Timeline: 3 days Budget: N/A No. of components: 10 Deliverables: Finished

Framer

project file and

Remix

.

Impressed? Want me to create a Framer website for you? Check out my Framer services and book instantly ⚡

Partner With Chris
View Services

More Projects by Chris