What are you looking for?
Catalan and Spanish, with documentation in English.
E8. Visually represent concepts and / or data for the ideation and creation of video games.
G1. Demonstrate having and understanding advanced knowledge of their area of study that includes the theoretical, practical and methodological aspects, with a level of depth that reaches the forefront of knowledge.
G3. Gather and interpret relevant data (usually within their area of study) to make judgments that include reflection on relevant social, scientific, or ethical issues.
T2. Work as a member of an interdisciplinary team either as an additional member or performing management tasks in order to contribute to developing projects with pragmatism and a sense of responsibility, making commitments and taking into account available resources.
The course presents the theoretical framework of interface design in general, as well as specific video games in the field of Artistic Creation. The student will learn to analyze and design graphical user interfaces and, specifically, user interfaces for video games.
This subject has methodological and digital resources to make possible its continuity in non-contact mode in the case of being necessary for reasons related to the Covid-19. In this way, the achievement of the same knowledge and skills that are specified in this teaching plan will be ensured.
The Tecnocampus will make available to teachers and students the digital tools needed to carry out the course, as well as guides and recommendations that facilitate adaptation to the non-contact mode.
The student will have to achieve these own results of the matter of Artistic Creation:
E8.1. To devise the graphic aspect of a video game, I followed the type of user, type of game and cultural and historical context of the same.
E8.2 Represent graphically the elements of a video game: scenes, characters, levels, etc.
E8.3 Represent information and data visually using infographics and other cutting-edge techniques.
The course combines master classes, presentations, video capsules, case studies, role-playing games and collaborative learning.
Topic 1: Introduction to user interfaces (UI)
1.1 Definition and history
1.2 components
1.3 Characteristics
1.4 Evolution
1.5 User Experience (UX)
1.6 Process in designing a UI for Video Games
Topic 2: Color theory, composition rules and Wireframing
2.1 Color and chromatic circles
2.3 Psychology and color properties
2.5 Composition rules
2.6 Wireframing
Topic 3: User and references
3.1 Person profile
3.2 Accessibility
3.3 Benchmarking
Topic 4: Mockup
4.1 Definition
4.2 Devices
4.3 Artboards
4.4 Optimization
4.5 Anchors
Topic 5: Flowchart
5.1 Definition
5.2 elements
5.3 Type
Topic 6: Style Bible
6.1 Definition
6.2 elements
With the aim of collecting evidence of the achievement of the expected learning outcomes, the following activities of an evaluative nature will be carried out (related to all the common competences):
A1. Exercises at home: Moodboard (Evidence of learning outcomes E8.1)
The student will have to make an inspirational moodboard with visual references from a brief.
A2. Exercises at home: Wireframe and Mockup (Evidence of E8.2 and E8.3 learning outcomes)
The student will have to make a wireframe from a brief, and then make a mockup based on the structure of the wireframe and the visual aesthetics of the A1 Moodboard.
A3. Laboratory practice - Individual: Person profile, Moodboard, Benchmarking (Evidence of learning outcomes E8.1)
The student will have to make a profile person considering two chosen video games, an inspirational moodboard in order to view the UI of a new game of the same segment as the chosen video games, and perform a benchmarking to analyze and compare screens of the two games chosen.
A4. Laboratory Practice - Individual: Flowchart (Evidence of learning outcomes E8.2)
The student will have to make two flowcharts, for two different games, where the flow will be displayed between the specified screens.
A5. Laboratory practice - Individual: Mockup of several screens (Evidence of learning outcomes E8.2)
The student will have to make a mockup of the screens "Home", "Ingame" and "Popup Settings ingame" based on some design requirements.
A6. Exercise in class: Animated mockup (Evidence of learning outcomes E8.2)
The student will need to make an animation of a mockup that contains a popup.
A7. Individual work: UI design (Evidence of all learning outcomes)
The student will have to carry out a UI design project for a video game consisting of brief, person profile, benchmarking studio, moodboard, wireframes, mockups and style bible.
General criteria of the activities:
- The teacher will present a statement for each activity and the evaluation and / or rubric criteria.
- The teacher will inform of the dates and format of the delivery of the activity.
The grade of each student will be calculated following the following percentages:
A1. Exercises at home: Moodboard 5%
A2. Exercises at home: Wireframe and Mockup 10%
A3. Laboratory practice - Individual: Person profile, Moodboard, Benchmarking 10%
A4. Laboratory Practice - Individual: Flowchart 15%
A5. Laboratory practice - Individual: Mockup of several screens 25%
A6. Exercise in class: Animated mockup 5%
A7. Individual work: UI design 30%
Final grade: A1 0,05 + A2 0,1 + A3 0,1 + A4 0,15 + A5 0,25 + A6 0,05 + A7 0,3
Considerations:
- It is necessary to obtain a note equal or superior to 5 to the individual work to pass the asignatura.
- An activity not delivered or delivered late and without justification (court summons or medical matter) counts as a 0.
- It is the responsibility of the student to avoid plagiarism in all its forms. In the case of detecting a plagiarism, regardless of its scope, in some activity it will correspond to have a note of 0. In addition, the professor will communicate to the Head of studies the situation so that measures applicable in matter of sanctioning regime are taken.
Jakob, N. (2000). Designing Web Usability: The Practice of Simplicity. New Riders Publications Pearson.
Saunders, K., Novak, J. (2012). Game Development Game Interface Design. Delmar Cengage Learning.
Steve, K. (2005). Don't Make Me Think: A Common Sense Approach to Web Usability. Addison Wesley.
Nielsen Norman Group
https://www.nngroup.com/
Accessibility
http://gameaccessibilityguidelines.com/
Scolari, CA (2018). The laws of the interface. Barcelona: Gedisa Editorial.
Peter Shimpeno. Improving the User Interface through Gestalt Design Principles, MFA User Experience Designer The 26th Annual IEEE Software Technology Conference.