28 Jun
18
Senior UX/UI Designer

What is branding?

Almost each company has its own logotype which is the main element allowing to distinguish the business from the competitors. The logotype is a recognizable mark which very often, in some symbolic way, presents the values of the business. But we need to remember that this is one of the many aspects of branding which influences brand awareness.

The business which is run in a thoughtful and reasonable manner should be built on a certain strategy. The branding stems from that strategy and can include: logotype, business cards, company stationery, website, uniforms, etc. Thanks to that we can spark particular feelings and imagination in our target clients’ minds. For example, close your eyes and think about IKEA. Don’t you see yellow and blue? Don’t you think about cosy and well-planned interiors, comfortable armchairs and a cup of tasty coffee?

This is why companies use branding to shape our perception of the business and trigger certain emotions. A coherent plan can give us an advantage over the competitors and make customers buy from us.

Consistency

Businesses which focus on their looks pay attention to the consistency of branding. When they find out how they want to be seen they do their best to keep their visuals consistent. Personally, when I see that some brand takes care of itself I am more willing to trust that they will care about my needs as well. And this is what we are trying to do at Visuality. We have designed our website (which took over a year to agree the final version), business cards, sales presentations and other materials and we hope that all those match well one to another. Our aim was to make everyone who sees our characteristic shapes and colors recognize Visuality.

We are still refining our materials and trying to remember about the finest details that’s why some time ago, along with our CTO - Sakir Temel, we decided to style our Jira account.

Our materials

How to style Jira

Jira is an extremely useful tool for managing projects and error tracking. Every day it is used by thousands of developers, project managers and designers all over the world. Probably many people are not aware that to some extent we can modify its look to make our daily work more pleasant. At Visuality we are continuously working on our image that is why we have decided to style our Jira. It is not as difficult as you may think and we will explain how to do it.

What can we change?

Quite obviously, Jira gives us limited possibilities to customize the look and feel of it. Modification of all elements would be too difficult and could bring chaos in the end. Here is what we can adjust:

Jira 1

  • logotype
  • the colour of the top navbar
  • the colour of hyperlinks in the top navbar
  • the colour of the buttons in the top navbar
  • the colour of the search box
  • the colour of the dropdown menu
  • hover states
  • hyperlinks
  • favicon

How to do that?

To find the options which allow us to change the look and feel of your Jira, go to SETTINGS in the top-right corner of the menu and choose SYSTEM from the dropdown menu.

Jira 2

Find „USER INTERFACE > LOOK AND FEEL” in the left column.

Jira 3

Finally we are there and now you can start customizing.

Jira 4

Our logo

The first thing we can do is replacing the logo with your own one. It is easy, the only thing you need to remember about is to resize your image to correct dimensions. It should be 60px high. Watch out! It is recommended to upload your logo first, colors of the system may be automatically adjusted to the uploaded image. Of course you can still change it but if you do it the other way round all your hard work could be wasted.

Title of the page

You can display the title of the page next to your logotype or hide it.

Favicon

It is just as with the logo. Just upload the image for your favicon.

Jira 5

Colors

And here is the funny part. Set the HEX values (eg. #c1c1c7) for particular elements. It is not so intuitive to understand which value corresponds to which element but no worries, we are going to explain it. You can also play with that on your own and get back to the previous values at any time by pressing the REVERT button.

Header Background Colour

This value corresponds to the background color of the top navbar.

Header Highlight Background Colour

The background color of hyperlinks in the hover state.

Header Separator Color

Between the top navbar and content we have a 1px high line - this value corresponds to its color.

Header Text Color

The color of hyperlinks in the top navbar.

Header Text Highlight Color

The color of the top navbar’s hyperlinks in the hover state.

Menu Item Highlight Background Color

The background color of the dropdown menu’s hover state.

Menu Item Highlight Text Color

The text color of the dropdown menu’s hover state.

Button Background Colour

The background color of the button in the top navbar.

Button Text Colour

The color of the button’s text in the top navbar.

Link Active Color

The color of the hyperlinks in the hover state in the content of the page.

Heading Color

The colors of the system headers such as H1, H2, H3, etc.

Link Color

The color of the the hyperlinks in the content of the page.

Jira 6

Jira allows us to customize two more categories : GADGETS and DATE/TIME FORMATS and if you want you can play around with them. See the graphical explanation of the elements from the COLORS category below.

Numbers

Conclusion

Congratulations, you have just customized your Jira! As you can see it is not so difficult as it seems to be. All you need to do is to find right options and find out what are they corresponding to. We hope with our help in just a few seconds you made your tool prettier and more readable. Moreover you took care about your look and you can say that you focus on even the smallest details of your or your company branding. Good job.

It’s not the end: Jira has recently changed its layout. We are going to update this article soon and explain what’s new. Stay tuned!

Dreaming about being a UX/UI designer? Read the article and you'll know what is what.