Please enable JavaScript.
Coggle requires JavaScript to display documents.
W2 - Web Design (Front End) (Web Design (Information Oriented Design…
W2 - Web Design (Front End)
Web Development Life Cycle
Design Process
Iterative process
Requirements translated into
blueprints
to construct s/w
S/w
specifications
are transformed into
design models
Design model
details of data structures,
system architecture
, interfaces and components
Design Types
Architectural Design
defines
relationships
among major
structural
elements of the s/w
derived
from: s/w
specifications
,
analysis model
Interface Design
describes how
s/w elements
communicate with each other,
other systems
and
humans
E.g data flow and control flow diagrams
Procedural/Component-level design
transforming
structural elements
defined by the
system architecture
into
procedural descriptions
of s/w components
Design Fundamental Concepts
Abstraction
Procedural Abstraction
provides
mechanisms
for abstracting well defined procedures as
entities
Implementation
of procedure requires
*number of steps
to be performed
Data Abstraction
Adv.
over procedural
is that
data and associated operations
get specified together.
Modularity
Modularity - Info Hiding
When modules communicate with one another
with only information
necessary to achieve its function
Modularity - Funtional Independence
Cohesion
degree
to which a module performs
one and only one
function
Functional
Sequential
Communicational
Procedural
Temporal
Logical
Coincidental
Coupling
degree to which a module is
dependent
on other modules in the system
Content (
change data
)
Common (
global data
)
External (
tied external environment
)
Control (
communicate with control flag
)
Stamp (
via data structure passed as param. More data
)
Data (
via parameter passing. Only what data needs
()
Uncoupled (
independent
)
Refinement
top down strategy
process of
elaboration
e.g: (f1)open door --> (f1)reach knob --> (f1)repeat
Refactoring
Patterns
Design Patterns
Provides a way of using
abstract knowledge
about a problem and its solution.
.
can determine whether pattern
is appliable to work
can be reused
can serve as a
guide
for developing
similar
, but
functionally/structurally
different pattern
Web Design
Web Design Pyramid
Interface Design
Aesthetic Design
Content Design
Navigation Design
Functional Design
Architecture Design
Component Design
Construction
Interaction Oriented Design
Interface Design
desribes
structure and organisation
of UI. Includes representation of
screen layout
, definition of
modes of interaction
, description of
navigation mechanisms.
Aesthetic Design
describes
look and feel
of web page. Includes
colour schemes, geometric layout, text sizes & fonts
, other related aesthetic decisions
Information Oriented Design
Content Design
defines
layout, structure and outline
for all content presented. Establishes
relationships
among content objects
Navigation Design
Represents
navigation flow
between content objects. Describes the the way which user
locates and interacts
with the content
Functional Design
Identifies
overall behavious & functionality
that is supported by web site
Architecture Design
Conceptual Architecture Design
identifies
conceptual
components of web app and the way in which they are
interconnected
. Ensures
appropriately integrated
Technical Architecture Design
Identifies
technical
components and
interactions
between them that are
required to construct
web app
Component Design
Develops
detailed processing logic required
to implement
functional components
that support
a complete set
of web app functions