UNIT I

Web Design Principles

An effective website design should fulfil its intended function by
conveying its particular message whilst simultaneously engaging the
visitor. Several factors such as consistency, colours, typography, imagery,
simplicity, and functionality contribute to good website design.
When designing a website there are many key factors that will contribute
to how it is perceived. A well-designed website can help build trust and
guide visitors to take action. Creating a great user experience involves
making sure your website design is optimised for usability (form and
aesthetics) and how easy is it to use (functionality).
Below are some guidelines that will help you when considering your next
web project.

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;
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

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 organised. 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. Optimising 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.
Planning Process

1. RESEARCH AND GOAL SETTING

As with any project, it is important to do proper research and set goals before
beginning. By setting goals, it will help the website to have a direction and will also
help your business to achieve specific accomplishments. The planning and goal
setting process could take about 1-2 weeks to complete. It is a very important first
step to creating a website
By setting goals for your website, you will be helping the site to have a clear
direction and purpose. This is important to the rest of the steps. When setting your
goals, you should think about outlining what you would like the rest of the steps to
look like. 

2. PLANNING THE SITE

Planning the website involves creating a wireframe and sitemap. This is an

important step because it is kind of like the skeleton of your site. This process can
take about 2-6 weeks to complete. The sitemap allows the developer to get an
outline of what the site will look like, what pages there will be and how they will
interact with each other. This not only helps with planning but is also beneficial to
the user experience.
A user should be able to easily navigate a site, and this begins with the development
of the sitemap. Before you begin to plan content, a sitemap lets you design what the
structure will look like. Once the sitemap is completed, the other part of this step is
to create a wireframe or mock-up. These are just visual representations of what the
site will look like. This does not include the layout details. That comes next.

3. DESIGNING THE LAYOUT

The details of the layout are what will give your website character. This is the step
where you get to be creative with pictures, videos and what kinds of things the
customer will notice when they come to your site. This process can take about 4-12
weeks from start to finish. The timing depends on experience, time spent on the
project, and how thorough the developer is. During this step, it is especially
important to keep referring back to the target audience you wish to focus on.

Consider colors, logos, and anything that will encourage your audience to interact
with the site. By considering how you will create the layout of the website, you are
attempting to bring the website to life. It should help the audience to get a feel for
your business or product. Please note this step does not yet involve written content.
That is the next step. The written content is so important that it needs its own step.  
4. WRITING THE CONTENT

This step may be going on simultaneously with the other development planning
steps. The written content of a website is so important to its success. While this step
may be happening during other steps, it is one that is crucial and deserves a lot of
expertise. It could take from 5 to 15 weeks. The written content on a website is
going to help a visitor determine their next steps. It is vital to drawing customers in
and keeping them. There is a lot to consider when working on the content of the
website.

When determining what words to use, it is important that they are not too hard to
understand. A general rule is that you have to assume not everyone is going to want
to read words that are higher vocabulary. A website should have a vocabulary that
the average person can understand.

5. CODING THE WEBSITE

Now that all aspects of your website have been created, you are ready to actually
begin creating the website itself. The coding typically begins with the homepage and
gradually branches out to the other pages included in the site. This would be where
the sitemap is followed to ensure everything is coded correctly. The coding step
could take from 6 to 15 weeks, depending on how much content and how intricate
you would like your website to be. It is also important to set up frameworks and
CMS to make sure that everything will fit onto the server during the installation
process. You wouldn’t want to do all that work only to find out it doesn’t fit.

6. TESTING AND LAUNCHING

Before the website is launched, it is crucial that it is tested out by real users. All the
links and content should be tested to see if it works. Not only is it important to test
out all the buttons and everything on the site, but it is also important to test out
what users think of it. There is user testing that can be completed to make sure the
website is giving users what they need to be successful on the test.

Don’t just check the website once, but check it over multiple times. When you are
confident that everything is in working order, you can go ahead and launch your
website live. When it comes to launching, you are finally ready and can do this by
uploading it to the server. You will need FTP (File Transfer Protocol) for this process.
It is also important to make sure everything is running smoothly immediately after
launching. Testing and launching may take 2-4 weeks to complete.
7. MAINTENANCE
You might think your job is done once the website is launched, but this is not the
case. Since technology and products are changing more rapidly than ever before, it
is important to stay up-to-date with what is happening on the internet. Maintaining
a website is hard work, but the more effort put into its maintenance, the better.
There are a few different pieces to website upkeep.

For one, it should constantly be checked out for errors. When a user encounters an
error, this may be frustrating and may cause them to find what they are looking for
somewhere else. Errors can also completely block them from the information they
need to make a decision on purchasing a product or service. This is why it is
important to not only test your website for user experience before the launch, but
after as well.

