Course Code: 2040237201

Course Name: Software

Engineering
SEMESTER: 3

UNIT NO. 04
Basic concept to Software Design

TOPICS TO BE COVERED

❖ Design process
❖ Design fundamentals
❖ Software Design Levels
❖ Architectural Design
❖ Component Level Design (Function Oriented Design Object Oriented
Design)
❖ User Interface Design
❖ Web Application Design

By Asst. Prof. Mitul Ghediya Page | 1

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Basic concept to Software Design

o What is Software Design?

o Software design is a method that converts user requirements into

a suitable form for the programmer to employ in software coding
and implementation.

o It is concerned with converting the client's requirements as

defined in the SRS (Software Requirement Specification)
document into a form that can be easily implemented using a
programming language.

o A good software designer needs to have knowledge of what

software engineering is.

o The software design phase is the first step in the SDLC (Software
Development Life Cycle) that shifts the focus from the problem
domain to the solution domain. In software design, the system is
viewed as a collection of components or modules with clearly
defined behaviours and bounds.

o Objectives of Software Design

o Correctness: A good design should be correct, which means that

it should correctly implement all of the system's features.

By Asst. Prof. Mitul Ghediya Page | 2

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

o Efficiency: A good software design should consider resource,

time, and cost optimization parameters.

o Understandability: A good design should be easy to grasp,

which is why it should be modular, with all parts organized in
layers.

o Completeness: The design should include all components, such

as data structures, modules, and external interfaces, among
others.

o Maintainability: A good software design should be flexible

when the client issues a modification request.

By Asst. Prof. Mitul Ghediya Page | 3

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Design Process

o The design phase of software development deals with transforming the

customer requirements as described in the SRS documents into a form
implementable using a programming language.

o The software design process can be divided into the following three
levels or phases of design:

1. Interface Design
2. Architectural Design
3. Detailed Design

1 - Interface Design

o Interface design is the specification of the interaction between a system and

its environment.

By Asst. Prof. Mitul Ghediya Page | 4

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

o This phase proceeds at a high level of abstraction with respect to the inner
workings of the system i.e, during interface design, the internal of the
systems are completely ignored, and the system is treated as a black box.

o Attention is focused on the dialogue between the target system and the
users, devices, and other systems with which it interacts.

o The design problem statement produced during the problem analysis step
should identify the people, other systems, and devices which are
collectively called agents.

o Example: Interface design is like figuring out how a system talks to

the outside world, without worrying about how it works inside.
Think of it as planning the buttons and screens on a smartphone—
you only care about what happens when you press a button, not how
the phone makes it happen. The focus is on how the system interacts
with people, other devices, and systems around it.

o Interface design should include the following details:

o Precise description of events in the environment, or messages from

agents to which the system must respond.

▪ Example: This is like deciding what should happen when you

press a button or send a command. For example, when you
press "play" on a remote, the TV should start playing a video.

o Precise description of the events or messages that the system must

produce.

▪ Example: when the TV starts playing, it might display the

video on the screen and play sound.

o Specification of the data, and the formats of the data coming into and
going out of the system.

By Asst. Prof. Mitul Ghediya Page | 5

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

▪ Example: the remote sends a signal in a specific format to the

TV when you press a button.

o Specification of the ordering and timing relationships between

incoming events or messages, and outgoing events or outputs.

▪ Example: the TV should only display the video after

receiving the "play" command, and it should do it instantly,
not after a long delay.

2 - Architectural Design

o Architectural design is the specification of the of a system, their

responsibilities, properties, interfaces, and the relationships and
interactions between them.

o In architectural major components design, the overall structure of the

system is chosen, but the internal details of major components are ignored.

o Example: Architectural design is like creating a blueprint for a

building. You decide on the big parts (like rooms, walls, and doors),
what each part will do, and how they will connect and interact, but
you don't worry yet about the fine details inside each room.

o Issues in Architectural Design:

o Gross decomposition of the systems into major components:

▪ Breaking down the system into its main parts.

• Example: dividing a house into rooms like the kitchen,

living room, and bedrooms. You're focusing on what
big sections the house needs.

o Allocation of functional responsibilities to components:

By Asst. Prof. Mitul Ghediya Page | 6

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

▪ Deciding what tasks each major part of the system will handle.

