Teacher Juan Romero Luis
Jan 18, 2024
Unit 2
bit.ly/BWD23U2
bit.ly/BWD23U2
bit.ly/BWD23U2
Because it dictates the structure, layout and type of content
Why do you think having a clear purpose is the most important point for a website?
🎯 Group discussion exercise + group presentations (30 minutes)
Click on the website assigned to your group and try to guess what is its purpose. You can follow these steps:
🎯 Group discussion exercise + group presentations (30 minutes)
Prepare a 2 minute presentation. Use the next questions as a guideline:
📝 Deliverable Ue2.1 (20 minutes)
Write a short essay about the activity developed in class. No more than 200 words. The essay must answer the next question (please do not include the questions).
Teacher Juan Romero Luis
Jan 24, 2024
Unit 2
bit.ly/BWD23U2
bit.ly/BWD23U2
Why do you think color is important?
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacop Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
Source: Jacob Olesen.
LCH stands for Lightness, Chroma, Hue and is represented as lch(0% 0 0) [for black], lch(99.9% 0 0) [for white].
HEX comes from Hexadecimal and its representation is #000000 [for black], #ffffff [for white].
RGB stands for Red Green Blue and its representation is rgb(0, 0, 0) [for black], rgb(255, 255, 255) [for white].
Test it out: ATMOS blog.
Why do you think typo matters?
Why do you think typo matters?
🎯Quick activity (5 minutes)
Open your browser and launch your favorite fashion brand. Try to find out how many different fonts they are using.
Source: Looka.
👉
👉
📝 Deliverable Ue2.2 (20 minutes)
Write a short essay reflecting on the use of the typography of Mercadona home page. No more than 100 words. The essay must answer the next question (please do not include the questions).
Teacher Juan Romero Luis
Jan 25, 2024
Unit 2
bit.ly/BWD23U2
It refers to the process of moving between different sections or pages within a website.
What is navigation?
N
N
👉
N
Source: James Kalbach.
Main navigation
🎯 Quick activity (2 minutes)
Go to wooclap. Order the statements that explain the crucial role of main navigation by importance.
The links in the main navigation are expected to lead to pages within the site and behave in a very consistent way
👉
👉
N
Source: James Kalbach.
Local navigation
🎯 Quick activity (1 millisecond)
Open the home page of your university (UDIT) and identify the main menu and the local menu.
“Local navigation is used to access lower levels in a structure, below the main navigation pages. The term “local” implies “within a given category.” On a given page, local navigation generally shows other options at the same level of a hierarchy, as well as the options below the current page.”
👉
👉
Source: James Kalbach.
Contextual navigation
N
👉
👉
Source: James Kalbach.
Adaptative navigation
Adaptive navigation is a special kind of a contextual navigation. Its links are generated from a process referred to as collaborative or social filtering. The process relies on an algorithmic ranking of some kind, based on user behavior.
👉
👉
Source: James Kalbach.
Utility navigation connects tools and features that assist visitors in using the site. These pages are generally not part of the main topic hierarchy of the site.
🥦 e.g.: Language or country/region selectors, payment pages, search pages
👉
👉
Source: James Kalbach.
🎯 Quick activity (2 minutes)
Open the home page of your university website (UDIT) and identify the a page that uses internal navigation menu.
👉
👉
Source: James Kalbach.
👉
Source: James Kalbach.
👉
👉
Source: James Kalbach.
🎯 Quick activity (5 minutes)
Open your browser and google "what’s calisthenics”. See if the first result in from Wikipedia. If so, click on Wikipedia. Start reading and tell us what would you do next.
👉
👉
Source: James Kalbach.
👉
👉
🥦 e.g.: Facebook
Source: James Kalbach.
👉
👉
🎯 Activity (20 minutes)
Individually, open the next websites and identify:
Later, give a reasonable reason about which category does it belong to according to the available links in the website.
Finally, rate the web from 1 to 10 in terms of navigation ease.
N
🎯 Deliverable Ue2.3.
Follow these steps:
Teacher Juan Romero Luis
Jan 31, 2024
Unit 2
bit.ly/BWD23U2
bit.ly/BWD23U2
Refers to the systematic arrangement or classification of elements based on their levels of importance, significance, or relationship to one another
What is hierarchy?
[Heading 1] 1. Fruits
[Heading 2] 1.1. Citrus
[Heading 3] 1.1.1. Lemon
[Heading 3] 1.1.2. Tangerine
[Heading 3] 1.1.3. Orange
[Heading 2] 1.2. Exotic
[Heading 3] 1.2.1. Avocado
[Heading 3] 1.2.2. Carambola
[Heading 3] 1.2.3. Date
[Heading 2] 1.3. Sweet fruit
[Heading 3] 1.3.1. Apricot
[Heading 3] 1.3.2. Cherry
[Heading 3] 1.3.4. Plum
Citrus
Exotic
Lemon
Tangerine
Orange
Avocado
Carambola
Date
👉
Citrus
Exotic
Lemon
Tangerine
Orange
Avocado
Carambola
Date
👉
Citrus
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Exotic
👉
Citrus
Exotics
Lemon
Tangerine
Orange
Avocado
Carambola
Date
👉
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Citrus
Exotic
👉
How is this space called?
Whitespace
👉
Lemon
Date
👉
👉
Lemon
Date
👉
👉
👉
🥦 Example for the use of animation to hierarchy information:
👉
🎯 Analysis of visual representation of information hierarchy of a web
Let’s analyze together this website:
Why imagery is important in web desing?
N
N
👉
N
👉
JPEG
PNG
GIF
WebP
SVG
N
Pexels | Life of Vids | Life of pix | SplitShire | Stocksy | 500px | Foodiesfeed | 123RF | Unsplash
ImageOptim | Image Recycle | Jpeg.io | Compressnow | Tinyfy | Optimizilla
🎯 Deliverable Ue2.4. Visual representation (40 minutes)
PetParadise has contacted to ask you to send them a sketch of a landing page whose purpose is to engage people to obtain to loyalty card. They do not expect a work of art, just that the proposal is well structured and in line with the purpose of the landing page.
Quite by chance, the contact person is an expert in visual representation of the hierarchy of information and expects the information on the website to be very well arranged visually according to the principle of representation of the hierarchy of information seen in class today.
Use Figma or similar, to design the sketch. When finished, take a screenshot and uploaded to a word document. In the document write 150 words to justify how you hierarchically organized content.
👉
The landing page must contain the following 3 sections:
Teacher Juan Romero Luis
Feb 1, 2024
Unit 2
bit.ly/BWD23U2
bit.ly/BWD23U2
Deliverable P.0 Project idea
250 words that must include an abstract of the project. You can use these questions to create it.
bit.ly/BWD23U2
Why keep it simple?
N
N
1
2
3
1
2
3
1
2
3
Source: Nielsen Norman Group.
N
Source: Nielsen Norman Group.
Users won't read your text thoroughly in a word-by-word manner
The first two paragraphs or pieces of information must state the most important information
Start subheads, paragraphs, and bullet points with information-carrying words
N
Why content is so important?
N
Source: Nielsen Norman Group.
N
Source: Nielsen Norman Group.
N
Source: Ramotion.
N
N
N
N
Source: Ramotion.
N
Source: Ramotion.
📝 Deliverable Ue2.4. Visual representation (40 minutes)
These two websites have similar purposes.
Open both in the mobile version and analyze them
Answer these questions in no more than 150 words: