Unit 3

Design Engineering
introduction

 Engineering design is the method of identification and

solving engineering problems. Engineering design can
have different forms, but they all include a common
attribute: any type of engineering design is a process.
The main types of engineering design are: Original
design, sometimes called innovative design.
continue

 Design engineer

 A design engineer is an engineer focused on the engineering design process in any of the

various engineering disciplines (including civil, mechanical, electrical, chemical, textiles,

aerospace, nuclear, manufacturing, systems, and structural /building/architectural) and

design disciplines like Human-Computer Interaction.

 Design engineers tend to work on products and systems that involve adapting and using

complex scientific and mathematical techniques

1.1 Design concept

 What is a design concept?

 Design concepts should be communicated clearly to the design team and stakeholders so

that everyone involved in the design process is on the same page

 In product management, a design concept is a short description of the idea behind the

planned design of a product.

 In other words, a design concept provides a brief explanation of your product idea and why

you believe the product will be worth designing, developing, and releasing to the market.
Software Design Process – Software Engineering

 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.

Continue…..

 The software design process can be divided into the following three levels or

phases of design:

 Interface Design

 Architectural Design

 Detailed Design
Continue…

 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 i.e, during interface design, the internal of the

systems are completely ignored, and the system is treated as a black box.
2.Architectural Design

 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.

 In architectural design, the overall structure of the system is chosen, but the

internal details of major components are ignored.

Detailed Design

 Detailed Design
 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
 The detailed design may include:
 Decomposition of major system components into program units.
 Allocation of functional responsibilities to units.
 User interfaces.
 Unit states and state changes.
 Data and control interaction between units.
 Data packaging and implementation, including issues of scope and visibility of
program elements.
 Algorithms and data structures.
design Model
Design Model continue

 Design modeling in software engineering represents the features of the

software that helps engineer to develop it effectively, the architecture, the
user interface, and the component level detail.
 Design modeling provides a variety of different views of the system like
architecture plan for home or building.
 Different methods like data-driven, pattern-driven, or object-oriented
methods are used for constructing the design model.
 All these methods use set of design principles for designing a model.
Software Quality Guidelines and
Attributes
Pattern-based Software Design

 Software design patterns are communicating objects and classes that are

customized to solve a general design problem in a particular context.

Software design patterns are general, reusable solutions to common problems

that arise during the design and development of software

 Software Design Patterns
 Creational Design Patterns

 Creational Design Pattern abstract the instantiation process. They help in making a

system independent of how its objects are created, composed and represented.
Structural Design Patterns

 Structural Design Patterns are concerned with how classes and objects are

composed to form larger structures. Structural class patterns use inheritance

to compose interfaces or implementations.

Behavioral Design Patterns

 Behavioral Patterns are concerned with algorithms and the assignment of

responsibilities between objects.
 Behavioral patterns describe not just patterns of objects or classes but also
the patterns of communication between them.
 These patterns characterize complex control flow that’s difficult to follow at
run-time.
 Architectural Design

 The software needs the architectural design to represents the design of 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
 Each style will describe a system category that consists of :

 A set of components(eg: a database, computational modules) that will

perform a function required by the system.
 The set of connectors will help in coordination, communication, and
cooperation between the components.
 Conditions that how components can be integrated to form the system.
 Semantic models that help the designer to understand the overall properties
of the system.
Types of Software Architecture Patterns

 It’s important to understand what a software architecture

pattern means, before knowing the types. So, let’s quickly
understand what it is.
 Software Architecture :
Software architecture is the blueprint of building
software. It shows the overall structure of the software,
the collection of components in it, and how they interact
with one another while hiding the implementation
 There are various ways to organize the components in software architecture. And

the different predefined organization of components in software architectures are

known as software architecture patterns.

 A lot of patterns were tried and tested. Most of them have successfully solved

various problems. In each pattern, the components are organized differently for

solving a specific problem in software architectures.

 Different Software Architecture Patterns :
 Layered Pattern
 Client-Server Pattern
 Event-Driven Pattern
 Microkernel Pattern
 Microservices Pattern
1. Layered Pattern :

 1. Layered Pattern :
As the name suggests, components(code) in this pattern are separated into
layers of subtasks and they are arranged one above another.
 Each layer has unique tasks to do and all the layers are independent of one
another. Since each layer is independent, one can modify the code inside a
layer without affecting others.
 It is the most commonly used pattern for designing the majority of software.