• Example: It's like deciding that the kitchen is for

cooking, the living room is for relaxing, and the
bedrooms are for sleeping.

o Component Interfaces:

▪ Defining how these major parts will connect and

communicate with each other.

• Example: This is like planning where the doors and

hallways will be so that people can move between
rooms easily.

o Component scaling and performance properties, resource

consumption properties, reliability properties, and so forth:

▪ Determining how well each part should perform, how much

resources it will use, and how reliable it needs to be.

• Example: It’s like deciding that the kitchen should

have enough space and power to cook for a big family,
that the living room should have enough seating for
guests, and that the foundation of the house should be
strong enough to last for many years.

o Communication and interaction between components:

▪ Planning how the major parts of the system will work together
and exchange information.

• Example: This is like making sure the plumbing,

electricity, and ventilation work seamlessly together in

By Asst. Prof. Mitul Ghediya Page | 7

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

the house, so everything runs smoothly without

conflicts.
3 - Detailed Design

o Detailed design is the specification of the internal elements of all major

system components, their properties, relationships, processing, and often
their algorithms and the data structures.

o The detailed design may include:

o Decomposition of major system components into program units.

o Allocation of functional responsibilities to units.
o User interfaces.
o Unit states and state changes.
o Data and control interaction between units.
o Data packaging and implementation, including issues of scope and
visibility of program elements.
o Algorithms and data structures.

By Asst. Prof. Mitul Ghediya Page | 8

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Design fundamentals

o Abstraction

o One of the fundamental concepts of object-oriented

programming (OOP) languages is an abstraction. Its primary
purpose is to deal with complexity by concealing internal details
from the user.

• This allows the user to build more complicated logic on

top of the offered abstraction without having to understand
or even consider all the hidden complexity.

o Modularity

• Modularity refers to breaking a system or project into

smaller sections to lessen the system's or project's
complexity.

• Similarly, modularity in design refers to the division of a

system into smaller elements that can be built
By Asst. Prof. Mitul Ghediya Page | 9
 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

independently and then used in multiple systems to

execute different purposes.

o Architecture

• A system's software architecture represents the design

decisions linked to the general structure and behaviour of
the system.

• Architecture assists stakeholders in comprehending and

analysing how the system will attain critical characteristics
such as modifiability, availability, and security.

o Refinement

• Refinement means removing any impurities and

improving the quality of something.

• In addition, refinement is essential for identifying and

correcting any possible errors.

o Design Patterns

• A software design pattern is like a blueprint for solving

common problems in software development. These
patterns provide a tested and proven solution that can be
adapted to similar issues, saving time and effort.

• They cover the problem, the solution, when to apply it, and
potential impacts, guiding developers in implementing
effective solutions efficiently.

o Information/Data Hiding

By Asst. Prof. Mitul Ghediya Page | 10

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

• simply put, information hiding implies concealing

information so that an unauthorized entity cannot access it.
In software design, information hiding is
accomplished by creating modules in such a way that
information acquired or contained in one module is
concealed and cannot be accessible by other modules.

o Refactoring

• Refactoring is like renovating your house while keeping

the intact. Programmers reorganize and clean up the code
without changing how the software functions.

• This process makes the code easier to understand and

maintain, reduces complexity, and can help spot and fix
hidden issues. Essentially, refactoring improves the
internal setup of the software without altering its external
behaviour.

By Asst. Prof. Mitul Ghediya Page | 11

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Software Design Levels

o Architectural Design

o A system's architecture can be defined as the system's overall

structure and how that structure offers conceptual integrity to the
system.

o The architectural design characterizes the software as a system

with numerous interconnected components.

o The designers acquire an overview of the proposed solution

domain at this level.

• Example: Designing the overall layout of a shopping mall,

including the placement of stores, entrances, and parking.

➢ High-level Design

o The high-level design deconstructs the architectural design's

'single entity-multiple component' notion into a less abstract
perspective of subsystems and modules, depicting their
interaction with one another.

o High-level design is concerned with how the system and its

components can be implemented as modules.

By Asst. Prof. Mitul Ghediya Page | 12

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

o It recognizes the modular structure of each subsystem, as well as

their relationship and interaction with one another.

• Example: Detailing the specific areas within the mall,