User-experience should be tested often, and it should be ongoing. This will ensure
that if something comes up, it can be fixed right away. A website that has constant
broken links or outdated content will not make its users happy. By having regular
maintenance on a website, bugs can be fixed as soon as they are detected. A
problem cannot be fixed if it is not known. An unhappy user means that you are
losing current or potential customers.

Another important aspect of maintaining a website is to ensure that all content is

current. This means that the correct information is on the website such as contact
information, pricing, and customer reviews. By giving bad or outdated information,
a customer will not be able to get in touch with the business owner, complete a
purchase, and it can be frustrating.

While maintaining a website can be important, it might seem like hard work. It is
important to know that there are many tools out there that can be downloaded
right onto the website. Reports can be sent daily or in other time increments to give
you data and information about how the site is performing.

5 Golden Rules For Web Designing

Web designing market is expanding with time. More employment of

web designers is expected by coming five years. Therefore, people
are taking more interest in the respective field, but that’s not enough
we must know some techniques or rules about designing to be long
in the market.

So here are the five golden tips for web designing that help newbies
and even professionals, both:

Customer Demographics

Target your customers for whom you want to create a website. Study
about them; their views, standards, ideas, sentiments, and their
preferences. Understand your targeted-customers’ psyche and create
a website design that appeals them. In case if your website is for
general public then choose formal designs or themes that appeal all.
Make your site more user-friendly by keeping it simple and
minimalist enough to understand for the visitors.

Useful Content

Before starting a website one must think about what he is going to

offer the people and what will be the purpose of the website. By
defining the purpose of the site and identifying the customer’s
demographics you can add relevant content to the site.

People come to your site again and again only if they find any useful
content for them. So, try to offer your visitors’ things that they want
to read, visuals through which they interact, products that they want
to buy. Avoid spelling mistakes, grammatical errors and, plagiarism.

Call to Action
If your website is not making good conversions than it is a time to
worry. And remember there is a strong relationship between site’s
conversions to the ‘call to action’. Call to action is just a short line
that we add for the visitors’ convenience. It guides visitors to take an
immediate action with one click. It could be ‘call now’, ‘message us’,
‘need help?’, ‘add the product in cart ’, ‘click here’. It will also
increase site UI and UX.

Study Your Competitors

Study your predecessors and present rivals, it is beneficial in many

ways — you ignore same mistakes by knowing their flaws and make
your design even better. But do not affiliate or steal their strong
points. Your main goal should be always to create a unique site and
put a matchless web-content.

Check and Balance

Once you have designed a website then continuously check. Measure

the results and see if your website is fulfilling your goal or not. See if
your site is offering a customer things they want from your site or
not.

In case of any lack or complain, should work immediately.

Continuous check and balance are needed that help designer to
come up with an even better thing.

Designing a website is not just the matter of coding or combining

layouts, visuals or typography. Rather it requires a strong strategy
and thorough research. By using above mentioned tips you can able
to design your site easily.

Designing Navigation Bar

The Must-Have Components of a Quality Nav Bar

Simple
It should be simple and clear, with text that’s easy to read.
 

Brief
Real estate is at a premium in your nav bar. Keep text brief; e.g. “Contact Us” instead of
“Click To Contact Us” or “Blog” instead of “Read Our Blog.”
 

Consistent
As the “anchor” of your navigation, the nav bar should be consistent across all pages.
 

Noticeable
Simple doesn’t mean boring. The nav bar should pop and catch the eye; feel free to use
contrast, color schemes, and other visual tricks to highlight the clickable elements.
 

Helpful
Most importantly, your nav bar should answer questions—not create them.

Designing the Ideal Nav Bar

So, with conventional best practices out of the way, how can you design a nav bar that’s
perfect for your brand? This comes down to a series of questions that you’ll have to ask of
your website, your brand, and your market.

Start with a plan

The first step is to lay everything out and get a feel for which navigational elements are most
crucial to your website. Look at your sitemap and get a feel for how many pages you have
and how each page connects to the others. Wait to design your nav bar until you have these
elements lined out, as they’ll form the foundation for which links to include in your top-level
navigation.

Select a style
Navigation bars can rest anywhere on your website, usually sitting at the top, left side, or
right side of your page. There’s no “correct” choice for where to place it, as each style has its
own advantages.

 Horizontal Top: Horizontal nav bars resting at the top of the page are the most
common style— classic, popular, and intuitive for your readers. It’s also amenable to
responsive web design, great for pages that need to be viewed on differently sized
screens.

 Horizontal Bottom: You can also include your nav bar at the bottom of your page.
This is less common and is generally done when you want to place high-value,
attention-grabbing images front and center.

