UI Recreation
Burnley Savings and Loans UI Recreation
Introduction
This UI recreation project marks my first solo endeavour, using my own custom process without guidance from an online tutorial. A detailed overview of my process can be found here.
For this project, I recreated the home screen of the "Burnley Savings and Loans" app, which is relatively simple home screen with a limited number of elements. These include card components with multiple variants, a navigation bar with flexible options, and various call-to-action (CTA) buttons, each with unique variations, This was a good choice as it allowed me to test drive my home brew process in the background and not get to bogged down in a highly complex screen.
Observations
Iconography
I observed some limitations with icons, I couldn’t source the original icon set and was unsure if the icons were from a private or public collection. Subsequently I opted us use a public icon set as a substitute “Material Design” icon library and selecting icons that provided a similar visual context and user experience.
Typography and Font Adjustments
Matching the original typeface presented a similar challenge. Even after testing with online typography scanners, I couldn’t pinpoint the exact font. I chose Inter, a similar sans-serif typeface, as a substitute. During the typography analysis, I observed considerable variation in character spacing and font sizes (more so in the 18 to 12pt mark). This led me to adapt the typography by applying a -2% character spacing across all text styles to align with the general spacing trends observed.
I understand that this decision could be made defunct should the exact same typeface been used.
This recreation experience allowed me to enhance my adaptability, particularly when replicating interfaces without access to proprietary elements. By making informed substitutions, I maintained a high level of fidelity to the original app’s user experience and visual style.
