<aside> 💡 Interface Inventory- This consists of breaking down all the elements that make up a web page, including: headers, menus, icons, buttons etc.

</aside>

• The web interface inventory is a method used to evaluate user experience, offering an overview of both strengths and weaknesses within the digital interface.
• This user-centered analysis technique assesses the usability and design of an interface, focusing on its ergonomics.

To make my component library, I used my interface inventory and followed along with the tutorial video to help me. For my colours, I obtained from Tints & Shades generator to match my branding colours.

Component Library:

I decided to use one of my current banking apps (Revolut), as I’m familiar with the layout and I’d like to adapt it to my brand. From watching my lecture’s tutorial, it guided me to be able to make my own interface inventory.

I began with taking screenshots of the app to create a component library for my app design.

Next I broke down each screen and organised the various components, to make easier to redesign them to suit by banking brand.

I used tones of my primary brand colours for different types of buttons. For example, the most important buttons are bright green whereas the ones with less importance are a very light green.

I enjoyed this process of making the components, I found it very time consuming making sure they were the right size and creating the different icons. Although, it was very satisfying to see them all compiled together.

https://www.figma.com/file/uC61khsaDCUL9dl0AxRofT/Banking-App?type=design&node-id=0%3A1&mode=design&t=8QcEccdpnTHewLzj-1