Have you ever witnessed an orchestra live before? They are made up of unique groups that each carry their own role (i.e. woodwinds, brass) and sound to create. Each group has to focus on their own sound, yet remain aware of the overall sound being created.
Interfaces are just like orchestras. They aremade up of smaller components that contribute to the overall interface. Each component is meticulously crafted to provide a certain look and feel, but also plays a unique role in the overall makeup of the interface.
As a result, designers have to change their focus as they craft different components within an interface. The thought process required for building a checkout flow are vastly different to the process behind selecting a navigation style.
Designers — you have to think with a component mindset. Here’s why.
Different components function differently
You need to consider the different properties involved within an individual component. From a developer’s point of view, components that change depending on state need additional thought/documentation from a designer.
A static image often isn’t enough here. Have you designed a navbar component that shows a user’s picture when logged in, and a “Sign up” button when logged out? Does this change the navigation elements that are then presented to a user? Are some elements hidden on mobile but not on desktop?
Each component needs proper design consideration
Providing a baseline element and leaving the developer to figure out the rest isn’t the best approach. Give each unique component thought, consider what you’re trying to achieve and make clear what functionality is required.
Different components have different goals
You need to be ready to craft various components with different goals in mind. Each part of an interface may focus on a “higher” goal (i.e. maximising session duration), but they also have “micro” goals they need to deliver on.
Why do these “micro” goals matter?
Because they contribute to the product’s greater success.
Button colours often differ from an interface’s typical colours to encourage event conversion. Font sizes and styles are chosen to maximise readability, keeping people in-app for longer.
Consider just how many components go into a design, and then it will start to become clear how important this concept is. Without the contribution of each component, the higher goal/vision in mind may struggle to be achieved.
Components contribute different styles to the overall UI
You need to style each component in such a way that helps to form an overall interface that is cohesive and visually-pleasing.
Using the same colour for your navbar, buttons and text is probably not going to lead to a cohesive interface. Some components need to “pop” colours into the user’s view, whereas others need to remain neutral and very readable for a user.
Consider the below example of TradingView’s UI. The navigation bar is on a dark background, whereas the rest of the interface rests primarily on white/grey backgrounds. The styling of the navbar gives the entire website a distinct look and feel. If the whole interface rested on the same colour as the navbar, the look and feel of the whole website would be likely completely different!
So, next time you’re designing, consider the component-driven approach!