General information


Subject type: Basic

Coordinator: Rafael Suarez Gómez

Trimester: Third term

Credits: 6

Teaching staff: 

Queralt Antú Serrano Porredon
Francisco José Pinel Cabello 

Skills


Specific skills
  • E1_Design and program the graphical interfaces of static or dynamic web portals, interactive applications and video games, following usability and accessibility criteria

  • E10_Apply processes, methods and techniques to develop creativity and innovation in audiovisual production, multimedia development and video game programming

Transversal competences
  • T2_That students have the ability to work as members of an interdisciplinary team either as one more member, or performing management tasks in order to contribute to developing projects with pragmatism and a sense of responsibility, making commitments taking into account the available resources

Description


Graphic design as a basic subject of artistic expression has a range of branches that are usually manifested primarily in different classical areas of professionalism. In this sense, although the subject has a certain breadth, this scope also promotes a global approach through diversified actions of creation and design, and in which its contents work on various strategies of ideation.
These work proposals involve the use of systems and resources of graphic representation in which new technologies are integrated, as an implicit part in the actual design processes and as their own resource, research and representation and also as indispensable tools. to approach its conception and project practice in an introductory way and throughout the creative process.
Therefore, it is a subject that balances intellectual knowledge and intuitive experiences while providing technical, artistic and management training with the aim of training professionals trained to design and develop communication systems integrating conceptualization and production of coherent form.
Based on these premises, a theoretical and practical introduction is made to graphic design applied to audiovisual media. The fundamental concepts located in the cultural and social contexts in which they are inscribed are studied and analyzed, emphasizing mainly the relationship between the graphic and the audiovisual. The aim is to develop graphic creation oriented towards integration in audiovisual environments. In this sense, digital graphic image processing and illustrative representation tools are used, applied to the different graphic aspects of design: photomontages, graphic composition, illustration, logos, film credits and web design.
In summary, there is a journey through the basics of graphic design, communication, design applications, advertising design and digital image that provides students with the basic tools in the theoretical and practical field to be able to carry out all kinds of audiovisual activities linked to graphic representation. Finally, the knowledge gained is also aimed at achieving new proposals both in the field of innovation and academic research as well as in the professional field.

Learning outcomes


Results related to the subject:

  • LO1 Master graphic design and its principles for project development and management: composition, typography and color.
  • LO2 Propose a design with special use of the connotations of audiovisual language.
  • LO3 Know and apply the basic principles of graphic design for the creation of audiovisual products, that is, for multimedia, television and cinema.
  • LO4 Generate creative and innovative graphic proposals.
  • LO5 Define the intervention of the graphic designer in audiovisual production.
  • LO6 Analyze and express content in terms of form, technique, functionality and purpose of visual information.


Complementary results:

  • RAC7 Know the systems of the intellectual property and the open licenses in the field of the graphic design and in the images in general.
  • RAC8 Achieve skills and knowledge of how Adobe Photoshop and Adobe Illustrator graphics creation software work.
  • RAC9 Write a project report with specific terminology and structure.
  • RAC10 Outline graphically and in different techniques, the first ideas of a project.
  • RAC11 Incorporate the feminist perspective into the world of graphic design

Working methodology


40 hours in person in the classroom dedicated to:   
- Lectures based on the teacher's explanation. 
- Sessions of individual or group work for the follow-up of the practices of asignatura. 
- Guided tutorials on the content and advances of the practices of asignatura. 

  

20h face-to-face dedicated to:  
- Practices carried out in computer rooms to deepen in the concepts explained in the theoretical classes and seminars by means of his application to real cases.  

  

81h non-contact hours in the classroom dedicated to autonomous learning:  
- Do individual or group work.  

  

9h non-contact hours in the classroom dedicated to guided learning:  
- Non-contact tutorials for which the student will have telematic resources such as e-mail and the resources of the Tecnocampus intranet.  
 
All theoretical concepts will be presented in theory classes (large groups). The exposition of these contents will be carried out during the first part of the theoretical sessions, being the second part dedicated to the individual or group work of class around the practices or to exercises proposed by the professor. 

 
The most practical concepts will be worked on in the laboratory (small groups). The scheduled sessions will focus on the methods and tools needed to be able to solve these activities, although it is expected that the student will complete them autonomous in terms of the development of knowledge and technical resources necessary to achieve the objectives of the practices. The teacher will facilitate access to content and resources for autonomous learning. 
 
