Subscribe here

SLIDES FOR
THEORY
LECTURES
DON’T SKIP THEM, THEY ARE
SUPER IMPORTANT 🤓)

Follow me here
(
 📖 TABLE OF CONTENTS THEORY LECTURES CLICK THE TITLES

1 A High-Level Overview of Web Development 13 box-sizing: border-box 25 Web Design Rules #9 User Experience UX

2 Watch Before You Start! 14 A Flexbox Overview 26 The Website-Personalities-Framework

3 Introduction to HTML 15 A CSS Grid Overview 27 Web Design Rules #10 I Elements and Components

4 Introduction to CSS 16 Overview of Web Design and Website Personalities 28 Switching flex-direction to column

5 Working With Colors 17 Web Design Rules #1 Typography 29 Vertical center with absolute position and transform

6 CSS Theory #1 Conflicts Between Selectors 18 Web Design Rules #2 Colors 30 Web Design Rules #10 II Layout Patterns

7 CSS Theory #2 Inheritance and Universal Selector 19 Web Design Rules #3 Images and Illustrations 31 The 7 Steps to a Great Website

8 CSS Theory #3 The CSS Box Model 20 Web Design Rules #4 Icons 32 Defining and Planning the Project Steps 1 and 2

9 CSS Theory #4 Types of Boxes 21 Web Design Rules #5 Shadows 33 Sketching Initial Layout Ideas Step 3

10 CSS Theory #5 Absolute Positioning 22 Web Design Rules #6 Border-radius 34 Responsive Design Principles

11 The 3 Ways of Building Layouts 23 Web Design Rules #7 Whitespace 35 How Media Queries Work

12 Using Floats 24 Web Design Rules #8 Visual Hierarchy 36 How to Select Breakpoints
:
:
:
:
:
:
:
:
:
:
:
:
:
:
-
-
:
:
(
(
)
(
)
)
:
(
)
 SECTION 01
WELCOME AND FIRST
STEPS
—

 SECTION
WELCOME AND FIRST STEPS

LECTURE
A HIGH LEVEL OVERVIEW OF WEB
DEVELOPMENT
-
 FRONT END VS. BACK END DEVELOPMENT

STATIC Website where files are simply

WEBSITE sent to browser as they are

📄 index.html 📄 style.css
📄 index.html 📄 style.css
https://omnifood.dev
📄 script.js 📄 image.jpg
📄 script.js 📄 image.jpg

REQUEST WEB
BROWSER SERVER
👩💻 🌐
RESPONSE

The 3 languages that

browsers understand

The process FRONT END

of writing DEVELOPMENT
-

-
-
 FRONT END VS. BACK END DEVELOPMENT

DYNAMIC Website files are

WEBSITE “assembled” on
the server
📄 index.html 📄 style.css
https://udemy.com
📄 script.js 📄 image.jpg

APP
REQUEST WEB ⚙
BROWSER SERVER
👩💻 🌐
RESPONSE DB
🗄 etc...
The 3 languages that
browsers understand

Back-end
The process FRONT END BACK END languages that
of writing DEVELOPMENT DEVELOPMENT run on servers

-
-

-
-
THE 3 LANGUAGES OF THE FRONT END

CONTENT NOUNS

<p></p>
means “paragraph”

ADJECTIVES VERBS

p.hide();
p {color: red}
means “hide the
means “the
paragraph”
paragraph text is red”

PRESENTATION PROGRAMMING LANGUAGE DYNAMIC

EFFECTS AND WEB APPLICATIONS

:
-
SECTION
WELCOME AND FIRST STEPS

LECTURE
WATCH BEFORE YOU START!
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

😱 If this is your first time ever writing code, please don’t get overwhelmed. It’s 100% normal that you will
not understand everything at the beginning. Just don’t think “I guess coding is not for me”!
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

👩💻 You need to code along with me! You will learn ZERO HTML and CSS skills by just sitting and watching me
code. You really have to write code YOURSELF!
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

📝 If you want the course material to stick, take notes. Notes on code syntax, notes on theory concepts,
notes on everything!

Totally non-coding... Try to

understand a single word 😂
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

🤓 Try all the coding challenges! Try to do your best, but if you get stuck for too long, watch the solution.
Don’t beat yourself up if you can’t figure it out! Just rewatch the lectures that were covered in the
challenge, try to understand them better, and move on.

Watch for this sign!

SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

⏳ Before moving on from a section, make sure that you understand exactly what was covered. Take a
break, review the code we wrote, review your notes, review the projects we built, and maybe even write
some code yourself.

✅ ✅ ✅
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

⁉ If you have an error or a question, start by trying to solve it yourself! This is essential for your progress. If
you can’t solve it, check the Q&A section. If that doesn’t help, you can ask a new question. Use a short
description, and post code on codepen.io.

😲 3
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

🖥 I recorded this course on a Mac, but everything works the exact same way on Windows or Linux. If
something doesn’t work on your computer, it’s NOT because you’re using a different OS.
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

😍 Most importantly, have fun! It’s so rewarding to see something that YOU have built YOURSELF! So if you’re
feeling frustrated, stop whatever you’re doing, and come back later!

And I mean REAL fun 😅

 SECTION 02
HTML FUNDAMENTALS
—

SECTION
HTML FUNDAMENTALS

LECTURE
INTRODUCTION TO HTML
WHAT IS HTML?

HTML

👉 HyperText Markup Language

👉 HTML is a markup language that web developers use to structure and

describe the content of a webpage (not a programming language)

👉 HTML consists of elements that describe different types of content:

paragraphs, links, headings, images, video, etc.

👉 Web browsers understand HTML and render HTML code as websites

ANATOMY OF AN HTML ELEMENT

👉 Element

<p>HTML is a markup language</p>

👉 Opening tag: Name 👉 Content: Content of the element, in 👉 Closing tag: Same as
of the element, this example text. But it might be opening tag, but with
wrapped in < and > another element (child element). Some a /. When element has
elements have no content (e.g. <img>) no content, it’s omitted
 SECTION 03
CSS FUNDAMENTALS
—

SECTION
CSS FUNDAMENTALS

LECTURE
INTRODUCTION TO CSS
WHAT IS CSS?

CSS

👉 Cascading Style Sheets

👉 CSS describes the visual style and presentation of the content

written in HTML

👉 CSS consists of countless properties that developers use to format

the content: properties about font, text, spacing, layout, etc.

HOW WE SELECT AND STYLE ELEMENTS

A CSS RULE
Selector Declaration block

h1 {
color: blue;
text-align: center;
font-size: 20px; Declaration / Style
}

Property Value

SECTION
CSS FUNDAMENTALS

LECTURE
WORKING WITH COLORS
THE RGB MODEL

R G B
255 0 0
👉 RGB Model: Every color can
be represented by a R G B R G B
combination of RED, GREEN 255 255 0 255 0 255
and BLUE

👉 Each of the 3 base colors

can take a value between 0
R G B R G B
and 255, which leads to 16.8
255 255 255 0 0 0
million different colors

0 255

0 255 R G B R G B
0 255 0 0 0 255
0 255

R G B
0 255 255

DEFINING COLORS IN CSS

1 RGB / RGBA NOTATION 2 HEXADECIMAL NOTATION

👉 Regular RGB model 👉 Instead of using a scale from 0 to 255, we go

from 0 to ff 255 in hexadecimal numbers)
rgb(0, 255, 255)
#00ffff
👉 RGB with transparency (“alpha”)
👉 Shorthand, when all colors are identical pairs
rgba(0, 255, 255, 0.3)
#0ff

💡 In practice, we mostly use hexadecimal

#f4b33f colors, and rgba when we need transparency

rgb(244, 179, 63) rgba(244, 179, 63, 0.7)

👉 Color picker in VS Code

