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

 

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.