Within the hours of autonomous learning are considered the hours that the student spends doing a reading of the notes of the corresponding theoretical class, the realization of exercises and works proposed outside the classroom, the study of manuals necessary to be able to do the practices, writing of the reports and memories of the practices and works, as well as any other type of exercise posed in the context of the asignatura. 
For each content, the bibliography (basic and complementary), web references (graphic materials, image banks, typography, etc.) will be extended as well as the student will be provided with articles and information / guides at consult regularly.  

 
Teaching method: the class sessions will be taught in person, in hybrid or online depending on the possible scenarios during the current course. In any case, all the contents can be taught electronically, with an individualized follow-up of the students' practices. 

 
The software required is Photoshop, Illustrator, and After Effects 

 

Contents


Title content 1: BASIC PRINCIPLES OF GRAPHIC DESIGN

Dedication: 40h. Large group/theory: 12h; Small group/laboratory: 6h; 
Directed activities: 2h; Independent learning: 20pm  

Description.

This content works on:  

1.1. Introduction to graphic design.  
1.2. Brief historical tour. 
1.3. visual perception  
1.4. Image and illustration.  
1.5. Form and composition.  
1.6. Colour. 
1.7. Typography.  
1.8. The graphic identity. 
Related activities Theoretical explanation class with practical examples to analyse.

…………………………………………………………………………………………………………………………………… …………

Title content 2: CREATIVITY  

Dedication: 25 hours. Large group/theory: 8h; Small group/laboratory: 4h;  

Guided activities: 2 hours; Autonomous learning: 11pm  

Description.  

This content works on: 

2.1 Introduction to creativity. 
2.2. Project Definition: "briefing". 
2.3. Graphic elaboration of ideas. 
2.4. Creative techniques and methods. 
Related activities Theoretical explanation class with practical examples to analyse.  

…………………………………………………………………………………………………………………………………… …………

Content title 3: GRAPHIC DESIGN AND AUDIOVISUAL FORMATS  

Dedication: 50h. Large group/theory: 12h; Small group/laboratory: 6h; 
Guided activities: 4 hours; Autonomous learning: 28h. 

Description. 

This content works on: 

3.1. Introduction to graphic design for audiovisual content. 
3.2. Motion Design. 
3.3. Conceptual design: aesthetic-communicative dimension of digital composition in the audiovisual field. 
3.4. Content design for broadcasting : Corporate identity in digital media. 
3.5. Conceptual design, visual design, content design in cinema. 
3.6. Graphic promotion in film production. 
Related activities Theoretical explanation class with practical examples to analyse. 

…………………………………………………………………………………………………………………………………… …………

Content title 4: GRAPHIC DESIGN AND DIGITAL PLATFORMS. 

Dedication: 35h. Large group/theory: 8h; Small group/laboratory: 4h; 
Guided activities: 2 hours; Autonomous learning: 21h.  

Description. 

This content works on:  

4.1. Introduction to graphic design on digital platforms. 
4.2. Brief historical evolution of graphical user interfaces.  
4.3. Composition and design of Reticles.  
4.4. Typography and interactives. Information architecture. 
4.5. Graphic design and storytelling interactive. 
4.6. Graphic design and social media happy social media.  
Activities linked to theoretical explanation classes with practical examples to analyse. 

 

Learning activities


1. Create your personal brand:

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual
  • Mandatory training delivery. Weight: 0% 
  • Delivery code: GMA104131.f1

This practice aims to create a symbol that identifies you as your personal brand. 
Building, empowering and controlling your own personal brand will help you generate new opportunities while making it easier for you to achieve your goals and objectives. You have to identify yourself, be aspirational and have a good presence. To do this we will do practical tasks in class that will guide you through the process. (Individual activity)

Requirements 

  • Conceptualize your image into a symbol;
  • From illustration to isotype;
  • Vectorize a handmade illustration;
  • Using tools like Adobe Illustrator;
  • Delivery in line with industry standards.

 

…………………………………………………………………………………………………………………………………… …………

2. Logo design for short film:

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual.
  • Summative delivery. Weight: 10% 
  • Delivery code: GMA104131.1

This summative practice aims to create a logo for your short.
In today's saturated market of the audiovisual industry, we must have a very successful brand if we want to stand out from the competition. 
We need to make sure that your logo is on target, studying the design trends of this dizzying industry. 
To achieve this, we will do practical tasks in class that will guide you through the process. (Individual activity)

