CHAPTER 10

DESIGN
Syllabus
Objectives; design Concepts; Levels of design; Architectural styles; Monolithic and
Microservices; UI and UX: Overview of UI and UX, UI types, essential properties, elements
of UI design; relationship between UI and UX; Importance of good UI/UX. Wireframes:
overview, purpose, benefits;
Software Design
 Software design is a mechanism or process to transform user requirements into some
suitable form, which helps the programmer in software coding and implementation.
 It deals with representing the client requirement, as described in SRS (Software
Requirement Specification) document, into a form, i.e., easily implementable using
programming language.
 Aim of this phase is to transform the SRS document into the design document.
 The software design phase is the first step in SDLC (Software Design Life Cycle),
which moves the concentration from the problem domain to the solution domain.

Objectives of Software Design

Following are the purposes of Software design,
1. Correctness
Software design should be correct as per requirement.
2. Completeness
The design should have all components like data structures, modules, and external
interfaces, etc.
3. Efficiency
Resources should be used efficiently by the program.
4. Flexibility
Able to modify on changing needs.
5. Consistency
There should not be any inconsistency in the design.
6. Maintainability
The design should be so simple so that it can be easily maintainable by other
designers.
7. Understandability
A good design should be easily understandable, for which it should be modular and
all the modules are arranged in layers.

Design Concepts
 Concepts are defined as a principal idea or invention that comes into our mind or in
thought to understand something.
 The software Design concept simply means the idea or principle behind the design.
 It describes how we plan to solve the problem of designing software, the logic, or
thinking behind how we will design software.
 Following points to be considered while designing software,
 a. Abstraction
b. Modularity
c. Architecture
d. Refinement
e. Pattern
f. Information hiding
g. Refactoring
1. Abstraction - Hide Irrelevant data
 Abstraction simply means to hide the details to reduce complexity and
increases efficiency or quality.
 Different levels of Abstraction are necessary and must be applied at each
stage of the design process so that any error that is present can be removed to
increase the efficiency of the software solution.
2. Modularity- subdivide the system
 Modularity simply means dividing the system or project into smaller parts to
reduce the complexity of the system or project.
 In the same way, modularity in design means subdividing a system into
smaller parts so that these parts can be created independently and then uses
these parts in different systems to perform different functions.
3. Architecture - Design a structure of something
 Design a structure of something Architecture simply means a technique to
design a structure of something.
 Architecture in designing software is a concept that focuses on various
elements and the data of the structure.
 The components or Module interact with each other and use the data of the
structure in architecture.
4. Refinement- removes impurities
 Refinement simply means to refine something to remove any impurities if
present and increase the quality.
 The refinement concept of software design is actually a process of developing
or presenting the software or system in a detailed manner that means to
elaborate a system or software.
 Refinement is very necessary to find out any error if present and then to
reduce it.
5. Pattern- a repeated form
 The pattern simply means a repeated form or design in which the same shape
is repeated several times to form a pattern.
 The pattern in the design process means the repetition of a solution to a
common recurring problem within a certain context.
6. Information Hiding- hide the information
 Information hiding simply means to hide the information so that it cannot be
accessed by an unwanted party.
  In software design, information hiding is achieved by designing the modules
in a manner that the information gathered or contained in one module is
hidden and can’t be accessed by any other modules.
7. Refactoring - Reconstruct something
 Refactoring simply means reconstructing something in such a way that it does
not affect the behavior of any other features.
 Refactoring in software design means reconstructing the design to reduce
complexity and simplify it without affecting the behavior or its functions.

Different levels of Software Design

There are three different levels of software design. They are,
1. Interface Design
2. Architectural Design
3. Detailed Design
1. Interface Design
 Interface design is the specification of the interaction between a system and its
environment.
 This phase proceeds at a high level of abstraction with respect to the inner
workings of the system.
 Attention is focused between the target system and the users, devices, and other
systems with which it interacts.
 The design problem statement produced during the problem analysis step should
identify the people, other systems, and devices which are collectively called
agents.
 It includes the following details:
a. Precise description of the events or messages that the system must produce.
b. Precise description of events in the environment or messages from agents to
which the system must respond.
c. Specification on the data and the formats of the data coming into and going
out of the system.
d. Specification of the ordering and timing relationships between incoming
events or messages and outgoing events or outputs.
2. Architectural Design
 Architectural design is the specification of the major components of a system,
their responsibilities, properties, interfaces, and the relationships and interactions
between them.
 Issues in architectural design include,
