Taken from Hubspot, Branding is the process of researching, developing, and applying a distinctive feature or set of features to your organization so that consumers can begin to associate your brand with your products or services. Branding plays an important part because not only is it what makes a memorable impression on user or customer, but it also allows user, clients or stakeholder to know what to expect from the product.
Branding is also a way of distinguishing one product from its competitors and clarifying what it is that the product offer that makes it the better choice. Brand is built to be a representation of who what you are as a business, and how you wish to be perceived.
“Brands are essentially patterns of familiarity, meaning, fondness, and reassurance that exist in the minds of people.” — Tom Goodwin
Branding and Visual Identity
Branding covers many areas from advertising, customer service, social responsibility, reputation, and one of the most important one: visual identity. In a software product, visual identity is one of the critical element of UI/UX Design. Done it right and it will improves user’s experience when using the product. But when it’s done poorly, user could feels that something is wrong and that the product is not as efficient as they imagined it would be.
To build a good visual identity from scratch is a tedious task. We have to make sure each asset have good usability, be tied to brand guidelines, and look according to the theme we want to present as. This is complicated more by strict deadlines and a limited budget, thus becomes even more challenging task.
What is Design Kit?
The solution to this problem is to create something called Design Kit. A design kit is a tool that can help you get rid of routine operations. It is a a set of resources that allow you to plan your design’s structure properly.
Design kit in a software product that is based on GUI — such as mobile app, desktop app, or website — generally contains an assortment of graphic files including UI components (buttons, checkboxes, navigation, etc.) for the purpose of user interface design. It allow designers to create outstanding visuals in reasonable timeframes. So instead of wasting time creating each component from scratch every time, we can instead focus on creating a good component that fits the brand once, that we can then used throughout our product.
Why do we need to build a design kit?
Design kit can help improve a design workflow in a number of different ways:
- Faster design process. It simplify the task of finding a solution to a design problem. Designers can rely on ready-to-use design elements from the kit instead of creating new ones from scratch.
- Bring consistency in design. It can be hard to achieve consistency in design when we repeatedly create from scratch or taken from another library. Design kits can become a foundation for the design system and a single source of truth for designers.
- Focus on branding. Because designer can focus on lesser components (rather than creating all from scratch), it will be easier to create these core components as best as possible to fit the branding that the product want to achieved.
Is there any disadvantages of design kit?
Design kits are not always a perfect solution. They also have downsides:
- They have a limited number of elements. Not all kits are comprehensive. The design kit we choose to use might not have all the elements that we need for our product. As a result, we will need to invest time and effort in creating new elements.
- The need to adapt a new design kit to an existing design. If you have an existing design, you need to invest time in customizing the elements from the design kit and integrating them into your original design. Depending on the level of complexity of your design, this can take hours to weeks. Sometimes it takes more time to customize the kit than to create a design from scratch.
- Design kit can limit your creativity. Relying on design kit could instead limit your creativity and yourself from finding a much novel and creative design. Design kits typically include complete “out of the box” demos, and when you see how something is designed, you may intentionally or unintentionally try to follow the same approach. Because of this, when working on a new or particularly innovative product, it’s better to use design kits very carefully — try to use design kits only for small, less significant, or tedious parts of a design.
Design Kit in SIPASCA
For my project, we built a web application called SIPASCA to help postgraduate’s student took special courses. There are a few design kit that we made to help us design SIPASCA’s web interface.
- Color
Our faculty’s color theme is red and blue. We chose to use the same color so that people knows (beside by not looking at the name directly) that this web application is associated with our faculty.
- Button
Red is our primary color in many of our components, including button. For this web application, we designed three types of button. The important type is used on a main action of a certain feature. This is styled with solid fill color to make it standout on the page. The primary one is below the important one, mainly used as a way to redirect to another page. The last one is the secondary type, the least important button on this web app.
- Box
Contrasting with the button, these box design used the blue color instead. This box is used for course’s administration page and lecturer/supervisor’s field of expertise.
Table
There are some tables that we used throughout our system. To ensure the consistency between each table, we create a standard table kit. Each table can then just change the column as needed.