Requirements 

  • Conceptualize your short film in a brand;
  • Learn the difference between isotype and logo;
  • Using tools like Adobe Illustrator;
  • Typographic selection
  • Chromatic selection;
  • Delivery in line with industry standards.

 

…………………………………………………………………………………………………………………………………… …………

3. Corporate Identity Manual:

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual or by teams (maximum 4 people).
  • Summative delivery. Weight: 20% 
  • Delivery code: GMA104131.2

For the optimal application of your logo, a Corporate Identity Manual must be created. A corporate identity manual is a document that lists the main graphic elements of your brand and explains how they should be applied visually. Both online and offline. (Individual or group activity)
The following points should be stated:

  1. Logo.
  2. Brand: Isotype + logo.
  3. Security and reducibility areas.
  4. Corporate color.
  5. Corporate and secondary typography.
  6. Correct and incorrect versions.
  7. Branded applications, examples of different graphic media.
  8. Promotional poster.
  9. Merchandising.
  10. Design of the home web page.
  11. Content for social networks.

Requirements 

  • Conceptualize your Corporate Identity Manual;
  • Put your visual identity in order;
  • Using tools like Adobe Illustrator;
  • Produce a manual following industry standards.

 

…………………………………………………………………………………………………………………………………… …………

4. Promotional poster for the short film: 

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual or by teams (maximum 4 people).
  • Summative delivery. Weight: 15% 
  • Delivery code: GMA104131.3

A creative, well-executed poster is a staple of a movie. Where to display the following information:

  1. Short film logo.
  2. Create a layered image to illustrate the theme of the short film.
  3. Production and distribution logos.
  4. Credit information (cast i crew).
  5. Release date. 
  6. Social media and official website.

Requirements 

  • Conceptualize a movie poster;
  • Put your visual identity and information hierarchy in order;
  • Use of tools such as Adobe Illustrator and Photoshop;
  • Produce a promotional poster following industry standards.

 

…………………………………………………………………………………………………………………………………… …………

5. Sales dossier design for pitching: 

  • Format: Practical Work
  • Delivery format: Digital for the virtual classroom. 
  • Modality: Individual or by teams (maximum 4 people).
  • Summative delivery. Weight: 10% 
  • Delivery code: GMA104131.4

Pitch is a structured form of speech with a specific goal, to sell your idea or project. Communicating your ideas is an essential process. With this summative assessment the student will have to make a pitch presentation dossier. You will learn the graphic design tools to get the best presentation of your project. Thinking about how you will communicate your ideas is key, as well as having material prepared as “PowerPoint or Keynote” for the presentation with the points to be developed; so a specific Pitch creation workshop has been created. The student is expected to communicate the story as well as present the short film script.

Requirements 
In a Pitch it is very important to capture the attention in your exhibition, so it is vital that you captivate your audience as soon as possible, so everything you count on should attract the attention of the public. To prepare your pitch you have to work on the following: 

Pitch. To help concentrate your audience. The points you have to meet: 

  1. Introduction: your name and role in the project. 
  2. Project type: The type of project: duration, genre, format. 
  3. The idea. Explain here the link between you and the project: whether it's a real story or an urban legend, whether you read it in a magazine, and so on.
  4. Content: Logline. In one sentence you have to place the listener in your story, clarify the dramatic conflict and discover your protagonist. 
  5. Conclusion. We have reached the culmination of your pitch. Think about what your audience is looking for in you. If you get the right answer your pitch will be a success: - What is your idea of ​​the original? Why should they choose your story and not another?
  6. Contact us. At the end of your presentation, the question and answer session opens and it is interesting to have your contact details on the screen.

Learning objectives 

  • Develop communication skills via a presentation; 
  • Develop planning and organization skills. 

Evaluation criteria 

  • Good overall presentation quality; 
  • Quality of the support materials used; 
  • Clarity of communication and the absence of spelling and grammar mistakes; 
  • Learn graphic design tools to get the best dossier for your project.

 

…………………………………………………………………………………………………………………………………… …………

6. Merchandising promotional for your short film:

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual.
  • Summative delivery. Weight: 10% 
  • Delivery code: GMA104131.f2

Good merchandising can be a great source of revenue for your movie promotion. We will study, on the one hand, the sale of products: we will design applications such as T-shirts, handkerchiefs, badges, hats, promotional figures… And on the other hand, the use of mock-ups.
Requirements 

  • Conceptualize your Corporate Identity Manual;
  • Put your visual identity in order;
  • Use of tools such as Adobe Illustrator and Photoshop;
  • Use of mock-ups;
  • Produce a manual following industry standards.

 