a. Decomposition (break-down) of the systems into major components.
b. Allocation of functional responsibilities to components.
c. Component Interfaces.
d. Communication and interaction between components.
3. Detailed Design
 Once the high-level design is complete, a detailed design is undertaken.
  In detailed design, each module is examined carefully to design the data structure
and algorithms.
 Design specification of the internal elements of all major system components,
their properties, relationships, processing, and often their algorithms and the data
structures.
 It includes,
a. Decomposition of major system components into program units.
b. Allocation of functional responsibilities to units.
c. User interfaces.
d. Unit states and state changes.
e. Data and control interaction between units.
f. Algorithms and data structures.

Architectural Styles
Software architecture is the high level structure used for creating software systems and is
actually a step-by-step blueprint of the entire software that is to be built. The purpose of the
software and its specific functionalities are defined by the software's architectural style and
pattern used.
Data-Centered Architecture
 The data store in the file or database is occupying at the center of the architecture.
 Stored data is accessed continuously by the other components like an update, delete,
add, modify from the data store.
 Data-centered architecture helps integrity.
 Pass data between clients using the blackboard mechanism.
 The processes are independently executed by the client components.
Data-flow Architecture
 This architecture is applied when the input data is converted into a series of
manipulative components into output data.
 A pipe and filter pattern is a set of components called as filters.
 Filters are connected through pipes and transfer data from one component to the next
component.
 The flow of data degenerates into a single line of transform then it is known as batch
sequential.
Call and Return Architecture
 This architecture style allows achieving a program structure which is easy to modify.
 Following are the sub styles,
a. Main program or subprogram architecture
The program is divided into smaller pieces hierarchically. The main program
invokes many of program components in the hierarchy that program components
are divided into subprogram.
b. Remote procedure call architecture
The main program or subprogram components are distributed in network of
multiple computers. The main aim is to increase the performance.
Object-oriented Architecture
  This architecture is the latest version of call-and-return architecture.
 It consist of the package of data and methods.
Layered architectures
 The different layers are defined in the architecture. It consists of outer and inner layer.
 The components of outer layer manage the user interface operations.
 Components execute the operating system interfacing at the inner layer.
 The inner layers are application layer, utility layer and the core layer.
 In many cases, it is possible that more than one pattern is suitable and the alternate
architectural style can be designed and evaluated

Monolithic Architecture
 In software engineering, a monolithic application describes a single-tiered software
application in which the user interface and data access code are combined into a
single program from a single platform.
 The following diagram represents the following monolithic,

Fig: Monolithic Architecture

 It is a traditional model of a software program which is built as unified unit that is
self-contained and independent from other applications.
 Example:
A monolithic ecommerce SaaS application. It might contain a web server, a load
balancer, a catalog service that services up product images, an ordering system, a
payment function, and a shipping component.
 Advantages
1. Easy deployment
2. Development
3. Performance
4. Simplified testing
5. Easy debugging
 Disadvantages
1. Slower development speed
2. Scalability
3. Reliability
4. Barrier to technology adoption
5. Lack of flexibility
 6. Deployment
Microservice Architecture
 The Microservice architecture has a significant impact on the relationship between the
application and the database.
 Instead of sharing a single database with other microservices, each microservice has
its own database.
 Microservice architecture is a method of development where a large application is
divided into small modular services.
 The following diagram represents microservice architecture,

Fig: Microservice Architecture

 Each of them assists a very specific business goal that increases its agility and
scalability.
 It becomes easy to reuse the code for a new implementation altogether.
 Advantages
1. Agility
2. Flexible scaling
3. Continuous deployment
4. Highly maintainable and testable
5. Independently deployable
6. Technology flexibility
7. High reliability
 Disadvantages
1. Development sprawl
2. Exponential infrastructure
3. Added organizational overhead
4. Debugging challenges
5. Lack of standardization
6. Lack of clear ownership
 There are two types of micro-services:
a. Stateless micro-services:
 Stateless micro-services do not maintain any state within the services across calls.
They take in a request, process it, and send a response back without persisting any
state information.
b. Stateful micro-services:
A stateful micro-service persists state in some form in order for it to function.
Overview of UI and UX
 The User Interface (UI) is the point of human-computer interaction and
communication in a device.
 This can include display screens, keyboards, a mouse and the appearance of a
desktop.
 It is also the way through which a user interacts with an application or a website.
 User experience (UX) design is the process design teams use to create products that
provide meaningful and relevant experiences to users.
 This involves the design of the entire process of acquiring and integrating the product,
including aspects of branding, design, usability and function.
 The UI/UX Design Process is a methodology that, if followed, allows developer to
polish the user interfaces to be the best one possible for their business.

UX Design
 UX Design stands for User Experience Design.
 UX design is focused on everything that affects the user’s journey to solve a problem.
 UX design deals with research, testing, development, content, and prototyping.
 UX design is developing and improving quality interaction between a user and all
elements of a company.
 UX design is a complete experience which may not be limited to the screen.
 It involves creative and convergent thinking.
 UX design is based on the client’s needs and requirements.

UI Design
 UI Design stands for User Interface Design.
 UI design is a process that mainly focused on how the specific product’s surfaces look
and function.
 UI is a process of visually guiding the user through a product’s interface using
interactive elements across all platforms.
 UI design transmits the brand’s strength and visual assets to a product’s interface.
 UI design is usually visual design and information design around screens.
 It involves creative and critical thinking.
 UI design is based on the user’s needs and research.
 UI design needs wireframes, prototyping, and a good research approach.

UI Types
1. Graphical User Interface (GUI)
2. Command Line Interface (CLI)
3. Menu-Driven User Interface.
4. Touch User Interface.
 5. Voice User Interface (VUI)
6. Form-Based User Interface.
7. Natural Language User Interface.

Command Line Interface

 It requires users to type appropriate instructions into the command line.
 The computer is commanded to first go to the required file or directory.
 From there, a whole host of commands become available, from retrieving files to
running programs.
 Advantages are,
a. Simple structure
b. Minimal memory usage
c. Great for slow-running computers, or those low on memory
d. An expert CLI user can give commands and perform tasks much faster
 Disadvantages
a. Difficult to learn command language
b. Complex for novice users
c. Minimal error message information

Menu-Driven Interface
 The menu-driven user interface provides you with a range of commands or options in
the form of a list or menu displayed in full-screen, pop-up, pull-down, or drop-down.
 Example: An ATM
 Advantages
a. It is not necessary to remember a long list of manual commands
b. Simple interface for novices
c. Self-explanatory menu options
 Disadvantages
a. Slower for experienced users
b. Limited menu options
c. Often requires user to access multiple menu screens to perform simple functions

Graphical User Interface

 The graphical user interface, or GUI, is the type of interface with which the majority
of people are the most familiar.
 We interact with these interfaces by using a mouse, track pad or other peripheral to
point and click on graphics or icons.
 Advantages
a. Self-explanatory
b. Easy to use
c. Memorizing command lists is not necessary
d. Allows for running multiple applications, programs, and tasks simultaneously
e. Solid support facilities
f. The similar format among different programs adds familiarity
g. WYSIWYG makes for easy design and formatting
  Disadvantages
Uses large amounts of memory
Touch screen Graphical User Interface
 The touch screen GUI is very similar to the regular GUI, except that we use the
fingers or a stylus to select icons and perform tasks, rather than a mouse or track pad.
 Touch screen GUIs are commonly found on tablets, smart phones, and medical
devices the insulin pump.
 The lack of peripherals makes touch screen GUIs very convenient.

Conversational UI
 Conversational UI takes advantage of words and language-based communication.
 It allows users to interact with computers simply by telling them what to do.
 It can be verbal or voice-controlled (like Siri or Alexa)
 Software should have voice recognition capabilities.

Essential Properties of UI
1. Utility
Utility is a foundation of user needs. When we evaluate a product, the first thing that
we consider is whether the product satisfies our needs.
2. Reliability
Reliability builds trust and improves user engagement.
3. Usability
Usability is a quality attribute that assesses how easy products are to use. A user
experience design aims to find and remove all barriers that prevent efficient human-
computer interactions
4. Pleasurability
In a highly competitive market, it is no longer enough to design a product that meets
the utility and usability criteria
5. Desirability
Desirability is a step up from “I need this product” to “I want this product.” When the
product is desirable, it becomes a symbol of status

Elements of UI Design
UI elements refer to all graphical user interface pieces that construct an application, be they
windows, check boxes, text fields or drop-down lists, and so on.
 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles,
text fields, date field.
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags,
icons.
 Informational Components: tooltips, icons, progress bar, notifications, message boxes,
modal windows
 Containers: These organize content into easily digestible sections, such as accordion
