What exactly is the DESIGN SYSTEM?

In past few years, the topic of Design system has become widespread… but what is this all about.

I read so many blogs, articles & books around it and found no one is talking about the challenges about it. Most of the people who is publishing this articles or blogs belongs to design community or they are more on design philosophy side. I have not seen or heard any practical challenges when they implement the design system on live projects and how they come out form those challenges.

So let’s start from beginning.

What is Design System ?

I keep hearing various definitions, so let me start by saying what a design system isn’t. It is not a Sketch library or no more than a style guide or a pattern library… Actually it’s combination of all of this and beyond this.

So, Design System is the complete sets of design standards, documentations, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

So what is Style guide or pattern library ?

Style Guide: It typically encompass a company’s brand guidelines, which include logo usage, brand colours. It is often wrapped into a deliverable for a company to work with outside vendors and for future development of brand products. Style guide can directly influence the look and feel of a pattern library. Style guides can stand on their own without data, while pattern libraries rely on some data to function.

Pattern Library: Often encompass with static UI elements, e.g. tabbed navigation, dropdown menu, accordion, and even common web page layout, like grid. Style guides do not always care about context, and relationships with data. Whereas UI elements, and their application in the overall user experience depend heavily on context and the interplay with content.

I hope it will be clear for you now, that the style guide and pattern library are just some of the deliverables of a design system.

A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.

A style guide can provide documentation and serve as a helpful resource, but the simple existence of a style guide doesn’t guarantee long-term success for the underlying design system. A design system needs ongoing maintenance, support, and tender loving care for it to truly thrive.

So in nutshell we can say design system isn’t a project. It’s a product, serving products.

So why do we need this ?

design, system, sketch, wireframe

There are two ways of looking at it, from an internal and an external perspective.

Internal: It creates a holistic perspective to ensure we’re all adhering to the same methodologies and patterns as a team. Every team member should be in-line with the concept that we’re promoting and should be able to reference the design principles against any project they are currently working on.

External: Having a cohesive design language creates harmony within a platform. For onlookers, standardised colours, interactions and patters creates a sense of familiarity and security. A well planned and well executed design system is the key to a gratifying experience. Familiarity brings a sense of comfort and security to the user. Introducing design constraints on individual elements within a platform creates consistency at a higher level.

A successful Design System will:

  • Focus: allow the designer & developer to focus clearly on the project at hand rather than to be diverted by other distractions.
  • Clarity: allows the team to think clearly about design beliefs as well as the design constraints in place across the platform.
  • Confidence: allow the team to have complete confidence in what they are developing and that it is in-line with others in the team
  • Consistency: create consistency across the product which in turn will create a secure, familiar experience across the platform.
  • Efficiency: create understanding across the teams, meaning less time consumed concentrating on the less important details.

What in the box ?


The fundamental purpose of design system is to facilitate the work of the teams. For designers, a design system means a  library or brand guidelines. For developers, it’s more likely to mean coding standards and documentation that guide precise work.

So the first question we need to ask ourselves is not “what should I put inside my design system?” but “Who is going to use it and how they will use it?”.

Just think what can happen when we break out those silos of designer and developer. In his definition, brand including design standards, documentation, and principle along with a toolkit of UI pattern and code components to achieve the standards. A detailed design system not only describes the product but the process of how it come to the life as well.

Focus & Value: Before starting anything, it is really required to align right team around with a clear vision.

Design Guidelines & language: Design guidelines are so much more than just the visual aspect of the product. They will help the teams to make meaningful design decision. It should covers the following:

  • Colours
  • Fonts
  • Icons
  • Illustrations & shapes
  • Photography
  • Animation & sound

Pattern Library & Components: Components & Pattern library are the heart of the design system.

Components are like a LEGO blocks, they’re used in sketch by designers, and directly coded by developer.

Patterns are the building instructions that will allow us to use these components in a logical and consistent way, across all the product.

I still remember Alla Kholmatova’s book “Design System” which talks about various type of design system. I’ll take those in my blog too

Strict or Loose

A Strict System: A strict system should be very broad in order to cover the majority of cases the teams may encounter.

A loos System: This will leave more space for experimentation. Designer and developers are free to use it or not, regarding their particular needs for their product.

In my opinion we should have right balance between this two if it’s too loos can we still call it as design system? Other side it should not be too strict which might create a repel developer & designer who will not want to use it.

Modular or Integrated