such as electronics section, clothing stores, food court, and
rest areas.

➢ Detailed Design

o After the high-level design is completed, the detailed design

begins. Each module is extensively investigated at this level of
software design to establish the data structures and algorithms to
be used.

o Finally, a module specification document is used to document the

stage's outcome. It defines the logical structure of each module
as well as its interfaces with other modules.

• Example: Planning the interior of a specific store,

deciding where shelves and cash registers go, and how
products are displayed.

By Asst. Prof. Mitul Ghediya Page | 13

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

⮚ Architectural Design

o The software needs an architectural design to represent the design of

the software. IEEE defines architectural design as “the process of
defining a collection of hardware and software components and their
interfaces to establish the framework for the development of a computer
system.” The software that is built for computer-based systems can
exhibit one of these many architectural styles.

o Example: A simple example of software architectural design is

a weather app. The app on your phone (the frontend) shows the
weather forecast by connecting to a weather server (the backend)
that gathers weather data from various sources. The server
processes the data and sends it to the app, which displays it for
you to see. The app and server work together in an organized way
to deliver the information.
1] Data cantered architectures:
o A data store will reside at the center of this architecture and is accessed
frequently by the other components that update, add, delete, or modify the
data present within the store.

o The figure illustrates a typical data-cantered style.

o This data-centered architecture will promote integrability. This means that

the existing components can be changed and new client components can

By Asst. Prof. Mitul Ghediya Page | 14

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

be added to the architecture without the permission or concern of other

clients.

o Data can be passed among clients using the blackboard mechanism.

Advantages of Data cantered architecture:

o Repository of data is independent of clients

o Client work independent of each other
o It may be simple to add additional clients.
o Modification can be very easy

2] Data flow architectures:

o This kind of architecture is used when input data is transformed into output
data through a series of computational manipulative components.

o The figure represents pipe-and-filter architecture since it uses both pipe and
filter and it has a set of components called filters connected by lines.

o Pipes are used to transmitting data from one component to the next.

By Asst. Prof. Mitul Ghediya Page | 15

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

o Each filter will work independently and is designed to take data input of a
certain form and produces data output to the next filter of a specified form.
The filters don’t require any knowledge of the working of neighboring
filters.
o If the data flow degenerates into a single line of transforms, then it is
termed as batch sequential. This structure accepts the batch of data and then
applies a series of sequential components to transform it.

Advantages of Data Flow architecture:

o It encourages upkeep, repurposing, and modification.

o With this design, concurrent execution is supported.

Disadvantage of Data Flow architecture:

o It frequently degenerates to batch sequential system

o Data flow architecture does not allow applications that require greater user
engagement.
o It is not easy to coordinate two different but related streams

3] Call and Return architectures

o It is used to create a program that is easy to scale and modify. Many sub-
styles exist within this category. Two of them are explained below.

o Remote procedure call architecture: This component is used to

present in a main program or sub program architecture distributed
among multiple computers on a network.

o Main program or Subprogram architectures: The main program

structure decomposes into number of subprograms or function into
By Asst. Prof. Mitul Ghediya Page | 16
 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

a control hierarchy. Main program contains number of subprograms

that can invoke other components.

4] Object Oriented architecture

o The components of a system encapsulate data and the operations that must
be applied to manipulate the data. The coordination and communication
between the components are established via the message passing.

Characteristics of Object-Oriented architecture:

o Object protect the system’s integrity.

o An object is unaware of the depiction of other items.

Advantage of Object-Oriented architecture:

o It enables the designer to separate a challenge into a collection of

autonomous objects.
o Other objects are aware of the implementation details of the object,
allowing changes to be made without having an impact on other objects.

By Asst. Prof. Mitul Ghediya Page | 17

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

5] Layered architecture

o A number of different layers are defined with each layer performing a well-
defined set of operations. Each layer will do some operations that becomes
closer to machine instruction set progressively.

o At the outer layer, components will receive the user interface operations
and at the inner layers, components will perform the operating system
interfacing (communication and coordination with OS)

o Intermediate layers to utility services and application software functions.

o One common example of this architectural style is OSI-ISO (Open Systems

Interconnection-International Organisation for Standardisation)
communication system.

By Asst. Prof. Mitul Ghediya Page | 18

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ User Interface Design