…………………………………………………………………………………………………………………………………… …………

7. Content for social networks. 

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual.
  • Summative delivery. Weight: 10% 
  • Delivery code: GMA104131.f3

A great channel for promoting any project is social media, for which we will learn how to create content templates and graphic design for networks.

  1. Choose your social channels.
  2. Create a strategic content plan.
  3. Learn the different formats for each platform (feed, stories, IGTV, poll, live broadcast, ads, purchase posts, etc.)
  4. Visual aids (e.g. photo, video, illustration, infographics, gifs, etc.)
  5. Start generating graphic designs for your posts. 

Requirements 

  • Conceptualize your social media campaign;
  • Learn the different formats for each platform;
  • Using tools like Adobe Illustrator;
  • Produce a social media communication campaign following industry standards.

 

…………………………………………………………………………………………………………………………………… …………

8. Design of the home of a web page. 

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual.
  • Mandatory training delivery. Weight: 0% 
  • Delivery code: GMA104131.f4

And what better platform to promote than a website? We will learn to design based on the most basic aspects, such as managing the administration menu and creating content. For the creation of a website you will see the basic techniques for planning a website, organizing the information in wireframes, and create a visual grammar with typography, color palettes, spacing, composition, illustration to design icons vector for navigation keypad or infographics

Requirements 

  • Learn the basics of web design;
  • Basic techniques for planning a website;
  • Organize information in wireframes;
  • Create a visual grammar with typography, color palettes, spacing, composition;
  • Illustration to design icons vector for navigation keypad or infographics. 
  • Design a website according to industry standards.

 

…………………………………………………………………………………………………………………………………… …………

9. Logo animation and create the trailer for your short film. 

  • Format: Practical
  • Delivery format: Digital via virtual classroom
  • Modality: Individual or by teams (maximum 4 people).
  • Summative delivery. Weight: 25% 
  • Delivery code: GMA104131.5

The quintessential format for promoting a film is the trailer. 
The aim of this summative practice is to make a trailer for a movie. We will learn motiongraphics to create a good animated poster of the film's logo, and the most relevant credits. 
We will analyze the workflow between graphic design and video post-production in the context of the audiovisual environment.
We will publish a trailer with royalty-free material or animation of photocompositions made in on purpose. To do this we will use Adobe Illustrator, After Effects and / or Adobe Premiere.

Requirements 

  • Learn how to create a trailer;
  • Basic techniques of storyboard;
  • Create credit titles and motiongraphics of the logo;
  • Create a visual grammar;
  • El workflow between graphic design and video post-production in the context of the audiovisual environment;
  • Edit a trailer according to industry standards.

 

 

 

Evaluation system


 The subject is evaluated based on the continuous evaluation of the learning practices.  


The correct follow-up and passing of each one of the practices of asignatura entails the total of the evaluation. Exceptionally for those students who obtain a final grade between 4 and 4,9, it is possible to take a content exam to pass the course without having to go to the second call.  

 
For the cases that suspend the continuous evaluation of the practices with a note inferior to 4, will be necessary the recovery of the asignatura in second announcement.  

 
Rules for carrying out practical activities. 

 
For each activity, you will be informed of the regulations to be followed, and of the particular conditions that govern them. Internships are mandatory. Punctuality and rigor in the delivery of the different activities will be valued as follows:  

 
-Products other than the required ones will not be accepted  
-Expired works will not be accepted  
-Work not delivered by the campus of the subject will not be accepted.  

 
Any of these three incidents will automatically affect the grade (not assessed, ie accounting 0 with respect to the final grade of the sum of the different activities). If any of the internship or follow-up activities are not performed, it will be considered unevaluated.  

 
Given the content of the subject, creativity will be valued based on an understanding of the theoretical and practical aspects specified in the work methodology, the correct organization of the information, the preparatory sketches, the search for innovative solutions, cleanliness and graphic clarity in the result of the activities and of the different works of follow-up, as well as, in the same partial.  

 
Exam description. 

 
The exam corresponds to a test of technical aptitudes through the realization of an exercise relative to the use of the softwares and contents seen in the asignatura. The development of the proposed practice must take place during the time of the exam session, proposed during the week established for this purpose by the coordination of the Tecnocampus. The student will have 2 hours to complete the exam. 

 
This question applies to the exam in its first call and retake version.  

 
Evaluation activity in recovery period. 

 
The recovery of the subject in the corresponding call is based on the realization of the examination described above, as well as on the delivery of all the practices suspended or not delivered during the development of the subject.

 