(
SHADES OF GREY

👉 When colors in all 3 rgb(0, 0, 0) / #000000 / #000

channels are the same,

we get a grey color
rgb(69, 69, 69) / #444444 / #444
👉 There are 256 pure
grays to choose from

rgb(183, 183, 183) / #b7b7b7

rgb(255, 255, 255) / #ffffff / #fff

 SECTION
CSS FUNDAMENTALS

LECTURE
CSS THEORY #1 CONFLICTS
BETWEEN SELECTORS
:
CONFLICTING SELECTORS AND DECLARATIONS

🤔 There are multiple selectors selecting the

same element. Which one of them applies?

🤓 All of them. All rules and properties are applied!

🤔 But there are conflicting font-size

declarations! Is it 18px, or 20px, or 22px?

🤓 Let’s see how it works...

 RESOLVING CONFLICTING DECLARATIONS

Highest 5 Declarations marked !important

priority
No important! ?

4 Inline style (style attribute in HTML

No inline style?

👉 Last selector in
3 ID #) selector Multiple? code applies *
No # selector?

2 Class (.) or pseudo-class (:) selector

Multiple?
No . or : selector?

1 Element selector (p, div, li, etc.)

Multiple?
No element selector?
👉 There is an ID selector
Lowest
0 Universal selector (*) (#author-text), so for the
priority
conflicting font-size property,
this is the selector that applies
☝ * It’s a bit more complicated in reality
(
)
 SECTION
CSS FUNDAMENTALS

LECTURE
CSS THEORY #2 INHERITANCE
AND THE UNIVERSAL SELECTOR
:
 HOW INHERITANCE WORKS

Parent
element

The border property

does NOT get inherited

OVERRIDING
INHERITED STYLES

☝ Not all properties get inherited. It’s mostly ones related to text: font-family, font-size, font-weight, font-
style, color, line-height, letter-spacing, text-align, text-transform, text-shadow, list-style, etc.
 SECTION
CSS FUNDAMENTALS

LECTURE
CSS THEORY #3 THE CSS BOX
MODEL
:
THE CSS BOX MODEL
Visible part of element on the page

margin 👉 Content: Text, images, etc.

padding 👉 Border: A line around the element,

still inside of the element

👉 Padding: Invisible space around the

width
content, inside of the element

height 👉 Margin: Space outside of the

CONTENT
element, between elements

FILL AREA border 👉 Fill area: Area that gets filled with
background color or background
image

ANALOGY FOR THE CSS BOX MODEL

border

Content area

margin

padding
ELEMENT HEIGHT AND WIDTH CALCULATION

Final element width = left border + left padding +

width + right padding + right border

Final element height = top border + top padding

+ height + bottom padding + bottom border

👉 We can specify all these values using CSS properties

👉 This is the default behavior, but we can change it

 SECTION
CSS FUNDAMENTALS

LECTURE
CSS THEORY #4 TYPES OF
BOXES
:
BLOCK LEVEL ELEMENTS

👉 Elements are formatted visually as blocks

👉 Elements occupy 100% of parent element’s width,

no matter the content

👉 Elements are stacked vertically by default, one

after another

👉 The box-model applies as showed earlier

Default elements: body, main, header,

footer, section, nav, aside, div, h1-h6,
p, ul, ol, li, etc.

With CSS display: block

:
-

INLINE ELEMENTS

👉 Occupies only the space necessary for its content

👉 Causes no line-breaks after or before the element

👉 Box model applies in a different way: heights and

widths do not apply

👉 Paddings and margins are applied only

horizontally (left and right)

Default elements: a, img, strong, em,

button, etc.

With CSS display: inline

:

SUMMARY INLINE, BLOCK LEVEL AND INLINE BLOCK BOXES

BLOCK LEVEL INLINE BLOCK INLINE

BOXES BOXES BOXES

👉 Elements formatted visually as 👉 Looks like inline from the 👉 Occupies only content’s space
blocks outside, behaves like block-
level on the inside 👉 Causes no line-breaks
👉 100% of parent’s width
👉 Occupies only content’s space 👉 Box model is different: heights
👉 Vertically, one after another and widths do not apply
👉 Causes no line-breaks
👉 Box-model applies as showed 👉 Paddings and margins only
👉 Box-model applies as showed horizontal (left and right)

display: inline-block

-
-

-
-
 SECTION
CSS FUNDAMENTALS

LECTURE
CSS THEORY #5 ABSOLUTE
POSITIONING
:
NORMAL FLOW VS. ABSOLUTE POSITIONING

NORMAL ABSOLUTE
FLOW POSITIONING

👉 Default positioning 👉 Element is removed from the

normal flow: “out of flow”
👉 Element is “in flow”
👉 No impact on surrounding
👉 Elements are simply laid out elements, might overlap them
according to their order in the
HTML code 👉 We use top, bottom, left, or
right to offset the element
from its relatively positioned
container

Default positioning
position: absolute
position: relative

UNDERSTANDING ABSOLUTE POSITIONING

100px

.el {
200px position: absolute;
top: 100px;
left: 200px;
background-color: #f4b33f;
}

.container {
position: relative;
background-color: #f7e6c1;
}

 SECTION 04
LAYOUTS FLOATS,
FLEXBOX, AND CSS
GRID FUNDAMENTALS
:
—

 SECTION
LAYOUTS FLOATS, FLEXBOX, AND
CSS GRID FUNDAMENTALS

LECTURE
THE 3 WAYS OF BUILDING
LAYOUTS
:
WHAT DOES “LAYOUT” MEAN?

LAYOUT

👉 Layout is the way text, images and other

content is placed and arranged on a webpage

👉 Layout gives the page a visual structure, into

which we place our content

👉 Building a layout: arranging page elements

into a visual structure, instead of simply having
them placed one after another (normal flow)

PAGE LAYOUT VS. COMPONENT LAYOUT

PAGE
LAYOUT

COMPONENT LAYOUT
THE 3 WAYS OF BUILDING LAYOUTS WITH CSS

1 2 3

FLOAT LAYOUTS FLEXBOX CSS GRID

The old way of building Modern way of laying out For laying out element in a
layouts of all sizes, using the elements in a 1-dimensional fully-fledged 2-dimensional
float CSS property. Still used, row without using floats. grid. Perfect for page layouts
but getting outdated fast. Perfect for component layouts. and complex components.
 SECTION
LAYOUTS FLOATS, FLEXBOX, AND
CSS GRID FUNDAMENTALS

LECTURE
USING FLOATS
:
ABSOLUTE POSITIONING VS. FLOATS

NORMAL ABSOLUTE
FLOATS
FLOW POSITIONING

👉 Default positioning

👉 Element is “in flow”

👉 Element is removed from the
normal flow: “out of flow” = 👉 Element is removed from the
normal flow: “out of flow”

👉 Elements are simply laid out

👉 No impact on surrounding
elements, might overlap them ≠ 👉 Text and inline elements will
wrap around the floated
according to their order in the element
HTML code 👉 We use top, bottom, left, or
right to offset the element 👉 The container will not adjust its
from its relatively positioned height to the element
container

Default positioning float: left

position: absolute
position: relative float: right

 SECTION
LAYOUTS FLOATS, FLEXBOX, AND
CSS GRID FUNDAMENTALS

LECTURE
BOX SIZING BORDER BOX
-
:
:
-
THE BOX MODEL WITH BOX SIZING BORDER BOX

box-sizing: border-box

Final element width = right border + right padding + width + left padding + left border

Final element height = top border + top padding + height + bottom padding + bottom border
-
:
-
 SECTION
LAYOUTS FLOATS, FLEXBOX, AND
CSS GRID FUNDAMENTALS

LECTURE
A FLEXBOX OVERVIEW
:
WHAT IS FLEXBOX?

FLEXBOX

👉 Flexbox is a set of related CSS properties for building 1-dimensional layouts

👉 The main idea behind flexbox is that empty space inside a container element
can be automatically divided by its child elements

👉 Flexbox makes it easy to automatically align items to one another inside a

parent container, both horizontally and vertically

👉 Flexbox solves common problems such as vertical centering and creating

equal-height columns

👉 Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner
HTML and CSS code

FLEXBOX TERMINOLOGY

Flex items Flex container

MAIN AXIS

CROSS AXIS

display: flex
 MAIN AXIS

FLEX CONTAINER FLEX ITEMS

CROSS AXIS

align-self: auto | stretch | flex-start | flex-

1 gap: 0 | <length> 1
end | center | baseline
👉 To create space between items, without using margin
👉 To overwrite align-items for individual flex items

justify-content: flex-start | flex-end | center |

2
space-between | space-around | space-evenly 2 flex-grow: 0 | <integer>

👉 To align items along main axis (horizontally, by default) 👉 To allow an element to grow 0 means no, 1 means yes)

align-items: stretch | flex-start | flex-end |

3 3 flex-shrink: 1 | <integer>
center | baseline
👉 To allow an element to shrink 0 means no, 1 means yes)
👉 To align items along cross axis (vertically, by default)

flex-direction: row | row-reverse | column | 4 flex-basis: auto | <length>

4
column-reverse
👉 To define an item’s width, instead of the width property
👉 To define which is the main axis

5 flex-wrap: nowrap | wrap | wrap-reverse 5 flex: 0 1 auto | <int> <int> <len>

👉 To allow items to wrap into a new line if they are too large 👉 Recommended shorthand for flex-grow, -shrink, -basis.

align-content: stretch | flex-start | flex-end | 6 order: 0 | <integer>

6
center | space-between | space-around
👉 Controls order of items. 1 makes item first, 1 makes it last
👉 Only applies when there are multiple lines (flex-wrap: wrap)
-
(
(
+
+
 SECTION
LAYOUTS FLOATS, FLEXBOX, AND
CSS GRID FUNDAMENTALS

LECTURE
A CSS GRID OVERVIEW
:
WHAT IS CSS GRID?

CSS GRID

👉 CSS Grid is a set of CSS properties for building 2-dimensional layouts

👉 The main idea behind CSS Grid is that we divide a container element into
rows and columns that can be filled with its child elements

👉 In two-dimensional contexts, CSS Grid allows us to write less nested HTML

and easier-to-read CSS

👉 CSS Grid is not meant to replace flexbox! Instead, they work perfectly
together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid.

BASIC CSS GRID TERMINOLOGY

Grid container

COLUMN Grid items

AXIS

display: grid
ROW AXIS

 MORE CSS GRID TERMINOLOGY

1 2 3 4
1

Grid track/row
Grid lines
COLUMN
AXIS 2

Gutters (gaps)

3
Grid track/column Grid cell (might be
filled by a grid item
or not)

ROW AXIS

 GRID CONTAINER GRID ITEMS

grid-template-rows: <track size>* grid-column: <start line> / <end line> | span <number>
1 1
grid-template-columns: <track size>* grid-row: <start line> / <end line> | span <number>

👉 To establish the grid row and column tracks. One length unit 👉 To place a grid item into a specific cell, based on line numbers.
for each track. Any unit can be used, new fr fills unused space span keyword can be used to span an item across more cells

row-gap: 0 | <length> justify-self: stretch | start | center | end

2 gap: 0 | <length> 2
column-gap: 0 | <length> align-self: stretch | start | center | end

👉 To create empty space between tracks 👉 To overwrite justify-items / align-items for single items

justify-items: stretch | start | center | end

3
align-items: stretch | start | center | end

👉 To align items inside rows / columns (horizontally / vertically)

justify-content: start | start | center | end | ...

4
align-content: start | start | center | end | ...

👉 To align entire grid inside grid container. Only applies if

container is larger than the grid
☝ This list of CSS Grid properties is not exhaustive, but enough to get started.






 SECTION 05
WEB DESIGN RULES
AND FRAMEWORK
—

SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
OVERVIEW OF WEB DESIGN AND
WEBSITE PERSONALITIES
WEB DESIGN VS. DEVELOPMENT

Web designers create the overall look and feel of a website

Web developers implement the design using HTML, CSS and JavaScript code

DESIGNER DEVELOPER USER

DESIGNER DEVELOPER
+
WHY TAKE DESIGN SERIOUSLY?

GOOD DESIGN BAD DESIGN

✅ Creates an immediate and lasting good 🚫 Makes users believe the brand doesn’t
impression of the brand or product; really care about their product or service;

✅ Makes the user trust the brand right 🚫 Makes the user insecure about trusting
away; the brand;

✅ Increases the user’s perceived value of the 🚫 Makes the brand or product seem
brand or product; “cheap”;

✅ Gives users exactly what they were 🚫 Leaves users confused, and makes it
looking for when coming to the site, e.g. hard to for them to reach their goal.
purchasing a product or finding information.

ANYONE CAN LEARN GOOD DESIGN!

Good web design Everyone can learn

is not subjective 👉 basics by following a
or creative framework/system

Distilled into Divided in 9 Rules will be

100s of well-
easy-to-learn and different areas of applied based on
designed sites
easy-to-apply design: website
deconstructed
rules ingredients personality




WEB DESIGN INGREDIENTS YOU WILL LEARN ABOUT

1 Typography 6 Border-radius

2 Colors 7 Whitespace

3 Images/Illustrations 8 Visual Hierarchy

4 Icons 9 User Experience

5 Shadows 10 Components/Layout

☝ Design decisions for each

ingredient are based on
website personality
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small
3
typefaces, and a very structured layout. Common in big corporations
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small
3
typefaces, and a very structured layout. Common in big corporations

Bold/Confident: Makes an impact, by featuring big and bold typography,

4
paired with confident use of big and bright colored blocks
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small
3
typefaces, and a very structured layout. Common in big corporations

Bold/Confident: Makes an impact, by featuring big and bold typography,

4
paired with confident use of big and bright colored blocks

Calm/Peaceful: For products and services that care, transmitted by

5
calming pastel colors, soft serif headings, and matching images/illustrations
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small
3
typefaces, and a very structured layout. Common in big corporations

Bold/Confident: Makes an impact, by featuring big and bold typography,

4
paired with confident use of big and bright colored blocks

Calm/Peaceful: For products and services that care, transmitted by

5
calming pastel colors, soft serif headings, and matching images/illustrations

Startup/Upbeat: Widely used in startups, featuring medium-sized sans-

6
serif typefaces, light-grey text and backgrounds, and rounded elements
OVERVIEW OF WEBSITE PERSONALITIES

Serious/Elegant: For luxury and elegance, based on thin serif typefaces,

1
golden or pastel colors, and big high-quality images

Minimalist/Simple: Focusses on the essential text content, using small or

2
medium-sized sans-serif black text, lines, and few images and icons

Plain/Neutral: Design that gets out of the way by using neutral and small
3
typefaces, and a very structured layout. Common in big corporations

Bold/Confident: Makes an impact, by featuring big and bold typography,

4
paired with confident use of big and bright colored blocks

Calm/Peaceful: For products and services that care, transmitted by

5
calming pastel colors, soft serif headings, and matching images/illustrations

Startup/Upbeat: Widely used in startups, featuring medium-sized sans-

6
serif typefaces, light-grey text and backgrounds, and rounded elements

Playful/Fun: Colorful and round designs, fueled by creative elements like

7
hand-drawn icons or illustrations, animations, and fun language
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #1
TYPOGRAPHY
:
 SOME CONCEPTS FIRST...

TYPOGRAPHY

“ Typography is the art and technique

of arranging type to make written
language legible, readable and appealing 
when displayed.
Wikipedia
–
SOME CONCEPTS FIRST...

SERIF VS SANS SERIF

Serifs

Text Text
Serif typeface Sans-serif typeface

👉 Creates a traditional/ 👉 Modern look and feel

classic look and feel
👉 Clean and simple
👉 Conveys trustworthiness
👉 Easier to choose for
👉 Good for long text beginner designer!

USE GOOD TYPEFACES

1 Use only good and popular typefaces and play it safe

SANS SERIF 🛠 TOOLBOX

Inter

Open Sans

Roboto

Montserrat
All tools are listed
on my resources
Work Sans page at jonas.io

Lato
-
USE GOOD TYPEFACES

1 Use only good and popular typefaces and play it safe

SERIF 🛠 TOOLBOX

Merriweather

Aleo

Playfair Display

Cormorant
All tools are listed
on my resources
Cardo page at jonas.io

Lora
USE GOOD TYPEFACES

1 Use only good and popular typefaces and play it safe

2 It’s okay to use just one typeface per page! If you want more, limit to 2 typefaces.

3 Choose the right typeface according to your website personality:

👉 Choose the right personality for your website (more on this later)

👉 Decide between a serif and sans-serif typeface

👉 Experiment with all the “good” typefaces (and other typefaces from Google Fonts! to see
which ones best fits your website’s message (this will come with experience)

👉 You can keep trying different typefaces as you design and build the page

)
 USE GOOD FONT SIZES AND WEIGHTS

4 When choosing font-sizes, limit choices! Use a

“type scale” tool or other pre-defined range Adapted from a Minor
Third 1.2 type scale
with base 10px
(
)
 16px
USE GOOD FONT SIZES AND WEIGHTS
85px, 700

24px
4 When choosing font-sizes, limit choices! Use a
“type scale” tool or other pre-defined range 32px

5 Use a font size between 16px and 32px for

“normal” text

6 For long text (like a blog post), try a size of 42px

20px or even bigger

18px
7 For headlines, you can go really big 50px+)
and bold 600 , depending on personality

64px, 700
8 For any text, don’t use a font weight
under 400 (regular)

20px
(
+
)
(
 CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line

😃 😡
110 chars

95 112 chars

65 72 chars
-
-
CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line

10 For normal-sized text, use a line height

between 1.5 and 2. For big text, go below 1.5
😡
☝ The smaller or longer the text, the larger the line
height needs to be!
1.5
😃
1.2
2

1.31

1.52 2.2
 CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line 😃

3.5px
10 For normal-sized text, use a line height
between 1.5 and 2. For big text, go below 1.5
☝ The smaller or longer the text, the larger the line
height needs to be!

11 Decrease letter spacing in headlines, if it looks

unnatural (this will come from experience)
😐
0px
-
CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line 😃

10 For normal-sized text, use a line height
between 1.5 and 2. For big text, go below 1.5
☝ The smaller or longer the text, the larger the line
height needs to be!

11 Decrease letter spacing in headlines, if it looks

unnatural (this will come from experience)
😐
12 Experiment with all caps for short titles. Make
them small and bold and increase letter-spacing
CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line 😃

10 For normal-sized text, use a line height
between 1.5 and 2. For big text, go below 1.5
☝ The smaller or longer the text, the larger the line
height needs to be!

11 Decrease letter spacing in headlines, if it looks 😐

unnatural (this will come from experience)

12 Experiment with all caps for short titles. Make

them small and bold and decrease letter-spacing

13 Usually, don’t justify text

CREATE A GOOD READING EXPERIENCE

9 Use less than 75 characters per line 😃

10 For normal-sized text, use a line height
between 1.5 and 2. For big text, go below 1.5
☝ The smaller or longer the text, the larger the line
height needs to be!

11 Decrease letter spacing in headlines, if it looks

unnatural (this will come from experience)
😡
12 Experiment with all caps for short titles. Make
them small and bold and decrease letter-spacing

13 Usually, don’t justify text

14 Don’t center long text blocks. Small blocks are fine

 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #2 COLORS
:
CHOOSE THE RIGHT COLOR

1 Make the main color match your website’s personality: colors convey meaning!

Red draws a lot of attention, and symbolizes power, passion, and excitement

Orange is less aggressive, and conveys happiness, cheerfulness, and creativity

Yellow means joy, brightness, and intelligence

Greens represents harmony, nature, growth, and health

Blue is associated with peace, trustworthiness, and professionalism

Purple conveys wealth, wisdom, and magic

Pink represents romance, care, and affection

Brown is associated with nature, durability and comfort

Black symbolizes power, elegance and minimalism, but also grief and sorrow
CHOOSE THE RIGHT COLOR

1 Make the main color match your website’s personality: colors convey meaning!

2 Use a good color tone! Don’t choose a random tone or CSS named colors.

🛠 TOOLBOX
CHOOSE THE RIGHT COLOR

1 Make the main color match your website’s personality: colors convey meaning!

2 Use a good color tone! Don’t choose a random tone or CSS named colors.

🛠 TOOLBOX
ESTABLISH A COLOR SYSTEM

3 You need at least two types of colors in your color palette: a main color and a grey color

4 With more experience, you can add more colors: accent (secondary) colors (use a tool)

MAIN ACCENT GREY

COLOR
PALETTE
ESTABLISH A COLOR SYSTEM

3 You need at least two types of colors in your color palette: a main color and a grey color

4 With more experience, you can add more colors: accent colors (use a tool)

5 For diversity, create lighter and darker “versions” (tints and shades)
🛠 TOOLBOX

MAIN ACCENT GREY

TINTS
(“LIGHTER”)

COLOR
palleton.com
PALETTE

SHADES
(“DARKER”)
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page

7 Use colors to add interesting accents or make entire components or sections stand out
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page

7 Use colors to add interesting accents or make entire components or sections stand out
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page

7 Use colors to add interesting accents or make entire components or sections stand out
WHEN AND HOW TO USE COLORS

6 Use your main color to draw attention to the most important elements on the page

7 Use colors to add interesting accents or make entire components or sections stand out

8 You can try to use your color strategically in images and illustrations
COLORS AND TYPOGRAPHY

9 On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text

😃 😐
COLORS AND TYPOGRAPHY

9 On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text

10 Text should usually not be completely black. Lighten if up it looks heavy and uninviting

😃 😐
 COLORS AND TYPOGRAPHY

9 On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text

10 Text should usually not be completely black. Lighten it up it looks heavy and uninviting

♿ 11 Don’t make text too light! Use a tool to check contrast between text and background colors
☝ Contrast ratio needs to be at least 4.5 1 for normal text and 3 1 for large text 18px+)

😃 😡
13 1 2.9 1

5.1 1 2.9 1
:
:
:
:
:
:
(
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #3 IMAGES
AND ILLUSTRATIONS
:
USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

😃
USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

?
🤔

?
? ?
 USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

3 Prefer original images. If not possible, use original-looking stock images (not generic ones!

😃 PROFESSIONAL PHOTOGRAPHER 🙂 HIGH QUALITY STOCK PHOTO

-
)
 USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

3 Prefer original images. If not possible, use original-looking stock images (not generic ones!

😃 PROFESSIONAL PHOTOGRAPHER 🙂 HIGH QUALITY STOCK PHOTO

-
)
USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

3 Prefer original images. If not possible, use original-looking stock images (not generic ones!

😃 PROFESSIONAL PHOTOGRAPHER 😡 GENERIC LOOKING STOCK PHOTO

-
)
USE GOOD IMAGES

1 Different types of images: product photos, storytelling photos, illustrations, patterns

2 Use images to support your website’s message and story. So only use relevant images!

3 Prefer original images. If not possible, use original-looking stock images (not generic ones!

🛠 TOOLBOX

Use images from

here instead (for
free 😃)

)
USE IMAGES WELL

4 Try to show real people to trigger user’s emotions

USE IMAGES WELL

4 Try to show real people to trigger user’s emotions

5 If necessary, crop images to fit your message

USE IMAGES WELL

4 Try to show real people to trigger user’s emotions

5 If necessary, crop images to fit your message

6 Experiment combining photos, illustrations and patterns

HANDLING TEXT ON IMAGES

7 Method #1 Darker or brighten image (completely or partially, using a gradient)

😃 😡
:
HANDLING TEXT ON IMAGES

7 Method #1 Darker or brighten image (completely or partially, using a gradient)

8 Method #2 Position text into neutral image area

:
:
HANDLING TEXT ON IMAGES

7 Method #1 Darker or brighten image (completely or partially, using a gradient)

8 Method #2 Position text into neutral image area

9 Method #3 Put text in a box

:
:
:
 SOME TECHNICAL DETAILS

10 To account for high-res screens, make image dimensions 2x as big as their displayed size

👉 Scale factor: Actual pixels the screen contains / Pixels

represented on screen

👉 On high-res screens, scale factor is 2x or even 3x, on “normal”

screens it’s just 1x 1 physical pixel 1 design pixel)

2x

Visible: 300 300 px

Original image: 600 600 px

@
x
(

x
=
 SOME TECHNICAL DETAILS

10 To account for high-res screens, make image dimensions 2x as big as their displayed size

👉 Scale factor: Actual pixels the screen contains / Pixels

represented on screen

👉 On high-res screens, scale factor is 2x or even 3x, on “normal”

screens it’s just 1x 1 physical pixel 1 design pixel)

😡 Blurry image on
high-res screen

1x

😃 Looks okay on
low-res screen

Visible: 300 300 px Original image: 300 300 px

@
x
(

x
=
SOME TECHNICAL DETAILS

10 To account for high-res screens, make image dimensions 2x as big as their displayed size

11 Compress images for a lower file size and better performance

🛠 TOOLBOX

😡 😃
SOME TECHNICAL DETAILS

10 To account for high-res screens, make image dimensions 2x as big as their displayed size

11 Compress images for a lower file size and better performance

12 When using multiple images side-by-side, make sure they have the exact same dimensions

😃 😡
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #4 ICONS
:
USE GOOD ICONS

1 Use a good icon pack, there are tons of free and paid icons packs

🛠 TOOLBOX

Phosphor icons

and many, many more…

Phosphor icons ✌ You can just use

emojis too
USE GOOD ICONS

1 Use a good icon pack, there are tons of free and paid icons packs

2 Use only one icon pack. Don’t mix icons from different icon packs

😡
This icon has a
completely different
style: filled and
boxy/squared
USE GOOD ICONS

1 Use a good icon pack, there are tons of free and paid icons packs

2 Use only one icon pack. Don’t mix icons from different icon packs

3 Use SVG icons or icon fonts. Don’t use bitmap image formats (.jpg and .png)!

😡 😃

BITMAP VECTOR BASED

👉 “Regular images” JPG, PNG, GIF 👉 SVG images and icon fonts

👉 Do not scale, become unsharp! 👉 Scale indefinitely!

-
:

USE GOOD ICONS

1 Use a good icon pack, there are tons of free and paid icons packs

2 Use only one icon pack. Don’t mix icons from different icon packs

3 Use SVG icons or icon fonts. Don’t use bitmap image formats (.jpg and .png)!

4 Adjust to website personality! Roundness, weight and filled/outlined depend on typography

WHEN TO USE ICONS

5 Use icons to provide visual assistance to text

WHEN TO USE ICONS

5 Use icons to provide visual assistance to text

6 Use icons for product feature blocks

WHEN TO USE ICONS

5 Use icons to provide visual assistance to text

6 Use icons for product feature blocks

7 Use icons associated with actions, and label them (unless no space or icon is 100% clear)

😡 Some elements are text,

others are unlabeled icons…
WHEN TO USE ICONS

5 Use icons to provide visual assistance to text

6 Use icons for product feature blocks

7 Use icons associated with actions, and label them (unless no space or icon is 100% clear)

8 Use icons as bullet points

USE ICONS WELL

9 To keep icons neutral, use same color as text. To draw more attention, use different color
USE ICONS WELL

9 To keep icons neutral, use same color as text. To draw more attention, use different color

10 Don’t confuse your users: icons need to make sense and fit the text or action!

😡
?
? ?
USE ICONS WELL

9 To keep icons neutral, use same color as text. To draw more attention, use different color

10 Don’t confuse your users: icons need to make sense and fit the text or action!

11 Don't make icons larger than what they were designed for. If needed, enclose them in a shape

😃 😡

😃 Icons were designed for big

use: lots of details, thin lines
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #5
SHADOWS
:
 SOME CONCEPTS FIRST...

👉 After an era of 100% flat design, we’re now back to using shadows in UI design (“flat design 2.0”)

SKEUOMORPHIC FLAT DESIGN FLAT DESIGN 2.0

DESIGN MINIMAL
Still minimal, but brings
back shadows and depth
for better usability
(
)

SOME CONCEPTS FIRST...

👉 After an era of 100% flat design, we’re now back to using shadows in UI design (“flat design 2.0”)

👉 Shadow creates depth 3D the more shadow, the further away from the interface the element is

3D VIEW

FRONT
VIEW

2px 6px 12px 24px

SIDE
VIEW

👉 Shadow can be used

DISTANCE FROM SCREEN / INTERFACE
on boxes and text
(
)
:
USE SHADOWS WELL

1 You don’t have to use shadows! Only use them if it makes sense for the website personality

Less shadows More shadows

SERIOUS / ELEGANT PLAYFUL / FUN

USE SHADOWS WELL

1 You don’t have to use shadows! Only use them if it makes sense for the website personality

2 Use shadows in small doses: don’t add shadows to every element!

😡 😃

?
?
USE SHADOWS WELL

1 You don’t have to use shadows! Only use them if it makes sense for the website personality

2 Use shadows in small doses: don’t add shadows to every element!

3 Go light on shadows, don’t make them too dark!

😃 😡
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)

5 Use medium-sized shadows for larger areas that should stand out a bit more
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)

5 Use medium-sized shadows for larger areas that should stand out a bit more
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)