o The visual part of a computer application or operating system through

which a client interacts with a computer or software. It determines how
commands are given to the computer or the program and how data is
displayed on the screen.

o Types of User Interface

o Text-Based User Interface or Command Line Interface

o Graphical User Interface (GUI)

• Text-Based User Interface: This method relies primarily on the

keyboard. A typical example of this is UNIX.

o Advantages
▪ Many and easier to customizations options.
▪ Typically capable of more important tasks.

o Disadvantages
▪ Relies heavily on recall rather than recognition.
▪ Navigation is often more difficult.

• Graphical User Interface (GUI): GUI relies much more heavily on

the mouse. A typical example of this type of interface is any versions
of the Windows operating systems.

• GUI Characteristics

o Advantages

▪ Less expert knowledge is required to use it.

By Asst. Prof. Mitul Ghediya Page | 19

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

▪ Easier to Navigate and can look through folders quickly in

a guess and check manner.

▪ The user may switch quickly from one task to another and
can interact with several different applications.

o Disadvantages

▪ Typically decreased options.

▪ Usually less customizable. Not easy to use one button for

tons of different variations.

• UI Design Principles

• Structure:

o Design should organize the user interface purposefully, in the

meaningful and usual based on precise, consistent models that

By Asst. Prof. Mitul Ghediya Page | 20

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

are apparent and recognizable to users, putting related things

together and separating unrelated things, differentiating
dissimilar things and making similar things resemble one
another. The structure principle is concerned with overall user
interface architecture.

• Simplicity: The design should make the simple, common task easy,
communicating clearly and directly in the user's language, and
providing good shortcuts that are meaningfully related to longer
procedures.

• Visibility: The design should make all required options and

materials for a given function visible without distracting the user
with extraneous or redundant data.

• Feedback: The design should keep users informed of actions or

interpretation, changes of state or condition, and bugs or exceptions
that are relevant and of interest to the user through clear, concise,
and unambiguous language familiar to users.

• Tolerance: The design should be flexible and tolerant, decreasing

the cost of errors and misuse by allowing undoing and redoing while
also preventing bugs wherever possible by tolerating varied inputs
and sequences and by interpreting all reasonable actions.

By Asst. Prof. Mitul Ghediya Page | 21

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Web Application Design

1. Introduction to Web Application Design

• Definition: Explain what Web Application Design is, emphasizing that it is about creating the
look and feel of a website while ensuring usability and interaction. The goal is to make web apps
intuitive and user-friendly

• Key Areas:
o User Interface (UI) Design
o Aesthetic Design
o Content Design
o Architecture Design
o Navigation Design

• Objectives:
o Provide a consistent window into the content and functionality of the web app.
o Guide users through the interactions.
o Organize navigation and available content effectively.

• Importance of UI Consistency: The interface must be consistent in terms of design elements,

interactions, and behavior to prevent confusion and enhance the user experience.

• WebApp Design Quality Requirement: -Design is the engineering activity that leads to a high-
quality product. This leads us to a recurring question that is encountered in all engineering
disciplines

By Asst. Prof. Mitul Ghediya Page | 22

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

Web App Interface Design

The objectives of a WebApp interface are to:

(1) Establish a consistent window into the content and functionality provided by the interface.
(2) Guide the user through a series of interactions with the WebApp.
(3) Organize the navigation options and content available to the user.

1. Aesthetic Design (Graphic Design)

• Purpose: Aesthetic design is responsible for making a web app visually appealing,
complementing the technical functionality.
• Key Concepts:
o Choosing appropriate colors, fonts, and layouts.
o Balancing functionality with aesthetic appeal to enhance user engagement.
• Impact: While a web app might function well, aesthetics draw users in and can make them
feel more connected to the platform.

2. Content Design

• Content Objects: This involves both creating content and structuring it effectively within the
web app.
• Tasks in Content Design:
o Creating and organizing text, images, videos, and other media.
o Ensuring that the content is relevant and accessible.
• Tools: Use content management systems (CMS) and design tools to facilitate the arrangement
and creation of content.

By Asst. Prof. Mitul Ghediya Page | 23

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

3. Architecture Design

