Content begins here
Contenido de la página principal
Pulsa para colapsar
Objectives
This topic explores the more general aspects of the design process and offers an overview on the visual principles and elements that are fundamental in creating an infographic.
In detail, it is divided into three lessons:
-
User-Centered Design: This lesson highlights the importance of focusing on the user and his/her goals and needs during the design process. It provides some knowledge about the main steps to follow and it introduces the concepts of usability, context of use and requirements of a user interface or an information visualization, such as an infographic aiming to promote natural and cultural heritage;
-
Visual language and principles: In this lesson, the language of images is introduced, and the main principles of human perception are explained, thanks to the Gestalt laws, since they are a key knowledge for creating an infographic. Some examples about visual representations and user interfaces are provided. Based on this lesson, students can improve their skills regarding the analysis and the design of visual contents;
-
Basic visual elements in UX: In this last lesson of Topic 1, the use of basic visual elements, such as layout, colours, and typography, is explained showing how they can influence the usability and the user experience of a user interface or an information visualization. To facilitate understanding, several examples, also concerning natural and cultural and natural heritage, are shown.
As said, the aim of the course is that at the end the students, guided by a teacher who has followed this course, will be able to create infographics regarding natural and cultural heritage, which can be uploaded on the O-City World platform. The main objectives of the topic are described in this video.
Lesson 1. User-Centered DesignPulsa para colapsar
The following table shows all the materials prepared for the teacher to learn (T2L) and for the teacher to take them to the classroom (T2T, S2P) for Lesson 1 of Topic 1. "Design process and visual design basics in UX". The description of the different types of materials (T2L, T2T, S2P) can be found here. For each material, teachers can find in this table: its description, the student workload and where the student works. Additionally, recommendations about what to do in the classroom are included (remember that one lesson corresponds to one class of the teacher with her/his students). Follow the links in the table to discover what O-City has prepared for you:
| L1 User-Centered Design | |||||
|---|---|---|---|---|---|
| Type | Materials | Description | Student Workload | Where does the student work? | What to do in class? |
| T2L/T2T | Video T1.L1. User-Centered Design | Introduction to the main steps and principles of the design process used to create visual elements, such as UIs and infographics, with the aim of promoting cultural and natural heritage | 20' | at home (previous to the lesson -flip-teaching) or in the classroom |
Present O-City World platform (watch some examples for simplifying tasks at home)
Explain Video T1.L1 or solve doubts (if flip-teaching)
Explain Activities T1.L1.1 and T1.L1.2 (for students to do at home), and optionally propose the Extra activity T1.L1.1 |
| Pill. User needs, requirements, and functions of the O-City platform
(video) |
5' | at home | |||
| T2T | Activity T1.L1.1. Identify context of use and users’ needs | Identify a product or service visualizing information about a natural or cultural asset of a city (for example a museum collection) and define the related context of use and users’ needs | 2h | at home | |
| Activity T1.L1.2. Identify functional requirements | Based on Activity T1.L1.1, identify the functional requirements according to the users wants and needs | 2h | at home | ||
| S2P | Extra activity T1.L1.1. Research tour | Explore a museum or a natural park and collect information and data, especially regarding visual communication, to improve the delivered User Experience | 4h | in the street | |
Lesson 2. Visual language and principlesPulsa para colapsar
The following table shows all the materials prepared for the teacher to learn (T2L) and for the teacher to take them to the classroom (T2T, S2P) for Lesson 2 of Topic 1. "Design process and visual design basics in UX". The description of the different types of materials (T2L, T2T, S2P) can be found here. For each material, teachers can find in this table: its description, the student workload and where the student works. Additionally, recommendations about what to do in the classroom are included (remember that one lesson corresponds to one class of the teacher with her/his students). Follow the links in the table to discover what O-City has prepared for you:
| L2 Visual language and principles | |||||
|---|---|---|---|---|---|
| Type | Materials | Description | Student Workload | Where does the student work? | What to do in class? |
| T2L/T2T | Video T1.L2. Visual language and principles | Explanation about the main features and principles constructing graphic elements and images, in order to improve the knowledge and skills about the development of visual contents | 20' | at home (flip-teaching) or in the classroom |
Solve doubts about previous Activities T1.L1.1 and T1.L1.2
Explain Video T1.L2 or solve doubts (if flip-teaching)
Explain Activities T1.L2.1 and T1.L2.2 (for students to do at home), and optionally propose the Extra activity T1.L2.1 |
| Pill. Some examples of Gestalt principles in UX
(video) |
5' | at home | |||
| T2T | Activity T1.L2.1. Gestalt principles analysis | Analyze the Gestalt principles followed or broken by the visual elements of a website or infographic about natural or cultural heritage and compare the analyzed item with a similar one from the O-City platform (e.g., a museum with a museum) by evaluating the adequacy of choices made in the visual design | 4h | at home | |
| Activity T1.L2.2. Create icons for user interfaces and information visualizations | Create a new set of icons that represent the main contents and functions of one of the websites or infographics analysed in Activity T1.L2.1 | 4h | at home | ||
| S2P | Extra activity T1.L2.1. Evaluate the requirements with the rest of the class | Based on Activity T1.L1.2, each student carries out a short interview with the other students to understand if the requirements have been defined correctly | 3h | in the classroom | |
Lesson 3. Basic visual elements in UXPulsa para colapsar
The following table shows all the materials prepared for the teacher to learn (T2L) and for the teacher to take them to the classroom (T2T, S2P) for Lesson 3 of Topic 1. "Design process and visual design basics in UX". The description of the different types of materials (T2L, T2T, S2P) can be found here. For each material, teachers can find in this table: its description, the student workload and where the student works. Additionally, recommendations about what to do in the classroom are included (remember that one lesson corresponds to one class of the teacher with her/his students). Follow the links in the table to discover what O-City has prepared for you:
| L3 Basic visual elements in UX | |||||
|---|---|---|---|---|---|
| Type | Materials | Description | Student Workload | Where does the student work? | What to do in class? |
| T2L/T2T | Video T1.L3. Basic visual elements in UX | Explanation about how basic visual elements, such as layout, colour, and typography, can facilitate the creation of infographics, including in the field of cultural and natural heritage | 30' | at home (flip-teaching) or in the classroom |
Solve doubts about previous Activities T1.L2.1 and T1.L2.2
Explain Video T1.L3 or solve doubts (if flip-teaching)
Explain Activities T1.L3.1 and T1.L3.2 (for students to do in the classroom or at home), and optionally propose the Extra activity T1.L3.1 |
| Pill. Practical examples of good and bad layouts in visual design
(video) |
5' | at home | |||
| Pill. Practical examples of good and bad use of colour in visual design
(video) |
5' | at home | |||
| Pill. Practical examples of good and bad use of typography in visual design
(video) |
5' | at home | |||
| T2T | Activity T1.L3.1. Evaluate the icons with the rest of the class | Each student carries out a short test with the other students to evaluate the usability of the icons created in Activity T1.L2.2 | 3h | in the classroom | |
| Activity T1.L3.2. Layout, colour, and typography analysis | After analysing a UI (e.g., a website or an application) or infographic, compare it with different alternatives in layout, colour, and typography, defining what are the bad and the good practices implemented | 4h | at home | ||
| S2P | Extra activity T1.L3.1. Suggesting improvements | Suggest some changes to be made for improving the visual design and the UX of one case analyzed in the previous activities of Topic 1 (Lesson 1 and 2), according to the User-Centered Design approach and the Visual Design basics | 3h | in the classroom | |