A Modular System: it suits well for project that have to scale quickly as it’s made of interchangeable and reusable parts. This kind of system will particularly fit large-scale product as e-commerce and finance etc. This kind of systems are quite expensive as its difficult to make modules that can be independent while working well together.

An Integrated System: This will focus more on unique context. Under this components & part are not interchangeable. This kind of system will suit for those products that have very few repeating parts.

Centralized or distributed?

In a centralized model, one team is in charge of the System and makes it evolve. This team is here to facilitate the work of the other teams and has to be very close to them, to be sure that the System covers most of their needs.

In a distributed model, several people of several teams are in charge of the system. The adoption of the system is quicker because everyone feels involve but it also needs team leaders that will keep an overall vision of it.

In each case, I advise allowing everyone to participate and make suggestions to improve the system, in order to create a sense of membership. To keep with industry’s best practices and real-world performance, design systems need to be up to date and in trend. Design system moderators can propose changes by adding, removing, or modifying as needed to serve the purpose.

I hope that this article has given you a solid understanding about what design system is and help you bravely tackle this increasingly diverse digital landscape. I hope you and your team can create great things together. Go forth and be atomic!



Say Ola! to Bootstrap 4

So it’s now a being 4 years to see Bootstrap in market and now Bootstrap already launch 4th version, so many sites already migrate to bootstrap 4 from 3 and some people still in middle to take a call to wait for some time or go for bootstrap 4.