5 Use medium-sized shadows for larger areas that should stand out a bit more

6 Use large shadows for elements that should really float above the interface
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)

5 Use medium-sized shadows for larger areas that should stand out a bit more

6 Use large shadows for elements that should really float above the interface

7 Experiment with changing shadows on mouse interaction (click and hover)

NORMAL HOVER CLICK

Medium-sized shadow “pulls” Smaller shadow “pushes”

button closer to the user button back into the interface
USE SHADOWS IN THE RIGHT SITUATION

4 Use small shadows for smaller elements that should stand out (to draw attention)

5 Use medium-sized shadows for larger areas that should stand out a bit more

6 Use large shadows for elements that should really float above the interface

7 Experiment with changing shadows on mouse interaction (click and hover)

8 Bonus: Experiment with glows (colored shadows)

 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #6
BORDER RADIUS
-
:


USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

Less border-radius More border-radius

SERIOUS / ELEGANT PLAYFUL / FUN

-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

😃 Very round typeface, lots of border-

radius in button, icons and image 😃 Boxy/squared typeface, but designers wanted
to add some playfulness, so little border-radius
-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3 Use border-radius on buttons, images, around icons, standout sections and other elements
-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3 Use border-radius on buttons, images, around icons, standout sections and other elements
-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3 Use border-radius on buttons, images, around icons, standout sections and other elements
-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3 Use border-radius on buttons, images, around icons, standout sections and other elements
-
USE BORDER RADIUS WELL

