Design Work

Figma File Showcase

This page highlights my Figma wireframe tracing work with direct comparisons between the original reference and my tracing output.

Wireframe Tracing Portfolio

Saved tracing cards appear below this section.

Original

Tracing

Spotify Tracing

Something I learned while tracing Spotify, is more of the effects on the rectangle, and how it's used especially the bottom nav. I've also messed around with the gradient, for the album covers. Main thing I've changed, was the background for the recent albums and the search bar to make it pop out a bit more.

Open In Figma

Original

Tracing

Instagram Tracing

I learned a lot from tracing this frame, I noticed compared to Kayak, there's not a whole lot of drop shadow to represent more clarity for buttons, it's a more clean approach. Only notable changes I did beside typography, is giving a bit more bold in some areas to give it more structure.

Open In Figma

Original

Tracing

KAYAK Tracing

Some changes I made to this tracing was to highlight a bit more of the textbox, give a bit more clarity on the united states and Tuesday. I also made a clearer visual to showcase the button visibility, and kept the color scheme of the company the same.

Open In Figma

Original

Tracing

Duolingo Tracing

Some changes I made to the program was to add more bolding for the progress bars, and have some of the progress bar to showcase a bit of a more checkpoint to represent a bit more visual to see their progress. The timer typography show as a figma's timer.

Open In Figma