Related subjects: - M1.A1: Information Architecture and UX Basics. - M2.A2: Visual Communication.

This subject introduces the student to the conceptualization and early representation of digital interfaces through page layouts and low-fidelity prototypes. The course aims to provide students with the skills to translate user needs into visual and interactive flows, through iterative, inclusive and goal-oriented solutions.

THEORETICAL FOUNDATIONS - Introduction to low-fidelity prototyping: definition, advantages, and context in UX. - Differences between wireframes, mockups and high-fidelity prototypes. - From research to design: translating findings into visual solutions. - Methods to determine the creative concept from qualitative and quantitative research. - Techniques for formulating design problems (How Might We questions). - Writing milestone and goal statements for digital products or services. - User flow analysis: tools, conventions and examples. - Storyboard typology: narrative, functional and emotional. - Page layout design: visual principles, hierarchy and navigation. - Tools and methods for creation on paper and screen (Sketching, Figma and Balsamiq). - Transitions and navigation techniques in simple prototypes. - Paper prototyping: simulation, testing and documentation techniques. - Design bias evaluation: dark patterns and cognitive asymmetries. - Fundamentals of attentional economics and its application to interactive design. - Principles of equitable and inclusive design applied to wireframing.

ACTIVITIES AND PRACTICAL ASSIGNMENTS - Workshop 1: Quick sketching and creation of wireframes on paper. - Workshop 2: Construction of navigation flows on paper and functional storyboard. - Workshop 3: Basic digital wireframing using visual tools (e.g., Figma). - Workshop 4: Design and informal testing of a low-fidelity prototype with real users. - Workshop 5: Critical evaluation of wireframes: economy of attention and deceptive patterns.