Streamline your Design Process using Design Language
It’s been a year working on variety of projects and rolling out products, but one of the most undermined phase during software development process is the process of designing. Every time a new product is in the planning pipeline, new designs are drafted and it’s a tedious job for the designers to create all the designs from scratch, all the different workflow views, views in different devices and what more the product demands.
There doesn’t exist a simpler way to make the process of designing simpler and faster, or existence of design libraries or drafts, that designers can pick designs up from and presto, your job is done. So aligned to this, I began exploring and found out that few major companies were creating Design Language System, a system that will achieve the goal of making the process of software designing more convenient and centralized, by assembling the reusable components together to build any number of applications, guided by clear standards.
Before I jump on what is a design language system, I will tell you why we need it.
It is seen that software design plays a crucial role for any software product. A good software design leads to better user interaction and acts as a bridge where user can interact with the software correctly and the software can provide data in a manner the user understands easily. A great software design is what it takes to make a software stand out among all in the market. But building such great software is not so simple and there exists few issues that makes the process of designing sometimes complicated.
Large teams involved in software development process:
It is seen that many large teams are involved in software development process which includes a the team of designers, team of programmers or the business team, all teams have their own software design concepts, interpretations. Hence it is important that a universal set of rules is accepted by all teams such that the process of designing software gets more unified, understandable and faster.
Less Constraints in software designs:
Unlike designing in other fields, software designing is considered to be the one with the least constraints. There may exist countless ways to make software designs for a single use-case but out of such many ways, there may exist few designs that may lead to poor user experience or implementing such designs might not be programmatically feasible, involves complex coding, not compatible in other device screens and the list may go endless. If a set of rules is in place for software designs, such problems can be avoided.
Software design for large number of devices :
In order to ship out software for large number of devices and applications, it is important that a common design concepts are followed so that the design remains synchronised across all devices.
The reusable nature of software :
Software products which are released will soon become old and later discontinued. But designs used in these softwares are used again for the upcoming projects similar to how old code are reused for future applications. Hence it is important that software designs are maintained and upgraded just like how code is maintained.
With the existence of unified concept and rules for handling designs, it is then possible to work with designs more efficiently, giving the possibility for all teams to understand easily and making the process of rolling out products a lot faster.
This is what a Design Language System does. A Design Language System(DLS) basically consists of rules and concepts on how designs are handled within an organization, making sure that the designs stay consistent always and also providing the possibility to upgrade existing designs easily.
Let’s begin creating one..
The reason DLS is called a language is because of the existence of the atomic design elements and all the complex designs are expressed as a combination of these atomic design elements. It is similar to any written language where the root structure are the letters, letters join to form words, words to sentences, sentences to paragraphs and this is how text materials are made. A similar approach is applied for designs expressed using DLS.
To start with creating a DLS, it is important to define the fundamentals, the atomic structure of software design. Atomic Elements in software design are the elements with which designing starts, which can be simple text style or a layout for the profile avatar. Such atomic design elements can be combined to form molecular design elements. Though there may exist countless possibilities to combine the atomic design elements to form new molecular design elements. But some resulting molecular design elements may not provide the user experience required. So instead of defining the combinations to follow, which turns out to be very tedious, it is better that each atomic element is provided with it’s own function and personality, defined by that element’s properties. In this way, the atomic elements can not only be upgraded independently, but it can also can co-exist with others more easily. Moreover, the aim is to create a living self-evolving ecosystem, a system of unique design elements which combine together to create a software design of desired characteristics and if the unique atomic element changes, then the change will be reflected in all the other designs that it is part of.
For example :
For certain software products, a default profile avatar may exist in variety of screens. Now each screen may have a different way of expressing the profile avatar, it may be displayed in the navbar or in a dropdown of your profile name or at the sidebar. Now if that profile avatar existed as a single element which is reused in all the different screens that I mentioned above, then changing the profile avatar in one place should change it everywhere and this saves lot of time instead of going to different screens and changing them one by one.
Maintaining the design library
Once you start defining each and every atomic design element that exists in your software design, you arrive with a large pool of components and slowly it grows with a collection of various screens and views containing all these components. This is how you end up with the library of Design Language System and maintaining it is a very crucial aspect.
There are many ways to maintain a software design library. One of the ways that I found out how some companies maintain it is by keeping the active design library in the master branch of Git server and with future updates, one can simply push the changes, merge and update the master branch. This coupled with a cloud syncing server can ensure that every user has access to latest designs.
Now with everyone in the development team having access to design library, they can access and use the common elements anywhere they want without having to create their own elements. This is where the consistency is served and also time is saved in reusing the common design elements. This can be further improved by providing documentation (similar to how it is made for code) which can provide clarity on how and where to reuse the common design elements.
Challenges
Though SDL is starting to be implemented by handful of major companies, there are still challenges that need to be handled.
Duplication of Common Design Elements
Components might get duplicated as there might be cases where the common design element cannot be applied directly and needs to be changed slightly for that design view. Soon with varying use case needs, components may be duplicated for custom requirements.
Design Tool that supports SDL
Finding an appropriate design tool that supports your Software Design Language perfectly. Support for syncing with latest designs from library without interfering with present designs is need for the hour.
Need for Documentation
Since the process of documentation is time consuming and the only focus is to deliver products on time. Documentation is often ignored which leads to poor understanding and reuse of designs in the future. Documentation must be done regularly and with every design change, documentation should be updated accordingly.
The Conclusion
With the Software Design Language setup, handling software designs is bound to become a new different scenario. Working with software designs is going to be lot simpler, one can easily interact with respect to the common design elements that the teams use and no longer a team has to refer to a particular person’s design or some old software design from archives. All will use that one common design, available in your organisation’s software design library, from where you can access and use. Updating the design is no longer a hassle. Just update the component and it will be reflected in all the screens and views that the component is used in.
With all these features and advantages, System Design Language is surely worth applying in present software development process.
References:
Would like to thank following websites which helped me in coming up with this article.
[1] What is a design Language really ? https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793
[2] Design Language — Wikipedia — https://en.wikipedia.org/wiki/Design_language
[3] AirBnb’s Visual language — https://airbnb.design/building-a-visual-language/
[4] System Language Design — https://uxplanet.org/design-language-system-d438f4aa30e0
Also published on Medium.