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

WebUSB - Bridge between USB devices and web browsers

14
.
11
.
2023
Burak Aybar
Ruby on Rails
Frontend
Backend
Tutorial

Visuality comes to town - this time it's Poznań

14
.
11
.
2023
Michał Piórkowski
Visuality
HR

CSS Modules in Rails

14
.
11
.
2023
Adam Król
Ruby on Rails
Tutorial
Backend
Frontend

How to choose a software house.

14
.
11
.
2023
Michał Piórkowski
Ruby on Rails
Business
Visuality

JSON API versus the NIH syndrome

14
.
11
.
2023
Nadia Miętkiewicz
Backend
Frontend
Tutorial

From Idea to Concept

02
.
10
.
2024
Michał Krochecki
Ruby on Rails
Business
Startups

Styling React Components

14
.
11
.
2023
Umit Naimian
Ruby on Rails
Frontend
Tutorial

How good design can help your business grow

14
.
11
.
2023
Lukasz Jackiewicz
Design
Business
Marketing

TODO not. Do, or do not.

29
.
11
.
2023
Stanisław Zawadzki
Ruby on Rails
Software

CS Lessons #003: Density map in three ways

14
.
11
.
2023
Michał Młoźniak
Ruby
Backend
Tutorial
Software

Clean code for the win

14
.
11
.
2023
Michał Piórkowski
Ruby on Rails
Backend
Frontend
Business

Crowd-operated Christmas Lights

14
.
11
.
2023
Nadia Miętkiewicz
Ruby on Rails
Backend

How to startup and be mature about it

14
.
11
.
2023
Rafał Maliszewski
Ruby on Rails
Startups
Business

A journey of a thousand miles begins with workshops

14
.
11
.
2023
Michał Piórkowski
Software
HR

CS Lessons #002: Data structures

14
.
11
.
2023
Michał Młoźniak
Ruby
Software

Summary of Phoenix workshop at Visuality

14
.
11
.
2023
Karol Słuszniak
Ruby on Rails
Visuality
Backend

CS Lessons #000: Introduction and motivation

14
.
11
.
2023
Michał Młoźniak
Ruby
Software

CS Lessons #001: Working with binary files

14
.
11
.
2023
Michał Młoźniak
Ruby
Software

Working with 40-minute intervals

14
.
11
.
2023
Sakir Temel
Software
HR

THE MATURE TECH STARTUP DILEMMA: WHAT'S NEXT

14
.
11
.
2023
Susanna Romantsova
Startups

Win MVP workshop!

14
.
11
.
2023
Susanna Romantsova
Startups

FINTECH WEEK IN OSLO: WHATs & WHYs

14
.
11
.
2023
Susanna Romantsova
Conferences

MY FIRST MONTH AT VISUALITY

14
.
11
.
2023
Susanna Romantsova
Visuality
HR

NASA 1st global hackaton in Poland? Visuality Created it!

14
.
11
.
2023
Rafał Maliszewski
Ruby on Rails

Berlin StartupCamp 2016 summary

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