`

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 [Link] 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?
(vi) Presentation – keep in mind the interest of the users
2
(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, pod casts, 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.
4
  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:

 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
and make it easier to delegate content writing responsibilities to members
of your team.

5
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

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
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” f
or 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 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.

6
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 free-form or natural shapes).

Colors: Colors can create mood, attract attention, and convey messages. They are
one of the most powerful elements in design.

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.

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

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

7
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
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.
8
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
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.

9
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

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
What is Typography and
why is it important?
Typography simply is a technique in user interface design to create readable,
appealing, attractive, and easy-to-eye text for users to read. Typography plays an
integral role in any website's design.

Good typography is soothing to the eyes and creates a long-lasting impression on

the minds of the user.

What is the Difference Between a Font and a Typeface?

Aspect Typeface Font

Definition Design of a set of characters Specific size, weight, and style of a
typeface

Example Arial, Times New Roman Arial 12-point bold

Use Describes the look of the text Used to implement the typeface in
specific sizes and styles

What are the Different Types of Typefaces in Typography?

Typefaces simply are the way of designing typography. Typefaces are distinct styles
of writing for any font. It includes design for everything every set of characters - from
letters, numbers, and punctuation marks, to symbols.

Typefaces define the visual appearance of character and hence the visual
appearance of the entire typography. It is one of the most important parts of
typography that sets the tone of the text.

1. Serifs
Serifs are the oldest font styles whose characteristics are the small feet at the end of
a stroke on the letter. Serifs help the reader follow the letter easily making them
highly clear and readable. Serif fonts convey a very traditional vibe you can find
these fonts being used in long-form copies for example, on books, magazines and
newspapers.

Going back in history, characters used to be created by chiseling on stone, and the
chisel created small feet at the end of each stroke. This is how Serifs were born.

Example: Times New Roman

11
There are multiple types of Serif font styles, most important ones are:

Old Style Serifs

Transitional Serifs
Modern Serifs
Slab Serifs
Clarendon Serifs
Glyphic Serifs
Didone Serifs
Tuscan or Western Serifs
Contemporary or Transitional Serifs

2. Sans-Serifs
"Sans" in the word Sans-Serif in French basically means "without", therefore, sans-
serif typefaces are those that lack serifs. San-serifs fonts are simpler to look and are
mostly used as body copy, display and headlines. Sans-Serifs fonts are considered
as clean, minimal and modern looking. They were first used in the 15th century.

Example: Helvetica
12
There are multiple types of San-Serif font styles, most important ones are:

Grotesque Sans-Serif
Neo-Grotesque Sans-Serif
Humanist Sans-Serif
Geometric Sans-Serif
Transitional and Contemporary Sans-Serif
Display and Decorative Sans-Serif
Monospaced Sans-Serif
To read more about Sans Serif Fonts click Sans Serif Fonts

Script Typefaces:
Script Typefaces are designed to emulate the flow and flourish of handwriting. They
range from elegant, formal styles to more relaxed and whimsical variations. These
typefaces often feature connected letters and varying strokes that mimic the
movements of a pen or brush on paper. They can be further categorized into two
main types:

Formal Script Typefaces: These are based on the letterforms and calligraphic styles
developed by writing masters from the 17th and 18th centuries. They are
characterized by their sophisticated and ornate design, making them ideal for formal
occasions like wedding invitations, certificates, and elegant branding.

Casual Script Typefaces: These are less structured and more free-form compared to
formal scripts, often embodying a more contemporary or laid-back vibe. Casual
scripts are versatile and used in a variety of contexts from advertising to logo design,
where a personal, human touch is desired.

13
Display or Decorative Typefaces:
These are highly stylized fonts designed for maximum impact and are not suitable for
body text. They come in an array of styles—from retro and funky to modern and edgy
—and are used to attract attention and set a mood or theme. Because of their unique
and striking features, display typefaces are best used in small doses, such as for
titles, headers, and other standout elements in a design. They can convey a variety
of moods and associations, making them a favorite choice for branding, promotional
materials, and other applications where a strong visual impact is needed.

Monospaced Typefaces:

Unlike most typefaces, which are proportionally spaced (each character occupying a
width that corresponds to its size), every character in a monospaced font occupies
the exact same amount of horizontal space. This uniform spacing is reminiscent of a
typewriter and is crucial for aligning characters in certain technical materials such as
computer code and tabular data. The consistent spacing helps to make code easier
to read and debug. Monospaced fonts are also popular in environments that require
text alignment in vertical columns, and they bring a nostalgic, mechanical feel to any
layout.

14
Typeface Properties

Typeface Properties
1. Baselines
It is an invisible imaginary line on which all the characters sit. Helps in measuring x-
heights and line heights in typography. Using baseline we check the ascender and
descender of a character.

15
2. x-height
As the name suggests, it is the height of the lowercase alphabet letter “x”. It is
measured without any ascender or descender.

3. Ascender
A portion of a lowercase letter that is raised upwards from the letter’s body. Ascender
is measured using x-height. For example, the lowercase letter “f” has an ascender.

4. Descender
A portion of a lowercase letter that is extended downwards from the letter’s body. It is
also measured using x-height. For example, the lowercase letter “p” has a
descender.

16
5. Font Size
Also called “Point size”, determines the distance between the top of the ascender
and the bottom of the descender. Basically is the overall size of a font. As per the
W3C recommendation, it is good to use relative font sizes( in ems). As it allows ease
in scaling up or down fonts based on the screens and browser settings.

6. Letter Spacing
It is the spacing given to each letter in a particular section like a sentence or
paragraph. It can be normal, tight, and loose. Letter spacing is also known as
tracking.
It is good to keep in mind while using letter spacing that while using uppercase text,
increase the letter spacing and when using larger fonts, decrease the letter spacing.
This leads to better readability and legibility. Also, keep the letter gap reduced when
the font weight is increased.

7. Line Spacing

17
The vertical spacing between lines that are measured through the baseline is called
line spacing. It is also known as leading and in CSS it is called line height. It is
preferred to use more leading when using white or light text on a dark or black
background.

Top Typography Fonts

When it comes to UI design for websites and applications, there are certain very
important fonts that most of the UI designers use. Here is a list of most common font
families that you will need to create a good typography UI design so that you can
save your time searching for fonts online:

Inter
Space Grotesk
Work Sans
DM Sans
Satoshi
Supreme
Switzer
Open Sans

How do I Choose the Right Font for my Brand?

Choosing the right font for your brand involves a few straightforward steps:

18
Understand Your Brand Identity

: Reflect on what your brand stands for—its personality, values, and audience.
This will guide your font choice.

Consider Legibility: Pick a font that’s easy to read across different mediums and
sizes. This is crucial for effective communication.

Look for Versatility: Ensure the font works well across various applications, from
your logo to your website and printed materials.

Test for Compatibility: Make sure the font displays well on different devices and
browsers to maintain a consistent look.

Seek Uniqueness: Choose a font that sets you apart from competitors but still
resonates with your brand's character.

Best Practices for Good Typography

Here are a few best practices you should follow for perfect typography in your
interface design:

1. Visual balance
We have to make sure that the font properties especially the font color go well with
the other visuals in the design, as well as we must make sure that the font matches
the mission we want to communicate through the website or application.

2. Use a limited amount of fonts

A lot of fonts being used on a page makes it stressful for the users to look in. Many
UI designers recommend to only use two fonts in a website or an application, rather
19
change other properties if the fonts to make them distinct. You can do that by
changing various properties of the font like, font weight, color, line height, spacing
etc.

3. Proper Typography contrast

Contrast can be created by using two distinct fonts rather than similar ones, by
changing the font weight, by changing the text spacing, or through font color and
background color. While creating typography, we should also take in account how the
typography is going with the overall contrast of the design.

4. Line Width
Make sure that the text line-length/line-width is not too long. The problem with longer
lines of text is that it becomes harder to read on a screen. Therefore, make sure that
you have a good size to check your line length.

5. Proper use of plugins

There are so many plugins like Count text in Adobe XD, Font Fascia in Figma, etc.
that you can use to enhance your work flow, increase your productivity and improve
your output.

6. Line Height
Line height simply is the spacing between two adjacent base lines. An 100% line
height will make your text look cluttered and compact. A perfect range of line height
is somewhere between 120% to 180%.

7. Font Sizes
A very important practice in typography for web design is to make sure that you are
using readable font sizes. When it comes to body and paragraph text a minimum of
16 to 17 points is the perfect font size. Use at least 15 pixels for long text and at least
14 pixels for dense interfaces. This is the font size that takes most of your
webpage/application's font.

8. Mobile typography
Whenever you are using large headings make sure that when you design the mobile
version of the application/website, you scale those large headings down. Adjust the
font size accordingly for the mobile version of the application or the website.

Typography mistakes to avoid

Typography is a double edged sword, make sure you don't make these mistakes to
get the best out of your typography:

Rags: Rags are the uneven vertical margin of a block of text depending that depends
on the the text alignment. you should pay a close attention to the shape of the rag on
the block of a text. Rags should be evened out by adding another line and using
hyphens for removing Rags.
20
Improper font selection: Font selection is one of the most crucial part of
typography, a lot of the message tone depends on the font selection. For new
projects, choose fonts based on personality traits and the type of project and content.
Make sure that the font tone and the message you want to communicate are
matching.

Avoid mixing typefaces: Never mix up your typefaces. The typography should be
consistent and easy on the eyes of the user. Always avoid mixing the typefaces.

Avoid using longer line width: Make sure to not have a longer line-length/line-width
for text. The problem with longer lines of text is that it becomes harder to read on a
screen. The golden rule is to never go over 90 characters in a line.

Using a lot of fonts: Simplicity is the ultimate sophistication. One of the best ways to
create a soothing typograph is to use a limited amount of fonts. A lot of fonts being
used in a page makes it stressful for the users to look in. The ideal number of fonts
would be two. You can rather change the properties of the fonts for creating
hierarchy.

Typography plays essential role in communicating with the users, it is not just about
text decorations but it also improves the visual appeal of the website or application.
Typography is a technique in user interface design to create readable, appealing,
attractive and easy on eyes text for the users to read. Remember the tips and tricks
as well as best practices for typography. Use the best fonts out there.

21