| Course Type | Compulsory Course |
|---|
| Course Level | Bachelor's Degree |
|---|
| Year of Study | 4 |
|---|
| Semester | Seventh Term (Fall) |
|---|
| ECTS | 4 |
|---|
| Name of Lecturer(s) |
|
| Learning Outcomes |
At the end of this course, the students;
- Distinguishes between the concepts of a design system, pattern library, and UI kit; defines the principles, scope, and usage guidelines of a design system.
- Systematizes design foundations such as color, typography, spacing system, grid, corner radius, and layer depth through primitive and semantic design tokens, Styles, Variables, and Modes.
- Establishes a reusable component architecture; consistently develops Components, Variants, Component Properties, composition, states, naming conventions, library organization, and usage documentation.
- Compares interaction and visual interface patterns based on historical context, user needs, platform, usability, brand, and accessibility criteria, and selects the appropriate pattern with justification.
- Defines task flows and UI states of a digital product; builds high-fidelity prototypes in Figma using navigation, overlays, scroll behavior, Interactive Components, and Variables.
- Evaluates the design system and prototype for consistency, usability, and accessibility; refines them based on feedback and basic user testing findings.
- Professionally presents a high-fidelity digital product prototype integrated with a documented design system.
|
| Mode of Delivery | Face to face |
|---|
| Prerequisites | No |
|---|
| Recommended Optional Programme Components | |
|---|
| Course Description | This course covers the establishment and documentation of design systems for digital products, as well as the application of these systems to interactive prototypes. The distinction between a design system and an interface kit is addressed through system principles, design foundations, primitive and semantic design tokens, Variables, Modes, typography, color, spacing systems, grid, corner radius, layer depth, component architecture, Variants, states, naming conventions, library organization, usage guidelines, and core governance topics.
Within the scope of the course, the concept of UI design patterns is examined both in terms of solution patterns for recurring interaction problems and in the context of historical and contemporary visual interface languages. Skeuomorphism, Flat Design, Material Design, Neumorphism, Glassmorphism, Claymorphism, Brutalism, and Bento UI are compared regarding their historical contexts, characteristic features, application areas, accessibility, and usability limitations.
Students develop high-fidelity prototypes through task flows, interaction states, navigation, overlays, scroll behavior, Interactive Components, and Variables. Transitions and micro-interactions are addressed to the extent necessary to provide direction, status, and feedback to the user. In the final project, the choice of design pattern, the design system, and the interactive prototype are integrated into a single digital product experience. |
|---|
| Course Contents |
| WEEK |
TOPICS |
|
1st Week |
Review of Components, Variants, Auto Layout, Styles, and Variables introduced in GIT326; overview of the course scope and term project. |
|
2nd Week |
Introduction to design systems; distinction between a design system, pattern library, and UI kit; goals, principles, stakeholders, scope, and core elements of a design system. |
|
3rd Week |
Design system foundations and design tokens; color, typography, spacing system, grid, corner radius, layer depth, and iconography; primitive and semantic design tokens, naming conventions, and scale creation. |
|
4th Week |
Variables, Styles, and Modes in Figma; Variable Collections, referencing variables, scoping, variable types (color, number, string, boolean), and contextual Modes. Interim Project 1: Design foundations and token system. |
|
5th Week |
Component architecture; component boundaries, composition, Variants, Component Properties, Instance Swap, content slots, state models, and component interface approach. |
|
6th Week |
Library organization and documentation; component naming, categories, usage guidelines, component structure and behavior, dos and don'ts, accessibility notes, and basic governance. Interim Project 2: Documented component family. |
|
7th Week |
Concept of UI design patterns; distinguishing patterns, conventions, trends, and anti-patterns; navigation, data input, content organization, progressive disclosure, selection, and feedback patterns. |
|
8th Week |
Historical interface languages; Skeuomorphism, Flat Design, and Material Design; technical capabilities, metaphors, discoverability, layer depth, and system approaches. |
|
9th Week |
Contemporary and experimental interface languages; Neumorphism, Glassmorphism, Claymorphism, Brutalism, and Bento UI; context of use, accessibility, performance, and legibility. Interim Project 3: Pattern analysis and UI implementation with a design system. |
|
10th Week |
Final project studio work; interaction design and UI states, user flows, navigation, overlays, scroll behavior, Interactive Components, Variables, and establishing the core prototype structure. |
|
11th Week |
Final project critique I: Evaluation of problem definition, user flows, navigation structure, UI state inventory, design system principles, design foundations, and token/variable structures. |
|
12th Week |
Final project critique II: Evaluation of component architecture, Variants, Component Properties, states, library organization, documentation, and selected UI patterns. |
|
13th Week |
Final project critique III: Evaluation of screens, system-prototype integration, Interactive Components, usability, accessibility, and user testing findings. |
|
14th Week |
Final project critique and presentation: Final refinements, submission of the design system, Figma file, documentation, interactive prototype, and user testing findings. |
|
| Recommended or Required Reading | The course will be conducted through web resources, and a list of recommended access links (including current online learning platforms and documentation) will be shared during lectures. |
|---|
| Planned Learning Activities and Teaching Methods |
- Lecture
- Problem Solving
- Project
- Practice
- Presentation
- Questions/Answers
|
|---|
| Assessment Methods and Criteria |
|
Quantity |
Percentage (%) |
| Project |
1 |
70 |
| Attendance |
1 |
10 |
| Total(%) |
|
80 |
| Contribution of In-term Studies to Overall Grade(%) |
|
80 |
| Contribution of Final Examination to Overall Grade(%) |
|
20 |
| Total(%) |
|
100 |
|
| ECTS Allocated Based on Student Workload |
| Activities |
Quantity |
Duration (Hour) |
Total Workload (Hour) |
| Midterm exam |
1 |
1 |
1 |
| Preparation for Quiz |
|
|
|
| Individual or group work |
14 |
1 |
14 |
| Preparation for Final exam |
|
|
|
| Course hours |
14 |
4 |
56 |
| Preparation for Midterm exam |
|
|
|
| Laboratory (including preparation) |
|
|
|
| Final exam |
1 |
1 |
1 |
| Homework |
3 |
8 |
24 |
| Project |
1 |
24 |
24 |
| Total Work Load | 120 |
| Total Work Load / 30 (h) | 4 |
| ECTS Credit of the Course | 4 |
|
| Language of Instruction | Turkish |
|---|
| Work Placement(s) | No |
|---|