1 Use border-radius to increase the playfulness and fun of the design, to make it less serious

2 Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3 Use border-radius on buttons, images, around icons, standout sections and other elements
-
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #7
WHITESPACE
:
WHY WHITESPACE 😡 😃

👉 The right amount of

whitespace makes designs
look clean, modern and
polished

👉 Whitespace communicates
how different pieces of
information are related to
one another

👉 Whitespace implies invisible

relationships between the
elements of a layout Looks a lot more polished,
like the design has space
to breathe

WHERE TO USE WHITESPACE

192px
1 Use tons of whitespace between
sections
192px

192px
WHERE TO USE WHITESPACE

1 Use tons of whitespace between

sections
140px

160px

140px
WHERE TO USE WHITESPACE

1 Use tons of whitespace between

sections
96px

2 Use a lot of whitespace between

groups of elements

152px

24px
WHERE TO USE WHITESPACE

1 Use tons of whitespace between

sections

2 Use a lot of whitespace between

groups of elements
WHERE TO USE WHITESPACE

1 Use tons of whitespace between

sections

2 Use a lot of whitespace between

groups of elements

3 Use whitespace between elements

WHERE TO USE WHITESPACE

😡
1 Use tons of whitespace between
sections

2 Use a lot of whitespace between

groups of elements