So let’s see what is new we get in Bootstrap 4 and how its help us

    1. Goodbye Less, Hello SassBootstrap 4 is now on Sass and that’s why bootstrap will complies faster than ever thanks to Libsass. So now we will be having change in directory hierarchy
      Bootstrap 3
      Bootstrap 4

      I know you notice that font folder is missing in Bootstrap 4. Yes, font folder is not missing in Bootstrap 4 it’s got eliminated because bootstrap 4 will no longer support glyphicons anymore.
    2. Better Grid System based on “rems”
      Bootstrap grid still follows the same HTML syntax, but the underling architecture changed quite a bit. However bootstrap 4 classes used ems not pixels and they’ve added one new tier for extra large screens.

      • col-xsfor extra small display (screen width less than 34em)
      • col-smfor smaller display (screen width 34em and up)
      • col-mdfor medium display (screen width 48em and up)
      • col-lgfor larger display (screen width 62em and up)
      • col-xlfor extra large display (screen width 75em and up)

      The container has max-width set in rems. A row now has a negative left and right margin of -.9375rem while columns have default left and right padding of 0.9375rem. This value were previously 15px in Bootsrap 3.

      So this might be a good thing to support all screen sizes, it may take time for some web designers and developers to get used to it as most of the graphics tools that are being used today like Photoshop, fireworks etc. used pixel on its design.

      If you are using the Sass CSS source version of bootstrap 4, you can control the grid size by changing the following variables:

      • $grid-columns:number of grids horizontally (12 default)
      • $grid-gutter-width:total padding around each grid (30px default)
      • $grid-float-breakpoint:minimum size the navbar becomes uncollapsed ($screen-sm-min default)
      • $grid-float-breakpoint-max:maximum size where the navbar begins collapsing (the default would be the size of the $grid-float-breakpoint – 1)
    3. Typography
      Bootstrap typography is using rems. Unlike px and em, it is not a fixed or relative unit that is direct or nearest to its parent measurement. The rem unit is dynamic and relative to the root HTML tag. However, you can still use px, em and pt on Bootstrap projects if you want.To give you an idea how rems work, you can divide the target to base size of html in pixels.
      Let’s say we have the following code
      font-size: 16px;
      font-size: 1rem; /* 1rem = 16px */
      h1 {
      font-size: 1.875rem; /* 30px / 16px = 1.875rem */
      In the example above, we set out paragraph tag into 1 rem which is equivalent to 16px as our html root size. While h1 tag will have 1.875rem if you will divide the target size which is 30px to the html root size of 16px.Bootstrap 4 pulled rems units into scene to have 100% perfect scaling of the entire application. This makes it easier to scale up or down for devices. It also worth noting that size of the html tag can be customized to your preferred size.
    4. Improved media query
      I still remember when I teach media query to my team they told that it’s really frustrated to know the size of device and define in media query.In bootstrap 3 we write media query something like this
      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */
      /* Small devices (tablets, 768px and up) */

      @media (min-width: @screen-sm-min) { ... }
      /* Medium devices (desktops, 992px and up) */
      @media (min-width: @screen-md-min) { ... }
      /*Large devices (large desktops, 1200px and up) */
      @media (min-width: @screen-lg-min) { ... }
      So now in bootstrap 4 grid system has been completely revamped with em based values, we need to change them as such:
      // Extra small devices (portrait phones, less than ???px)
      // No media query since this is the default in Bootstrap
      // Small devices (landscape phones, 34em and up)
      @media (min-width: 34em) { ... }
      // Medium devices (tablets, 48em and up)
      @media (min-width: 48em) { ... }
      // Large devices (desktops, 62em and up)
      @media (min-width: 62em) { ... }
      // Extra large devices (large desktops, 75em and up)
      @media (min-width: 75em) { ... }
    5. Cards
      In Bootstrap 4, panels, thumbnails and wells were removed and replaced with cards. This component can be used to display information as a page or a container which supports different kinds of content such as links, text, images, headers, footers and many more with a variety of background colors.To enable cards, add the .card and .card-block classes to an element. There are also some more classes that you can use inside the .card class.

      • .card-title for heading title
      • .card-text for the text element
      • .card-header for the header
      • .card-footer for the footer
    6. Tooltips
      The Bootstrap tooltip plugin was originally based on the jQuery.tipsy plugin written by Jason Frame. However, in Bootstrap 4, it move to Tether, a third party plugin. If you want to use this new feature include tether.js just before the bootstrap.js.
    7. No more IE8 Support
      IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.
      It’s currently unclear if there will be a partial support with a HTML5 shiv and respond.js or not. It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3.

Now safe to use JQuery 2.0!
Now that Internet Explorer 8 support is dropped. It’s safe to always use jQuery 2.0 with Bootstrap. jQuery 2.0 is smaller, faster, and has more features.

Smaller then Bootstrap 3
Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build! It previously was around ~123kb and now is a mere ~88kb. This is a huge reduction for not losing any features.

My verdict on Bootstrap 4
Even though bootstrap 4 is only in alpha, it is still really exciting and safe to use. Bootstrap has come a long way. It is advised to always check the official documentation and for the future updates.

Multi-tenant support for prompts in Dashboard

Many times we require having multi tenant environment for Pentaho customers. There are commonly known methods those are already designed for this purpose like “IDBDataSource” customization can be used to return custom data source name based upon a value in session for currently logged in user. When it comes to achieve multi-tenancy for prompts in dashboard without maintaining different connections for different users; choices are few and not wildly known.

Pentaho v5 comes with a bunch of rest based web services; one of those is to list down and see details of a data source in repository those are created using Data Source Wizard.


Looking at the results of this web service; we can derive the fact that Pentaho stores these data sources in XMI format. If we further look at the rest service that downloads a specific data source definition;


We can find out complete structure of how Pentaho stores a data source looking at the downloaded zip file via above rest service and we come to know that it stores the queries already compiled like prepared statements and are not parameterized.

Fact being that Pentaho stores data sources in XMI format; leads to a conclusion that we can use customization of SQLGenerator to achieve multi tenancy in dashboards directly. We actually tried this and it is working for multi tenant environment. SQL Generator is a special class that is called when Pentaho Metadata queries the database.  There are two methods that can be overwritten.  The first is preprocessQueryModel and is the recommended method to overwrite.  It is called before the SQL is generated.  The usual approach is to simply add an AND condition to the query to restrict data, such as by building.  The second method, processGeneratedSql, is called after the SQL is generated.  While it is possible to modify this query, it would involve parsing and modifying the string query.

Steps for customizing preprocessQueryModel  method are below at a glance.

  1. Create a java class that extends pentaho.metadata.query.impl.sql.SqlGenerator class and override preprocessQueryModel method. Example is following code snippet.tenated_db1
  2. Compile class file and export it in a jar file at tomcat/webapps/pentaho/WEB-INF/lib
  3. pentaho-solutions/system/pentahoObjects.spring.xml should be modified to change the class defined for the sqlGenerator The following shows an example of the bean mapping: <bean id=”sqlGenerator” class=”com.mycompany.CustomSqlGenerator” scope=”prototype” />
  4. webapps/pentaho/WEB-INF/classes/classic-engine.properties should be modified as well by defining a new parameter: pentaho.reporting.engine.classic.extensions.datasources.pmd.SqlGeneratorClass=com.mycompany.CustomSqlGenerator

Once done, restart Pentaho and load a XAction file to set SESSION_CUSTOMERNUMBER variable that we are trying to read in java code. Create a new connection using data source wizard that uses SampleData as underlying connection:


Now if we use TenatedDataSource in our dashboard; our SQLGenerator class will automatically pick the session variable SESSION_CUSTOMERNUMBER from current user session and append a where clause in final query like this:tenated_db3

Note that while creating data source, we have not defined a where clause and it is being generated on the fly as per the current session value for SESSION_CUSTOMERNUMBER variable. That is what we wanted to achieve.

Ref : http://javadoc.pentaho.com/bi-platform530/webservice530/

-Ankit Srivastava & Harsh Kumar

Custom Label Background in Pie Chart in Pentaho Report Designer

Hello folks!! It’s been quite a while since I wrote my last blog, and it’s always enthralling to be back to writing. Pentaho Report Designer, a tool which I love to explore, more specifically, on the charting front, as it is the least documented and most useful part of any reporting requirement.

This blog is about doing an interesting task in the PRD with pie chart. Recently, after looking at my blogs, one of my friend asked me about the possibility of a requirement in PRD, which was changing the background of labels in Pie Chart in PRD. At once, I thought it should be a configurable part, but I was not amazed on finding it missing from the configurable options. But nonetheless, I thought of doing it with Beanshell scripting (which I love the most in PRD), and got it working in just a little time. That friend of mine after getting the solution, asked me to write a blog about it as he wanted to help people with this knowledge and I’m more than happy to do so.

So here’s what you have to do in order to get the custom background of Pie chart labels in PRD. In chart properties, go to the Post Processing script section and select Beanshell from the dropdown, and write the following code in the pop up to get it working :

import java.awt.Color;
import org.jfree.chart.plot.PiePlot3D;
import org.jfree.chart.plot.PiePlot;

PiePlot plot = (PiePlot) chart.getPlot();

One can easily customize this code to suit their need, as in changing the color to some other instead of white and much more. Below is the screenshot of what output will look like without this custom code.

Without Custom Code

Without Custom Code

With this custom code

With Custom Code

With Custom Code

Hope this helps someone and saves somebody’s valuable time. Please feel free to leave comments and requests for more such functionalities with Beanshell scripting in PRD.

Here is the sample prpt with Pentaho’s sample data.

Pentaho BA CE Installation

Pentaho, a buzz in the world of Business Intelligence now-a-days, is quite a comprehensive tool for analytics. The prime reason of its popularity (in my perspective) is its availability in two editions i.e. Community (CE) and Enterprise (EE). Where in Enterprise, one can avail a thousand of documentation & support for any and all purposes, but when it comes to Community edition, documentations are just for namesake.

Recently, when I was working on Community edition of Pentaho, the main challenge was the installation of Pentaho CE, since there is no proper documentation, neither official nor unofficial. It seems an easy task when it comes to install any tool, but in case of Pentaho, there are some peculiar settings which are prerequisites for its installation.

I did a lot of R&D and struggled for it, finally I decided to document it properly and share it to the Community so that people can be benefited from my struggle. Below is the straightforward approach to install Pentaho CE on Windows or Linux machine.

Since Pentaho CE always comes with archival installation as there is no EXE based installation, so before proceeding with installation download the latest stable version of archival from www.community.pentaho.com website. All the Pentaho BA CE components are available on under Download section.

After Downloading RAR file from community website. Unzip this to desired location and provide the complete read, write and execute permission for this folder (I assume the user is having complete permission for this folder).

Folder security permission

Folder security permission

Also remove the read only access.

Folder read only permission

Folder read only permission

Install Java JRE or JDK

Make sure that the version of the Java Run-time Environment (JRE) or the Java Development Kit (JDK) that Pentaho needs to run is installed on your system. You do not need to uninstall other versions of Java if you already have them running on your system. These instructions explain how to check for your default version of Java that is running on your computer and where to get the required version if you need one. For this installation the least recommended version in Java 7.

  1. Open a Terminal or a Command Prompt Enter this command.

    Java –version

  2. If the version of Java does not match the version needed to run Pentaho software, download it from Oracle site and install it.

Set Environment Variables

Set the PENTAHO_JAVA_HOME variable to indicate the path to the Java JRE or JDK that Pentaho should use. If you do not set this variable, Pentaho will not start correctly. To set environment variables, you should be logged into an account that has administrator-level privileges.

For Windows
  1. Go to “Start Menu > Computer
  2. Right Click on Compute and Select Properties
  3. Under Properties you will find the below screen, and select “Advanced system settings”.
Windows Properties for Advanced system settings

Windows Properties for Advanced system settings

  1. After Selecting “Advanced system settings” Select the “Environment Variables

    Environment Variables

    Environment Variables

  2. Once you select “Environment Variables” you will get another screen where you can add “JAVA_HOME” & “PENTAHO_JAVA_HOME”
set create Environment Variables

set create Environment Variables

  1. Once you set the path for PENTAHO_JAVA_HOME Click on OK

For Linux

  1. Open a terminal window and log in as
  2. Open the /etc/environment file with a text editor.
  3. Indicate where you installed Java in your /etc/environment file by typing this

    export PENTAHO_JAVA_HOME=/usr/lib/jvm/java-7-sun

    Note: Substitute /usr/lib/jvm/java-7-sun with the location of the JRE or JDK you installed on your system.

  1. Save and close the file.
  2. Log out, and then log back in for the change to take effect.
  3. Verify that the “PENTAHO_JAVA_HOME” variable is properly set by opening a Terminal window and typing this

    env | grep PENTAHO_JAVA_HOME

  1. The path to the variable should appear. If it does not, try setting the environment variable again.

Start BA Server

 For windows
  1. Launch the “start-pentaho.bat” file under biserver-ce folder
  2. Open a web browser and enter this URL: http://localhost:8080/pentaho.
  3. The Pentaho User Console Log On window appears.
For Linux
  1. Launch the “start-pentaho.sh” file under biserver-ce folder
  2. Open a web browser and enter this URL: http://localhost:8080/pentaho.
  3. The Pentaho User Console Log On window appears.


2015 – From a Web Designer’s eye!

Web design is a diversified domain and the trends here changes more often than any other domains. Year after years, the term “best web designs”, changes its meaning and one can never predict what will be coming up. Being in this particular domain for more than a decade, I somehow managed to predict what will follow up in this year in the field of Web Designs.

Here is a list of 6 trends, which I predict, will hit in the year 2015:

Material Design: This year will focus more on Material Design. We will see most of the applications and website inculcating their design from Google’s Material Design concept. Google launched this concept in June 2014 but 2014 was not the year for it. I’m excited to see some great work on Material design and how designers cope up with this new trend to satisfy their design needs and Business requirements. No wonder it may prove out to be a simplest solution for many unsolved problems of designers. Google has given a good theoretical description of what it is and how it works. Also a implemented version  with bootstrap is available for use, in case if anyone wants to use them.

Flat Design: Designer’s took a long path to reach simplicity. In past, we designers, used to spend so much attention on showing off our skills by packing sites with flashy illustrator and animations that supposedly wowed our visitors. Then the era of Skeuomorph came, big thanks to Apple, we managed to put a life in our design with realistic texture, drop shadow etc.

Now from couple of year we are moving towards flat design. Flat designs were very popular in 2014 and I believe they will go more popular in this year as well, thanks to Google’s Material design to take it to the next level. I personally feel that the only good thing by Microsoft in Windows 8 was the introduction to flat designs. Flat design is a minimalist design approach that emphasizes usability. It is really clean, open space, crisp edges, bright color and two-dimensional (flat) design.

I’m a big fan of this concept, which has really made Apple to transit from the era of Skeuomorph to Flat Design in iOS.

Card Design: Yes! Its card design layout I’m talking about. This term may sound a bit new to many of us, but knowingly or unknowingly, we all encounter Card Design on most of the applications and websites. Social networking could be a best example of it; now-a-days, Google, Twitter and Facebook are all using this concept in their designs, so it could also prove to be an ace in designing world.

The advantage to go for the card design is there is no hierarchy for the content. In fact, cards allow content of equal importance to live on the page together with no order of importance. This information equality is user-centered design at its finest. This design help users to choose what they are interested in, rather than encountering just what the designer designated.

If we see all current social networking platforms like Facebook and Twitter they all on this design and the major reason behind this is

  1. Cards grab attention
  2. Cards are responsive
  3. Cards are digestible
  4. Cards are share-able

Death of “Click”, Time to “Scroll”:  As a designer I feel why people are having lots of content on website with lots of clicks, when the world is using smartphone and tablets, users prefer to scroll rather then click and go through to other pages.

Scroll page approach is very popular with “Squeeze page”, “Single Page”, “story manner site”. Now most of the company wants to hold visitor on their website and don’t want to take risk to move them from one page to another. Web survey often claims that when user moves one page to another page he forgets the context of the previous pages and hence he moves out of the website soon.

Single page concept helps the users to stick with the page, with minimum content which they can digest

Large Banner/ Video Banners: In 2014 large background images were very popular on web and most of the website took the benefit of the same. In 2015 it will remain same and it may get evolve towards large video banners.

When it comes to SSO (aah! Another hot topic for blog) content plays a massive role, which is why everyone like to find one or the other way to keep content fresh and update them frequently.

People may read less, but they love to watch more. Video play more integral part of online storytelling and also helps for brand experience. The video banners / large banners approach to web design will slowly kill the traditional brochure as a means of selling a service. I expect companies to put more of their dollars into these digital canvases.

Info-graphics Interactive Info-graphics: Days are gone when user just needed Info-graphics, now they want Interactive Info-graphics. Interactive Infographics are becoming an increasingly popular tool of thought portrayal, and in general, they hold a web user’s attention longer and get more shares than a static infographic.

Interactive info-graphics are particularly useful for conveying a lot of information without overcrowding the screen. They allow users to interact with the provided information physically, building a more engaging experience.

The Future of Car Sharing features a beautiful web graphic that users can interact with and learn from. Not only does this info-graphic allow web users to participate in a “walk through” of their day, it breaks a lot of information up into manageable chunks.

Note: Please don’t forget to use arrows to navigate through the website mentioned above 😉

Fundamentals of Dashboard Design (FODD)

As a designer, I always felt to describe the way a designer sees the world or a design.

I’ve seen the development of a “Dashboard”, from where it was a term in automobile industry to now where it is an Informative tool in Business Intelligence. Believe me, I’ve been a part of this growth and I feel the meaning to this word has gone manifold since it has become an integral part in BI.

I still remember my FOD classes 13 years back, when I used to study Design, and now that I have practically explored the real meaning to this word, I can say that they inculcated the Design into my DNA and now I always see the world or anything in a Designer’s perspective.

Good Dashboard design is important to increase user adaptation and also to prioritize the way information is being presented to the users. But the real challenge for a Designer, comes when one has to create a concoction of design with FOD, Business and Technology, in a way that the simplicity of design is never lost and the motive of design is supplied in a way that user needs not to spend much effort in understanding the design rather they should understand their business.

Design – A Designer’s Perspective

In any kind of design work, there are “Elements” and “Techniques” that are used to achieve certain “Effects” and “Feelings”.


Knowingly or unknowingly, a designer always uses the concepts of FOD in most of their designs. A good designers sometimes disregard the principles of design, however, there is usually a compensating merit attained at the cost of this violation. Unless you are certain of doing things, it is best to abide by the principles.

These fundamentals works on human behavior for dashboard design. This will really help you to understand each of the elements and provide examples of combinations that can be used to maximize the impact of a dashboard.


  • Shape
  • Size
  • Direction
  • Hue
  • Saturation
  • Value


The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle you might found this almost on every dashboard. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.



Size only takes on meaning when compared to other object of different size. Bar chart or pie chart is the best example of the size on dashboard. It creates interest and depth by demonstrating how each item relates to each other based on size.



All lines/shape have direction – Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability and tranquility. Vertical gives a feeling of balance, formality and alertness. Oblique suggests movement and action.



Hue, Saturation and Value

Color is light reflected off objects. Color has three main characteristics:

  • Hue or its name (red, green, blue, etc.).
  • Value (how light or dark it is)
  • Intensity (how bright or dull it is)

Saturation” refers to the AMOUNT of color.
Value” refers to the darkness or brightness of a color. I think of a color’s “Value” as how much black has been added.


“Techniques” can be applied to “Elements”. Some of them are

  • Comparison
  • Contrast
  • Repetition
  • Proximity

Comparison / Juxtaposition

Balance in design is similar to balance in physics. A large shape close to the center can be balanced by a small shape close to the edge. Balance provides stability and structure to a design. It’s the weight distributed in the design by the placement of your elements.

We may place two shapes side by side with no change in their physical appearance. One might use this technique when there are two metrics that are important to regard with equal weight in comparison to one another.


Contrast is the juxtaposition of opposing elements (opposite colors on the color wheel, or value light / dark, or direction – horizontal / vertical). Contrast allows us to emphasize or highlight key elements in design.


Repetition strengthens a design by tying together individual elements. It helps to create association and consistency. Repetition can create rhythm (a feeling of organized movement).


Proximity creates relationship between elements. It provides a focal point. Proximity doesn’t mean that elements have to be placed together; it means they should be visually connected in some way.



  • Harmony
  • Agitation
  • Rhythm
  • Focus
  • Balance
  • Hierarchy


Harmony in visual design means all parts of the visual image relate to and complement each other. Harmony pulls the pieces of a visual image together. Harmony can be achieved through repetition and rhythm. Repetition reemphasizes visual units, connecting parts and creating an area of attention.


Now you know how designer see the world with FOD (fundamental of design) in their daily life and how these “Techniques” used on the “Elements” to create certain “Effect” (harmony, agitation rhythm, focus, balance or hierarchy). Good design is all about the right relationship between these fundamentals of design and as a result users attached meaning to these relationships. With the right string of this design principle user feelings lead to “Emotional Design”.

I was told that there is nothing called “Emotional Design” in business. But on contrary, I feel user’s emotions are important and are capable of taking effective and sound decisions.

In the below image by contrasting “Saturation” and “Hue”, we can create “Hierarchy”. This results in the most “Out-of-place” color getting the attention first. The whole Emotional Design which is ultimately the design “Elements” and “Techniques” create “Effects” that help Human emotion which drives a decision.


In the image there is “Contrast” and not sameness, so the user feels some discomfort driven by the dashboard “Uh-oh” color, red. This results in the user feeling alarm.

In future Dashboard Design articles I will explore additional ways to leverage the fundamentals of design to improve user experience of dashboards and showcase Emotional design.


Writing an article on some topic is a painful process. And then you start the even more painful process of revisions, editing, and layout! But like all things that stretch and challenge us, when you reach the end, you find the pride and joy of accomplishment.

For this, I have many people to thank. In no particular order, my thanks go to…

Vikas Gupta, It really feels so amazing to work in a positive environment with you. Working under your management is indeed a great opportunity for any individual like me. Thank you, Vikas, for showing me the true meaning of Dashboard.

Hitesh Singla, for stepping in at the last minute to, help me get across the finish line.

X-Axis Label Wrap in Pentaho Report Designer

I am back with yet again an interesting possibility in Pentaho Report Designer using Beanshell Script. As I said in my earlier post that Beanshell Script is a blessing in PRD, this post will strengthen the belief of many in this fact. So let’s have a look at the new possibility.

I was working with PRD in previous month, when I was needed to do an interesting stuff in PRD which is to wrap X-axis label for bar chart in Pentaho Report Designer. PRD does not have any configuration for this. I searched about this possibility through many of the forums and blogs but all in vain. Meanwhile, I came across a link (http://jira.pentaho.com/browse/PRD-3247) of official pentaho jira request regarding the same which was opened nearly 34 months back and is still open.

I was amazed looking at this so old Jira request open. I thought that it might be possible using the Beanshell scrtip. I hardly spent my 30 minutes to get this job done using Beanshell script and walah!! I got the desired output.For those who don’t know about Beanshell script, here is the link to my previous blog Custom Value Axis Scale in Pentaho Report Desinger, where you will get a short brief about Beanshell Script and where to write Beanshell Script in PRD.

Currently PRD does not wrap a big label on X-Axis of a chart. Whenever a label is bigger it just dotify it and displays it like “labelnotw….”. But sometimes in practical implementations, the label may be as big as 30 characters and the client does not want it to be dotify. Below are the two sample images, of what is the current problem and what is to be the expected output, for a better clarification on the usability of this blog.

Current Result:


Labels Without Wrapping

Desired Result:


Labels After Wrapping

PRD don’t have any by default feature to achieve this but having said that PRD has a feature using which you can achieve this and that is Chart-Post Processing Scripting. Beanshell is also one of the chart post processing script available in PRD.

To get the above output you need to write the following few lines of code in PRD’s chart post processing script having beanshell as the type.

import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.axis.CategoryAxis;

CategoryPlot myPlot = chart.getCategoryPlot();
CategoryAxis myAxis = myPlot.getDomainAxis();

And here you go. It seems to be a very simple thing when you see the output but believe me when you search through the internet you will not get any of the satisfactory solution to achieve this. But it is a very useful feature and is often demanded by the customers.

Here is the sample report to download http://tinyurl.com/X-AxisLabelWrap

Hope this post helps someone and feel free to give comments and suggestion. I’ll be writing more and more to help and share the bit of my knowledge with people on global platform.

Custom Value Axis Scale in Pentaho Report Designer

The Pentaho Report Designer (PRD) has evolved as a very feature-rich product over the last few years. But still there are some features, that are not documented anywhere. You come to know these features as you dig more and more into the tool.

In this blog, I want to share one of those many unsung possibilities in PRD. While working with charts in PRD, sometimes it is required to have a custom range on the value axis(Y Axis). This seems to be a very common need to customize the scale as required but, PRD does not have any default option for this functionality, but still there is a out of the box work around which can make this happen and i.e. Beanshell Script.

For those who are new to Beanshell Script, Beanshell Script is like a blessing in PRD, especially when you are working with charts. It is one of the Chart-Post Processing Script that you can write in PRD. To write a Beanshell Script in PRD just select the type of Chart-Post Processing script as “beanshell” from the available values and write the script in the next field. Refer to the image for more clarity on where to write the beanshell script.

Pentaho Report Designer

Pentaho Report Designer

You can write the script in the new window which pops up. There are two ways you can customize the value axis range using beanshell script:

1)      Setting the fixed upper and lower bound for the range

2)      Taking the upper bound and lower bound from the minimum and maximum values of the chart

