`

STUDENT GUIDE IN
By: Lirio V. Daniel, IT Insturctor

WEB DESIGN

This is a user centered multi disciplinary design pursuit pertaining to planning and
production of web sites. It includes influences from visuals arts technology,
information structure and networked delivery.

Web designers often think about the web design process with a focus on technical
such as wire-frames, code, and content management. But great design isn’t about
how you integrate the social media buttons or even slick visuals. Great design is
actually about creating a website that aligns with an overarching strategy.

Websites with great design focus on more than just aesthetics. They attract visitors
and help people understand the product, company, and branding through a variety of
indicators, encompassing visuals, text, and interactions. That means every element
of your site needs to work towards a defined goal.

But how do you achieve that harmonious synthesis of elements?

Through a holistic web design process that takes both form and
function into account.

A web site is considered excellent if it is useful, usable, correct and pleasing. The
components of web development have to be compatible e.g. HTML, XML, JavaScript,
Java, flash browser, compatibility and server capacity.4. Conformity of conversion
and innovation. This includes how fast the site loads and how attractive the site is

Modern Web Design

1. Web - centered versus designer - centered site design.One has to consider the
designer and user needs hence the site should be developed with the users in mind

2. Balance of form and function. The site should contain function with form to inspire
the user and to break the site boredom. There should be a clear and continuous
relationship between form and function. The designer has to make sure that the
visual form of the page related to its function.

3. Quality of execution. A web site is considered excellent if it is useful, usable,

correct and pleasing. The components of web development have to be compatible
e.g. HTML, XML, JavaScript, Java, flash browser, compatibility and server capacity.

1
4. Conformity of conversion and innovation. This includes how fast the site loads and
how attractive the site is

Website Design process requires 7 steps:

1. Goal identification: Where I work with the client to determine what goals the new
website needs to fulfill. eg., 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 pages and features

3. Site map and wire frame creation: With the scope well defined, we can start
digging into the site map, 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
that you have real content to work with.

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 up. Tools like style tiles, mood
boards, and element collages can help with this process.

6. Testing: By now, you've got all your pages and defined 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

Factors to consider while designing a web site

(i) The subject content - Should be relevant
(ii) The coverage of the topic/scope of the resource - Size of page, wide or narrow
scope
(iii) Presentation of the information - Should be accurate, should be logical
(iv) Interest of the authority - those responsible for the site, Is the author an expert on
the subject?
(v) The objectivity of the site – How balanced or bias is the coverage?
2
(vi) Presentation – keep in mind the interest of the users
(vii) Currency - availability of the updates - date of publication
(viii) Usability – is information useful

COMPONENTS OF WEB DESIGN

(i) Content
(ii) Visuals
(iii) Technology
(iv) Delivery
(v) Purpose

What is WEBSITE CONTENT?

Website content is any written, audio, or visual content element on a website. It can
include blog posts, marketing copy, photos, logos, embedded videos, podcasts, and
any other creative elements on a site.

Website content can also combine mediums. A blog post might include text, images,
and an audio option to listen to the article. Single elements like interactive
infographics might also combine multiple elements. For example, an interactive map
of the US that populates with state-specific info when a user hovers over an
individual state might combine graphic design and text into a single piece of web
content.

Web content vs. web copy: What’s the difference?

The words “copy” and “content” are sometimes used interchangeably, but web copy
is technically a subset of written web content. Written or textual content
encompasses any writing on your website. You can distinguish between content and
copy by their purpose:

 Web content. Web content (such as blogs, articles, and resources) is typically
longer form. Its purpose is to educate, inform, entertain, or persuade an
audience.
 Web copy. Web copy (such as taglines, banner text, and calls to action) is
typically shorter and exists primarily to inspire an action like signing up for a
newsletter or making a purchase.

Types of webpage content

Here’s an overview of the types of written content frequently found throughout a

website:

 Marketing page content. Your homepage, About page, and landing pages are
all types of marketing pages. Marketing page content communicates
information about your brand to current or potential customers. These pages
3
 often contain multimedia content elements like photos, illustrations, graphics, or
video.
 Product or service page content. Product or service page content explains
the value of particular products or services, may include posted answers to
customer questions, and encourages purchases through product reviews.
Product pages typically include a call to action (CTA), such as an Add to Cart
button.
 Blog posts. Blog content is article-style, long-form written content that provides
information of value to your target audiences. Unlike marketing page content,
blog content isn’t necessarily always about your company. Instead, blog posts
are often part of a company’s search engine optimization (SEO) and content
marketing strategy: They educate or entertain and use specific keywords in an
effort to show up in search engine results.
 User-generated content. Some companies post user-generated content (like
testimonials or reviews) to their websites. User-generated content encourages
purchases through social proof, the phenomenon in which people choose a
course of action by mimicking the actions of others.
 Case studies. Business-to-business (B2B) companies often use case studies
to show their product or service in action with a particular customer. These
typically examine a particular customer relationship and show how a product or
service helped that customer solve a problem or reach a goal.
 Downloadable content. Some companies will make long-form content (like
ebooks and white papers) available for download in exchange for your contact
information—this is known as gating content. Downloadable content is popular
with B2B companies, but it can also be effective for B2C ecommerce
companies, as long as the content provides specific value that isn’t readily
available through online sources. For example, an ecommerce brand that sells
boutique tonic water and ginger beer might offer a downloadable introduction to
mixology ebook that includes a section of recipes featuring the company’s
products.
 Help center content. Help center content answers common customer
questions and helps customers navigate any potential problems. It can increase
customer satisfaction and reduce the burden on your customer service team.
For example, if your customers frequently struggle to find the On button for your
product, including instructions in your FAQ section can limit customer frustration
and reduce the number of people who contact you for help.

Characteristics of good content

Good website content provides value to readers and promotes your brand. To do
this, it needs to be clear, engaging, and tailored to your target audiences. Here’s an
overview of the qualities of strong website content:

4
  Clear. Clarity is paramount. Confusing content frustrates readers and
discourages engagement with your site.
 Polished. Presenting clean, polished, and grammatically correct content can
increase trust—while spelling and grammar errors and typos can diminish it.
 Digestible. Companies format website content for easy consumption on digital
platforms. Because many website visitors skim, content often includes
informative headers, bulleted lists, and short paragraphs to provide value to
readers who are in a rush or looking for a specific piece of information.
 Valuable. Good website content delivers value—either educational or
entertainment. Educational content increases an audience’s knowledge base
in a particular area or helps the reader solve a specific problem, while
entertaining content moves or delights the reader.

How to write good website content: 5 tips

1. Identify your audience - Creating specific buyer personas can help you
generate content ideas around your target audience’s needs and vet voice,
tone, and structure for a particular readership.

2. Create a brand style guide - Many businesses create brand style guides for
written content. These guides contain the basic information needed to write
content for your brand. For example, you might provide an overview of target
audiences, emphasize active voice, define acceptable brand tones, and weigh
in on a number of editorial options, such as whether or not to use the Oxford
comma, how and when to abbreviate, and when to spell out numbers.

Creating a style guide can help you maintain consistency across pieces of
content and make it easier to delegate content writing responsibilities to
members of your team.

3. Develop an editorial process - Content creation involves multiple stages (and,

often, multiple members of your team). You’ll brainstorm ideas, develop an
outline, draft content, review and revise content, and perform a final proof
before publication.

Committing to a content writing process can organize your workflows, minimize

the likelihood of errors in the final product, and provide transparency for
outside writers or involved members of your team. It can also support
consistency by making sure that content written by different people is
subjected to a standardized internal process.

4. Leverage intros and conclusions Written content needs to capture an

audience’s attention right away. That means making the intro to any piece of
written content snappy and engaging. Avoid lengthy segues and expected
hooks (such as, “Since the dawn of time”) on blogs and articles, and lead
5
 marketing and product pages with a brief headline that highlights product value
in a nutshell, like “Your skin care problems solved” or “No pores, no problem.”

Web content writing specialists also pay particular attention to conclusions,

considering what action they’d like a website visitor to take after reading a
piece of content. Web content often ends with a call to action, or CTA, such
as “Learn More” or “Contact Us” for marketing pages, “Add to Cart” for product
pages, or helpful links to other resources on your site for blogs and
articles.

5. Optimize for SEO Optimizing your content for SEO can help your
website appear higher in search results and increase the likelihood that
your target audiences will find you via a search engine query.

Use your buyer personas and target audience research to identify and
incorporate relevant keywords—but avoid prioritizing search engines over human
readers.

Overusing keywords, or keyword stuffing, can decrease content clarity

and value, and damage SEO performance. Optimal keyword density is
around 1% to 2%—so in a 200-word article, you might only use your target keyword
two to four times. Using it 30 times can frustrate your readers and cause search
engines to penalize your content by dropping it lower in search engine
rankings.

Visual Elements of Web Design

Visual elements are the basic parts that make up any design. These include lines,
shapes, colors, textures, typography, space, and images. When used together, these
elements help create designs that look good and communicate messages clearly.
Understanding these visual elements is important for anyone who wants to create
effective and attractive designs, whether for websites, posters, or any other project.

What Are Visual Elements in Design?

Visual elements in design are the basic components that make up any visual
creation. They are the building blocks used to create everything from websites and
apps to posters and logos. Here are some of the key visual elements:

Lines: Lines can guide the viewer’s eye, create shapes, and convey movement.

Shapes: Shapes are areas defined by edges. They can be geometric (like squares
and circles) or organic (like freeform or natural shapes).

Colors: Colors can create mood, attract attention, and convey messages. They are
one of the most powerful elements in design.
6
Color is most important part of web interface design, it increases the readibility and
accessibility of page and also different colors have different meanings and contexts
so its necessary to choose color after proper research. You should know these things
for choosing best color for website

What's purpose of your website? for example if you have website to sell products or
sevices then you can use colors that are associated with trust, reliability, quality, or
excitement, such as blue, green, yellow, or red.

Who is your target audience? for example if your audience is children then you can
choose colors which look playful and bright such as pink, purple, orange, or
turquoise.

What color do others of same niche or industry using? for example you have financial
website then you can create a unique identity by using colors other than typical green
or blue.

Textures: Textures give a visual feel of how something would feel if touched, adding
depth and interest.

Typography: Typography is the style and appearance of text. It involves choosing

fonts, sizes, and arrangements to make the text readable and appealing.

Space: Space, or whitespace, refers to the empty areas around elements. It helps to
avoid clutter and can make the design more balanced and focused.

Images: Images can include photos, illustrations, and icons. They are used to
complement text and add visual interest.

Images are another important part of visual presentation because user can
understand things in visual form such as image easier and faster than normal text.
There are two types of images generally used, photographic images like you are
making tourism site then you can add beautiful photos of different places and second
type is Graphical images these type of images are made using computer graphics for
example images used in background.

Size and Quality of Image: You should carefully select the size and quality images
should not look to small of too large, and its compatible with different types of devices
ex. mobiles
Placement of Images: Proper placement of image increases the user retention on site
it should not cover text or other icons, little empty space is good after images.

Fonts

7
Good fonts not just only increases readability of text but also make its appearance
premium and rich. You can give modern, traditional or elegant looks to your sites
using different types of fonts. Fonts are divided into two categories Serif and Sans
Serif

Serif: These fonts have small lines at the end of characters. Which give them a
traditional or elegant look. It includes fonts like Times New Roman Georgia etc.

Sans Serif: They don't have small strokes at the end. These fonts look simple and
clear. Its includes fonts like Arial, Helvetica etc.
Animation

Small animations gives life to your website, Animations are basically movement of
different elements such as images text, logo etc animations can be used in various
places like button click animation which will began to play which someone clicks
button, background animation etc. Animations are used for increasing user
engagement and enhancing user experience

White Space
White space is simple yet a very important visual element of web design. White
space means empty space between other elements of page. We use white space
after elements so that the elements wont look collided to each other and easily
visible.

Layout
It is foundation base of page. It decides where and how should different elements of
page are organized to create a good user experience Layout can be of different types
based on the arrangement of elements in page. like

Single column layout: In this there is single column for content like in between for
content and in left and right side there is some white space

Multi Column Web Design: In this content is divided into more than one columns. It
is suitable for websites that have a lot of information and need to organize it in a
logical and hierarchical way

Grid Layout: In this layout a table or grid is formed having multiple boxes which can
contain different images, video or digital media. All visual elements are distributed in
this way, it is suitable for website which have lot of digital media.

F-Shaped Layout: In this layout, the content is placed starting from left to right
moving from top to bottom. It places the most important content on the top left corner
of the page, followed by less important content on the right side and the bottom.

Responsive Design
8
As we know that websites can be accessed in multiple devices not only computers
but also tablets and mobiles. So its necessary that it when website is opened in
mobile device it changes its design accordingly. So users of both devices have ease
accessing the website. Following are some ways for making web design responsive

Key Benefits of Visual Elements

Visual elements increase the user's retention which lead to increasing engagement
and reducing bounce rate.

Without visual elements web design is just a piece of code which is unreadable for lot
of people and un-interactive , but visual elements helps us to provide it in simple form
so everyone can understand.

Consistent use of visual elements such as logo will create a unique identity and
brand recognition.

Visual elements can be scaled to different screen sizes thus making accessible for
multiple devices.

Good Layout, Use of white space guide users through content and navigation
becomes easy.

What practices to Avoid?

1. Avoid overuse of visual elements like animations, transition or special effects it will
frustrate users and also your website will get slower.

2. Don't use overly fancy fonts as they will decrease readability, also not use very tiny
font size and sufficient space should be between headings, paragraphs etc.

3. Avoid neglecting the use of responsive design because that will cause a bad user
experience for mobile users. Ensure that your visual elements adapt to various
screen sizes and orientations.
Bad image quality, will make users think like your website is not real or authentic so
use good quality images.
Auto playing videos in pages are annoying for users, make sure videos are placed
like they will play only when clicked.
Complicated forms and hard-to-solve captchas can discourage user interaction and
lead to form abandonment.

Reason to use Visual Elements

1. To communicate and convey the message of the website. Visual elements can
express the meaning, purpose, or goal of the website in a clear and concise way

9
2. To enhance and improve the user experience of the website: Visual elements can
make the website more user-friendly, accessible, and responsive by providing visual
cues, symbols, or representations for the website

3. To attract and retain the attention of the users: Visual elements can catch the eye
of the users and make them curious or interested in the website.

10