Within Week 8’s lecture Daniel that I have written about here- Week 8 blog, we discussed interface inventories and we had a task to complete based on interface inventories.
What is my task?
Choose a website and complete an interface inventory, documenting all the interactive elements used throughout. Include buttons and elements of the UI that is included in your chosen website.
Research on interface inventory
Before I started this project I wanted to do some research about the topic in more detail to get a better understanding, so I could therefore produce a better interface inventory for the brand.
What is an interface inventory?
An interface inventory is taking stock and categorising the components make up a website or an app. An interface inventory is a comprehensive collection of UI elements that make up your interface, this includes buttons, text, images and so on.
Examples of interface inventory-
Below I have added some examples of what an interface inventory looks like and what sort of UI elements are included in them.
Why create an interface inventory?
It brings consistency to both the visual design and will aid in making a style guide or pattern library.
What are the benefits of an interface inventory?
There are many benefits to having an interface inventory and they include the following:
- Promote consistency
- Ensures all interface components are accounted for
- Lays the groundwork to a sound design system
- Responsive Retrofitting
What makes a good interface inventory?
The fewer there are the better the design, this means that the interface is consistent and therefore the brand will more likely be a consistent and cohesive organisation/brand.
The process of making an interface inventory
Below I took to Miro and created this process on how to create and interface inventory, I thought this would be helpful to do before starting my class task to get me in the right mindset to designing an inventory.
My Task
I have chosen to look at the ASOS website as I have already looked at their brand ideals and guidelines in previous weeks, access blog here. I have scowered their website and took stock of the buttons and UI elements that they have used, I have included images and a PDF of my inventory that I created for them below.
Their website- ASOS
My interface inventory for ASOS
ASOS interface inventory PDF- interface-inventoryASOS
My conclusion
ASOS has a minimal UI inventory, they use the same type and buttons repeatedly. This tells me that the UI style throughout the ASOS website is consistent and therefore they are a consistent and well designed brand. All of the components link well together, from the style of the buttons to the icons they use to navigate sections of the website. Essentially this shows me that ASOS are a very cohesive brand overall.
What did I learn?
I have learned a lot about inventory interfaces and how to create one, overall I enjoyed this lecture and this task that was set. I will get Daniels opinion on how I did with my ASOS inventory to see if it has the appropriate layout and information included. I am now more aware of the components and UI elements that I will be designing for my upcoming portfolio, and the process of how to organise them into my own future interface inventory, and I am excited to make my own.