REFERENCES


Basic

KANE, J .. Typography Manual. 2ª. Barcelona: Gustavo Gili, 2012.

LARREA, Q., PÉREZ, X .. Trademarks & Trademarks Mex .. Barcelona: Gustavo Gili, 2009

LUPTON, Ellen. Intuition, action, creation. Graphic Desing Thinking. Barcelona: Gustavo Gili, 2012

MUNARI, Bruno. Design and Visual Communication. Barcelona: G. Gili, 1987.

PRING, Roger. www.color. Barcelona: G. Gili, 2001.

ROYO, Javier. Digital Design. Barcelona: Paidós, 2004.

WONG, W .. Fundamentals of design. Barcelona: Gustavo Gili, 2012.

BERGSTRÖM, Bo. I have something in my eye. Essential Visual Communication Techniques. Barcelona: Promopress, 2009

HELLER, E .. Psychology of color. How colors act on feelings and reason. Barcelona: Gustavo Gili, 2012.

PENDER, Key. The digital color in the graphic design. Guipúzcoa: ANtzA, 2003.

RÀFOLS, R., COLOMER, A. Audiovisual Design. Barcelona: Gustavo Gili, 2012

FRUTIGER, A .. Signs, Symbols, Marks, Signs. Barcelona: Gustavo Gili, 2012.

ZEEGEN, LC Principles of the new illustration. How to generate ideas, interpret a brief and promote yourself. Analysis of theory, reality and the profession in the world of manual and digital illustration. Barcelona: Gustavo Gili, 2009.

BAINES, Phil and HASLAM, Andrew. Typography. Function, Shape and Design. Barcelona: G. Gili, 2002.

BEIRUT, Michael. Fundamentals of Graphic Design. Madrid: Infinito, 2001.

CAPELLA, Juli and ÚBEDA, Ramón. COCONS. Copies and matches. In defense of innovation in design. Barcelona: Electa, 2003.

LYNCH, Patrick. Web Style Manual. Madrid: G. Gili, 2004

HORTON, Sarah; LYNCH, Patrick J. Web Style Guide, 4th Edition: Foundations of User Experience Design. 2016

NIVE FLÓREZ CALDERÓN, Blanca. Guide to designing a brand. Editorial. Lemoine. 2013

LUPTON, Ellen; COLE PHILLIPS, Jennifer. Graphic design: New fundamentals. Editorial Gustavo Gili. 2016

LESSIG, Lawrence. For a free culture. Editorial Traficantes de Sueños. 2005

SATUÉ, Enric. Graphic Design. From the origins to the present day. Madrid: Alianza, 1999.

CHAVES, N .. The corporate image. Theory and practice of institutional identification. 3ª. Barcelona: Gustavo Gili, 2012

DELGADO, JM. PAZ, F .. Illustrator CS4. Madrid: Anaya Multimedia, 2009.

SERRANO, Queralt Antú. It's all about handwriting. Barcelona: Parramon, 2016.

 

AMBROSE, G., & HARRIS, P. & SERRANO, Queralt Antú. Fundamentals of typography. Paid tribe. 2009.

Complementary

MARCUS, George H .. What is Design Today ?. New York: Harry Abrams Publishers, 2002.

BAYLEY, Stephen. The Conran Guide to Design. Madrid: Alianza, 1992

CLAZIE, I .. How to create a digital portfolio. Practical guide to show your work online. Barcelona: Gustavo Gili, 2012.

LUPTON, Ellen. Think with types. A key guide for students, designers, publishers and sculptors. Barcelona: Gustavo Gili, 2011.

DELGADO, JM .. Photoshop CS5. Madrid: Anaya Multimedia, 2010

RIVERS, C .. New typographic printing. BARCELONA: GUSTAVO GILI, 2012.

WONG, W .. Principles of color design. Barcelona: Gustavo Gili, 2008.

BRARDA, María Cecilia. Motion Graphics Design: the creative direction of TV branding. Editorial Gustavo Gili. 2016

 

DONDIS, Di, A .. The syntax of the image. Introduction to the visual alphabet. Barcelona: Gustavo Gili, 2011.

FRUTIGER, A .. The book of Typography. Barcelona: Gustavo Gili, 2007.