What is branding? What is the importance of branding?
Branding means uniqueness. Each company has its own brand name, Logo, Theme and Color palette. Brand makes the objective of the organization effective to achieve the goal. Proper branding makes advertisement and marketing a huge success. Branding creates the identity for the company.
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image.png)
Branding plays a critical role in maintaining the trust with the customer. Placing the logo on their websites, products to ensure the quality of service is maintained by the company.
Introduction
As a Software Quality assurance team, we need to ensure the branding is done as per the client’s requirement. Since the branding conveys all about the company / Product, It will make a great impact in the business. So, it is important for us to verify the theme, Color, Font-Family and so on. It is a challenge for Quality Analyst to ensure the brandings from the User Interface (UI) due to varied system resolutions. Hence, it will be good to ensure the branding in elements. In this article, we will go through how the branding can be validated by properties of elements.
Installation
Below is the list of extensions available in Chrome Web Store and they will be helpful in validating the properties of element.
- CSS Spy
- ColorPick Eyedropper
- WhatFont
CSS Spy
(Click on the link and install the extension to chrome browser)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-1.png)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-2.png)
Click on the page for which you need to get the properties of elements. CSS will be extracted and displayed in a pop-up window.
Element information like Color, Font-Family, Font Size, Font Weight, Height, Line Height, Margin, Padding and Width.
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-12.png)
ColorPick Eyedropper
(Click on the link and install the extension to chrome browser)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-3.png)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-4.png)
Click on the page for which you need to get the exact color. Color picker will display the exact color in RGB and Hexa code format.
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-13.png)
Note: This extension may require only when the client specifies the color code in RGB format or Hexa code format.
WhatFont
(Click on the link and install the extension to chrome browser)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-6.png)
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-15.png)
WhatFont will display the font used in the webpage by hovering it.
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-18.png)
Click on the page for which you need to get the font details, it will show the properties of the font as pop-up.
![](https://www.mstsolutions.com/wp-content/uploads/2021/11/image-20.png)
Conclusion
Human’s eye may not capture all the Color, Font and Font size., but many apps / extensions available in the market to make it easy. We worked on the above extensions; it provides the accurate results.
If a Quality Analyst uses UI to validate the branding, there is a chance for missing the branding as per client’s requirement. If the QA uses the extensions, then there will not be any chance of missing the properties of the branding. Hence, it is advisable for a QA to validate using the extensions.