Difference Between a Webpage and Website

When it comes to the internet and browsing, there are a lot of jargons and technical terms doing
the rounds, of which webpages and websites also make the list. These are two related terms, but
with different functionalities.

A. Website
A website is a combination or collection of webpages grouped together, often handled by a
person or an organization, which can be accessed anywhere and anytime by anyone via the
internet. Websites can also be either static or dynamic. In the meantime, some popular categories
of websites are affiliate websites, e-commerce websites, dating websites, social networking
websites and more.

B. Webpage
Webpage is a single document or page that is displayed in web browsers like the Firefox, Google
Chrome, and Opera and so on. This is used to make up the World Wide Web (WWW) and is
used chiefly to sell products and services to users or visitors. A unique URL address is also
attached to the webpages and is used to render or access that particular page. Webpages can also
be either static or dynamic.
Webpage Website

A webpage contains content about a specific topic A website houses content on a variety of topics

Created using HTML and CSS Content is coded in HTML

Can be accessed via a direct URL link or through a website Accessed through a domain address

A single hypertext document linked to a website A collection of various pages hosted on a server

Stores the content or resources to be displayed on a website Stores the content or resources to be displayed on
a website

Generally, simpler to develop Can be more complex to develop

Takes less time to develop Development may take more time

Development of information requirement

Website requirements are a list of necessary functions, capabilities, or characteristics related to
your website and the plans for creating it. There are several types of requirements that may be
defined during the process that come together to focus and prioritize the project plan.
Some of the requirements are the following:
  Business Requirements define the objectives and what problems the stakeholder
intends to solve with the product.
 User Requirements describe how user expectations and how they will interact with
the product. Use the features, functions, and content described in your scenarios to
develop your requirements. Your user scenarios should outline the tasks your users
want to complete on your site.
 Functional Requirements provide details of how a product should behave and
specify what is needed for development.
 Quality-of-Service Requirements detail what characteristics a product must
maintain in order to maintain its effectiveness and any constraints.
 Implementation Requirements are used to detail changes in process, team roles,
migration from one system to another, etc.
What do you need to build a website is the following:
1. Domain name 8. Web Designer
2. Web Hosting 9. SSL (Security Socket Layer)
3. Business email address 10. Google Analytics
4. Logo design 11. XML Sitemap
5. Favicon (Favorites Icon) 12. Website security and firewall
6. Images 13. Website maintenance
7. Text content
Intended Audience
The “intended audience” is the group of people for which the service or product is made. You
could also think of this group as the “targeted audience” in another sense. A target audience is a
group of people to whom you want to sell a product or service. It may show the kind of people
who are more likely to buy that product or service

Types of client interactions

 Requests: These interactions involve customers asking for new features and functionalities.
Let such customers know that you’ve received their requests and will get back to them.

 Questions: Customers that don’t understand how to get something done or are trying to
figure out your tool will reach out with questions. Providing an in-app resource center with
rich materials will enable these customers to solve most of their problems themselves.

 Complaints: All customer interactions are important, but complaints should be taken very
seriously. Not every user that encounters friction will come complaining. Best believe the
few who do represent a large chunk that will rather lag or churn than send complaints
  Compliments: These interactions come from satisfied customers who reach out to praise
your brand. Appreciate them for taking the time to compliment you. You could also
encourage them to leave a review if they can.

Web design Software and Code Editor

Web designing is the process of planning, conceptualizing, and implementing the plan for
designing a website in a way that is functional and offers a good user experience. User
experience is central to the web designing process. Websites have an array of elements presented
in ways that make them easy to navigate. Web design software enables users to create and edit
the front-end visualization of web pages or website prototypes. These tools provide layout
templates, a library of animations and interactions, and vector graphic creation to create unique
and customized websites.
Here are some text editors so, choose wisely.
A. Visual Studio Code
Visual Studio Code is a free and open-source code editor developed by Microsoft. It is a
lightweight but powerful editor that is used by millions of developers worldwide.
B. Sublime Text
Sublime Text editor is the best code editor for a complete development environment as it groups
code, markup, and prose in a single tool.
C. Notepad++
Notepad++ has an amazing execution speed. It is lightweight and uses fewer computing
resources, so it is suitable for users with low-end systems. This text editor is also simple and
efficient.
D. Atom
Atom is a robust text editor that supports real-time collaboration. Developers can code together
using the Teletype tool, available in beta form. Additionally, this text editor is available for
cross-platform editing so users can also work across operating systems.

Fig 2.2: Website Architecture

Hierarchy of information
The hierarchy of information is a universal design principle that should be used in all forms of
design, including e-Learning design. By definition, it is the arrangement of elements or content
on a page/screen in such a way that it reveals an order of importance (either ascending or
descending).
Design elements can consist of anything including typography, graphics, colors, contrast, weight,
position, size and space (including negative space). The trick is how you use these elements to
accomplish the order of importance that you want.
The four types of website structures fall into two categories: top-down or bottom-up.
 Top-down approach
A top-down approach focuses first on general categories of the content. Designers can logically
divide the content by gradually breaking it up into categories. This can help inform the taxonomy
or hierarchical structure of the website.
 Bottom-up approach
