Scribd
Upload
985 views16 pages

Web Design for Tech Students

This document discusses web design principles and elements. It introduces the five basic principles of web design: purpose, simplicity, load time, communication, and being responsive. It then describes key elements of web design like content, usability, aesthetics, visibility, and interaction. It provides examples of each element and explains how they contribute to a good user experience. Finally, it outlines a performance task for drafting a basic website design using various materials and refers to criteria for the task.

Uploaded by

Shawn Michael Bulos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
985 views16 pages

Web Design for Tech Students

This document discusses web design principles and elements. It introduces the five basic principles of web design: purpose, simplicity, load time, communication, and being responsive. It then describes key elements of web design like content, usability, aesthetics, visibility, and interaction. It provides examples of each element and explains how they contribute to a good user experience. Finally, it outlines a performance task for drafting a basic website design using various materials and refers to criteria for the task.

Uploaded by

Shawn Michael Bulos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
  • Introduction to Empowerment Technology Class: Introduction to the Empowerment Technology class and overview of the topics covered, including web design principles.
  • Web Design Principles and Elements Overview: Introduces the basic web design principles and elements, aiming to build foundational knowledge for the course.
  • Learning Competencies and Design Review: Outlines the essential learning competencies for the module and provides an overview of design principles like contrast and alignment.
  • Examples of Web Resources: Provides examples of various web platforms and resources such as Kahoot, Microsoft, and DepEd Commons that support learning and development.
  • In-Depth Web Design Principles: Discusses the five basic principles of web design in detail including purpose, simplicity, load time, communication, and responsiveness.
  • Detailed Web Design Elements: Explores web design elements like content, usability, aesthetics, and interaction, emphasizing their impact on user engagement.
  • Anatomy of a Website: Visual breakdown of a website's structure including headers, navigation, and content layout, helping students understand website components.
  • Performance Task and Criteria: Details the performance task requiring students to draft a website design and outlines the criteria for assessment.
  • Inspirational Quotes and Closing: Ends with motivational quotes and a seasonal message to inspire students post-completion of the module.

Welcome

to
Empowerment
Technology
Class
WEB DESIGN PRINCIPLES AND ELEMENTS

Empowerment Technology Module 9: Web Design Principles and


Elements
MOST ESSENTIAL LEARNING COMPETENCIES

Apply web design principles and


elements using online creation tools,
platforms, and app locations to
communicate a message for a specific
purpose in specific professional
tracks.
(CS_ICT11/12-ICTPT-Ig-h-10)

Empowerment Technology Module 9: Web Design Principles and


Elements
It gives an ordered appearance to images, shapes, and blocks
Alignment

Repetition of colors, shapes, textures, spatial Repetition


relationships, line thickness, fonts,sizes, graphic
concepts, etc
It happens when there is a difference between the two opposing
Contras design elements. The most common types of contrast are dark
t vs. light, contemporary vs. old-fashioned, large vs. small, etc.

Proximity Grouped elements visually connected by way of font, colour,


size, etc.

PRINCIPLES OF DESIGN: Review


Web Design Principles and Elements
5 Basic Web Design Principles

 Purpose
 Simplicity
 Load Time
 Communication
 Responsive

Empowerment Technology Module 9: Web Design Principles and


Elements
Web Design Elements
Element of web design is the overall appearance of your website.
It is the convergence of all visual elements that contribute for a complete user
experience based on its content, usability and other aspect of the website.

• Content - considered as the backbone of Website, this is the main


reasons people seeking a website

• Usability - Usability anticipates what the users may think and help them
fulfill their needs with as little effort as possible. Website must be easy to
navigate, accessible and user-friendly using navigation buttons.

Empowerment Technology Module 9: Web Design Principles and


Elements
Web Design Elements
• Aesthetics - includes factors such as balance, movement, pattern,
scale, shape and visual weight.

• Visibility - The success of your website is based on the volume of user


engagement you have. Even if you had the most aesthetically pleasing and
user-friendly website on the web, it would still be unsuccessful unless it
could be found

• Interaction - This allows you to engage with the users, hold their
attention, direct them and finally encourage them to contact you.

Empowerment Technology Module 9: Web Design Principles and


Elements
Anatomy of a Website
Performance Task

Draft your website in a short bond paper. You can use basic coloring
materials, paper cut-outs, Microsoft word or Photoshop to illustrate your
website. Please refer to the criteria for your reference

Module 9. Performance Task


Module 9. Performance Task Criteria
There are three responses to a piece of design….
yes, no, and WOW! Wow is the one to aim for.”
— Milton Glaser
Have a
meaningful
Christmas
and a blessed
New Year!

You might also like