Module

y
nl
Presenter’s Manual

O
se
for

U
tre
UI and UX
en
C

for Responsive
h
ec

Web Design
pt
rA
Fo

Effective from: October 2018

Ver. 1.0
 y
nl
O
Amendment Record

se
Version No. Effective Date Change Replaced Pages
1.0 October 2018 New -

U
tre
en
C
h
ec
pt
rA
Fo

© 2018 Aptech Limited

 Table of Contents
Sr. Details Page
No.
No.
1. Introduction 1

2. Information on Session Allocation 2

3. Module Deliverables 2

y
nl
4. Week-wise Session Schedule 4

O
5. Session Coverage 5

6. Library References 7

se
U
tre
en
C
h
ec
pt
rA
Fo

© 2018 Aptech Limited

 Presenter’s Manual
UI and UX for Responsive Design

1. Introduction

At the end of this course, students will be able to:

 Define User Interface (UI) and User Interface design

 List and explain the different elements of User Interface Design
 Describe the principles of User Interface Design
 Describe the types of User Interface Design
 Explain the User Interface Design process
 Describe the models in User Interface Design

y
 Define User Experience (UX) and User Experience Design
 Describe the difference between UI and UX

nl
 Describe the different elements of UX Design
 Explain the significance of UX

O
 List and explain the principles of User Experience Design
 Describe the best practices in User Experience Design
 Define Responsive UI design

se
 Describe the evolution of RWD
 Describe the importance of Progressive Enhancement
 Outline the differences between Graceful Degradation and Progressive

U
Enhancement
 Explain the RWD Workflow
Describe the significance of RWD


tre
Explain the strategies for RWD in mobile phones, Android based devices, and
laptops
 Describe the need for content strategy in RWD
en

 Describe the importance of content audit

 Explain the performance optimization for a mobile-friendly site
 Explain the difference between responsive and adaptive Website designs
C

 Define Breakpoints
 Describe Navigation Drawers
 Describe Stacked Pagination
h

 Explain Fluid Images

ec

 Define Bottom Bar

 Describe Top Bar
 Define Front Action Calls
pt

 Explain Short and Simple Menus

 Describe usability studies
Explain the importance of usability studies
rA


 List the steps for testing in usability studies
 Describe usability studies for Responsive Web Design
Fo

Issue Date: October 2018 © 2018 Aptech Limited Page 1 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

2. Information on Session Allocation

Theory Self-study
Module
(No. of Hrs) (No. of Hrs)
UIUX 12 06

Throughout this Presenter’s Manual, the module UI and UX for Responsive Design
will be referred to as UIUX.

y
nl
3. Module Deliverables

O
To aid the learning process, following are the deliverables

(Faculties can access eBooks and other components in Onlinevarsity through Aptrack.)

se
Student Deliverables:

U
Resources available on Onlinevarsity:tre
Icons Feature - Description / Functionality
Download Book - Student has the option to download the subject related e-book
and read offline.
en

Glossary - Student can access a list of subject related specialized words with their
C

definitions.

FAQ - Student can access frequently asked questions and their answers.
h
ec

Show Me How - Student can view a step-wise simulation/demonstration of the

module related topics.
pt

Practice 4 Me - Student can test and evaluate their understanding of module

related topics.
rA

Work Assignments - Student can solve scenario based lab assignments (Hands-
on). The faculty will evaluate and give their feedbacks.
Fo

References - Student can access additional subject related material for reading.

Feedback - Student can provide feedback on the course material.

Ask to Learn – Student can submit subject related technical queries. Queries
submitted will be directed to the particular course coordinator/head.

Issue Date: October 2018 © 2018 Aptech Limited Page 2 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

4. Week-wise Session Schedule

• A Session has duration of 2 hours

Week Day 1 Day 2 Day 3

Session 1 Session 2 Session 3
1
UIUX – T1 UIUX – T2 S1 UIUX – T3
Session 4 Session 5 Session 6

y
2 S3
UIUX – T4 S2 UIUX – T5 UIUX – T6

nl
UIUX: UI and UX for Responsive Design

O
T: Theory Session
S: Self-study Session (over and above the module duration)

se
U
tre
en
C
h
ec
pt
rA
Fo

Issue Date: October 2018 © 2018 Aptech Limited Page 3 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

5. Session Coverage

Session Session Deliverables’

Session Details
No. Title Mapping
1 UIUX – All the topics as listed below from UI and UX for
T1 Session 1 of UI and UX for Responsive Web
Responsive Web Design book Design
should be covered in this session.

y
Session 1 – Introduction to SG – Session 1
User Interface Design XP – Session 1

