COURSE CODE: BCA 155 YEAR/SEMESTER: I/II
UX/UI DESIGN
CREDIT HOURS: 3
WORKLOAD: 6 Hrs A WEEK (THEORY: 3 Hrs, PRACTICAL: 3 Hrs)
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
Unit 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
Unit 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
Unit 3: User Interface design 6 Hrs
2.1 Graphical and web user interfaces
2.2 Interaction styles: Command line, Menu selection, Form fill in, Direct manipulation,
Anthropomorphic
2.3 Principles of UI design
2.4 Graphical user interface
2.5 UI design process
2.6 Human considerations in interface and screen design
2.7 Technological considerations in interface design
Unit 4: UI components 12 Hrs
3.1 System menus and functions of menus
3.2 Formatting of menus: Consistency, display, presentation, organization, complexity, item arrangement, ordering, grouping
3.3 Types of menus: Menu bar, pull down menu, cascading menu, popup menu, tear off menu, iconic menu
3.4 Selection of Windows and its components, window presentation styles: Tiled windows, overlapping windows, cascading windows
3.5 Types of windows: Primary, secondary windows, dialog boxes
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
3.7 Other operable controls: slider, tabs, date picker, tree view, scroll bars
3.8 Selecting the proper controls
3.9 Creating meaningful graphics, icons and images
Unit 5: UI Design considerations 6 Hrs
5.1 Page layout, Color scheme and font selection, typography, screen size and responsive designs, interactive element
5.2 Visual hierarchy principles: Alignment, Color, Contrast, Proximity, Size, Texture, Time 5.3 Navigation: Global navigation, utility navigation, Associative and Inline Navigation 5.4 Navigational models: Hub and spoke, fully connected, multilevel or tree, stepwise navigation, Pyramid navigation, flat navigation
Unit 6: Wireframing and prototyping 6 Hrs
6.1 Wireframes and mock-ups
6.2 Prototyping: Low fidetity and high fidelity prototyping, interactive prototyping
6.3 UX storyboarding, mockups
6.4 Software prototyping
6.5 Transition and animation to prototypes
6.6 Creating a simple clickable prototype ial
Unit 7: Design evaluations 6 Hrs.
7.1 Formative and summative evaluation
7.2 Usabitity testing: Moderated vs Unmoderated
7.3 Analyzing test results and gathering insights
7.4 Evaluation through expert analysis and user participation, iterative evaluation and
evaluation paradigms
7.5 DECIDE evaluation framework, heuristic evaluation
7.6 Task analysis and performance metrics
Unit 8: Advanced techniques: VUI and NLP based UI 4 Hrs.
8.1 Command and control vs Conversational Ul
8.2 Personas, Avatars, Actors and Video games
8.3 Speech recognition technology and Dialog management
8.4 Designing for Wearable Devices
Laboratory Works: 48 Hrs.
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.
Required readings:
Galitz, W. O. (2007). The essential guide to user interface design (3rd ed.). Wiley Publishing,
Gothelf, J., & Seiden, J. (2013). Learn UX: Applying lean principles to improve user experience
(Ist ed.). O’Reilly Media.
Green, T., & Brandon, K. (2024). UX design with Figma; User-centred interface design and
Prototyping with Figma. Apress.
Tidwell, J., Brewer, C., & Valencia, A. (2020), Designing interfaces: Patterns for effective
interaction design (3rd ed.). O’Reilly Media,
Wood, D. (2014). Interface design: An introduction to visual communication iy Ul design.
Bloomsbury Publishing.