This layer is also known as ‘N-tier architecture’. Basically, this pattern has 4
layers.
 Presentation layer (The user interface layer where we see and enter data into
an application.)
 Business layer (this layer is responsible for executing business logic as per the
request.)
 Application layer (this layer acts as a medium for communication between the
‘presentation layer’ and ‘data layer’.
 Data layer (this layer has a database for managing data.)
2. Client-Server Pattern :

 2. Client-Server Pattern :
The client-server pattern has two major entities. They are a server and multiple
clients.
 Here the server has resources(data, files or services) and a client requests the server
for a particular resource. Then the server processes the request and responds back
accordingly.
 Examples of software developed in this pattern:
 Email.
 WWW.
 File sharing apps.
 Banking, etc…
3. Event-Driven Pattern :

 3. Event-Driven Pattern :
Event-Driven Architecture is an agile approach in which services (operations)
of the software are triggered by events.
 Well, what does an event mean?
 When a user takes action in the application built using the EDA approach, a
state change happens and a reaction is generated that is called an event.
 Eg: A new user fills the signup form and clicks the signup button on Facebook
and then a FB account is created for him, which is an event.
4. Microkernel Pattern :

 4. Microkernel Pattern :
Microkernel pattern has two major components. They are a core system and
plug-in modules.
 The core system handles the fundamental and minimal operations of the
application.
 The plug-in modules handle the extended functionalities (like extra features)
and customized processing.
 5. Microservices Pattern :
The collection of small services that are combined to form the actual
application is the concept of microservices pattern. Instead of building a
bigger application, small programs are built for every service (function) of an
application independently. And those small programs are bundled together to
be a full-fledged application.
 So adding new features and modifying existing microservices without
affecting other microservices are no longer a challenge when an application is
built in a microservices pattern.
WebApp Design

 What is web app design?

 Web app design is the process of creating a website application that delivers

a seamless user experience (UX) and meets users’ core needs with a clear,

compelling user interface (UI).

design pyramid for webapp

 The creation of an effective design will typically require a diverse set of

skills.
 Sometimes, for small projects, a single developer may need to be multi-
skilled.
 For larger projects, it may be advisable and/or feasible to draw on the
expertise of specialists:
 Web engineers,
 Graphic designers,
 Content developers,
 Programmers,
 Database specialists,
 Information architects,
 Network engineers,
 Security experts,
 Testers.
In Design pyramid for WebApps, each level of the pyramid
represents a design action…
Interface Design

 Interface Design

Where am I? The interface should
 provide an indication of the WebApp that has been accessed
 Inform the user of location in the content hierarchy
 What can I do now? The interface should always help the user understand his current options
 what functions are available?
 what links are live?
 what content is relevant?
 Where have I been, where am I going? The interface must facilitate navigation.
 Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what
paths may be taken to move elsewhere within the WebApp.
Aesthetic Design

 Aesthetic Design

Aesthetic design, also called graphic design.
 Layout Issues :
 Don’t be afraid of white space.
 Emphasize content.
 Organize layout elements from top-left to bottom right.
 Group navigation, content, and function geographically within the page.
 Don’t extend your real estate with the scrolling bar.
 Consider resolution and browser window size when designing layout.
Content Design

 Content Design

Develops a design representation for content objects
 For WebApps, a content object is more closely aligned with a data object for
conventional software.
 Represents the mechanisms required to instantiate their relationships to one
another.
 Analogous to the relationship between analysis classes and design components.
 A content object has attributes that include content-specific information
 Implementation-specific attributes that are specified as part of design
Architecture Design

 Architecture Design

Content architecture focuses on the manner in which content objects (or composite objects such as Web
pages) are structured for presentation and navigation.
 The term information architecture is also used to predict structures that lead to better organization, labeling,
navigation, and searching of content objects.
 WebApp architecture addresses the manner in which the application is structured to manage user
interaction, handle internal processing tasks, effect navigation, and present content.
 Architecture design is conducted in parallel with interface design, aesthetic design and content
design.
 Content architecture :
 Four different content structures :
 (1) Linear structures
 (2) Grid structure
 (3) Hierarchical structures
 (4) Networked or “pure web” structure
WebApp architecture

 WebApp architecture

 WebApp architecture describes an infrastructure that enables a Web-based system or

application to achieve its business objectives.

 The Model-View-Controller (MVC) architecture is one of a number of suggested

WebApp infrastructure models that decouple the user interface from the WebApp

functionality and informational content.

Model-View-Controller (MVC)
architecture
 Model-View-Controller (MVC) architecture

Model :
 The model (sometimes referred to as the “model object”) contains all application-specific content and
processing logic, including all content objects, access to external data/information sources, and all
processing functionality that is application specific.
 View :
 The view contains all interface specific functions and enables the presentation of content and processing
logic, including all content objects, access to external data/information sources, and all processing
functionality required by the end user.
 Controller :
 The controller manages access to the model and the view and coordinates the flow of data between them.
Navigation Design

 Navigation Design
 Begins with a consideration of the user hierarchy and related use cases.
 Each actor may use the WebApp somewhat differently and therefore have different
navigation requirements
 As each user interacts with the WebApp, it encounters a series of navigation
semantic units (NSUs)
 NSU—“a set of information and related navigation structures that collaborate in the
fulfillment of a subset of related user requirements”
Navigation Design

 Navigation design is a design process that utilizes hyperlinks to organize

information on a website so that site visitors can navigate, or find, the

information they are looking for.

Navigation Design
Component-Level Design

 Component-Level Design

 WebApp components implement the following functionality

 Perform localized processing to generate content and navigation capability in a dynamic fashion

 Provide computation or data processing capability that are appropriate for the WebApp’s business

domain

 Provide sophisticated database query and access

 Data interfaces with external corporate systems.

Component-Level Design

 Component level design is the definition and design of components and

modules after the architectural design phase. Component-level design defines

the data structures, algorithms, interface characteristics, and communication

mechanisms allocated to each component for the system development.

Component-Level Design
A 5-step web app design process that responds to user needs

 Follow these five steps to structure your web app design—adapting the

process to your particular team, organization, and customers—so it’s as clear

and effective as possible for you to satisfy user needs.

 Web app design is a circular process: repeat steps and move back and forth in

line with workflow constraints, as well as the user insights you discover
 1. Discover key user and market needs

Begin by understanding your users and product market. Ask yourself key web
app design questions to guide your research, including:
 Who will use this web app?
 What goals do our users have?
 What are our main organizational goals with this web app?
 How will our web app stand out from the competition?
 2. Define your solutions

Once you’ve conducted user and market discovery research,
synthesize your key learnings by creating user personas, defining
problem statements, and mapping out an ideal customer journey.
 Next, generate ideas to solve the key user problems you’ve
identified. Use brainstorming techniques to ideate web app features
and elements that will address your users’ most urgent needs.
 3. Create a backlog for your web app design and collaborate
 Once you’ve defined the solutions your web app will offer, and have a clear
sense of your priorities, you can plan out the web app design process by
creating a backlog—a list of ideas for new design features, updates to
existing features, bug fixes, and infrastructure optimizations.
 Include a plan for the next stages of the product design process, including
development, testing, and further user discovery.
 4. Build and iterate
 Next, focus on developing solutions you can test and roll
out with real users. Start with mockups, wireframes, and
prototypes that model the basic web abb navigation
architecture and UX elements. Then, test these with
current or potential users and incorporate their feedback
into future iterations.
 web application design is the stage of software development that focuses on
the user interface (UI) and overall user experience (UX). The focus of web app
design is fully on the users:
 How users experience the web app
 Whether the web app responds clearly to user needs
 If the web app makes it easy for users to find what they are looking for
How to design a web app that users
will do - 7 steps
 How to design a web app that users will love - 7 steps
1. Set design goals

 1. Set design goals

 The first step of web application design is to specify your goals. Without clear

goals, you won’t be able to design a web app that meets your needs. To draft

goals, design teams rely on design briefs.

2.Conduct market research

 2. Conduct market research

 Before you can design compelling web applications, you need to understand

the market, your potential customers, and what the competition is doing.

There are many ways to conduct this kind of research including:

3. Empathize with users

 3. Empathize with users

 After you have a sense for the market, the competition, and who your users are - and perhaps even what

their needs and expectations are, it’s time to dig even deeper. Take your user research to the next level by

empathizing with your users.

 Create a storyboard A storyboard allows you to create a low-fidelity visual that focuses on users and their
actions, thoughts, goals, emotions, and relationships.

Define functional scenarios Define specific user scenarios where a user is trying to achieve a particular goal
with your web app.
4. Choose a design concept

 4. Choose a design concept

 During this stage of the process, a UI designer takes a blank canvas and begins

to sketch out the UI design, drawing inspiration from the information

gathered in the previous steps.

5. Prototype the design

 5. Prototype the design

 With a design direction established, it’s time to begin prototyping the design.
In this stage, you will work from low fidelity up to high fidelity mockups of
the web app.
 Flowcharts The user flow charts represent the flow of the screens the user will go
through to perform certain tasks using your product.
6. Test and iterate

 6. Test and iterate

 A team can test the usability of the prototype as soon as it is finished. Unlike

QA testing and A/B testing, the major objective of usability testing is to get

opinions from actual users of a product to determine how user-friendly the

interface is and whether the user can accomplish their objectives using the

product.
7. Refine and update

 7. Refine and update

 UI/UX designers’ work is not complete once the product is released into the
market. As time goes on, designers continue their work to keep the product
updated as per new UI and UX design trends.
Type of Web Design