nl
TG – Session 1
 Define User Interface (UI) and

O
User Interface design
 List and explain the different
elements of User Interface

se
Design
 Describe the principles of User
Interface Design

U
 Describe the types of User
Interface Design
Explain the User Interface

tre
Design process
 Describe the models in User
Interface Design
en

2 UIUX – All the topics as listed below from UI and UX for

T2 Session 2 of UI and UX for Responsive Web
C

Responsive Web Design book Design

should be covered in this session.
h

Session 2 – Introduction to SG – Session 2

ec

User Experience Design XP – Session 2

TG – Session 2
 Define User Experience (UX)
pt

and User Experience Design

 Describe the difference
between UI and UX
rA

 Describe the different

elements of UX Design
 Explain the significance of UX
Fo

 List and explain the principles

of User Experience Design
 Describe the best practices in
User Experience Design
After the session, ask the students UI and UX for
to solve Assignments of Session 1 Responsive Web
and Session 2 available in UI and Design
S1
UX for Responsive Web Design
book. Session 1 & 2

Issue Date: October 2018 © 2018 Aptech Limited Page 4 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

Session Session Deliverables’

Session Details
No. Title Mapping
3 UIUX – All the topics as listed below from UI and UX for
T3 Session 3 of UI and UX for Responsive Web
Responsive Web Design book Design
should be covered in this session.

Session 3 – Understanding SG – Session 3

Responsive Web Design XP – Session 3
TG – Session 3

y
 Define Responsive UI design

nl
 Describe the evolution of RWD
 Describe the importance of

O
Progressive Enhancement
 Outline the differences
between Graceful Degradation

se
and Progressive Enhancement
 Explain the RWD Workflow
 Describe the significance of

U
RWD
4 UIUX – All the topics as listed below from UI and UX for
T4 Session 4 of UI and UX for Responsive Web
tre
Responsive Web Design book Design
should be covered in this session.
en
Session 4 – Understanding the SG – Session 4
Strategies for Responsive XP – Session 4
Web Design TG – Session 4
C

 Explain the strategies for RWD

in mobile phones, Android
h

based devices, and laptops

ec

 Describe the need for content

strategy in RWD
 Describe the importance of
pt

content audit
 Explain the performance
optimization for a mobile-
rA

friendly site
 Explain the difference between
responsive and adaptive
Fo

Website designs

After the session, ask the students UI and UX for

to solve Assignments of Session 3 Responsive Web
and Session 4 available in UI and Design
S2
UX for Responsive Web Design
book. Session 3 & 4

Issue Date: October 2018 © 2018 Aptech Limited Page 5 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

Session Session Deliverables’

Session Details
No. Title Mapping
5 UIUX – All the topics as listed below from UI and UX for
T5 Session 5 of UI and UX for Responsive Web
Responsive Web Design book Design
should be covered in this session.

Session 5 – Using Common SG – Session 5

RWD Patterns in Mobile XP – Session 5
Designs TG – Session 5

y
nl
 Define Breakpoints
 Describe Navigation Drawers

O
 Describe Stacked Pagination
 Explain Fluid Images
 Define Bottom Bar

se
 Describe Top Bar
 Define Front Action Calls
 Explain Short and Simple

U
Menus

6 UIUX – All the topics as listed below from UI and UX for

T6
tre
Session 6 of UI and UX for Responsive Web
Responsive Web Design book Design
should be covered in this session.
en

Session 6 – Usability Studies SG – Session 6

in Responsive Web Design XP – Session 6
C

TG – Session 6
 Describe usability studies
 Explain the importance of
h

usability studies
ec

 List the steps for testing in

usability studies
 Describe usability studies for
pt

Responsive Web Design

After the session, ask the students UI and UX for

rA

to solve Assignments of Session 5 Responsive Web

and Session 6 available in UI and Design
S3
UX for Responsive Web Design
Fo

book. Session 5 & 6

Issue Date: October 2018 © 2018 Aptech Limited Page 6 of 7

Ver.1.0
 Presenter’s Manual
UI and UX for Responsive Design

6. Library References

 Learning Responsive Web Design: A Beginner's Guide by Clarissa

Peterson
 Ux Ui Design - Simple Steps to Win, Insights and Opportunities for
Maxing Out Success by Gerard Blokdijk
 Effective UI by Jonathan Anderson and John Mcree

y
~~~ End of Document ~~~s

nl
O
se
U
tre
en
C
h
ec
pt
rA
Fo

Issue Date: October 2018 © 2018 Aptech Limited Page 7 of 7

Ver.1.0