Fixed Upper and Lower Bound:
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.ValueAxis;

CategoryPlot chartPlot = chart.getCategoryPlot();
ValueAxis yAxis= chartPlot.getRangeAxis();

Where “maxValue” and “minValue” can be any values that you want to set as upper and lower bound respectively.

Setting Bounds Based on the Values of Chart:
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.axis.ValueAxis;
import java.util.*;
import java.math.*;
import java.util.List;
import java.util.ArrayList;

CategoryPlot chartPlot = chart.getCategoryPlot();
ValueAxis yAxis= chartPlot.getRangeAxis();
data = chartPlot.getDataset();
keys = data.getRowKeys();
ArrayList dataVals = new ArrayList();
for (int i=0;i<keys.size();i++)
Double maxVale=(Collections.max(dataVals)).doubleValue();
Double minVale=(Collections.min(dataVals)).doubleValue();

And here you go. This is how you can achieve this.Here is the sample output.

Custom Value Axis Scale

Custom Value Axis Scale

And here is the link to download the sample prpt for this.

Trust me,  it is one of the many possibilities using Beanshell Script.Hope this post helps people and soon will be coming with many more possibilities in PRD.

Horizontal Gradient Bar chart in Pentaho Reporting Designer

As a hard core UI / UX designer, I always feel color plays a very important role in our life. Without colors anything will be colorless and same I feel when I see any BI dashboards and reports without any color.