• Definition: Architecture design outlines the structure of the web app, ensuring it meets goals
and objectives. It involves decisions on content presentation, user interactions, and overall
navigation.
• Relation to Interface: Architecture often influences navigation and the user’s ability to
interact with different parts of the web app efficiently.
• Focus Areas: Security, scalability, and performance should also be considered during
architecture design.

4. Navigation Design

• Purpose: This ensures users can efficiently find content and perform actions within the app.
• Best Practices:
o Clear, intuitive navigation menus and buttons.
o Ensuring all pages and sections are easily accessible.
o Navigation pathways should minimize user confusion or frustration.

5. Component-Level Design

• Modern WebApps: Today’s web apps often provide complex features like dynamic content
generation, data processing, and interactions with databases.
• Designing Components: Components should be modular, easy to maintain, and scalable.
Focus on ensuring that each component handles a specific functionality within the web app.

By Asst. Prof. Mitul Ghediya Page | 24

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

➢ Component Level Design (Function Oriented Design Object Oriented

Design)

Component-Level Design refers to the design of individual components (or modules) in a

system, focusing on how each component will work and interact with others. This step occurs
after broader designs such as data design, architectural design, and interface design have been
defined. Component-level design takes the high-level abstractions from these earlier phases
and refines them into detailed, operational software components.

Key Points:

1. Defining Components: Components are modular, deployable, and replaceable parts of a

system. Each component encapsulates its implementation and exposes a set of interfaces for
communication with other components.
2. Focus: The main focus of component-level design is to define data structures, algorithms,
interface characteristics, and communication mechanisms between components.
3. Level of Abstraction: While the design model is abstract, the component-level design brings
the model to a lower, more detailed level where it can be implemented directly in software.

Function-Oriented Approach

In the function-oriented design approach, the system is viewed primarily as a collection of

functions or procedures that accomplish specific tasks. The process of developing a system
follows the successive refinement of these functions.

Salient Features:

1. Functions as the Core: The system is broken down into a set of functions. Starting from
high-level functions, each is decomposed into sub-functions, which are refined into detailed
procedures.
o For example, in a library system, a high-level function such as create-new-library-
member can be broken down into smaller functions like assign-membership-number,
create-member-record, and print-bill.
2. Centralized System State: The system’s state (e.g., data like membership records) is
typically centralized. Different functions can access and modify this shared state.
o For instance, functions like create-new-member, delete-member, and update-member-
record all operate on the same shared set of member data.

Object-Oriented Approach (OOD)

In contrast, the object-oriented design approach focuses on modeling the system as a

collection of objects that represent real-world entities. Each object contains both data
(attributes) and the functions (methods) that operate on that data, with the state information
being decentralized.

By Asst. Prof. Mitul Ghediya Page | 25

 Course Code: 2040237201
Course Name: Software
Engineering
SEMESTER: 3

Key Features:

1. Objects as the Core: In OOD, the system is viewed as a set of interacting objects. Each
object represents an entity in the system and manages its own data (state).
o For example, in a library system, each member is represented as an object. This
member object would contain attributes like name, ID, and borrowed books, along
with methods for updating this information.
2. Decentralized State: Instead of having a centralized system state, each object manages its
own state. Objects communicate with each other through message passing (method calls).
o For instance, an Employee object can handle its own data like name, salary, and
position, while another Department object handles department-related data.
3. Classes and Inheritance: Similar objects are grouped into classes, and these classes can
inherit attributes and methods from superclasses.
o For example, both Manager and Staff might inherit from an Employee class.

Comparison: Function-Oriented Design vs Object-Oriented Design

Aspect Function-Oriented Design Object-Oriented Design (OOD)

Functions or procedures that Real-world objects/entities that contain

Main Focus
perform tasks both data and behavior

High-level functions broken down Objects encapsulate that data and

System Breakdown
into sub-functions functions within them

Centralized, shared among Decentralized, each object manages its

System State
functions own state

Functions communicate by sharing Objects communicate by passing

Communication
data (centralized state) messages (method calls)

Example (Library create-new-member, delete-member, Member object manages its own data, with
System) update-member-record methods like updateRecord()

Higher reusability through inheritance and

Code Reusability Focused on reusing functions
polymorphism

Data is often exposed and Data is encapsulated within objects,

Data Management
manipulated directly by functions hidden from other parts of the system

By Asst. Prof. Mitul Ghediya Page | 26