Architecture Design System
Practical approach
If you have had the opportunity to create technical proposals, I bet that you have expended tons of time drawing, selecting colors, and icons. Fighting with layouts and experimenting with them until you think you have the best diagram to communicate a product idea which encapsulates all the technical and business knowledge that you have in one amazing picture.
After a while, or in a new proposal, some how, your mind starts fighting again and the cycle begins and your quest to find the best way to represent at high level your architecture seems endless.
I have been in that position many times and probably this is something that someone already wrote about, nevertheless, I get caught with the idea to take some of the concepts from Design Systems in the front-end world and start experimenting about this in order to define a mechanism that I can use and evolve over the time in a more structure way than storing power point presentations, or images that are too difficult to re-use or replicate in different contexts or for different stakeholders.
I also took ideas from amazon, gcp, and azure and decided to create an architecture design system. In this post, and in several upcoming ones, I will share with you my thoughts on what an Architecture Design System should include and how to set up the necessary tools to implement it in your life or job.
Architecture Design System
The Architecture Design System is an initiative that seeks to establish a set of design elements that streamline the daily work of architects while promoting a standardized approach to creating, documenting, and maintaining diagrams, views, patterns, and templates generating a system that facilitates documentation and reutilization of the designs and the elements that compose them.
First and foremost, it’s essential to define the basic elements or components that will assist in creating custom diagrams systematically and repeatably. In a manner akin to a front-end design system, I have categorized elements into groups based on their increasing complexity, facilitating easier reuse.
Styles
The styles represent the visual aspects of the architectural design system, encompassing the definition of typography, icons, and colors.
For this article I will define material design as my foundation for styles elements
Components
Components are well-defined, reusable, and adaptable elements that serve for a specific function within the architecture. Such as diagrams, services, resources, layers, groups, etc.
We aim to define the smallest element in our architecture so that it can be reused across various diagrams and types of diagrams. It’s crucial to establish its meaning to ensure that the entire architectural team, or yourself, consistently understand its significance. This also facilitates the easy transfer of knowledge throughout the organization
Service
Representation of a small, independent, loosely coupled software component that perform a specific function and it is deployed independently.
We can classify the services in the following categories:
- Business services: Services provided by the organization that are accessible to external stakeholders, such as customers, partners, and vendors. These services are typically exposed through public APIs or other forms of integration, and may be accessed without restriction by external stakeholders.Products or services provided by the organization that are public or the customer can access without restriction.
- Application Services: These services are developed and maintained by the company that are used internally by the organization, but are not exposed to external stakeholders such. These services are typically accessed through internal APIs or other forms of integration and are used to support various business processes and applications.
- Security Services: Services design to protect the organization’s information, systems and networks from potential threads and vulnerabilities
- Utility services: Foundational and reusable services that provide common functionalities and capabilities across various applications, systems, and processes within an organization. These services are typically designed to be agnostic to specific business domains, ensuring that they can be utilized by multiple components without being tied to a particular context or business requirement.
- Integration Services: Integration services focus on connecting various systems and services to ensure seamless data flow and communication between them. These services often use technologies like APIs, web services, and messaging protocols to enable interoperability between different applications and systems.
- Data services: Data services deal with the management, storage, and retrieval of data. They support data consistency, integrity, and availability across the organization. Examples of data services include data warehousing, data integration, data quality, and master data management.
- Infrastructure Services: These services provide the underlying technology and resources required to support the organization’s IT environment. Infrastructure services can include compute, storage, and networking resources, as well as IT management and monitoring, security, and backup and recovery services.
Design specification
The services will be represented by Icons that contains a general container with a width of 100px and a height of 133.33px. Inside the container, there are two main sections: an icon container and a text area.
The icon container occupies the top 100px of the element and has a yellow background (#FFD759) with slightly rounded corners (4px border-radius). It is centered horizontally and contains an 80px by 80px icon with a background image.
Below the icon container, there is a text area with a black color (#000000) and body style on it. The text is center-aligned and positioned at the bottom 25% of the element.
This is the first article that I want to share with you about this topic. Let me know if you like it and if you are willing to read more about it.
