UX/UI Design

Course Title: UX/UI Design

Course No: BCA 155

Nature of the Course: Theory + Lab

Semester: 2

Full Marks: 60 + 20 + 20

Pass Marks: 24 + 8 + 8

Credit Hours: 3

Course Description

This course covers different design principles, concepts and techniques of UX and UI designs focusing on making products with user centric user interface which is easy to use, efficient and user-friendly. Students are introduced with the basic concepts, design techniques and evaluation of UX and UI. It also includes latest concepts used by the designers to design the UX/UI and also trends in the UX/UI design.

Course Objectives

The primary objective of this course is to introduce different principles, techniques and aspects of UX/UI design. Students should be able to: Develop a deep understanding of concepts of UX and UI designs; Conduct user research and analysis for user interaction designs; Understand the principles and techniques of interaction design; Implement user friendly interaction styles; Create UI designs using proper user interface components and controls; Create wireframes, prototypes, and high-fidelity designs using industry-standard software; Perform design evaluations on the visual designs and interactions; Implement advanced techniques for interface design including voice user interface and NLP based interface.

Course Contents

1. Introduction

4 hrs

1.1. Fundamentals of UX and UI

1.2. UX vs UI

1.3. Tasks of UX designer and UI designer

1.4. UX principles: Usability, Accessibility, Simplicity

1.5. Core discipline of UX: User research, content strategy, Information Architecture, Interaction design, Visual Design, usability evaluation

1.6. User interfaces: CLI, GUI, VUI, Menu-driven, NLP based

1.7. Properties of good UX/UI design

1.8. UX/UI tools: Figma, Adobe XD, Sketch

2. User interaction design

4 hrs

2.1. UX design process and user center design, Mindmap

2.2. UX research: Conducting user research: Interviews, Surveys, Competitive analysis, creating user personas, user journey mapping

2.3. Ideation techniques: using Mood boards, Brainstorming and sketching

3. User Interface design

6 hrs

3.1. 2.1 Graphical and web user interfaces

3.2. 2.2 Interaction styles: Command line, Menu selection, Form fill in, Direct manipulation, Anthropomorphic

3.3. 2.3 Principles of UI design

3.4. 2.4 Graphical user interface

3.5. 2.5 UI design process

3.6. 2.6 Human considerations in interface and screen design

3.7. 2.7 Technological considerations in interface design

4. UI components

12 hrs

4.1. 3.1 System menus and functions of menus

4.2. 3.2 Formatting of menus: Consistency, display, presentation, organization, complexity, item arrangement, ordering, grouping

4.3. 3.3 Types of menus: Menu bar, pull down menu, cascading menu, popup menu, tear off menu, iconic menu

4.4. 3.4 Selection of Windows and its components, window presentation styles: Tiled windows, overlapping windows, cascading windows

4.5. 3.5 Types of windows: Primary, secondary windows, dialog boxes

4.6. 3.6 Screen based controls: Operable controls (Buttons, toolbars), Text entry/Read-only controls (single and multiple line textboxes,) selection controls (radio buttons, checkboxes, palettes, list boxes, list view controls, drop down/popup list boxes

4.7. 3.7 Other operable controls: slider, tabs, date picker, tree view, scroll bars

4.8. 3.8 Selecting the proper controls

4.9. 3.9 Creating meaningful graphics, icons and images

5. UI Design considerations

6 hrs

5.1. 5.1 Page layout, Color scheme and font selection, typography, screen size and responsive designs, interactive element

5.2. 5.2 Visual hierarchy principles: Alignment, Color, Contrast, Proximity, Size, Texture, Time

5.3. 5.3 Navigation: Global navigation, utility navigation, Associative and Inline Navigation

5.4. 5.4 Navigational models: Hub and spoke, fully connected, multilevel or tree, stepwise navigation, Pyramid navigation, flat navigation

6. Wireframing and prototyping

6 hrs

6.1. 6.1 Wireframes and mock-ups

6.2. 6.2 Prototyping: Low fidelity and high fidelity prototyping, interactive prototyping

6.3. 6.3 UX storyboarding, mockups

6.4. 6.4 Software prototyping

6.5. 6.5 Transition and animation to prototypes

6.6. 6.6 Creating a simple clickable prototype

7. Design evaluations

6 hrs

7.1. 7.1 Formative and summative evaluation

7.2. 7.2 Usability testing: Moderated vs Unmoderated

7.3. 7.3 Analyzing test results and gathering insights

7.4. 7.4 Evaluation through expert analysis and user participation, iterative evaluation and evaluation paradigms

7.5. 7.5 DECIDE evaluation framework, heuristic evaluation

7.6. 7.6 Task analysis and performance metrics

8. Advanced techniques: VUI and NLP based UI

4 hrs

8.1. 8.1 Command and control vs Conversational UI

8.2. 8.2 Personas, Avatars, Actors and Video games

8.3. 8.3 Speech recognition technology and Dialog management

8.4. 8.4 Designing for Wearable Devices

Laboratory Works

Laboratory work should be carried out by using some UX/UI tools such as Figma, Adobe XD or Sketch and need to cover the following tasks: Use the basic tools and features for visual designs; Use proper page layout, font selection, screen size and responsive designs; Implement color theory and typography in interface designs; Create designs with proper grids and layouts; Integrating interactive elements to the designs; Create design with different types of windows and operable controls; Use different navigational styles in the designs; Construct wireframe and prototypes for the designs; Create the storyboards for interaction designs; Apply different effects, styles and animation for designs. At the end of the semester, students need to submit a project that should include the basic interface and interaction designs for a chosen topic individually and perform the evaluations on the designs.

1.Use the basic tools and features for visual designs
2.Use proper page layout, font selection, screen size and responsive designs
3.Implement color theory and typography in interface designs
4.Create designs with proper grids and layouts
5.Integrating interactive elements to the designs
6.Create design with different types of windows and operable controls
7.Use different navigational styles in the designs
8.Construct wireframe and prototypes for the designs
9.Create the storyboards for interaction designs
10.Apply different effects, styles and animation for designs
11.End of semester project: basic interface and interaction designs

Text Books

1.Galitz, W. O. (2007). The essential guide to user interface design (3rd ed.). Wiley Publishing.
2.Gothelf, J., & Seiden, J. (2013). Learn UX: Applying lean principles to improve user experience (1st ed.). O'Reilly Media.
3.Green, T., & Brandon, K. (2024). UX design with Figma: User-centered interface design and prototyping with Figma. Apress.
4.Tidwell, J., Brewer, C., & Valencia, A. (2020). Designing interfaces: Patterns for effective interaction design (3rd ed.). O'Reilly Media.
5.Wood, D. (2014). Interface design: An introduction to visual communication in UI design. Bloomsbury Publishing.

Notes:

This syllabus follows the official BCA curriculum of Tribhuwan University. In case of any doubt or revision, the university's published syllabus shall be considered authoritative.https://fohss.tu.edu.np/#

UX/UI Design

UX/UI Design

Select University

Select Program

TabFlux . UX/UI Design . TU . BCA

UX/UI Design

Course Description

Course Objectives

Course Contents

Laboratory Works

Text Books

Notes: