QUARTER III

WEB DESIGN
• A web page is a document that is suitable for the World Wide Web and web browsers. 
Web page
A document which can be displayed in a web browser such as Firefox, Google Chrome, Microsoft Internet Explorer or
Edge, or Apple's Safari. These are also often called "web pages" or just "pages."
A WEBSITE, or simply a site, is a collection of related web pages, including multimedia content, typically identified
with a common domain name, and published on at least one web server.
Web Server
A computer that hosts a website on the Internet. "Hosting" means that all the web pages and their supporting files are
available on that computer. The web server will send any web page from the website it is hosting to any user's browser,
per user request.
Search Engine
A website that helps you find other web pages, such as Google, Bing, or Yahoo.  InternetExplorer,  Edge,  Safari, 
Firefox, or Chrome.
• Web pages, which are the building blocks of websites, are documents, typically composed in plain
text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). They may
incorporate elements from other websites with suitable markup anchors.
• Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally
employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user. The user's
application, often a web browser, renders the page content according to its HTML markup instructions onto
a display terminal.
HISTORY
The World Wide Web (WWW) was created in 1990 by the British CERN physicist Tim Berners-Lee. On 30 April
1993, CERN announced that the World Wide Web would be free to use for anyone. Before the introduction of
HTML and HTTP, other protocols such as File Transfer Protocol and the gopher protocol were used to retrieve
individual files from a server. These protocols offer a simple directory structure which the user navigates and chooses
files to download. Documents were most often presented as plain text files without formatting, or were encoded
in word processor formats.
Two types of Website:
1. Static
2. Dynamic
Two types of Website:
A static website is one that has web pages stored on the server in the format that is sent to a client web
browser. It is primarily coded in Hypertext Markup Language (HTML); Cascading Style Sheets (CSS) are used to
control appearance beyond basic HTML. Images are commonly used to effect the desired appearance and as part of
the main content. Audio or video might also be considered "static" content if it plays automatically or is generally
non-interactive. This type of website usually displays the same information to all visitors.
A dynamic website is one that changes or customizes itself frequently and automatically. Server-side
dynamic pages are generated "on the fly" by computer code that produces the HTML (CSS are responsible for
appearance and thus, are static files).
There are a wide range of software systems, such as CGI, Java Servlets and Java Server Pages (JSP), Active Server
Pages and ColdFusion (CFML) that are available to generate dynamic web systems and dynamic sites.
Various web application frameworks and web template systems are available for general-use programming
languages like Perl, PHP, Python and Ruby to make it faster and easier to create complex dynamic websites.
Why do people put up websites?
 1. To do business and trade
2. To share personal interests and entertain people
3. To send out information and push advocacies
4. To create communities
5. To search information
6. To create online school l and upload a tutorial
THE TOP 10 MOST IMPORTANT ELEMENTS OF A WEBSITE DESIGN
1. Navigation

 The website design should be easy to navigate and the menu items should easily accessible from any page.
 The viewer should always know exactly where they are on the website and have easy access to where they
would like to be.
2. Visual Design

People are visually oriented creatures, and utilizing great graphics is a good way to make your website more
appealing. Your website has about 1/10th of a second to impress your visitor - and potential customer - and
let them know that your website - and business (by proxy) - is trustworthy and professional.
 It's important not to go overboard with too much. Scrolling text, animation, and flash intros should be used
sparingly in your web design and only to emphasize a point for maximum effect.
3. Content
 This is the backbone of your website. Not only does your content play a major role in your search engine
placement, it is the reason most visitors are seeking from your website in the first place.
 Your website text should be informative, easy to read, and concise. Well thought out web content and copy
will do more than anything else to make your website design engaging, effective and popular.
4. Web Friendly
 No matter how informative, beautiful, and easy to use your website design is, it's useless unless it's web-
friendly. It is important that your web designers know the keys to making your website work on all the major
browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine Optimization).
 Many factors effect your search engine placement and visual appearance of your site, so make sure your web
designers know their stuff.
5. Interaction
 A truly effective website design engages your visitors immediately and continues to hold their attention
through EVERY page, as well as influences them to contact you. This is called 'conversion', and is probably
your website's ultimate goal.
 There is a fine line between ʻinteractionʼ and ʻannoyanceʼ, so the level of interac- tion should never outweigh
the benefit.

6. Information Accessibility
 Not all visitors to your website are interested in, or have the time to peruse the entire site. They may need to
access only a phone number or address, or just a certain bit of info. For this reason itʼs important to place key
information in plain site, in an area that's easily accessible.
 We've all had the experience of not being able to locate some needed information on a website, and the result
is always a frustrated visitor. The experience is annoying at best, and a disgruntled visitor won't stay on your
site very long and is unlikely not to return, much less do business with you.

7. Intuitiveness
  A great website anticipates what your visitor is thinking and caters directly to their needs, and has elements
arranged in a way that makes sense. If a visitor is searching for one of your products or services on a search
engine or directory where your site is listed, it's important that your website have a landing page that is
directly relevant to what they searched for rather than forcing them to filter through all of your information.
Remember, the shortest distance between two points is a straight line.
8. . Branding
 Your website should be a direct reflection of your business and your brand. Your visitor should immediately
