Mastering the Principles of Web Design and Web Development

1. MASTERING THE
PRINCIPLES OF WEB
DESIGN AND WEB
DEVELOPMENT
UNIT 1
Lesson 1

2. Web Design
- It is the creation of the layout of the visual
elements of the website using various design
programs.
- An example of software that allows us to
design our programs is Adobe Creative
Cloud. It provides a set of applications and
services by Adobe Systems. A monthly or
annual subscription is required for us to fully
use the collection of software.

3. Web Design
- It includes the visual aesthetic and usability of a
website. The color scheme, lay-out, information flow,
and everything else related to the visual aspects of
the user interface and user experience.

4. Web development
- It is the creation of web pages using HTML, CSS,
JavaScript, and other scripting languages. It involves
all the codes that make a website work.

5. Web designer
- Focuses on the appearance of a website.
- A web designer considers various design
principles to achieve a pleasing or aesthetic
layout for the website. Design principles
include balance, contrast, emphasis,
consistency, and unity.

6. Web developer
- Specializes in coding and works on making
websites with an emphasis on their
functionality.
- A web developer, also called a programmer,
converts a static layout into a dynamic
website by using links, buttons, and other
interactive elements.

7. Principles of web design
Minimalism Typography
Color
Scheme
Display Animation Mobile-
friendliness

8. 1. Minimalism
- Less is more. Simplicity is always the key to a
minimalist web design. This can be achieved by
using more white space with impressive visuals
and focusing only on including the most
essential elements. Minimalism reduces
information overload and allows web pages to
load faster.
- As an example, let us visit this website:
plus63.org
Principles of web design

9. 1. minimalism

10. 2. Typography
- Typography is an element of design that refers to
the visual aesthetics, style, or appearance of the
text. It sets the tone and theme of a website.
- The modern web design uses striking and
expressive typography, replacing the traditional
ones. Bold and bright fonts will help focus the
user's attention As an example, let us visit this
website: papertiger.com
Principles of web design

11. 2. Typography

12. 3. Color scheme
- Color combination has a big impact on how
users think and feel about the website. The
previous trend in web design uses soft color
shades. Nowadays, vibrant and dramatic colors
catch more attention from the users. Gradients
give also a fresher tone look. As an example, let
us visit this website:
https://prometheusfuels.com/
Principles of web design

13. 3. Color scheme

14. 4. Display
- For smoother navigation and more, continuous
story-like presentation, we use a borderless user
interface display. We also design a one-page website
screen. This is better than a multiscreen, grid-based
interface. This will allow the users to browse the
website's content in a simple and linear fashion.
There is no need to switch through multiple pages.
As an example, let us visit this website: apple.com.
Principles of web design

15. 4. Display

16. 5. Animation
- Users crave for a more entertaining experience. To
capture maximum user attention, animations,
when used responsibly, can help us achieve this.
We can use animated icons and micro-interactions
to ensure fluidity in the user's experience.
- As an example, let us visit this website:
https://www.awwwards.com/sites/shaping-a-
happier-living.
Principles of web design

17. 5. animation

18. 6. Mobile-friendliness
- When we design a website, we make sure the
users can access and browse it on any device,
such as smartphones, tablets, or desktop
computers. It is very important to consider if our
website is mobile-friendly since it is now the
commonly used tool to access websites.
- To test the mobile-friendliness of a website, we
can visit: https://www.shutterfly.com/
Principles of web design

19. 6. Mobile-friendliness

20. Principles of web
development
Use Focus
Quality
Focus
Simplicity
Efficiency of
codes

21. 1. User Focus
- This is the key principle to provide them a great user
experience Accessibility and functionality of the
website depend much on the developers. As
developers, we need to set up and enforce coding
standards. Let us visit these websites as our guides:
a. styleguides.io
b. cssguideline.es
Principles of web development

22. a. styleguides.io

23. b. cssguideline.es

24. 2. Quality focus
- This is very important to develop a mindset of
quality. We must determine the standards of a
quality website. A high-quality website provides
relevant and useful content and a good user
experience.
- We use tools to measure and improve the website's
quality. As young developers, we must always strive
for excellence.
Principles of web development

25. 3. Simplicity
- Less is indeed more. We keep our website simple and
well-organized. Simple websites do not have
superfluous information. They are easier to build and
maintain.
- We also look for ways to simplify codes, so it will be
easier for us to find errors. We may visit various
websites and.observe their layout and design. As an
example, let us visit this website:
fortherecord.simonfosterdesign.com
Principles of web development

26. 3. Simplicity

27. 4. Efficiency of codes
- We write codes efficiently. We also try to reduce
the amount of codes without compromising the
website's quality and functionality.
- Less codes mean less time spent on
maintenance. In addition, we comment to make
the codes programmer-friendly. Thus, we must
use code responsibly.
Principles of web development

28. Wrap Up!
Web Design is the creation of a layout of a website using a design
program. The web design principles are: minimalism, typography,
color scheme, display, animation, and mobile-friendliness.
Web Development is the creation of web pages using a
programming or scripting languages. The web development
principles are: user focus, quality focus, simplicity, and efficiency of
codes.
In life, we also have principles. Principles are generally defined as
rules or guidelines that we follow. They are ideas that serve as basis
how something works. We may have different ways how we live our
lives, but following universal life principles can lead us to a happy
and healthy life.

29. Write True on the line if the statement is
correct and False if it is wrong.
_______1. Web development includes the visual
aesthetics and usability of a
website.
_______2. Minimalism can be achieved by
reducing the use of visuals on the web page.
_______3. When we design a website, make
sure users can access and browse it on ang
device.
_______4. The key principle is to provide users
with a great user experience.
_______5. Writing codes efficiently means
Activity 1

30. Activity 2
Search for Websites
o Using the internet, search for websites that follow each of the principles.
o For each principle, choose a website and explain why it follows the principle.
Write your answer on the line.
a. Minimalism
Website: _______________________________________________
Reason/s: ______________________________________________
b. Typography
Website: ­
­
­
­
­
­
­
­
­
­
­
_______________________________________________
Reason/s: ______________________________________________
c. Color scheme
Website: _______________________________________________
Reason/s: ______________________________________________

31. Activity 2
Search for Websites
o Using the internet, search for websites that follow each of the principles.
o For each principle, choose a website and explain why it follows the principle.
Write your answer on the line.
d. Display
Website: ______________________________________________________
Reason/s: _____________________________________________________
e. Animation
Website: ______________________________________________________
Reason/s: _____________________________________________________
f. Mobile-friendliness
Website: ______________________________________________________
Reason/s: _____________________________________________________

32. Performance task
Evaluate the Website
oChoose a partner and together, visit:
https://kids.nationalgeographic.com/
oEvaluate if the website follows the principles of web
design. Discuss with your partner your evaluation of the
websites.
oAnswer the question below. Write your answer on the
lines.
Does the website follow the principles web design? If
yes, why do you say so? If no, give suggestions on

33. Thank you for
listening!

34. Resource Page