I never understand why people want to create a report in Gray scale or in single color only. Reports should have some colors in that, where people can see the details and highlight those points where they need to focus more.

On one of my recent project, I have seen a very beautiful report which was created in PowerPoint and same I need to replicate in Pentaho Report Designer. The report was pretty cool and was having so many details and challenges.

Apart from other challenges like Multiple Language, Dynamic Formatting and complex formulas, I was having big time challenge with Gradient Horizontal Bar Charts. I have never seen gradient color in horizontal bar charts under Pentaho Report Designer, so was little surprised.

But finally understood the way to handle this challenge and now showcasing the same.

For creating a gradient horizontal bar chart in Pentaho report designer I used a beanshell code which works with JFree Charting library.

There is couple of other Post-Processing script also available in Pentaho Report Designer which processes after the chart renders. I created this with beanshell because JFree has good support with beanshell rather than other Post-Processing script.

You can add the beanshell script on your chart in report designer, by double clicking on your chart and selecting beanshell under Scripting > Chart Post-Processing Script in left panel.

Pentaho Report Designer

Pentaho Report Designer

Then write the following beanshell script for gradient horizontal bar chart

import java.util.*;
import java.awt.Paint;
import java.awt.Color;
import java.awt.Stroke;
import java.awt.BasicStroke;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.renderer.category.CategoryItemRenderer;
import org.jfree.chart.renderer.category.BarRenderer;
CategoryPlot myPlot = chart.getCategoryPlot();
BarRenderer categoryItemRenderer = myPlot.getRenderer();
plot = chart.getPlot();
renderer = plot.getRenderer();
data = chart.getPlot().getDataset();
keys = data.getRowKeys();
Color[] c={
new Color(0x4784D7),
new Color(0x1F4F8F),
new Color(0xDBE7A5),
new Color(0xC8DB78),
new Color(0x7D838F),
new Color(0x272B39)
for (int i=0;i<keys.size();i++)
int j=(i*2);
g = new GradientPaint(0, 0,c[j],10, 0, c[j+1],true);

Here is the final result

Horizontal Bar Chart

Horizontal Bar Chart

Download the .PRPT file from here: http://tinyurl.com/gradientbar