Scribd
Upload
9 views30 pages

Module 1 Lesson 1

This document introduces web development, focusing on HTML and web design principles. It outlines essential elements for effective web design, such as user experience, color palettes, and clean coding, while also highlighting modern design trends like large typography and card design. The goal is to create websites that engage users and fulfill their intended purpose.

Uploaded by

c.mante.548546
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views30 pages

Module 1 Lesson 1

This document introduces web development, focusing on HTML and web design principles. It outlines essential elements for effective web design, such as user experience, color palettes, and clean coding, while also highlighting modern design trends like large typography and card design. The goal is to create websites that engage users and fulfill their intended purpose.

Uploaded by

c.mante.548546
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Module

1
INTRODUCTION TO WEB
DEVELOPMENT AND GETTING
TO KNOW HTML
Learning objectives:

• Discuss the elements and principles of a web design;


• Explore the different HTML Styles;
• Identify the HTML basic tags and HTML text formatting;
• Implement HTML basic tags, HTML text formatting and HTML
Styles in creating a website.
Module 1 Lesson 1
ELEMENTS AND PRINCIPLES OF A WEB DESIGN
Learning outcomes:

At the end of this lesson, the student is expected to be


able to:
• Know the elements and principles of a web design
Web Design
• MODERN WEB DESIGN is a relative phrase. Some people might
think a website design in 2010 is modern, while others in the web
design field have seen so many new things in the past year, that
anything pre-2019 is already outdated.
• The more simple and clean, the better the user experience is.

• User experience (UX) is the overall experience a person has


using a product (like your website).
Your website design can
affect UX in a few ways:
1. It guides the Reader’s Eye Down the Page.
• A well-designed website will know how to keep the reader scrolling.

2. It captures their attention.


• What happens above the fold really does affect the entire user
experience.
• It only takes 0.05 seconds for a visitor to decide whether or not they’ll
stick around on your website.
Your website design can
affect UX in a few ways:
3. It increases Functionality.
• How your website functions is also a huge factor in overall user
experience.
4. It Promotes Professionalism and can Build Trust.
• Outdated and tacky websites won’t cut it anymore. And, since 94%
of people won’t trust an outdated website, consistently updating
and refining your design and content is the key to pleasing
consumers.
1. A Strong, but limited, Color Palette
• Color schemes and color usage are very
Elements of important when it comes to modern web
Effective Web design.

Design • Simplifying the color scheme of your site


makes it easier to focus.
2. Plenty of White Space
Elements of • White space is also very attractive.
Effective Web • White space is a term used for the amount of

Design “empty” space that acts as a buffer between


all the elements on your page.
Elements of Effective Web
Design
3. Clean Backend Coding
• The most important when it comes to the functionality
of your site.
• Dedicating extra time for clean backend coding will
make it easier to write, read, and maintain how your
site functions.
Elements of 4. SEO-Boosting Elements
Effective Web • There are modern website design elements

Design
that can greatly improve the search engine
optimization (SEO) of your site.
Elements of
Effective Web
Design
5. Valuable Calls to Action
• Converting visitors into leads and
customers is also very important
to modern website design.
• Here's why: Websites are meant to
connect you with the people who
are interested in your content,
products, and services. Once this
connection is made, you want to
retain some sort of relationship
with these visitors.
8 Modern Website Design
Elements and Trends
1. Unique & Large Typography
• Most companies have a particular font or typography that they use to
help their customers immediately identify them versus their competitors.

Why is it useful?
• Typography uses one design trend across the website to lead
readers to different parts of the page.
1. Unique & Large
Typography
2. Large & Responsive Hero
Images
8 Modern Website Design
Elements and Trends
2. Large & Responsive Hero Images
• By focusing on just the image with text rather than a CTA or
social buttons, Medium creates a strong visual experience that
encourages you to scroll down to read more.
Why is it useful?
• Typography uses one design trend across the website to lead
readers to different parts of the page.
8 Modern Website Design
Elements and Trends
3. Background Videos
• Videos that automatically play in the background can add a
lotto a page.

Why is it useful?
• Typography uses one design trend across the website to lead
readers to different parts of the page.
3. Background Videos
8 Modern Website Design
Elements and Trends
4. Semi-Flat Design
• Flat design is any element that does not include or give the
perception of three dimensions, such as shadows.

Why is it useful?
• Flat design helps the visitor understand your content
morequickly, and adding some elements of depth can bring it
tolife.
4. Semi-Flat Design
8 Modern Website Design
Elements and Trends
5. Hamburger Menus
• Advantage: the menu can take the visitor directly to where they want
to go.
• Disadvantage: they generally take up a ton of valuable screen space.
Why is it useful?
• The pages of your website should have a clear path for the
user to take. Removing a busy navigation makes the
experience cleaner and distraction free.
5. Hamburger Menus
8 Modern Website Design
Elements and Trends
6. Giant Product Images
• You may have noticed that many B2B websites are starting to
display large product images on their sites to highlight different
features or parts of their product.
Why is it useful?
• Larger product images help designers highlight different
features of a product in a more efficient and effective way.
6. Giant Product Images
8 Modern Website Design
Elements and Trends
7. Card Design
• With the rise of Pinterest, designers and marketers alike have become
fascinated with cards.
• Individual cards help distribute information in a visual way so the visitors
can easily consume bite-sized pieces of content without being
overwhelmed.
Why is it useful?
• Card design is becoming more and more popular acrossB2B and B2C websites
because it helps to deliver easily digestible chunks of information for users.
7. Card Design
8 Modern Website Design
Elements and Trends
8. Short Product or Feature Videos
• These short videos are great at bringing your solution to life,
while not overwhelming the visitor with a long experience that
they must sit through.
Why is it Useful?
• These short videos allow for your prospect to quickly understand
value without watching a really long, in-depth experience.
8. Short Product or Feature
Videos
Principles of Effective Web
Design
• An effective website design should fulfill its intended
function by conveying its message whilst simultaneously
engaging the visitor.
• A well-designed website can help build trust and guide
visitors to take action.
1. Website Purpose

• Describing Expertise
• Building Your Reputation
• Generating Leads
• Sales and After Care

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy