General information


Subject type: Optional

Coordinator: Adso Fernández Baena

Trimester: Second term

Credits: 4

Teaching staff: 

Barbara Astals Brull

Teaching languages


Catalan and Spanish, with documentation in English.

Skills


Specific skills
  • E8. Visually represent concepts and / or data for the ideation and creation of video games.

General competencies
  • 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.

Transversal competences
  • 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.

Description


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.

Learning outcomes


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.

 

Working methodology


The course combines master classes, presentations, video capsules, case studies, role-playing games and collaborative learning.

Contents


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

Learning activities


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.

Evaluation system


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.

REFERENCES


Basic

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/

Complementary

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.