Design and Modelling

Structured design breaks down a software problem into well-organized smaller solution elements. Developing UML diagrams saves time and money by helping developers quickly get up to speed on a project, plan features in advance of coding, and help developers navigate source code easily. A state transition diagram is a behavioural model containing a collection of states and events that describe the different states of a system and the events which cause a change of state. An interaction diagram describes how interacting objects communicate.

Software Design Process

Software Design is a process during which structural components and behavioural attributes of the software are documented before development. One of the key activities of the design process is the software to express its design. This involves creating visual or diagrammatic representations of the software solution, its sub-components, and their interactions. This can be done using simple flowcharts or more standardized methods like UML.

Structured Design Or structural Model

Structural models describe the static aspects of a system, focusing on the organization of the system’s components and their relationships. A software system can be construed in terms of structural elements. Structured design conceptualizes a software problem into well-organized smaller solution elements called modules and sub-modules. Structured design stresses organization to achieve a solution.

A well-structured design should contain modules that are cohesive and loosely coupled. Cohesion means that all functionally related elements are grouped together. Coupling is the communication between different modules. For a system to be loosely coupled, the modules should be weakly associated so changes in one component have minimal effect on another. Loose coupling is an architectural principle often used in service-oriented architectures and microservices-based architectural patterns .

The above diagram shows that all modules have high cohesion by having same shapes into separate groups. Similarly they are coupled with each other shown by an arrow symbol.

Coupling

1+---------+     +---------+
2| Module1 |<--->| Module2 |
3+---------+     +---------+
4  ^                  ^
5  |                  |
6  +---------------- -+

Example of Low and High Coupling

• Problem: High Coupling
  • In this example, Module A depends directly on Module B, meaning if B changes, A breaks. This is an example of high coupling. It makes debugging and maintaining the system difficult because changes in one module can have a cascading effect on other modules.

1+---------+       +---------+
2| Module A| ----> | Module B|
3+---------+       +---------+

• Benefit: Low Coupling
  • To reduce coupling, we introduce an interface (Interface X), so Module A doesn’t depend on Module B directly.

1+---------+       +------------+       +---------+
2| Module A| ----> | Interface X| ----> | Module B|
3+---------+       +------------+       +---------+

📌 Benefits: ✅ Module A and Module B can be changed independently. ✅ Code is more scalable & maintainable.

Example of Low Cohesion

A module with unrelated functions makes it hard to maintain.

1+--------------+
2| Module X     |
3| ------------ |
4| doLogin()    |
5| sendEmail()  | <== ❌ Unrelated functions |
6| calcSalary() |
7+--------------+

📌 Problem:

Module X does too many unrelated things any change affects multiple functionalities.

High Cohesion (Good Design)

A module with related functions is easier to manage.

1+--------------+
2| AuthModule   |
3| ------------ |
4| doLogin()    |
5| doLogout()   |
6| verifyUser() | <== ✅ Related functions |
7+--------------+

📌 Benefits: ✅ The module is focused on authentication. ✅ Easier to modify and test.

This structured design helps visualize how different components of a system interact with each other, ensuring a well-organized architecture. Modules are arranged in a hierarchy and communicate with each other. The rectangles represent the modules and sub-modules. The diagram below shows a simplified example of a login system Login System is the main module. User Interface ,Authentication and Database are subsystems of the Login System.

• User Interface subsystem includes modules for Input Validation and Login Form.
• Authentication subsystem includes modules for Credential Verification and Session Management.
• Database subsystem includes modules for User Data Storage and Security Logs.
• Arrows show the interactions between these subsystems and modules.

    graph TD
	  classDef module fill:#cfc,stroke:#333,stroke-width:2px;
	
	  A[Login System]:::module
	  B1[User Interface]:::module
	  B2[Authentication]:::module
	  B3[Database]:::module
	
	  B1 --> A
	  B2 --> A
	  B3 --> A
	
	  subgraph User Interface
	    C1[Input Validation]:::module
	    C2[Login Form]:::module
	  end
	
	  subgraph Authentication
	    D1[Credential Verification]:::module
	    D2[Session Management]:::module
	  end
	
	  subgraph Database
	    E1[User Data Storage]:::module
	    E2[Security Logs]:::module
	  end
	
	  C1 --> B1
	  C2 --> B1
	
	  D1 --> B2
	  D2 --> B2
	
	  E1 --> B3
	  E2 --> B3
	
	  B1 --> D1
	  D1 --> E1
	  D2 --> E2

Common structural models include class diagrams, component diagrams, and deployment diagrams

UnifiedLanguage (UML)

When developing a complex software system with interconnected modules, it can be difficult to remember the relationships, behaviors, and hierarchies among different elements. UML or Unified Modelling Language is a way to visually represent the architecture, design, and implementation of complex software systems. UML is a standardized language that can be used throughout development processes.

UML diagrams can be divided into two classes: either structural or behavioural. UML is programming language agnostic, so software developers can readily interpret and apply it to their work no matter which language they are developing in.

Advantages of UML

There are several advantages of using UML to communicate architecture, behaviour, and structure with development teams. The biggest advantage of UML diagrams is that they allow you to plan out features before any coding takes place, which saves time and money. The diagrams can also be used to bring new team members or developers switching teams up to speed quickly. Additionally, the diagrams can facilitate communication between technical and non-technical audiences more easily. Finally, having a visual representation of the system allows developers to navigate the source code because they can see the relationships among modules.

Behavioural Model

Behavioural models describe what a system does without explaining how it does it. The overall behaviour of a system can be communicated through behaviour models. Several UML diagrams can be used to communicate the behaviour of a system. Two such diagrams are a state transition diagram and an interaction diagram.

State Transition Diagram

The behaviour of a system can be explained and represented with the help of a UML diagram called a state transition diagram. The state transition diagram is a collection of states and events that describe the different states a system has and the events which cause a change of state. The diagram shown models a patient going to see a doctor at a clinic. The different states include “waiting,” “testing,” and “with the doctor.” The arrows represent possible transitions from one state to another and name the event that triggers the transition.

Interaction Diagram

An interaction diagram is used to model the dynamic nature of a software system. They help visualize objects and their relationships. A sequence diagram, which is the type of interaction diagram shown here, displays the communication between objects with respect to time. This example shows a patient making an appointment in an online portal.

FAQ

1+-------------+
2|   Person    |
3+-------------+
4| -name: String|
5| -age: int   |
6+-------------+
7| +getName()  |
8| +getAge()   |
9+-------------+

1(User) ---> (Login)
2(User) ---> (Register)

1User -> Server: Request
2Server -> Database: Query
3Database -> Server: Result
4Server -> User: Response