menus
Relationship between UI and UX
  User Interface (UI) and User Experience (UX) is that UI refers to the aesthetic
elements by which people interact with a product, while UX is about the experience a
user has with a product or service.
 UX design involves managing the user journey as they interact with a product or
service, while UI design focuses on the actual construction of that product or service's
interface.
 UI design is usually considered part of the UX design process.
 User Interface (UI)
 User interface is a part of the user experience.
 In short, it is the way that a user works within the system used by a service or
product.
 For example, the user interface for an eCommerce site would be graphical
elements of how the products are displayed, shopping cart elements including
buttons and navigation, as well as checkout process form and its design.
 User interface are the graphical part that falls under the user experience.
 User Experience (UX)
 User experience is easier to understand.
 In short, it is the experience a user when on a website, using an app or even
when using a physical product.
 This includes things like the content on a page or in an app, load speeds,
features, the presence of bugs, how a user interacts with the page, site as a
whole or the app etc.
 User interface plays a huge role in the overall user experience, but they are not
the same thing

Importance of Good UI/UX.

 The UI and UX Design help to win the consumers' confidence and make them use
THE application or website providing them what they are looking for.
 The number of consumers are getting on THE website/application can measure the
success of the great UI and UX.
 The primary goal of any business is to increase its sales and increase the growth of the
business.
 UX/UI Design plays an essential role in achieving this goal.
 The UX/UI Design of the application improves the user experience and customer
satisfaction that ultimately helps increase the number of users of the specific
application.
 For a start-up or a small venture, the importance of UI and UX Design becomes even
more crucial as the first impression lasts long and using UI and UX designing can
make or break the brand recognition.

Wireframes
 A wireframe is a schematic or blueprint that is useful for helping developer; their
programmers and designers think and communicate about the structure of the
software or website they are building.
 It's similar with today's software and web design,
A wireframe is the basic framework in software development and web design.
 A wireframe is commonly used to layout content and functionality on a page which
takes into account user needs and user journeys.
 Wireframes are used early in the development process to establish the basic structure
of a page before visual design and content is added.
 While drawing your wireframes is a fun exercise, it's becoming more common to
create them digitally in Sketch, AdobeXD, and Figma.
 Wireframes serve multiple purposes by helping to,
1. Connect the site's information architecture to its visual design by showing paths
between pages.
2. Clarify consistent ways for displaying particular types of information on the user
interface

 Purpose
A wireframe is a schematic or blueprint that is useful for helping deve;oper and their
programmers and designers think and communicate about the structure of the
software or website they're building.
Wireframes keep the concept user-focused
 Wireframes are effectively used as communication devices
 They facilitate feedback from the users, instigate conversations with the
stakeholders, and generate ideas between the designers.
 Conducting user testing during the early wireframing stage allows the designer
to honest feedback, and identify key points that help to establish and develop
the product concept.
 Wireframing is the perfect way for the designers to gauge how the user would
interactwith the interface.
  These insights help the designer to understand what feels intuitive for the user,
andcreate products that are comfortable and easy to use
Wireframes clarify and define website features
 Wireframing specific features will clearly communicate to the clients how
they’ll function and what purpose they’ll serve.
 It also enables all stakeholders to gauge how much space will need to be
allocated for each feature and clarify the page’s functionality, architecture of
visual design
Wireframes are quick and cheap to create
 In fact, if user have a pen and paper to hand, you can quickly sketch out a
wireframe without spending a penny.
 The abundance of tools available means you can also build a digital wireframe
within minutes
 Often, when a product seems too polished, the user is less likely to be honest
about their first impressions.
 But by exposing the very core of the page layout, flaws and pain points can
easily be identified and rectified without any significant expenditure of time or
money.
 The later it gets in the product design process, the harder it is to make changes.
 Benefits
a. Visualize the structure clearly. A wireframe is the first real process for a project.
b. Clarify the features of interface.
c. Push usability to the forefront.
d. Help to refine navigation.
e. Make the design process iterative.
f. Save time and effort.
g. Make Content Development More Effective.

QUESTIONS
1. Define Software Design, User Interface, User Experience, Wireframe.
2. List the objectives of the software design.
3. Describe the software design concepts.
4. Explain the different levels of software design.
5. Explain architectural styles.
6. Explain monolithic style.
7. Explain micro service architecture.
8. List and explain user interface types.
9. List the properties of UI
10. Write a short note on relationship between UI/UX.
11. List the benefits of Wireframe.
12. Explain the purpose of wireframe.