Due to it being St Patricks day this lecture was presented in the form of a youtube video, this allowed us all to have a few pints on a Monday instead.
We were tasked to create an interface inventory, this is when you pick apart a UI, taking all of its interactive elements such as buttons and links and putting laying them all out to understand how they fit together and why they work the way they do. We were instructed to pick a banking app and create an interface inventory for it. Beyond this task Daniel made note of Wise’s design page that went into depth about their different elements of design and how they all work together effectively, Ive referenced the site a few times over the course of this project so I am pretty familiar with the page. Daniel pointed out that they include the colour contrast scale from A-AAA. We learnt about this scale back in semester one and it is something I apply in every piece of work I do now, I don’t think I have made any note of it in my project folder, purely because I believe it to be a standard at this point in the course. Anyways I decided to use Wise for this task, so I collected some of their elements and compiled them into one page.
Following the interface inventory we were to create a component library. To do so we were to simply recreate the assets we had taken from our respective banking apps and apply our own bank branding to them. I ended up with a few assets that looked something like this.
I chose to use the log in button to create my first component, it was most similar to what Daniel used in the video. I started by turning the button into a component, and then adding four variables to it, these variable would be different states of the button for example maybe a darker colour to show the button is being pressed. I started by looking at my brands colour palette to see which combinations were most effective. Here’s how the variables turned out.
These updated variables already look so much better and are more usable for an interface. The next stage was to prototype these buttons to act accordingly with their varying colours. For this I used the trigger function and set it to on tap, this means when the button is tapped it would change colour, this then signals to the user that the tap has been recorded.
I touched on it within these class notes but I just wanted to have it logged somewhere that my colours are AAA when used against the colour contrast checker, here is how all the variations of my brand colours work with each other.
This weeks class was interesting, I didn’t love it being via youtube video but it did provide a different experience, that being said I prefer class time. In terms of the content I found it quite enjoyable, maybe useful more than enjoyable but beneficial none the less. I find the idea of using components quite daunting but the sooner I get comfortable with them the better. I enjoyed the interface inventory most in this class, to me it suggests a style of thinking that could be useful to apply to designs that I see in everyday life, breaking down each component to see what I like and hopefully learn a thing or two.