make a visual connection between your logo, print material, and brick-and-mortar location. A website that
does this not only contributes to the memorability of your branding, but adds a level of credibility and
enhanced image of that of your overall business.
9. Turnaround Time
 The number one complaint of website design customers is the time it takes to get the site up and running.
Unfortunately, a firm that takes unusually long to complete your website is par for the course. The longer it
takes to complete the website, the more business - and value - you lose. A website that isnʼt on the web isnʼt
and working properly isn't going to bring you any business!
10. Conversion
 Your website can be the most important client generator your business can have, and must place the primary
emphasis on bringing in new clients and making additional services available to existing clients through
increased awareness of all the services you offer. Providing them with the tools they need to do business with
you in an easy and enjoyable way will increase your website conversion and bring you the kind of success
you seek.

5 Parts of a Website and Design Trends

The header or banner is located on top of a website. It includes the logo of the company, the publisher, or owner of
the website. This automatically informs website visitors what the website is about. Websites that offer products
and services usually have banners that feature their latest offers or even the current news about their company.

Trends        
• Logos – are always in no matter how header design innovates.
• Page-sized images – are trending in web design, particularly in banners. Images make a huge impact in user
engagement, especially if the images are interesting and visually appealing.
• Videos – are now utilised on headers. They usually contain the introduction or summary of the commodities that
the company is offering.
• User interface elements – one good example of this is navigation. For instance, a banner shows a series of
images of the latest promos. These elements are clickable.

2. Navigator Bar

The navigation bar/menu tab allows the visitors to check other pages of the website. It appears in all pages within a
website for more convenient navigation. Navigation bars are usually placed just below the banner/header for
convenient access.
• Sidebar – this refers to the placement of the primary navigation and not the usual content of a regular sidebar.
Usually they put the navigation on the left side.
• Navicon – this is common in Facebook mobile app. The navigation is practically hidden until you tap the icon
similar to this:
Hidden navigation allows users to view the entire page.
• Full screen navigation – this is similar to that of Navicon. The only difference is that when you click the button
to show the tabs, it will go full screen instead of appearing on the side.
• Super-sized navigation – this navigation trend allows users to see a preview of what they should expect in a
certain tab. For example, the website of a clothing brand has a tab for “Tops.” This tab can still be narrowed
down to blouses, shirts, tank tops, etc. This basically allows users to explore especially because the categories
have submenus.

3. Sidebar
sidebars are still relevant because of these advantages:
• Content marketing – you will be able to market other contents of your website.
• Promotion – you can promote similar websites or companies in the sidebar.
• Navigation – although this is not a primary navigation, it will still allow users to navigate other parts of the
website through links.

Trends:
Sidebars are basically standard. The trend may appear on the content of the side bar. What trendy things should we
put on the sidebar? Here some of them:
• Social media buttons – these buttons serve as links to the social media profiles of the website owner or the
company.
• Widgets – these widgets could be in a form of feeds (usually social media), polls, contact us forms, subscription
boxes, etc.
Archives – this content allows users to read your previous posts or entries

4. Content
The quality of a website’s content usually dictates the value of your website. You can find different types of content
in a website. They could come in a form of text, image, audio, video, or a combination of those.
Trends:
• Infographics – these are images, diagrams, and charts that represent certain information.
• Video streaming – this engages users because videos are easy to understand.
• Image collections – these are common in online shops, real estate websites, and travel blogs.

5. Footer
They say the footer is as important as the header. Of course, the users will reach the footer if they were engaged with
the website’s content. And the purpose of engaging them is to make sure they convert into clients.
Trends:
About us link
Contact us link
Terms of service
Privacy policy
Sitemap
Social media buttons
Address
Phone number
E-mail address
Other offers
Related links/posts
Subscription boxes
 WEB DESIGNING
NAME: GRADE & SECTION::
Direction: The image below is a Sampe of Simple Web Design. With that sample create your own Web
design by drawing it or making a collage using old reading materials. Base your design in the image below.
What to put in your Web;
 Your Site name
 About yourself ( below your sitename)
 On website add-ons put your favorite hobbies
 Tell me about your Family and friends.

YOUR
CHOICE OF YOUR
PICTURE CHOICE OF
About Yourself PICTURE

Favorite hobbies Tell me about your Family and friends.

Your Dreams:

Information and Communication Technology – PHOTO EDITING Page 6

This exploratory module taught you the importance of Desktop Publishing that helps you
create designs in school as well as in industry. Creativity and innovation that the digital world
demands are enhanced through the subject in focus. It gives you an opportunity to work directly
for business, schools or in other areas that will improve your socio-economic status in today’s
modern society.

Glossary:
ads - abbreviation for advertisement
annual reports - report showing progress on a certain program or project
booklet - book created in a publication with only a few pages that
contain information on one subject
business card - small card printed with a person's name and information
about that person's company and job
brochures - small, thin book or magazine that usually has many
pictures and information about a product, a place, etc.
embellish - to decorate by adding special details
fliers - piece of paper that has something printed on it and that is given to many people
icon - small picture on a computer screen that represents a program or function
letterhead - name and address of an organization
link - join or connect
logo - symbol that is used to identify a company and that appears on its products
magazine- type of thin book with a paper cover that contains stories, essays, pictures, etc.,
newsletter - short written report that tells about the recent activities of an organization
and that is sent to members of the organization

Information and Communication Technology – PHOTO EDITING Page 7