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!

Sources

 

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
      Bootstrap3
      Bootstrap 4

      Bootstrap4
      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
      html{
      font-size: 16px;
      }
      p{
      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.

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”.

fodd_01

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.

Elements

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

Shape

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.

fodd_02

Size

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.

fodd_03

Direction

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.

fodd_04

 

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

“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

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

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

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.

Effect

 

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

 Harmony

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.

fodd_03

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.

fodd_05

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.

Epilogue

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.

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();
categoryItemRenderer.setShadowVisible(false);
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);
renderer.setSeriesPaint(i,g);
}

Here is the final result

Horizontal Bar Chart

Horizontal Bar Chart

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

Need PDF as output to your email, website???

Last night I was just reading some blogs and I come across one website which was very interesting one. First I thought I must be some kind of spam maker or something. But I couldn’t stop myself when I say some screenshot that how this website works.

It was pretty simple to understand what these website do. As a designer I always want some solution like this, to give my colleagues who always come with some kind of content to convert in PDF.

Trust me still people don’t know much tool which make their life easier.

Just imagine when you are traveling and when you are accessing something on web or in your email and want to convert that in PDF to send someone. You have to wait till you get your system and then you go all the way down to convert your content in pdf.

This website which I’m going to show will do the same job and that too free of cost.

Pdfconvert.me

If you want to convert your any email in PDF format then send original mail on pdfconvert@pdfconvert.me and you will get your email which you want to convert in PDF as a PDF attachment.

mailtopdf

Mail to pdf

mailtopdf02

Mail back

 

pdfasattachment

PDF as attachment

Ok so now you might have question like, what will happen when I have an attachment in my email. Of course above email will not work but you can convert this also when you send this mail on attachconvert@pdfconvert.me

Now the website feature will not end here. If you want to convert a webpage in PDF then just type the URL in a mail body and send this email to webconvert@pdfconvert.me and you will get that web page in PDF format.

Information which this websites collects

According to this website policy they say:

This service keeps a copy of the messages you send to it only as long as is required to convert them to PDF and return them to you.

Some metadata from the message is retained on the server in logs or database records, primarily sender email and subject/URL (to assist in debugging in case of problems).