Of course, there are additional concerns beyond this initial choice. For example, should you
have your nav bar fixed at the top of the page or not? Fixed navigation bars typically work
better for long-form pages where users will need to do a lot of scrolling, so keep that in
mind as you consider how your nav bar will fit in your page.

 Vertical Left/Right: Nav bars that run the vertical length of your page are more
modern than horizontal options, and they’re able to accommodate more links. While
horizontal nav bars work best fewer options, vertical nav bars give you more room
and flexibility to build out options.

 Hamburger Menu: Made popular on mobile applications, hamburger menus are

another option. They keep navigational options collapsed until users hover over the
menu; this is ideal for mobile browsing where space is limited. However, as they
obscure navigation options, they’re not the best option for desktop experiences.

Consider which elements to include

Now that you’ve selected a style, go back to your sitemap and select which categories to
include. Here, you’ll need to make further decisions, such as whether to include submenus
for each option.

It can be tempting to create extensive submenus in the interest of giving information to

readers, but tread lightly—users may get overwhelmed with too many categories.

Establish navigational cues

As we mentioned above, part of creating a great nav bar is creating an intuitive experience.
Use navigational cues, such as including your primary brand logo in the top left corner of
the page, and making the icon redirect users to your homepage. Most readers expect this,
and it’s annoying when a website ignores it.

You can alter your nav bar design to provide cues to readers as they browse. For example,
highlight the active page in a different color or use subtle color gradients to indicate which
pages the viewer has already visited. These are great final touches for helping readers orient
themselves—regardless of where the nav bar lives.

 Web Page Design

How does a Web Page Work?

A simple web page is created using HTML, which is a markup language. However, we
can also use CSS and JavaScript to add more functionalities and make it more
attractive.

It is created using HTML, hence containing different markup tags that specify how
the data should be formatted on screen.

The webpage is contained within the webserver. To load this webpage, a client sends
the request to the server, and generally, the browser is known as the client, which can
request the page on the internet.

The web browser requests the page on the internet. Once it is responded to by the
server, the browser interprets the markup tags and displays them on the user's
screen in the correct format.

The browser sends the request for a page or a file via an HTTP request. The HTTP is
the Hypertext Transfer Protocol, a network protocol that allows transferring
hypermedia documents over the internet between a browser and server.

Once the request reaches the server, the HTTP server accepts the request, finds the
requested page, and sends it back to the browser through the HTTP response. If a
server is unable to find the requested page, it returns a 404 response.
Elements of a Webpage
The main element of the webpage is a text file composed of HTML. Apart from this, a
webpage can also have the following elements:

o CSS: The CSS code is used to make the page more interactive and control its look
and feel.
o Scripts: The JavaScript code is included in a webpage to add interactivity to the page
and add more functionalities to it.
o Media: It is used to include media components such as audio, video, and images.

Although every web page is different from another web, some components are
common to almost all the pages. Some of these components are given below; you
can also relate these elements by the given image:

1. Name of the Website: Each webpage includes the name of the website or company,
or blog to which it is attached. The name of the website and the logo are mostly
situated at the top-left corner of the page. The logo may also contain a slogan of the
site or a brief introduction to the site so that visitors can quickly identify what this site
is about. It is one of the important components of the webpage.
The website's name also has a link that can redirect to the home page of that
site. The name of the website usually includes at the header of the page.
2. Search bar: A search bar is also an important component that should present on
each page of a website or blog. The search blog allows the visitor to search related
information on that website.
3. Navigation Bar: A navigation bar is a component of a webpage that contains links to
some important sections of the website. It helps the visitors to easily traverse some
major sections of the website. It is placed mainly on the top of the web page or the
left side of the page. When the user clicks on any link given in the navigation bar, it
redirects to the page.
4. Heading of the page: Heading of the page tells the main information about the
page, i.e., what this is all about. The heading is available on the top of the page, and
it is included with the help of the <h1> tag of HTML.
5. Content of the Page: The content of the page means the information of the page. As
you are visiting this page and reading this information, all the information contained
within this page is known as the page's content. It may contain below sub-elements:
o Paragraphs: A webpage can have different paragraphs as per their length.
The opening paragraph is crucial on the whole page, as it draws the attention
of the visitor. If the first paragraph is not interesting and not related to the
topic, a user may leave the page immediately. To create a paragraph <P>
tag is used in HTML.
o Subheadings: A page may have different subheadings as per the topic,
whether related to information about something or a website's web page. In
HTML from <H2> to <H6> tags are used for including subheadings. Each
page should be divided into different subheadings to make it easier for the
users to read and understand.
o Images: Each webpage contains images to make its content more attractive.
To include an image, <img> tag is used in HTML.
6. Feedback or Comment form: Different websites include a Feedback or Comment
form on each webpage. It is used to know the visitor's views about the information of
that page and any other feedback for the page or site. It lets to know the creator of
the page that if the information is helpful or not.
7. Social Share links: Social share links allow the visitors to share that webpage with
their friends on different social sites such as Facebook, Linked In, Twitter, etc.
8. Copyright Info: Each webpage must have Copyright information along with Privacy
Policy. This information is available at the end of the page or on the footer of the
page.
9. Go to Top: On most of the pages, a Back to Top button or link is available. This
option helps the users to return to the upper section of the page.
10. Advertisement Banner: Whenever you visit any good website, you see different
advertisement banners on each site's page. These banners are used to displays ads in
different places on a page. These banners are used to provide monitory benefits to
the owner of the website.
11. Previous and Next buttons or links: On most of the pages, previous and Next
buttons are available that help the user easily navigate to the previous and next page
related to the topic. A page can also have links to other pages.
 12. Company Info: On the footer of the page, there is a brief introduction about the
