R.M.K.

COLLEGE OF ENGINEERING AND TECHNOLOGY

(Autonomous Institution)

RSM Nagar, Puduvoyal – 601206

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

22CS913 – UI/UX DESIGN LABORATORY MANUAL

II Year / 4th Sem

REGULATIONS 2022
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

INSTITUTION VISION

To be knowledge hub of providing quality technical education and promoting research for
building up of our nation and its contribution for the betterment of humanity.

INSTITUTION MISSION

• To make the best use of state-of-the-art infrastructure to ensure quality technical education.
• To develop industrial collaborations to promote innovation and research capabilities.
• To inculcate values and ethics to serve humanity
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

VISION
To be a source of knowledge in the field of Computer Science and Engineering to
cater to the growing need of industry and society.

MISSION

• To avail state-of-the art infrastructure for adopting cutting edge technologies and
encouraging research activities.
• To promote industrial collaborations for professional competency.
• To nurture social responsibility and ethics to become worthy citizens.

PROGRAM EDUCATIONAL OBJECTIVES

Graduates of Computer Science and Engineering Program will

PEO I: Become globally competent professionals in all spheres and pursue higher education
world over.
PEO II: Successfully carry forward domain knowledge in computing and allied areas to solve
complex real world engineering problems.
PEO III: Continuously upgrade their technical knowledge and expertise to keep pace with the
technological revolution.
PEO IV: Serve the humanity with social responsibility combined with ethics.

PROGRAM SPECIFIC OUTCOMES

Graduates of Computer Science and Engineering Program will be able to:

• Analyze, design and develop computing solutions by applying foundational concepts of Computer
Science and Engineering.
• Apply software engineering principles and practices for developing quality software for scientific
and business applications.
• To implement cost-effective solutions for the betterment of both industry and society with the
technological skills acquired through the Centers of Excellence.
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

PROGRAM OUTCOME

• Engineering Knowledge: Apply knowledge of mathematics, science, engineering

fundamentals and an engineering specialization to the solution of complex engineering
problems.
• Problem Analysis: Identify, formulate, research literature and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences and engineering sciences.
• Design/ Development of Solutions: Design solutions for complex engineering problems
and design system components or processes that meet specified needs with appropriate
consideration for public health and safety, cultural, societal and environmental
considerations.
• Conduct investigations of complex problems using research-based knowledge and
research methods including design of experiments, analysis and interpretation of data and
synthesis of information to provide valid conclusions.
• Modern Tool Usage: Create, select and apply appropriate techniques, resources and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.
• The Engineer and Society: Apply reasoning informed by contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to professional engineering practice.
• Environment and Sustainability: Understand the impact of professional engineering
solutions in societal and environmental contexts and demonstrate knowledge of and need
for sustainable development.
• Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of engineering practice.
• Individual and Team Work: Function effectively as an individual, and as a member or
leader in diverse teams and in multi-disciplinary settings.
• Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as being able to comprehend and
write effective reports and design documentation, make effective presentations and give
and receive clear instructions.
• Project Management and Finance: Demonstrate knowledge and understanding of
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
• Life-long Learning: Recognize the need for and have the preparation and ability to Engage
in independent and life- long learning in the broadest context of technological Change.
 RMK College of Engineering and Technology
(An Autonomous Institution)
RSM Nagar, Puduvoyal-601206

Department of Computer Science and Engineering

GENERAL LABORATORY INSTRUCTIONS

1. Students are advised to come to the laboratory at least 5 minutes before (to
starting time), those who come after 5 minutes will not be allowed into the lab.
2. Plan your task properly much before to the commencement, come prepared to
the lab with the synopsis / program / experiment details.
3. Student should enter into the laboratory with:
a. Laboratory observation notes with all the details (Problem statement, Aim,
Algorithm, Procedure, Program, Expected Output, etc.,) filled in for the lab session.
b. Laboratory Record updated up to the last session experiments and other utensils
(if any) needed in the lab.
c. Proper Dress code and Identity card.
4. Sign in the laboratory login register, write the TIME-IN, and occupy the
computer system allotted to you by the faculty.
5. Execute your task in the laboratory, and record the results / output in the lab
observation notebook, and get certified by the concerned faculty.
6. All the students should be polite and cooperative with the laboratory staff, must
maintain the discipline and decency in the laboratory.
7. Computer labs are established with sophisticated and high end branded
systems,which should be utilized properly.
8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode
during the lab sessions. Misuse of the equipment, misbehaviors with the staff and
systems etc., will attract severe punishment.
9. Students must take the permission of the faculty in case of any urgency to go
out; if anybody found loitering outside the lab / class without permission during
working hours will be treated seriously and punished appropriately.
10. Students should LOG OFF/ SHUT DOWN the computer system before he/she
leaves the lab after completing the task (experiment) in all aspects. He/she must
ensure the system / seat is kept properly.
 SYLLABUS

UI/UX DESIGN (Lab Integrated) L T P C

22CS913
0 0 4 2
OBJECTIVES:

The Course will enable learners:

• Explain the principles of User Interface (UI) in order to do design with intention.
• Define the User eXperience (UX) and the psychology behind user decision making.
• Discuss about UX process and user Psychology.
• Apply technology for designing web applications with multimedia effects.
• Create a wireframe and prototype..

●
LIST OF EXERCISES:
1. Design UI for a Game website.
2. Design one-page UI for a website.
3. Design UI for a mobile.
4. Explore the Look and Feel of the new Project developed in Ex1.
5. Design a mascot for an imaginary brand.
6. Create a Sample Pattern Library for a product (Mood board, Fonts, Colors based
on UI principles).
7. Design a mock-up website for a service sector company.
8. Create a brainstorming feature for proposed product.
9. Sketch, design with popular tool and build a prototype and perform usability
testing and identify
improvements.
10. Design a mobile mock-up website for an online store.

30 PERIODS(THEORY) +30 PERIODS (LAB) TOTAL: 60 PERIODS

 LIST OF CONTENTS

S.No. Name of the Experiment Page No.

1 DESIGN UI FOR A GAMING WEBSITE
2 DESIGN ONE-PAGE UI FOR A WEBSITE
3 DESIGN UI FOR A MOBILE APPLICATION
4 EXPLORE THE LOOK AND FEEL OF THE
PROJECT
5 DESIGN A MASCOT FOR AN IMAGINARY
BRAND
6 CREATING A SAMPLE PATTERN LIBRARY
7 DESIGNING A MOCK-UP WEBSITE
8 CREATE A BRAINSTORMING FEATURE FOR
PROPOSED PRODUCT
9 SKETCH, DESIGN WITH POPULAR TOOL,
BUILD A PROTOTYPE, PERFORM USABILITY
TESTING, AND IDENTIFY IMPROVEMENTS
10 DESIGN A MOBILE MOCK-UP WEBSITE FOR AN
ONLINE STORE