Understanding the Principle of WEB Design and WEB Development

Business Websites

are used to promote a company's products or services. They typically include information about the company's history, team members, products or services, and contact information.

Website Types

E-commerce Websites

are used to sell products or services online. They typically include a shopping cart, checkout process, and payment gateway.

Website Types

Blogging Websites

are used to share information, news, and opinions on a particular topic. They typically include articles, photos, and videos.

Website Types

Social networking websites

are used to connect people with similar interests or backgrounds. They typically include user profiles, messaging features,

and discussion forums.

Website Types

Educational websites

are used to provide information and resources

on a particular topic. They can be used for online courses, tutorials, and research.

Website Types

Entertainment websites

are used to provide entertainment to

visitors. They can include games, videos, and music.

Website Types

Web Design

Is the creation of the layout of the website's visual elements using various design programs

Visually appealing

Easy to navigate

Optimized for different devices

Provides a clear and concise message

Adobe Creative Cloud

is a collection of software used for graphic design, video editing, web development, photography, along with a set of mobile applications and optional cloud services. Subscribers can access this collection through a monthly or annual subscription.

Web Development

is the creation of webpages using HTML, CSS, Javascript, and other scripting languages. It involves all the codes that makes a website work

focuses on the appearance of a website (including layout, color scheme, typography, and imagery).

Web Designer

• Also known as programmer.

• Converts a static layout into a dynamic website using links, buttons, and other interactive elements.

• Web Designer and Web Developer work hand-in-hand to create quality websites.

Web Developer

Graphic artist responsible for designing the layout, usability, and visual appearance of a website.

Web Designer

Tasked with converting the web design into functional website using coding languages such as HTML, JavaScript, PHP, and Python

Web Developer

Principles of Web Design

uare generally defined as rules or guidelines that we follow.

uThey are ideas that serve as a basis for how something works.

Principles

Simplicity is always the key
Keep the design clean and uncluttered. Focus on the essential elements and prioritize clear communication over visual complexity.

​​Minimalism

an element of design that refers to the visual aesthetics, style, or appearance of the text. It sets the tone and theme of the website.

Typography

Color Combination
Vibrant Dramatic Colors catch more attention from the users.

Color Scheme

-Use a borderless user interface display

-Use one-page website screen better than the multiscreen grid-based interface

-user can browse the website's content in a simple and linear fashion

www.andyhau.com

-Can help capture maximum user attention
-use animated icons and micro-interactions to ensure fluidity in the user's experience

Animation

User can access and browse on any device such as smartphone, tablet, or desktop computer

To test mobile friendliness visit developers.google.com/search/mobile-sites/

Mobile-friendliness

Display

www.apple.com/services

Lateral Puzzle: Confusing Website

A web designer made a website with bright colors, big fonts, and lots of moving parts. It looked great on their computer. But people using phones said it was messy, hard to read, and slow.

The Situation

Hint: The designer liked how it looked. Think about how others see and use websites. Consider how design choices affect reading, speed, and who can use the site on different devices.

The designer probably didn't realize:

Less is more (Minimalism): Too much stuff made it confusing.

Text needs to be clear (Typography): Big fonts can be hard to read.

Colors matter (Color Scheme): Bright colors can be hard on the eyes.

It needs to work on phones (Mobile-Friendliness): It wasn't designed for small screens.

Too much moving stuff is bad (Animation): It made the site slow and distracting.

Principles of Web Development

The accessibility and functionality of the website depend much on the developer

uUser Needs

uUser Experience
uPerformance Optimization – loading time

User focus

uA high-quality website provides relevant and valuable content  and a good user experience

u“How can we identify a good work and how to improve it?

Quality Focus

uKeep it simple and well organized

Simplicity

uWrite codes efficiently.

uFewer codes mean less time spent on maintenance

uUse comments to make code programmer–friendly.

uCode Responsibly </>

Efficiency of Codes

Any Questions?

LAS #1 Activity title: Definition of Terms

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can define terminologies used on the internet.

Instruction: Define the following terms used on the Internet using VISUWORDS.com

1. Internet

2. IP Address

3. Domain Name

4. World Wide Web

5. Web browser

PROCESS QUESTIONS:

1.     How does the Internet work?

2.     What are the devices used to connect to the internet?

Conclusion: _______________________

6. Web document

7. Web page

8. Website

9. Hypertext

10. Hyperlink

LAS #2 Activity title: Search for Websites

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can search for websites that follow each web design principle.

Activity: Concept Notes

PAGES 8-10

LAS #3 Activity title: Evaluate the Websites

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can evaluate if the website follows the principles of web design

Activity: Concept Notes

PAGES 10-11