Basics of web design 2023

Teacher  Juan Romero Luis

Jan 18, 2024

Unit 2

Design and web fundaments (I)

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:

  1. 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.
  2. 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?
  3. Assess the effectiveness of the elements used to grab your attention: reflect on whether you believe the website effectively achieves its purpose.
  4. Try to identify the target audience.

  1. Charity: water.
  2. Airbnb homeowners.
  3. Talk space.
  4. One Drop.
  5. Zara.
  6. Penny Juice.
  7. Gates and Fences.
  8. ArnGren.
  9. Whole Sale Meats.
  10. Satorisan.

Principles of web design

Basics of web design 2023

Teacher  Juan Romero Luis

Jan 24, 2024

Unit 2

Design and web fundaments (II)

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

Coolors.co|Adobe Color CC| HueSnap|LOLColors|Huemint|Paletton| Color inspire|Shape factory|Colorable|
My color space|Free Mesh Gradient Collection

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

Font Identifier by Font Squirrel|Fount |What the font |Typotheque |Fontjoy |Archetype |Adobe typekit |Font Ninja extension |Google fonts

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

👉

👉

Basics of web design 2023

Teacher  Juan Romero Luis

Jan 31, 2024

Unit 2

Design and web fundaments (IV)

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
  • 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

👉

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

Basics of web design 2023

Teacher  Juan Romero Luis

Feb 1, 2024

Unit 2

Design and web fundaments (V)

bit.ly/BWD23U2

Electronics

Batteries and vehicles

Packaging

Plastics

Fashion

Construction and buildings 

Food

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.

Pingdom | WebPageTest | GTmetrix | Google Chrome DevTools | Google PageSpeed Insights