company or website of that page. By this, visitors get to know about the company
and can build trust in it.

There can also be some additional information and tools such as a button to print
the page that can also be helpful for users.

Types of a Web page

There are mainly two types of a Web page based on functionality:

o Static Webpage
o Dynamic Webpage

Static Webpage
Static webpages are those webpages that cannot be modified or altered by the
client. These are also known as stationary or flat web pages. They are displayed on
the client's browser in the same format and manner as they are saved in the
webserver. Users can only load the page and read the information but cannot
perform any change on the page.

A static webpage is generally made up of HTML and CSS only.

Dynamic Webpage
As the name suggests, Dynamic webpages are dynamic, which means it shows
different information at different point of time.

The dynamic webpage shows different content each time it is viewed. There are two
types of Dynamic web pages, which are:

o Server-Side Dynamic Webpage: These web pages are created using Server-side

scripting. These pages are changed when they are visited or viewed. Some examples
of server-side pages are login pages, submission forms, shopping carts, etc.
Various scripting languages such as PHP, ASP.Net, JSP, etc., can be used for server-
side scripting.
o Client-side Dynamic Webpage: These web pages are created using Client-side
scripting. These pages get changed in response to actions that occur within that
page, such as mouse or keyboard action. Scripting languages such as JavaScript,
Dart, etc., can be used for client-Side scripting.
Home page

A home page (or homepage) is the main web page of a website.[1] The term may also refer to
the start page shown in a web browser when the application first opens.[2] Usually, the home
page is located at the root of the website's domain or subdomain. For example, if the domain
is  example.com , the home page is likely located at  www.example.com/ .

Function
A home page is the primary web page that a visitor will view when they navigate to a website via
a search engine, and it may also function as a landing page to attract visitors.. [3][4] In some cases,
the home page is a site directory, particularly when a website has multiple home pages.
Good home page design is usually a high priority for a website;[5] for example, a news website
may curate headlines and first paragraphs of top stories, with links to full articles.[6][7] According
to Homepage Usability, the homepage is the "most important page on any website" and receives
the most views of any page.[8] A poorly designed home page can overwhelm and deter visitors
from the site.[7] One important use of home pages is communicating the identity and value of a
company.[9

Elements
A homepage is oftentimes designed to catch attention, and as such, important elements are
positioned at the top in a strict hierarchy of importance. [10] Curating which content to display on a
homepage, as to not overwhelm visitors, is important to a well-designed page.

Web Design
Find out how following a structured website design process can help you
deliver more successful websites faster and more efficiently. \

 steps to design a website requires 7 steps:

1. Goal identification: Where I work with the client to determine what goals the
new website needs to fulfill. I.e., what its purpose is.
2. Scope definition: Once we know the site's goals, we can define the scope of
the project. I.e., what web pages and features the site requires to fulfill the
goal, and the timeline for building those out.
3. Sitemap and wireframe creation: With the scope well-defined, we can start
digging into the sitemap, defining how the content and features we defined in
scope definition will interrelate.
4. Content creation: Now that we have a bigger picture of the site in mind, we
can start creating content for the individual pages, always keeping search
engine optimization (SEO) in mind to help keep pages focused on a single
topic. It's vital that you have real content to work with for our next stage:
5. Visual elements: With the site architecture and some content in place, we can
start working on the visual brand. Depending on the client, this may already
be well-defined, but you might also be defining the visual style from the
ground up. Tools like style tiles, moodboards, and element collages can help
with this process.
6. Testing: By now, you've got all your pages and defined how they display to
the site visitor, so it's time to make sure it all works. Combine manual
browsing of the site on a variety of devices with automated site crawlers to
identify everything from user experience issues to simple broken links.
7. Launch: Once everything's working beautifully, it's time to plan and execute
your site launch! This should include planning both launch timing and
communication strategies — i.e., when will you launch and how will you let the
world know? After that, it's time to break out the bubbly.