Scribd
Upload
15 views

Intro-to-web-part-1

Uploaded by

Eman Seguido
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Intro-to-web-part-1

Uploaded by

Eman Seguido
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

INTRODUCTION TO WEB DESIGN

ITC 122
COURSE DESCRIPTION
The course aims to provide the students with the basic
knowledge and expertise to construct a sophisticated personal
and business web pages using the latest markup language. It
emphasizes on the use of HTML and Cascading Style Sheets. It
also integrates the use of multimedia elements such as graphics,
audio and video. It also discusses web site planning and design
(Software Development Life Cycle) along with identifying
customer requirements, target audience identification, and
website hosting details.
WHAT DOES WEB PAGE MEAN?
A Web page is a document for the World Wide Web that is
identified by unique uniform resource locator (URL).A Web page
can be accessed and displayed on a monitor or mobile device
through a web browser. The data found in Web page is usually in
HTML or XHTML format. The Web pages usually also contain
other resources such as style sheets, scripts and images for
presentation. Users may be able to navigate to other pages
through hypertext links.
A Web page is a representation of a document that is actually
located at a remote site. The information on a Web page is
displayed online with the help of a Web browser such as Mozilla
Firefox, Google Chrome or Safari. The Web browser is connected
to the Web server, where the website’s contents are hosted
through HTTP. Every Web page corresponds to various types of
information presented to the visitor in a visual and readable
manner.
WHAT ARE THE 3 MAIN TYPES OF WEBSITES?
Websites can be broadly classified into three main type: static
websites, dynamic websites, and e-commerce websites. Each type
has its own characteristics, advantages, and use cases.
WHAT IS THE DIFFERENCE BETWEEN A STATIC AND
DYNAMIC WEBSITE?

While static websites tend to be informational, dynamic websites


contain interactive, continually changing elements. As a result,
web developers typically use a combination of client-side and
server-side programming to create a truly interactive website
experience for visitors.
STATIC WEBSITE
Static web pages are made of “fixed code,” and unless the site
developer makes changes, nothing will change on the page. Think
of it like a brochure for a business. Static sites give a lot of the
same type of information that you could get from a brochure, but
it can't just change itself.
Common examples of static websites include resume websites,
portfolio websites, brochure websites, one-off landing pages, and
other informational or read-only sites. These websites are small
(three to four pages or fewer), limited in content, and don't
require personalized content or frequent updates.
DYNAMIC WEBSITE
A dynamic website is a website that changes as users interact
with it. Dynamic websites allow for things like showing real time
inventory and personalization by user.
The goal of many websites today is to adapt and customize their
offerings to their website visitors.
A dynamic website addresses this by displaying different types of
content that can change according to website visitor location,
their time of visit, preferred language setting, and type of device
they’re using.
WEB-DESIGN PRINCIPLES
Web design principles are general rules for the design of web-
based media that include basic guidelines for the design of
layouts and interaction design.
1. WEBSITE PURPOSE
Your website needs to accommodate the needs of the user.
Having a simple clear intention on all pages will help the user
interact with what you have to offer. What is the purpose of your
website? Are you imparting practical information like a ‘How to
guide’? Is it an entertainment website like sports coverage or are
you selling a product to the user? There are many different
purposes that websites may have but there are core purposes
common to all websites;
COMMON CORE PURPOSES

1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care
2. SIMPLICITY
Simplicity is the best way to go when considering the user
experience and the usability of your website. Below are ways to
achieve simplicity through design.

 Color
 Type
 Imagery
COLOR

Color has the power to communicate messages and evoke


emotional responses. Finding a colour palette that fits your brand
will allow you to influence your customer’s behavior towards your
brand. Keep the colour selection limited to less than 5 colours.
Complementary colours work very well. Pleasing colour
combinations increase customer engagement and make the user
feel good.
TYPE

Typography has an important role to play on your website. It


commands attention and works as the visual interpretation of
the brand voice. Typefaces should be legible and only use a
maximum of 3 different fonts on the website.
IMAGERY

Imagery is every visual aspect used within communications. This


includes still photography, illustration, video and all forms of
graphics. All imagery should be expressive and capture the spirit
of the company and act as the embodiment of their brand
personality. Most of the initial information we consume on
websites is visual and as a first impression, it is important that
high-quality images are used to form an impression of
professionalism and credibility in the visitors’ minds.
3. NAVIGATION
Navigation is the wayfinding system used on websites where
visitors interact and find what they are looking for. Website
navigation is key to retaining visitors. If the website navigation is
confusing visitors will give up and find what they need elsewhere.
Keeping navigation simple, intuitive and consistent on every page
is key.
4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text
on a website. Eye-tracking studies have found that most of what
people see is in the top and left areas of the screen. The F shaped
layout mimics our natural pattern of reading in the West (left to
right and top to bottom). An effectively designed website will
work with a reader’s natural pattern of scanning the page.
5.VISUAL HIERARCHY

Visual hierarchy is the arrangement of elements in order of


importance. This is done either by size, colour, imagery, contrast,
typography, whitespace, texture and style. One of the most
important functions of visual hierarchy is to establish a focal
point; this shows visitors where the most important information
is.
6. CONTENT

An effective website has both great design and great content.


Using compelling language great content can attract and
influence visitors by converting them into customers.
7. GRID BASED LAYOUT

Grids help to structure your design and keep your content


organized. The grid helps to align elements on the page and keep
it clean. The grid-based layout arranges content into a clean rigid
grid structure with columns, sections that line up and feel
balanced and impose order and results in an aesthetically
pleasing website.
8. LOAD TIME

Waiting for a website to load will lose visitors. Nearly half of web
visitors expect a site to load in 2 seconds or less and they will
potentially leave a site that isn’t loaded within 3 seconds.
Optimizing image sizes will help load your site faster.
9. MOBILE FRIENDLY

More people are using their phones or other devices to browse


the web. It is important to consider building your website with a
responsive layout where your website can adjust to different
screens.

You might also like