WEB ENGINEERING

LEARNING OBJECTIVE
 Students will able to understand the
 Website usability and its importance.
 Website design Principle.
LECTURE OUTLINE
• Usability and its importance
Web design Principles
 USABILITY
 It improves the objective of visitor.

 It tells us how effectively, efficiently, and satisfies the visitors or users can see.

 That includes everything a user would typically experience when they visit the
website including any navigation bars, menus, content, images, videos, hyperlinks,
buttons, forms, games, etc.
USABILITY IMPORTANCE
website usability is important because it's about customer service. The
goal of any organization or business professional is to meet their
customer's expectations and needs, as quickly and dependably as possible.
In business as in life.

On the Web, usability is a necessary condition for survival. If a website is

difficult to use, people leave.
A PAGE DESIGNED FOR, AND VIEWED ON, A FULL-
SIZED MONITOR.
THE SAME SITE, BUT WITH A DESIGN OPTIMIZED
FOR MOBILE VIEWING.
WEB DESIGN
CONSTRAINTS
Slow Loading: While lack of a high speed internet access is the one
of the reasons for slow loading of a web page, the file size also
impacts the loading speed.

Technology snags: Improper use of web technology, especially ones

like Flash, JavaScript and HTML frames can make navigation and
reading the web page content difficult.
CONT..
Browser compatibility: Browsers are very common and of no
particular value in today’s market. Google’s Chrome, Microsoft’s
Internet Explorer and others like Safari are amongst the most widely
used browsers. Since different browsers come with difference
specifications and formats, a website’s performance depends largely
on the browser.
PRINCIPLES OF WEB DESIGN/ WEB
CONSIDERATIONS

Design flexibly. for example, taking into account that text

will expand as a user zooms in on your page.

Quality images makes web page attractive.

Responsive web design-Create unique page design or

content for full-sized and mobile sites.
CONT..
Ensure relevant content (and thus low file size) also has a bearing
on the loading speeds

Website developers must use technologies like Java Script carefully

and ensure efficient coding to avoid technical snags impacting
speed and content display for a user-friendly website.
CONT..
 Grid System
The grid system is very old and was used for designing newspaper and
magazine columns and rows. In fact, thousands of variations of
arranging the rows and columns have emerged over time.
GRID SYSTEM STRUCTURE
CONT..
In website designing, the importance of the grid is felt even
more in the modern age. In fact, pre-fabricated grid systems are
used by web designers to create responsive designs for different
screens. The new grids come with coding languages. They are
easily available to the designers as most of them are free to
download.

Popular grid systems for web designing include Simple Grid.

Grid helps the experienced designers to create responsive
designs for different screens of mobile devices.
CONT..
 Hierarchy principles
Web designers should consider the way people like to read content on
computer screens. While reading from left to right is common to a
majority of people, many scripts involve reading the opposite way. A
designers should keep these reading patterns in mind when creating web
pages.

A good knowledge of visual hierarchy helps in making strategies for

right font size, typeface pairing, spacing and color highlights.
CONT..
Fonts safe for web pages

Once browsers supported only selected few fonts. Many fonts were already
installed in the word processing software of the users. Any deviation from
these fonts would result in seeing random symbols.

Now, however, most of the modern browsers come embedded with number of
web-safe fonts. The designers can pay a fee to buy font services such as
WebINK, Fontspring, Fontdeck and Typekit. But nice free fonts too are freely
available from services such as Google Web Fonts.
CONT..
Images and colors

For beginners, one of the most important basics to follow is to stick to

2 or 3 colors. Of course, the colors should appeal the client’s branding,
while highlighting the important content on the web pages.
Select only those images that have some purpose relevant to the
business website. Visitors will lose interest if they find irrelevant
images as a way to fill space. Images should illustrate the
accompanying text that may be describing a product.

The designers should also consider licensing restrictions associated

with images.

A majority of images require you to by licensing rights for

commercial use. This is important to avoid any legal issues arising
later.

Another consideration that helps regarding the file size. Very high
resolution of image files does not serve any purpose and instead it
delays the loading time.
REFERENCES
Basics of Web Design: HTML5 & CSS,5th edition(2019),
ISBN:0135225485, ISBN:9780135225486.

Principles of web Design by Joel Sklar 6th edition(2015), ISBN:

9781285852645.

W3Schools url: www.w3school.com

Tutorials Point url: www.tutorialpoint.com