INTRODUCTION TO WEB DESIGN

IT 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.
SO, WHAT MAKES A GOOD WEBSITE?

According to ideasonpurpose.com “No single aspect of

marketing is more important than a quality website, your
organization’s front door. A “good” website isn’t good enough to
break through and to convert users into engaged customers and
brand ambassadors.What you really need is a great website.”
1. WELL DESIGNED AND FUNCTIONAL
Your site reflects your company, your products, your services and
ultimately your brand. So it’s important to be visually appealing,
polished and professional. Allow white space, uncluttered layouts with
quality photographs and graphics look and let your message shine
through.
Equally important, the site must work quickly, correctly and as
expected. Build to web standards, proofread rigorously and test
regularly for problems with speed or functionality. Every page should
always be fast and functional, because any of them could be a potential
customer’s first or only impression. Broken, slow, or poorly
constructed areas will leave your visitors frustrated and encourage
them to leave.
EASY TO USE
Site visitors are always in a hurry. Don’t make them work for
information. User Experience (UX) plays a key role in helping
visitors use, understand and stay on your website. Create obvious,
logical navigation with clear hierarchy. Use consistent layouts and
visual cues for functionality across the site.
Your site should satisfy both ‘searchers’—coming for something
specific, and ‘browsers’—just looking. Help users accomplish their
tasks quickly with onsite search, and keep them engaged
by suggesting related content and minimizing dead ends.
3. OPTIMIZED FOR MOBILE

Today there are no excuses, your site must look great and work
well on any platform. The growth of mobile and tablet devices is
not slowing down and you just don’t know what your next visitor
will be using. Optimizing for mobile will improve both the
experience of your visitors and your SEO Rankings.
4. FRESH, QUALITY CONTENT

Be succinct, interesting and new. Use language that makes sense

to your audience—avoid jargon, corporate speak and
acronyms. Explain your “Why.” Visitors have short attention
spans: spell correctly, be accurate, be relevant and update
regularly. Blogs and social media updates are great ways to add
fresh content, which keeps visitors returning
and helps SEO strategy. Yes, keeping things fresh requires a bit of
investment.
5. READILY ACCESSIBLE CONTACT AND
LOCATION

Your audience won’t chase you down. Make it easy to engage,

offer multiple points of contact: phone, email, social media and
maybe an easy-to-use contact form. A Google map is a
bonus. Above all, ensure that this information is readily available
on an easy-to-find contact page—if not every page of your site.
6. CLEAR CALLS TO ACTION

If your site asks nothing of visitors, they will surely do nothing.

What is the purpose of your site? Is that purpose clear to
visitors? Even informational sites want visitors to read and share
articles, follow the company on social media, download toolkits,
join mailing lists or learn more about the organization. Include
an ask on each page.
7. OPTIMIZED FOR SEARCH AND THE
SOCIAL WEB
 It’s not enough to build a nice looking website that’s easy to use. It needs to earn traffic.
Otherwise, all that effort in design, UX and content development will be for naught.
There are hundreds of rules and guidelines for effective search engine optimization, so
here are a few to start with:
• Use page titles and meta tags on every page and alt tags on every image.
• Optimize content on your site to align with words real people search for.
• Use keywords appropriately in content and links.
• Use Cascading Style Sheets for layout and keep your HTML code clutter-free.
 Make it as easy as possible for visitors to share your content. Social media can drive large
volumes of traffic and positively impact your search ranking. Don’t forget obvious sharing
links (even if they are rarely used in actuality).
THANK YOU