Juan Romero-Luis
Science Communication & UX Researcher
Basics of web design 2023
Teacher Juan Romero Luis
Jan 18, 2024
Unit 2
Design and web fundaments (I)
bit.ly/BWD23U2
One
Three
Two
bit.ly/BWD23U2
Principles of web design
bit.ly/BWD23U2
Principles of web design
Website purpose, first things first
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?
Website purpose, first things first
🎯 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:
- Identify the attention-catching elements. Is the website using any specific design elements that capture your attention? This can include color schemes, typography, imagery, or interactive features. Ask yourself why these elements are used.
- Identify the purpose of the site: Is it informational, transactional, community-building, or something else? How does the web want me to behave or interact?
- Assess the effectiveness of the elements used to grab your attention: reflect on whether you believe the website effectively achieves its purpose.
- Try to identify the target audience.
Principles of web design
Website purpose, first things first
🎯 Group discussion exercise + group presentations (30 minutes)
Prepare a 2 minute presentation. Use the next questions as a guideline:
- How long did it take you to understand what was the website about?
- How did the website's design contribute to your understanding of its purpose?
- Were there any elements that seemed distracting or confusing?
- Did the website make effective use of typography, color, and imagery to convey its message?
- How does the design align with the target audience of the website?
Principles of web design
📝 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).
- Which website did you analyze?
- Do you think the website reaches its purpose?
- What is the purpose of the website?
- What are the elements used in the website to reach its purpose?
Principles of web design
Website purpose, first things first
Basics of web design 2023
Teacher Juan Romero Luis
Jan 24, 2024
Unit 2
Design and web fundaments (II)
bit.ly/BWD23U2
bit.ly/BWD23U2
Principles of web design
Use the right amount of color
Why do you think color is important?
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacop Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
Source: Jacob Olesen.
Principles of web design
Use the right amount of color
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.
Principles of web design
Use the right amount of color
Principles of web design
Chose the right typography
Why do you think typo matters?
Principles of web design
Chose the right typography
Why do you think typo matters?
Principles of web design
Chose the right typography
🎯Quick activity (5 minutes)
Open your browser and launch your favorite fashion brand. Try to find out how many different fonts they are using.
Principles of web design
Chose the right typography
Types of fonts
Source: Looka.
👉
Tools for typography
Principles of web design
Chose the right typography
👉
📝 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).
- How many typography families are used? Which ones?
- How does the chosen typography contribute to the overall user experience and purpose of the website?
Principles of web design
Chose the right typography
Basics of web design 2023
Teacher Juan Romero Luis
Jan 25, 2024
Unit 2
Design and web fundaments (III)
bit.ly/BWD23U2
Principles of web design
Navigation rocks
It refers to the process of moving between different sections or pages within a website.
What is navigation?
N
Navigation rocks
Categories of navigation
N
Principles of web design
👉
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
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Structural
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.”
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Structural
Source: James Kalbach.
Contextual navigation
N
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Structural
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.
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Associative
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
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Utility
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.
Navigation rocks
Categories of navigation
Principles of web design
👉
👉
Internal Navigation
Source: James Kalbach.
Information web page structures
Navigation rocks
Principles of web design
👉
Source: James Kalbach.
Linear structure
Navigation rocks
Information web page structures
Principles of web design
👉
👉
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.
Hub and spoke structure
Navigation rocks
Information web page structures
Principles of web design
👉
👉
Source: James Kalbach.
Web Structure
Navigation rocks
Information web page structures
Principles of web design
👉
👉
🥦 e.g.: Facebook
Source: James Kalbach.
Hierarchical structure
Navigation rocks
Information web page structures
Principles of web design
👉
👉
🎯 Activity (20 minutes)
Individually, open the next websites and identify:
- The internal site structure
- Linear, Hub and spoke, Web, Hierarchical
- The position of the different menus:
- The main menu (and how is arranged)
- The local menu (and how is arranged)
- An internal menu (if any)
Later, give a reasonable reason about which category does it belong to according to the available links in the website.
- Structural, associative, utility
Finally, rate the web from 1 to 10 in terms of navigation ease.
Principles of web design
Navigation rocks
Principles of web design
N
🎯 Deliverable Ue2.3.
Follow these steps:
- Open the Vláda Ceské Republiky webpage and DO NOT change the language until step #3.
- Start navigating and try to find out…
- …whether that is the homepage.
- …which is the internal site structure.
- …where the main menu and the local menu are.
- …which category of navigation it belongs to and why.
- If you cannot find out these questions, change the language and try again.
- Write an essay of no more than 200 words giving justification to those three points. You must divide the essay in 4 sections.
- Homepage justification
- Internal site structure
- Position of the menus
- Category of navigation
- Website score (in terms of navigation, briefly justify your answer)
Navigation rocks
Basics of web design 2023
Teacher Juan Romero Luis
Jan 31, 2024
Unit 2
Design and web fundaments (IV)
bit.ly/BWD23U2
One
Three
Two
bit.ly/BWD23U2
Principles of web design
Visual representation of hierarchy
Refers to the systematic arrangement or classification of elements based on their levels of importance, significance, or relationship to one another
What is hierarchy?
- Lemon
- Tangerine
- Orange
- Avocado
- Carambola
- Date
- Apricot
- Cherry
- Plum
- Fruits
- Citrus
- Lemmon
- Tangerine
- Orange
- Exotic
- Avocado
- Carambola
- Date
- Sweet fruit
- Apricot
- Cherry
- Plum
- Citrus
- Fruits
- Lemon
- Tangerine
- Orange
- Date
- Carambola
- Avocado
- Apricot
- Cherry
- Plum
Principles of web design
Visual representation of 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
Principles of web design
Visual representation of hierarchy
Shape
Citrus
Exotic
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Visual representation of hierarchy
Principles of web design
👉
Citrus
Exotic
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Size
Visual representation of hierarchy
Principles of web design
👉
Citrus
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Exotic
Visual representation of hierarchy
Principles of web design
👉
Typography
Citrus
Exotics
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Visual representation of hierarchy
Principles of web design
👉
Color
Lemon
Tangerine
Orange
Avocado
Carambola
Date
Citrus
Exotic
Hierarchy level 1
Hierarchy level 2
Visual representation of hierarchy
Principles of web design
👉
How is this space called?
Whitespace
Position
Visual representation of hierarchy
Principles of web design
👉
Animation
Type of animation
Lemon
Date
Visual representation of hierarchy
Principles of web design
👉
Animation
👉
Lemon
Date
Duration of animation
Visual representation of hierarchy
Principles of web design
👉
Animation
👉
Visual representation of hierarchy
Principles of web design
👉
Animation
🥦 Example for the use of animation to hierarchy information:
Visual representation of hierarchy
Principles of web design
👉
Animation
🎯 Analysis of visual representation of information hierarchy of a web
Let’s analyze together this website:
Principles of web design
Accurately choose the imagery
Why imagery is important in web desing?
N
N
Raster vs vectors
Accurately choose the imagery
Principles of web design
👉
N
Image compression
Accurately choose the imagery
Principles of web design
👉
JPEG
PNG
GIF
WebP
SVG
Principles of web design
Accurately choose the imagery
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.
Visual representation of hierarchy
Principles of web design
👉
The landing page must contain the following 3 sections:
-
Hero Section:
- Background Image: Feature an image of happy pets enjoying PetParadise products, creating a warm and inviting atmosphere.
- Tagline: "Unlock Exclusive Benefits for Your Furry Friends with the PetParadise Loyalty Card!"
- Call-to-Action: Prominently display a button with text like "Get Your Loyalty Card" leading to the sign-up section.
-
Loyalty Card Benefits:
- Section Title: "Why Join PetParadise Loyalty?"
-
Benefits List:
- Exclusive Discounts: Access member-only discounts on a wide range of pet essentials.
- Birthday Surprises: Celebrate your pet's special day with personalized surprises.
- Early Access to Sales: Be the first to know about promotions and seasonal sales.
- Earn Rewards Points: Accumulate points with every purchase for future discounts.
- Tailored Recommendations: Receive personalized product recommendations based on your pet's preferences.
-
How to Sign Up:
- Section Title: "Joining is Pawsitively Easy!"
- Sign-Up Form: Include a simple form with fields for name, email, and pet details. Clearly state that signing up is free and open to all pet enthusiasts.
Basics of web design 2023
Teacher Juan Romero Luis
Feb 1, 2024
Unit 2
Design and web fundaments (V)
bit.ly/BWD23U2
New deadline
bit.ly/BWD23U2
Deliverable P.0 Project idea
Feb 15, 2024
250 words that must include an abstract of the project. You can use these questions to create it.
- Which industry did you choose for your project?
- What is the problem you identified in the industry chosen?
- What innovative solution do you have in mind to potentially solve the problem? What do you think would be the best way to solve the problem?
- What do you think will be the target audience of your website?
Electronics
Batteries and vehicles
Packaging
Plastics
Fashion
Construction and buildings
Food
One
Three
Two
bit.ly/BWD23U2
Principles of web design
The simpler the clearer
Why keep it simple?
N
Principles of web design
F-Shaped pattern
N
1
2
3
1
2
3
1
2
3
Source: Nielsen Norman Group.
Principles of web design
F-Shaped pattern
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
Principles of web design
Content is king
N
Why content is so important?
Principles of web design
Grid-based layout
N
Source: Nielsen Norman Group.
Principles of web design
Grid-based layout
N
Source: Nielsen Norman Group.
Principles of web design
Grid-based layout
N
Source: Ramotion.
Principles of web design
Mobile first, mobile friendly
N
Principles of web design
Mobile first, mobile friendly
N
Principles of web design
Mobile first, mobile friendly
N
Principles of web design
Page Speed
N
Source: Ramotion.
Principles of web design
Page Speed
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:
- Which of these websites is faster?
- Which of these pages makes the best use of the grid in the mobile version?
- Which one do you think achieves its purpose most effectively?
Unit 2. Design and web fundaments | Basics of web design 2023
By Juan Romero-Luis
