14
.
11
.
2023
28
.
06
.
2018
Tutorial
Design
Project Management

Branding: How to style your Jira?

Lukasz Jackiewicz
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!

Lukasz Jackiewicz
Designer

Check my Twitter

Check my Linkedin

Did you like it? 

Sign up To VIsuality newsletter

READ ALSO

Is Go Language the Right Choice for Your Next Project?

14
.
11
.
2023
Maciej Zdunek
Backend
Business

SXSW Tradeshow 2020: Get Your FREE Tickets and Meet Us

02
.
10
.
2024
Michał Krochecki
Ruby on Rails
Conferences
Frontend
Backend
Business

How to build effective website: simplicity & McDonald's

14
.
11
.
2023
Lukasz Jackiewicz
Ruby on Rails
Frontend
Design

Thermal Printer Protocols for Image and Text

14
.
11
.
2023
Burak Aybar
Backend
Tutorial
Software

WebUSB - Print Image and Text in Thermal Printers

14
.
11
.
2023
Burak Aybar
Backend
Tutorial
Software

What happened in Visuality in 2019

14
.
11
.
2023
Maciej Zdunek
Visuality
HR

Three strategies that work in board games and in real life

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails

HR Wave - No Bullshit HR Conference 2019

14
.
11
.
2023
Alicja Gruszczyk
HR
Conferences

Lightning Talks in your company

14
.
11
.
2023
Jarosław Kowalewski
Ruby on Rails
Visuality

Stress in Project Management

02
.
10
.
2024
Wiktor De Witte
HR
Project Management

How to find good developers and keep them happy - Part 1

02
.
10
.
2024
Michał Krochecki
HR
Visuality

PKP Intercity - Redesign and case study of polish national carrier

14
.
11
.
2023
Katarzyna Szewc
Design
Business
Frontend

Let’s prepare for GITEX Dubai together!

14
.
11
.
2023
Michał Piórkowski
Conferences
Business

Ruby Quirks

14
.
11
.
2023
Jan Matusz
Ruby on Rails
Ruby

Visuality recognized as one of the Best Ruby on Rails Devs

14
.
11
.
2023
Maciej Zdunek
Ruby on Rails
Visuality
Business

Is the culture of the organization important?

14
.
11
.
2023
Alicja Gruszczyk
Conferences
Visuality

Between the devil and the deep blue sea

04
.
12
.
2023
Mateusz Wodyk
Project Management
Backend
HR

Let’s prototype!

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails
Backend

5 marketing hacks which will make your life easier

14
.
11
.
2023
Maciej Zdunek
Marketing
Design