😃
3 Use whitespace between elements

4 Inside groups of elements, try to

use whitespace instead of lines
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!
The “Law of
Proximity”

😡 No separation between
elements, confusing spacing

Title and text belong

😃 together, therefore there is
less space between them
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!

Ambiguous spacing. Each label clearly

😡 What field do labels
belong to?!
😃 belongs to a certain
input field
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!

Why is the button Button seems to

😐 closer to the lower
section?
😃 belong to text block,
so it’s closer
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!

6 Start with a lot of whitespace, maybe even too much! Then remove whitespace from there
☝ Too much whitespace looks detached, too little looks too crammed

❓❓

😡 Everything
is detached

😡 Way too crammed

and uninviting
😃 Just right, design
can breathe
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!

6 Start with a lot of whitespace, maybe even too much! Then remove whitespace from there
☝ Too much whitespace looks detached, too little looks too crammed

7 Match other design choices. If you have big text or big icons, you need more whitespace

😃 Huge text, lots of

whitespace 😃 Small text and
images, less space
HOW MUCH WHITESPACE

5 The more some elements (or groups of elements) belong together, the closer they should be!

6 Start with a lot of whitespace, maybe even too much! Then remove whitespace from there
☝ Too much whitespace looks detached, too little looks too crammed

7 Match other design choices. If you have big text or big icons, you need more whitespace

8 Try a hard rule, such as using multiples of 16px for all spacing

96px
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #8 VISUAL
HIERARCHY
:
WHAT IS VISUAL HIERARCHY?

👉 Visual hierarchy is about establishing

which elements of a design are the most
important ones

👉 Visual hierarchy is about drawing attention

to these most important elements

👉 Visual hierarchy is about defining a “path”

for users, to guide them through the page

👉 We use a combination of position, size,

colors, spacing, borders, and shadows to
establish a meaningful visual hierarchy
between elements/components

WHAT IS VISUAL HIERARCHY?

👉 Visual hierarchy is about establishing

which elements of a design are the most
important ones

👉 Visual hierarchy is about drawing attention

to these most important elements

👉 Visual hierarchy is about defining a “path”

for users, to guide them through the page

👉 We use a combination of position, size,

colors, spacing, borders, and shadows to
establish a meaningful visual hierarchy
between elements/components

WHAT IS VISUAL HIERARCHY?

👉 Visual hierarchy is about establishing

which elements of a design are the most
important ones

👉 Visual hierarchy is about drawing attention

to these most important elements

👉 Visual hierarchy is about defining a “path”

for users, to guide them through the page

👉 We use a combination of position, size,

colors, spacing, borders, and shadows to
establish a meaningful visual hierarchy
between elements/components

 VISUAL HIERARCHY FUNDAMENTALS

1 Position important elements closer to the top the page, where they get more attention

Most important title,

close to top of the page

ATTENTION FLOWS
DOWN THE PAGE
AND COMPONENTS

Most important
call-to-action, close
to top of the page
(
)
VISUAL HIERARCHY FUNDAMENTALS

1 Position important elements closer to the top the page, where they get more attention

2 Use images mindfully, as they draw a lot of attention (larger images get more attention)
VISUAL HIERARCHY FUNDAMENTALS

1 Position important elements closer to the top the page, where they get more attention

2 Use images mindfully, as they draw a lot of attention (larger images get more attention)

3 Whitespace creates separation, so use whitespace strategically to emphasize elements

VISUAL HIERARCHY FOR TEXT ELEMENTS

4 For text elements, use font size, font weight, color, and whitespace to convey importance

😡 Confusing! No hierarchy
at all

😐 Increasing font size

🙂 Increasing font weights

😃 Lightening color of less

important text. Perfect!
VISUAL HIERARCHY FOR TEXT ELEMENTS

4 For text elements, use font size, font weight, color, and whitespace to convey importance

20px
20px

40px
20px
Color
Bolder
Lighter
accent
font
color
weight
to to
emphasize
to
de-emphasize
emphasize text
text
text
14px
12px

14px

😡 Confusing! No
hierarchy at all 🙂 Increasing font sizes
and adding whitespace 😃 Adding font weight
and color. Perfect!


VISUAL HIERARCHY FOR TEXT ELEMENTS

4 For text elements, use font size, font weight, color, and whitespace to convey importance

Eye-catching
background color

Nice and subtle

background color to
make content stand out
 VISUAL HIERARCHY FOR TEXT ELEMENTS

4 For text elements, use font size, font weight, color, and whitespace to convey importance

5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons
☝ You can also de-emphasize less important text, like labels or secondary/additional information

Title Sub-title
Title
Icon Link

Data point De-emphasizing additional information

Icon
Sub-title

Icon
Sub-title
Link
VISUAL HIERARCHY FOR TEXT ELEMENTS

4 For text elements, use font size, font weight, color, and whitespace to convey importance

5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons
☝ You can also de-emphasize less important text, like labels or secondary/additional information

Important
Sub-title data points

Important Icons
data points

De-emphasizing label
De-emphasizing
additional information

Icons
Data
point
Very subtle button
De-emphasizing buttons (on
(focus is on prices)
instagram, all focus is on photos)
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)

7 Try emphasizing some component A over component B by de-emphasizing component B

Component A Component B
Component A has been made more
prominent simply by de-emphasizing B
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)

7 Try emphasizing some component A over component B by de-emphasizing component B

VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)

7 Try emphasizing some component A over component B by de-emphasizing component B

8 What components to emphasize? Testimonials, call-to-action sections, highlight sections,

preview cards, forms, pricing tables, important rows/columns in tables, etc.
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)

7 Try emphasizing some component A over component B by de-emphasizing component B

8 What components to emphasize? Testimonials, call-to-action sections, highlight sections,

preview cards, forms, pricing tables, important rows/columns in tables, etc.
VISUAL HIERARCHY BETWEEN COMPONENTS

6 Emphasize an important component using background color, shadow, or border (or multiple)

7 Try emphasizing some component A over component B by de-emphasizing component B

8 What components to emphasize? Testimonials, call-to-action sections, highlight sections,

preview cards, forms, pricing tables, important rows/columns in tables, etc.
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
WEB DESIGN RULES #9 USER
EXPERIENCE UX
(
)
:
 WHAT IS USER EXPERIENCE UX ?

“ Design is not just what it looks like

and feels like. Design is how it works
Steve Jobs

User Interface UI is the visual User Experience UX is the

presentation of a product. It’s how overall experience the user has
the graphical interface looks and while interacting with the product
feels like
👉 Does the app feel logical and well thought out?
👉 Layout 👉 Does the navigation work intuitively?
👉 “Personality” 👉 Are users reaching their goals?
👉 Typography, colors, icons, etc.
–

(
(
)
)

(
)
 UI AND UX DESIGN

UI is graphical interface 👉 UI Design is

what makes an interface beautiful
UI
UX is experience with interface 👉 UX
Both are
Design is what makes an interface interfaces to
useful and functional get ketchup

☝ UX Design can not exist without UI Design!

UX
UI UX
Design Design Each creates
a different
experience




 UX DESIGN GUIDING PRINCIPLE GOALS

👉 A website or application exists for a reason: a user has a 👉 UX Example:

goal for visiting it, and a business has a goal for creating it

USER BUSINESS
GOALS GOALS Highlighting an option in the
product pricing table:

❤ 💵 👉 Helps the user decide faster

what is the best option ❤

👉 Helps the business maximize

EXAMPLE Designing EXAMPLE Selling
revenue 💵
websites faster Good UX design aligns design kits for design
the user’s goals with the tools
business’ goals


:
:

:
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know

🤔 😃
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know

2 Make your call-to-action the most prominent

element, and make the text descriptive

🤔 😃
Reserve
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know

2 Make your call-to-action the most prominent

element, and make the text descriptive

3 Use blue text and underlined text only for links! Looks 100% like a
link, but isn’t one!

😃 😡
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know 😡 2000 ms

2 Make your call-to-action the most prominent

element, and make the text descriptive

3 Use blue text and underlined text only for links!

4 Animations should have a purpose and be fast:

between 200 and 500 ms
😃 400 ms
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know 😃
2 Make your call-to-action the most prominent
element, and make the text descriptive

3 Use blue text and underlined text only for links!

4 Animations should have a purpose and be fast:

between 200 and 500 ms

5 In forms, align labels and fields in a single

vertical line, to make the form easier to scan
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know 😃
2 Make your call-to-action the most prominent
element, and make the text descriptive

3 Use blue text and underlined text only for links!

4 Animations should have a purpose and be fast:

between 200 and 500 ms

5 In forms, align labels and fields in a single

vertical line, to make the form easier to scan

6 Offer users good feedback for all actions: form

errors, form success, etc. [web apps]
UX RULES FOR USABILITY

1 Don’t design complicated layouts. Don’t reinvent

the wheel. Use patterns that users know 😃
2 Make your call-to-action the most prominent
element, and make the text descriptive

3 Use blue text and underlined text only for links!

4 Animations should have a purpose and be fast:

between 200 and 500 ms

5 In forms, align labels and fields in a single

😡
vertical line, to make the form easier to scan

6 Offer users good feedback for all actions: form

errors, form success, etc. [web apps]

7 Place action buttons where they will create an

effect (law of locality) [web apps]
UX RULES FOR WEBSITE CONTENT