The bottom-up approach is, as you can probably tell, the opposite of the top-down approach.
Where the top-down approach focuses on cataloging content into categories, the bottom-up
approach focuses first on creating a structure based on the content that is available for the
website by grouping the elements into categories of the lowest level first and in turn grouping
these categories into higher level ones.
 The 4 Types of Website Structure
Below is a breakdown of the four main types of website structures used today with use cases on
when each one is more appropriate.
1. Hierarchical

A hierarchical structure, which is sometimes referred to as a tree structure, is the most popular
website structure. It moves from larger, more general category pages into smaller, individual
pages. Hierarchical structures are great for websites with large amounts of data like e-commerce.

2. Sequential/ liner Structure

A sequential, or linear, website structure is one that follows a simple page-to-page path. These
are more common for simple websites or when creating a campaign with multiple landing pages.
If you’re a startup or a small business, you probably only have a few essential pages you want to
display so this approach would make sense.

Fig 2.5: Sequential/ liner Structure

3. Database
A database structure is one of the most complex website structure types using a bottom-up
approach.
This approach requires special attention to tagging and metadata in order to create a searchable
database for users to access. Site search is becoming more and more popular and can be a
valuable tool for increasing conversions.
4. Matrix
A matrix structure is one of the oldest structure types on the internet. It’s complex and non-
traditional that is best navigated using search and internal links. Wikipedia is a prime example of
a matrix structure. There are seemingly endless possibilities for the next steps a user can take and
with more than 80 percent of their traffic coming from organic searches, it works.
A. Types Of Website Labels
 Navigation Labels
Navigation labels are the tags that we use to describe the information displayed under each of the
menu items on a navigation menu and other navigation elements. This includes the main menu,
website’s footer, and any secondary menus, if applicable.
 Content Labels
Content labels are another really important category of website labeling that needs extra
attention. These are descriptive tags referring to the content that the user will consume.
There are a lot of different types of labels that fall under this category, including headings and
subheadings. These are particularly important since they help the user scan the copy easier and
consume the content with ease. Content labeling is equally important for the overall SEO health
of the page, or website in general. This means that search engines can understand the type of
content that you are displaying and can index it. You can test the quality of your content labels
by conducting Content Testing.
 Metadata Labels
‘Metadata labels’ is another essential category of website labeling that you need to pay close
attention to. These tags are used to give more information about the content of your website.
Although these labels are not visible to users, they are extremely helpful data points for search
engines.
Website navigation system
Web navigation refers to the process of navigating a network of information resources in the
World Wide Web, which is organized as hypertext or hypermedia the user interface that is used
to do so is called a web browser.
Website navigation is the act of clicking and looking through resources on the internet, such as
the various pages that make up a website. Users navigate websites using a web browser and
clicking on links that transport them to other pages when clicked. There are two kinds of links
you might use for website navigation:
 Internal links: Internal links connect to pages within the same website.
 External links: These links connect to other websites.
A website navigation menu is an organized list of links to other web pages, usually internal site
pages. Navigation menus appear in page headers or sidebars across a website, allowing visitors
to access the most useful pages quickly.
 Developing Demographics-Driven, Logical Labelling Systems
Labeling is a way of representing content on the web. It helps users understand and navigate the
website efficiently, without wasting space or time. Labels should reflect the organization and
navigation systems of the website, and use professional language that builds user confidence.
Labels are short and simple links to more detailed information. They are important for making
the website easy to organize and navigate, so they should be designed for the specific audience
of the website and summarize the concepts they represent.

Information Architecture Prototyping

A prototype is a functional, not final version of a product or service that can be used for testing,
feedback, and investment purposes. It is a visual and interactive representation of the product’s
design, features, and behavior. It helps to explore and experiment with different options and
scenarios, and to communicate the product’s purpose and value to various stakeholders.
Prototyping is a process that begins and ends with purpose, requiring understanding of screen
behavior, feature operation, and user needs.

A prototype is built through a systematic process of defining goals and audience, conducting
research and gathering content, organizing content and creating categories, sketching the site
structure, developing wireframes or mockups, testing and iterating, documenting and finalizing,
presenting and implementing, and reviewing and refining. Prototyping is an essential skill for
designers, but it is often misunderstood or skipped. Prototyping requires constant evaluation and
improvement, as well as alignment with client expectations and user needs.

Creating a prototype involves outlining the navigation, content hierarchy, and overall structure.

 Content of a Website

The content of a website includes the text, images, sounds, videos, and animations that users
experience on a website. Website content is the utmost important tool you can use to achieve
your marketing strategy and communication to your customers about your brand.

Let’s cover the three main types of web content:

 Written website content: should inform all other content of your website. It can
encompass a call to action or brief product description on your landing page, case studies,
white papers, industry reports, eBooks, testimonials, and blogs.

 Graphic content: consists of photographs, fact sheets, info graphics, branded images,
and data visualizations. Graphic content is generally supported by written and video content
and has the opportunity to help your audience visualize what your brand is about.

 Video and audio contents: are very valuable pieces of content that include explanatory
videos, podcasts, and possibly music.