8 Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!

😃 🤔
UX RULES FOR WEBSITE CONTENT

8 Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!

9 Only include relevant information, efficiently! Cut out fluff and make the content 100% clear

😃
UX RULES FOR WEBSITE CONTENT

8 Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!

9 Only include relevant information, efficiently! Cut out fluff and make the content 100% clear

10 Use simple words! Avoid technical jargon and “smart-sounding” words

😃
UX RULES FOR WEBSITE CONTENT

8 Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!

9 Only include relevant information, efficiently! Cut out fluff and make the content 100% clear

10 Use simple words! Avoid technical jargon and “smart-sounding” words

11 Break up long text with sub-headings, images, 😃

block quotes, bullet points, etc.
 SECTION
WEB DESIGN RULES AND
FRAMEWORK

LECTURE
THE WEBSITE PERSONALITIES
FRAMEWORK
-
-
THE WEBSITE PERSONALITIES FRAMEWORK

Distilled into countless

web design rules that
we just learned

100s of well-designed RULES SHOULD BE APPLIED ACCORDING

sites deconstructed TO SELECTED WEBSITE PERSONALITY

Distilled into
7 website personalities


-
-
THE WEBSITE PERSONALITIES FRAMEWORK

THE 7 PERSONALITIES How do you want website to

appear to users? What “vibe” do
you want to transmit?
1 Serious/Elegant

2 Minimalist/Simple
Choose one of the website
3 Plain/Neutral personalities accordingly

4 Bold/Confident

5 Calm/Peaceful Apply personality traits to each

design ingredient

6 Startup/Upbeat

7 Playful/Fun
Typography Colors Images Icons Shadows Border-radius Layout
-
-
 PERSONALITY 01 SERIOUS/ELEGANT

📋 OVERVIEW Design for luxury and elegance, based on thin serif typefaces,
golden or pastel colors, and big high-quality images

👩💻 INDUSTRIES Real estate, high fashion, jewelry, luxury products or services

Web design ingredients we learned about

✍ TYPOGRAPHY Serif typefaces (especially in headings), light font weight,

small body font size

🎨 COLORS Gold, pastel colors, black, dark blue or grey

🌇 IMAGES Big, high-quality images are used to feature elegant and

expensive products

⚛ ICONS 🤷 Usually no icons, but thin icons and lines may be used

👻 SHADOWS 🚫 Usually no shadows

🟠 BORDER RADIUS 🚫 Usually no border-radius

🧩 LAYOUT A creative and experimental layout is quite common

-
–
 PERSONALITY 02 MINIMALIST/SIMPLE

📋 OVERVIEW Focusses on the essential text content, using small or medium-

sized sans-serif black text, lines, and few images and icons

👩💻 INDUSTRIES Fashion, portfolios, minimalism companies, software startups

✍ TYPOGRAPHY Boxy/squared sans-serif typefaces, small body font sizes

🎨 COLORS Usually black or dark grey, on pure white background. Usually

just one color throughout the design

🌇 IMAGES Few images, which can be used to add some color to the
design. Usually no illustrations, but if, than just black

⚛ ICONS 🤷 Usually no icons, but small simple black icons may be used

👻 SHADOWS 🚫 Usually no shadows

🟠 BORDER RADIUS 🚫 Usually no border-radius

🧩 LAYOUT Simple layout, a narrow one-column layout is quite common

-
–
 PERSONALITY 03 PLAIN/NEUTRAL

📋 OVERVIEW Design that gets out of the way by using very neutral and
small typefaces, and a boxy, structured, and condensed layout

👩💻 INDUSTRIES Well-established corporations, companies that don’t want to

make an impact through design

✍ TYPOGRAPHY Neutral-looking sans-serif typefaces are used, and text

is usually small and doesn’t have visual impact

🎨 COLORS Safe colors are employed, nothing too bright or to washed-out.

Blues and blacks are common

🌇 IMAGES Images are frequently used, but usually in a small format

⚛ ICONS 🤷 Usually no icons, but simple icons may be used

👻 SHADOWS 🚫 Usually no shadows

🟠 BORDER RADIUS 🚫 Usually no border-radius

🧩 LAYOUT Structured and condensed layout, with lots of boxes and rows
-
–
 PERSONALITY 04 BOLD/CONFIDENT

📋 OVERVIEW Design that makes an impact, by featuring big and bold

typography, paired with confident use of big colored blocks

👩💻 INDUSTRIES Digital agencies, software startups, travel, “strong" companies

✍ TYPOGRAPHY Boxy/squared sans-serif typefaces, big and bold typography,

especially headings. Uppercase headings are common

🎨 COLORS Usually multiple bright colors. Big color blocks/sections are

used to draw attention

🌇 IMAGES Lots of big images are usually displayed

⚛ ICONS 🚫 Usually no icons

👻 SHADOWS 🚫 Usually no shadows

🟠 BORDER RADIUS 🚫 Usually no border-radius

🧩 LAYOUT 🤷 All kinds of layouts, no particular tendencies

-
–
 PERSONALITY 05 CALM/PEACEFUL

📋 OVERVIEW For products and services that care about the consumer, which
is transmitted by calming pastel colors and soft serif headings

👩💻 INDUSTRIES Healthcare, all products with focus on consumer well-being

✍ TYPOGRAPHY Soft serif typefaces frequently used for headings, but sans-
serif headings might be used too (e.g for software products)

🎨 COLORS Pastel/washed-out colors: light oranges, yellows, browns,

greens, blues

🌇 IMAGES Images and illustrations are usual, matching calm color palette

⚛ ICONS ✅ Icons are quite frequent

👻 SHADOWS 🤷 Usually no shadows, but might be used sparingly

🟠 BORDER RADIUS ✅ Some border-radius is usual

🧩 LAYOUT 🤷 All kinds of layouts, no particular tendencies

-
–
 PERSONALITY 06 STARTUP/UPBEAT

📋 OVERVIEW Widely used in startups, featuring medium-sized sans-serif

typefaces, light-grey backgrounds, and rounded elements

👩💻 INDUSTRIES Software startups, and other modern-looking companies

✍ TYPOGRAPHY Medium-sized headings (not too large), usually one sans-serif

typeface in whole design. Tendency for lighter text colors

🎨 COLORS Blues, greens and purples are widely used. Lots of light
backgrounds (mainly gray), gradients are also common

🌇 IMAGES Images or illustrations are always used. 3D illustrations are

modern. Sometimes patterns and shapes add visual details

⚛ ICONS ✅ Icons are very frequent

👻 SHADOWS ✅ Subtle shadows are frequent. Glows are becoming modern

🟠 BORDER RADIUS ✅ Border-radius is very common

🧩 LAYOUT Rows of cards and Z-patterns are usual, as well as animations

-
–
 PERSONALITY 07 PLAYFUL/FUN

📋 OVERVIEW Colorful and round designs, fueled by creative elements like

hand-drawn icons or illustrations, animations, and fun language

👩💻 INDUSTRIES Child products, animal products, food

✍ TYPOGRAPHY Round and creative (e.g. handwritten) sans-serif typefaces are

frequent. Centered text is more common

🎨 COLORS Multiple colors are frequently used to design a colorful

layout, all over backgrounds and text

🌇 IMAGES Images, hand-drawn (or 3D illustrations, and geometric

shapes and patterns are all very frequently used

⚛ ICONS ✅ Icons are very frequent, many times in a hand-drawn style

👻 SHADOWS ✅ Subtle shadows are quite common, but not always used

🟠 BORDER RADIUS ✅ Border-radius is very common

🧩 LAYOUT 🤷 All kinds of layouts, no particular tendencies

-
)
–
ADVANCED COMBINING PLAYFULNESS AND BOLDNESS

BOLD
More:
👉 Boxy/squared sans-serif
typefaces
👉 Big and bold typography
Bold/Confident
👉 Bright/flashy colors

INJECT SOME PERSONALITY TRAITS

Serious/ Minimalist Plain/ Startup/ Playful/

SERIOUS Elegant /Simple Neutral Upbeat Fun
PLAYFUL

More:

More: 👉 Colorful
Calm/Peaceful 👉 Rounded corners,
👉 Headings using soft serif
typography and icons
typefaces
👉 Shadows
👉 Pastel/washed-out colors
👉 Illustrations
👉 Illustrations
CALM

 MINIMALIST/SIMPLE

BOLD/CONFIDENT

👉 Big and bold typography

👉 Big color blocks

BOLD/CONFIDENT

👉 Very boxy typeface

👉 Big and bold typography

STARTUP/UPBEAT

 BOLD/CONFIDENT

PLAYFUL/FUN

👉 Irregular round design

elements

👉 Hand-drawn icons and

patterns

CALM/PEACEFUL

👉 Headings using soft

serif typefaces

👉 Illustrations in
calming pastel colors

BOLD/CONFIDENT

 STARTUP/UPBEAT

CALM/PEACEFUL

👉 Headings using soft serif

typefaces

👉 Illustrations in calming
pastel colors

CALM/PEACEFUL

👉 Headings using soft

serif typefaces

👉 Illustrations

STARTUP/UPBEAT

 SECTION 06
COMPONENTS AND
LAYOUT PATTERNS
—

 SECTION
COMPONENTS AND LAYOUT
PATTERNS

LECTURE
WEB DESIGN RULES #10 PART 1
ELEMENTS AND COMPONENTS
-
:
FROM ELEMENTS TO WEBPAGE

PATTERNS
Elements Components Layouts Webpage
FROM ELEMENTS TO WEBPAGE

PATTERNS
Elements Components Layouts Webpage

1 Use common elements and components to convey your website’s information

2 Combine components into layouts using common layout patterns

3 Assemble different layout areas into a complete, final page

 GALLERY INDEX ELEMENTS, SECTIONS, PATTERNS

A ELEMENTS B COMPONENTS C SECTION COMPONENTS

1. Text 1. Breadcrumbs 10. Carousel 1. Navigation

2. Buttons 2. Pagination 11. Customer testimonials 2. Hero section
3. Images 3. Alert and status bars 12. Customer logos 3. Footer
4. Input elements 4. Statistics 13. Featured-in logos 4. Call-to-action section
5. Tags 5. Gallery 14. Steps 5. Feature row
6. Feature box 15. Forms
7. Preview and profile cards 16. Tables
D LAYOUT PATTERNS
8. Accordion 17. Pricing tables
9. Tabs 18. Modal windows
1. Row of boxes or cards
2. Grid of boxes or cards
3. Z-pattern
4. F Pattern
5. Single-column
6. Sidebar
This lecture
7. Multi-column/magazine
8. Asymmetry/Experimental
-

:
01 TEXT A ELEMENTS
01 TEXT A ELEMENTS
02 BUTTONS A ELEMENTS
03 IMAGES A ELEMENTS
04 INPUT ELEMENTS A ELEMENTS
05 TAGS A ELEMENTS
01 BREADCRUMBS B COMPONENTS
02 PAGINATION B COMPONENTS
03 ALERT AND STATUS BARS B COMPONENTS
04 STATISTICS B COMPONENTS
05 GALLERY B COMPONENTS
05 GALLERY B COMPONENTS
06 FEATURE BOX B COMPONENTS
06 FEATURE BOX B COMPONENTS
07 PREVIEW AND PROFILE CARDS B COMPONENTS
07 PREVIEW AND PROFILE CARDS B COMPONENTS
07 PREVIEW AND PROFILE CARDS B COMPONENTS
08 ACCORDION B COMPONENTS
08 ACCORDION B COMPONENTS
09 TABS B COMPONENTS
09 TABS B COMPONENTS
10 CAROUSEL B COMPONENTS
10 CAROUSEL B COMPONENTS
11 CUSTOMER TESTIMONIALS B COMPONENTS
11 CUSTOMER TESTIMONIALS B COMPONENTS
11 CUSTOMER TESTIMONIALS B COMPONENTS
12 CUSTOMER LOGOS B COMPONENTS
12 CUSTOMER LOGOS B COMPONENTS
13 FEATURED IN LOGOS B COMPONENTS

-
14 STEPS B COMPONENTS
14 STEPS B COMPONENTS
15 FORMS B COMPONENTS
15 FORMS B COMPONENTS
15 FORMS B COMPONENTS
16 TABLES B COMPONENTS
16 TABLES B COMPONENTS
17 PRICING TABLES B COMPONENTS
17 PRICING TABLES B COMPONENTS
18 MODAL WINDOWS B COMPONENTS
18 MODAL WINDOWS B COMPONENTS
 SECTION
COMPONENTS AND LAYOUT
PATTERNS

LECTURE
BUILDING AN ACCORDION
COMPONENT PART 2
-
 SWITCHING FLEX DIRECTION TO COLUMN

.accordion {
display: flex; WITH FLEX DIRECTION SET
gap: 24px; 1 TO COLUMN
flex-direction: column;
}
👉 align-items aligns items
horizontally, no longer vertically

CROSS AXIS 2 👉 justify-content aligns items

vertically, no longer horizontally

👉 gap acts like margin-bottom,

no longer like margin-right

MAIN AXIS

-
:

 SECTION
COMPONENTS AND LAYOUT
PATTERNS

LECTURE
BUILDING A CAROUSEL
COMPONENT PART 2
-
 VERTICAL CENTERING WITH ABSOLUTE POSITION AND TRANSFORM

Ignoring the X
(horizontal) value

.btn--left {
position: absolute;
top: 50%;
transform: translate(0, -50%);
top: 50% }

= 50% of parent container’s height

transform: translate(0, -50%)

= 50% of actual element’s height

.carousel {
position: relative;
}

 SECTION
BUILDING BEAUTIFUL
COMPONENTS

LECTURE
WEB DESIGN RULES #10 PART 2
LAYOUT PATTERNS
-
:
 GALLERY INDEX ELEMENTS, SECTIONS, PATTERNS

A ELEMENTS B COMPONENTS C SECTION COMPONENTS

1. Text 1. Breadcrumbs 10. Carousel 1. Navigation

2. Buttons 2. Pagination 11. Customer testimonials 2. Hero section
3. Images 3. Alert and status bars 12. Customer logos 3. Footer
4. Input elements 4. Statistics 13. Featured-in logos 4. Call-to-action section
5. Tags 5. Gallery 14. Steps 5. Feature row
6. Feature box 15. Forms
7. Preview and profile cards 16. Tables
D LAYOUT PATTERNS
8. Accordion 17. Pricing tables
9. Tabs 18. Modal windows
1. Row of boxes or cards
2. Grid of boxes or cards
3. Z-pattern
4. F Pattern
5. Single-column
6. Sidebar
This lecture 7. Multi-column/magazine
8. Asymmetry/Experimental
-

:
01 NAVIGATION C SECTION COMPONENTS
01 NAVIGATION C SECTION COMPONENTS
01 NAVIGATION C SECTION COMPONENTS
01 NAVIGATION C SECTION COMPONENTS
01 NAVIGATION C SECTION COMPONENTS
01 NAVIGATION C SECTION COMPONENTS

OVERLAYS
01 NAVIGATION C SECTION COMPONENTS

111

SECONDARY NAVIGATION
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
02 HERO SECTION C SECTION COMPONENTS
03 FOOTER C SECTION COMPONENTS
03 FOOTER C SECTION COMPONENTS
03 FOOTER C SECTION COMPONENTS
04 CALL TO ACTION SECTION C SECTION COMPONENTS

-
-
04 CALL TO ACTION SECTION C SECTION COMPONENTS

-
-
04 CALL TO ACTION SECTION C SECTION COMPONENTS

-
-
04 CALL TO ACTION SECTION C SECTION COMPONENTS

-
-
05 FEATURE ROW C SECTION COMPONENTS
05 FEATURE ROW C SECTION COMPONENTS
05 FEATURE ROW C SECTION COMPONENTS
05 FEATURE ROW C SECTION COMPONENTS
01 ROW OF BOXES/CARDS D PATTERNS
02 GRID OF BOXES/CARDS D PATTERNS
02 GRID OF BOXES/CARDS D PATTERNS
ASIDE NESTING PATTERNS IN COMPONENTS D PATTERNS

Feature row section component Feature row section component

Grid pattern
Row pattern

Feature row section component

Feature row section component

Grid pattern
Grid pattern
:
03 Z PATTERN D PATTERNS
-
03 Z PATTERN D PATTERNS
-
04 F PATTERN D PATTERNS
-
04 F PATTERN D PATTERNS
-
05 SINGLE COLUMN D PATTERNS
06 SIDEBAR D PATTERNS
06 SIDEBAR D PATTERNS
07 MULTI COLUMN / MAGAZINE D PATTERNS

-
08 ASYMMETRY / EXPERIMENTAL D PATTERNS
08 ASYMMETRY / EXPERIMENTAL D PATTERNS
 SECTION 07
OMNIFOOD PROJECT
SETUP AND DESKTOP
VERSION
—

–
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
THE 7 STEPS TO A GREAT
WEBSITE
–
 THE PROCESS BEHIND BUILDING A WEBSITE

1 DEFINE THE PROJECT

1 DEFINE

👉 Define WHO the website is for. Is it for yourself? For a client of

2 PLAN your agency or your freelancing business?

3 SKETCH 👉 Define WHAT the website is for. In other words, define business
and user goals of your website project (👋 See lecture on UX

4 DESIGN AND BUILD Business goal example: Selling premium dog food
User goal example: Finding high-quality dog food for good price
5 TEST AND OPTIMIZE

👉 Define a target audience. Be really specific if possible and if it

6 LAUNCH makes sense for your website (this can come from your client)

Example: “Women, 20 to 40 years old, living in Europe, earning

7 MAINTAIN AND UPDATE over 2000€/month, with a passion for dogs”






)


THE PROCESS BEHIND BUILDING A WEBSITE

2 PLAN THE PROJECT

1 DEFINE

👉 Plan and gather website content: copy (text), images, videos etc.
2 PLAN
👉 Content is usually provided by the client, but you also can help
3 SKETCH them produce and find some content (simply finding free images
is easiest, but if they want copy, charge them extra)

4 DESIGN AND BUILD

👉 For bigger sites, plan out the sitemap: what pages the site needs,
and how they are related to one another (content hierarchy)
5 TEST AND OPTIMIZE
👉 Based on the content, plan what sections each page needs in

6 LAUNCH order to convey the content’s message, and in which order

👉 Define the website personality (👋 See web design section)

7 MAINTAIN AND UPDATE

THE PROCESS BEHIND BUILDING A WEBSITE

3 SKETCH LAYOUT AND COMPONENT IDEAS

1 DEFINE

👉 Think about what components you need, and how you can use
2 PLAN
them in layout patterns (👋 Get inspiration in web design section)

3 SKETCH 👉 Get ideas out of your head: sketch them with pen and paper or
with some design software (e.g. Figma )

4 DESIGN AND BUILD

👉 This is an iterative process: experiment with different
components and layouts, until you arrive at a first good solution
5 TEST AND OPTIMIZE
👉 You don’t need to sketch everything, and don’t make it perfect.
6 LAUNCH At some point, you’re ready to jump into HTML and CSS

7 MAINTAIN AND UPDATE

THE PROCESS BEHIND BUILDING A WEBSITE

4 DESIGN AND BUILD WEBSITE

1 DEFINE

👉 Use decisions, content and sketches from Steps 1, 2 and 3 to

2 PLAN design and build the website with HTML and CSS “designing in
the browser”)
3 SKETCH
👉 You already have the layout and components that you selected in
Step 3. In this step, you need to design the actual visual styles
4 DESIGN AND BUILD

👉 Create the design based on selected website personality, the

5 TEST AND OPTIMIZE design guidelines I showed you, and inspiration (👋 See web
design section)
6 LAUNCH
👉 Use the client’s branding (it if exists already) for design decisions
whenever possible: colors, typography, icons, etc.
7 MAINTAIN AND UPDATE

THE PROCESS BEHIND BUILDING A WEBSITE

5 TEST AND OPTIMIZE

1 DEFINE

👉 Make sure website works well in all major browsers Chrome,

2 PLAN
Firefox, Safari, Edge, maybe even old IE 😱)

3 SKETCH 👉 Test the website on actual mobile devices, not just in DevTools

👉 Optimize all images, in terms of dimensions and file size (👋 See

4 DESIGN AND BUILD
lecture on images)

5 TEST AND OPTIMIZE 👉 Fix simple accessibility problems (e.g. color contrast issues)

6 LAUNCH 👉 Run the Lighthouse performance test in Chrome DevTools and try
to fix reported issues

7 MAINTAIN AND UPDATE

👉 Think about Search Engine Optimization SEO

)
(

THE PROCESS BEHIND BUILDING A WEBSITE

6 LAUNCH THE MASTERPIECE 🚀

1 DEFINE

👉 Once all work is done, everything is perfect, and you got approval
2 PLAN
from your client (or yourself 😁), it’s time to share your
masterpiece with the world!
3 SKETCH
👉 Upload your website files to a hosting platform. There are
countless platform, we will use one with a free plan Netlify )
4 DESIGN AND BUILD

👉 Choose and buy a great domain name, one that represents the
5 TEST AND OPTIMIZE brand well, is memorable and easy to write

6 LAUNCH

7 MAINTAIN AND UPDATE

THE PROCESS BEHIND BUILDING A WEBSITE

7 MAINTAIN AND KEEP UPDATING WEBSITE

1 DEFINE

👉 Launching is not the end…

2 PLAN
👉 Keep the website content updated over time. If you’re working
3 SKETCH with a client, you can create a monthly maintenance contract
(recurring revenue 🤑)

4 DESIGN AND BUILD

👉 Install analytics software (e.g. Google Analytics or Fathom) to get
statistics about website users. This may inform future changes in
5 TEST AND OPTIMIZE the site structure and content.

6 LAUNCH 👉 A blog that is updated regularly is a good way to keep users

coming back, and is also good for SEO.

7 MAINTAIN AND UPDATE

 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
DEFINING AND PLANNING THE
PROJECT STEPS 1 AND 2
(
–
)
YOUR FIRST REAL WORLD PROJECT

👉 Your first “job”!

👉 You were hired to design and build

a website for a fictional company
called Omnifood

👉 Omnifood is startup that uses AI to

create and deliver custom healthy
meal plans

👉 They provided us with all the content

for the website (content.md)

-
STEP 1 DEFINE THE PROJECT

👉 Define WHO the website is for

✅ From provided content file:

For a client “We are a technology company first, but with a major
focus on consumer well-being through a healthy diet.
Most people are very busy with their jobs, family and
friends, and other important activities, which doesn't
👉 Define WHAT the website is for
leave much time for cooking. This might lead to a poor
diet and lasting health consequences. We want to
Business goal: Selling monthly food subscription solve this problem by using an AI-centric approach.
User goal: Eating well effortlessly, without spending a Users can use our app to select their diet and foods

lot of time and money they like and dislike, and our AI algorithm will create a
custom and individual weekly meal plan. But we don't
stop there. We partner with restaurants and other
cooking partners to actually cook and deliver all meals
👉 Define target audience
from the generated meal plans, in selected cities. All
this will be packed up in a monthly subscription,
Busy people who like technology, are interested in a where users can choose between receiving one or
healthy diet, and have a well-paying job two meals per day, every single day of the month.”
:


STEP 2 PLAN THE PROJECT

✅ Plan and gather website content

✅ From provided content file:

🚫 Plan out the sitemap “We are a technology company first, but with a major
focus on consumer well-being through a healthy diet.

We will just build a one-page marketing website Most people are very busy with their jobs, family and
friends, and other important activities, which doesn't
(oftentimes called a landing page), so no sitemap
leave much time for cooking. This might lead to a poor
diet and lasting health consequences. We want to
solve this problem by using an AI-centric approach.
👉 Define website personality
Users can use our app to select their diet and foods
they like and dislike, and our AI algorithm will create a
Based on the tech-centered target audience, as well as
custom and individual weekly meal plan. But we don't
the actual product being sold, we will use the startup/
stop there. We partner with restaurants and other
upbeat personality. We might add some elements of the cooking partners to actually cook and deliver all meals
calm/peaceful personality, since the product is all about from the generated meal plans, in selected cities. All

consumer well-being as well this will be packed up in a monthly subscription,

where users can choose between receiving one or
two meals per day, every single day of the month.”
👉 Plan page sections 👇
:
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
SKETCHING INITIAL LAYOUT
IDEAS STEP 3
(
)
–
 FIRST IDEAS AND SKETCH

👉 Logo Navigation
👉 Hero

👉 Featured in

👉 How it works

👉 Meals (and list of diets)

👉 Testimonials + gallery

👉 Pricing + features

👉 CTA

👉 Footer

 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
RESPONSIVE DESIGN PRINCIPLES
–
WHAT IS RESPONSIVE DESIGN?

RESPONSIVE DESIGN

👉 Design technique to make a webpage adjust its layout and visual style to
any possible screen size (window or viewport size)

👉 In practice, this means that responsive design makes websites usable on

all devices, such as desktop computers, tablets, and mobile phones.

👉 It’s a set of practices, not a separate technology. It’s all just CSS!

VIEWPORT
WIDTH

RESPONSIVE DESIGN INGREDIENTS

1 FLUID LAYOUTS 2 RESPONSIVE UNITS

👉 To allow webpage to adapt to the current 👉 Use rem unit instead of px for most lengths
viewport width (or even height)
👉 To make it easy to scale the entire layout down
👉 Use % (or vh / vw) unit instead of px for elements (or up) automatically
that should adapt to viewport (usually layout)
👉 Helpful trick: setting 1rem to 10px for easy
👉 Use max-width instead of width calculations

3 FLEXIBLE IMAGES 4 MEDIA QUERIES

👉 By default, images don’t scale automatically as 👉 Bring responsive sites to life!

we change the viewport, so we need to fix that
👉 To change CSS styles on certain viewport
👉 Always use % for image dimensions, together widths (called breakpoints)
with the max-width property
We will learn how to use media
queries and how to select
breakpoints in the next section

DESKTOP FIRST VS. MOBILE FIRST DEVELOPMENT

👉 Start writing CSS for the desktop: large screen

DESKTOP FIRST
👉 Then, media queries shrink design to smaller
screens.

👉 Start writing CSS for mobile devices: small screen

MOBILE FIRST We will do desktop-
👉 Then, media queries expand design to a large first in this project.
screen It’s easier to learn!

👉 Forces us to reduce websites and apps to the

absolute essentials.

-
-
-

 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE HERO PART 1
-
–
BUILDING THE HERO
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE HOW IT WORKS
SECTION PART 1
-
-
–
-
BUILDING THE HOW IT WORKS SECTION

-
-
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE FEATURED IN
SECTION
–
-
 BUILDING THE FEATURED IN SECTION

✅ Logo Navigation
✅ Hero

👉 Featured in

✅ How it works

👉 Meals (and list of diets)

👉 Testimonials + gallery

👉 Pricing + features

👉 CTA

👉 Footer

-
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE MEALS SECTION
PART 1
–
-
MEALS DIETS SECTION
+
 SWITCHING FLEX DIRECTION TO COLUMN

.meal-attributes
.accordion { {
display: flex; WITH FLEX DIRECTION SET
gap: 2rem;
24px; 1 TO COLUMN
flex-direction: column;
}
👉 align-items aligns items
horizontally, no longer vertically

CROSS AXIS 2 👉 justify-content aligns items

vertically, no longer horizontally

👉 gap acts like margin-bottom,

no longer like margin-right

MAIN AXIS

-
:

 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE TESTIMONIALS
SECTION PART 1
-
–
BUILDING THE TESTIMONIALS GALLERY SECTION

+
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE PRICING SECTION
PART 1
–
-
BUILDING THE PRICING FEATURES SECTION

+
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE CALL TO ACTION
SECTION PART 1
-
-
–
-
CTA SECTION
 SECTION
OMNIFOOD PROJECT SETUP
AND DESKTOP VERSION

LECTURE
BUILDING THE FOOTER PART 1
–
-
FOOTER SECTION
 SECTION 08
OMNIFOOD PROJECT
RESPONSIVE WEB
DESIGN
—

–
 SECTION
OMNIFOOD PROJECT
RESPONSIVE WEB DESIGN

LECTURE
HOW MEDIA QUERIES WORK
–
HOW MEDIA QUERIES WORK WITH MAX WIDTH

Maximum width at which media query still applies

@media (max-width: 600px) @media (max-width: 1200px)

👉 “Is width <= 600px ?” 👉 “Is width <= 1200px ?”

👉 Code outside of
any media query

0px
600px 1200px ∞
400px 1000px
Example: At a viewport Example: At a viewport width
width of 400px, CSS in of 1000px, CSS from the
both media queries applies 1200px media queries applies
(
-
)
 SECTION
OMNIFOOD PROJECT
RESPONSIVE WEB DESIGN

LECTURE
HOW TO SELECT BREAKPOINTS
–
 STRATEGIES FOR SELECTING BREAKPOINTS

BAD

Based on popular devices

300px - 500px 600px - 900px 900px - 1100px > 1200px

GOOD

Based on screen width ranges

600px 900px 1200px

Design breaks

Design breaks
Design breaks

Design breaks
PERFECT

When design breaks down

THE END!