Page |1
Kolej Kemahiran Tinggi MARA
Rembau, Negeri Sembilan
INFORMATION SHEET
COURSE:
MEDIA DIGITAL
SESSION :
July-Dec 2010
SEMESTER : 3
CODE/SUBJECT :
DDM3233
SHEET NO :
2
LECTURER :
Huzaini Bin Saari
WEEK :
2
TOPIC :
Web Publishing Fundamentals
2.1. Advantages of web publishing
SUB-TOPIC :
2.2. Basic web design principles
2.3. Typography in Web design
After completing this chapter, students will be able to:
LEARNING
OUTCOME :
1. Define the advantages of web publishing.
2. Elobrate about the basic web design principle
3. Create Typography in web design
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |2
UNIT 2: Web Publishing Fundamentals
2.1.
Advantages of web publishing
Web publishing offers distinct advantages over print
o
Timely content
o
Connectivity
o
Reduced production costs
o
Rapid and Economical Delivery
Timely content

Web sites can be updated continuously, while print publications are only as current as their date
of publication

To keep visitors on your site, always supply timely, changing material
Example:
http://www.bharian.com.my
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |3
Connectivity

Web pages offer the opportunity of connecting with the audience

Two main ways to interact and gather information:

o
E-mail link
o
Forms
Build into your Web pages simple and convenient ways for your users to connect with you
Example:
http://www.airasia.com
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |4
2.2.
Basic web design principles
Three things to consider when designing a successful Web publication that will leave a distinct
impression:
2.3.
Balance and Proximity
2.4.
Contrast and Focus
2.5.
Unity
Balance
3.
Arrange Web elements symmetrically (centered and balanced) to suggest a conservative, safe,
peaceful atmosphere
4.
Avoid too much symmetry
5.
Arrange Web elements asymmetrically (off balance) to create an fun, energetic mood
Symmetrically center-aligned page elements create balance and a conservative mood.
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |5
Asymmetrically positioned page elements create an energetic, light-hearted mood.
Proximity

Proximity (closeness) is closely associated with balance

Elements that have a relationship should be placed close to each other

White space can help define proximity and organize Web page elements
White space attracts visitor to lead story and its image
White space separates link stories and their related images
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |6
Contrast and Focus
Contrast is a mix of elements to stimulate attention
–
Use different text styles, colors, and size

Focus is the center of interest or activity

A Web page needs a focal point
o

This is where you want your visitors to focus their attention
Create Web pages with contrast to elicit awareness and establish a focal point, the center of
interest or activity
Unity
 Web pages and Web sites need unity, a sense of oneness
 Create unity with consistency and repetition across your Web pages
The old Navy web site conveys a sense of unity as a result of the consistent placement of element
and repetition on the homepage and the underlying pages
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |7

Typography in Web design
Although at first, from a nondesigner’s perspective, typography seems like a small field, it is actually a
very extensive part of design; one that can be applied to many others. In order to apply typography to
web design, you must understand some fundamental concepts.
“Text will inevitably be read before it is looked at” – Reading Design, Dean Allen
In web design, particularly content-based web design, good typography mostly comes down to
what maximizes readability (and doesn’t detract from quality). With cascading style sheets for fourth
generation browsers, designers have many options in implementing typography, making it important
to understand what to look for.
Fundamentals of Readability

Size and Hierarchy
Starting with your main body of text, understand that you must have a font size larger than 10pt.
While it looks stylishly minimalistic for someone with perfect vision, it is hard to read with weaker
eyes. Also, with long articles, having a larger font (and line height) makes it easier to keep track of
your place, as well as read from a distance (if a reader wants to lean back in a chair).
Size also plays an important role in hierarchy. Unfortunately, with web design, it is difficult to have
much control of in line spacing elements to emphasize hierarchy, as well as control emphasis.
This means, hierarchy is mainly controlled by size (and font choice, if you are willing to give
different font choices to different headers).
In this example, we see that, with only size being change, hierarchy can easily be distinguished.

Emphasis
Emphasis and de-emphasis are both relative in web design. What this means is, whether you
make the font lighter or darker, heavier or lighter, anything that breaks from the normal flow of
reading is going to be emphasized.
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |8
In this example, we see that emphasis is effective in, well, emphasizing. However, we also
see that three types of emphasis only do one thing… emphasize. Unfortunately
pragmatic web design limits you to normal and bold font, meaning you only have regular and
darker text. This actually works to your advantage, as de-emphasizing using a lighter color
decreases readability.
This brings us to another method of emphasis, italics. Italics, while they provide slight
emphasis by breaking the normal pattern of text, decrease the quality of the text, as italicized
text does not have effective anti-aliasing. Thus, while it may increase readability slightly,
italicized text detracts from the quality of your works, making it less beneficial then it is
harmful.

Contrast
In web design, there must be enough contrast to be able to easily distinguish text from the
background. With small blocks of text, it’s acceptable to have light on dark, yet as blocks of text
get longer, it’s better to have dark on light. I have yet to see a book be printed as white on
black; it’s much easier to read, and less stressful on the eyes. Apply this knowledge to your
designs.
Here we’ve got a scale for both a grayscale contrast, as well as a scale for color. As you can
see, the last three provide sufficient contrast. The next two are acceptable, and the rest are
not usable, as people with different types of monitors may be unable to distinguish them. Note
this is about contrast in web design, particularly the main content of the site. Having
decreased contrast is great for de-emphasizing in other uses of typography.

White Space
Spacing between both letters and lines are both very important aspects to consider. While you do
not want the spacing to be two little, spacing too much has an equally negative effect.
Spacing also comes into play when writing. Often readers are frightened by large blocks of text,
making it crucial to have small paragraphs. However, in web design, indentation is a generally
ineffective way to distinguish paragraphs. Instead, have short paragraphs with distinguishable
spacing between.
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
Page |9
Fonts
Typography is the appearance, style, and arrangement of text; a very important aspect of your web
site. If visitors have difficulty reading the content, they won't use your site.
If you are creating a strictly personal website with a restricted audience, then you have more leeway
in the typography of your site.
For those creating a business web site, or an informational site that will hopefully attract a lot of
visitors, there are a number of things you need to keep in mind.
Appearance and Readability
We all know that a serif font, such as Times New Roman, is recommended for business
correspondence. The "hats and feet" on the letters make text easier to read on a printed page. On the
web, the opposite is true.
With a serif font the letters tend to run together when viewed on an electronic display. This can make
it difficult for your visitors to skim through your body copy (i.e. content) and locate the information that
they are seeking. See the graphic example below.
Times New Roman
Verdana
An example of a serif font used for printed pages.
An example of a sans-serif font used for web pages.
On the other hand a sans-serif (no hats and feet) font, such as Verdana, is much easier to read and
makes a web page look cleaner and less cluttered. Using a sans-serif font makes it much easier, for
the visitor to your website, to read or scan your website content and body copy for the information
they are looking for.
Note:
Times New Roman is the default text on web pages, so you will need to specify the font you want to
use when you set-up your web pages.
Core Fonts
For the bulk of the text or body copy on your web pages, use a common font or core font. These core
fonts are installed on most computer systems. See the examples below:
•
Arial - (sans-serif font) often used on web pages
•
Comic Sans - (serif font)
•
Courier - (serif font)
•
Georgia - (serif font)
•
Impact - (sans-serif font) often used for headlines on the web
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
P a g e | 10
•
Trebuchet MS - (sans-serif font)
•
Tahoma - (sans-serif font)
•
Times New Roman - (serif font) commonly used for printed materials
•
Verdana - (sans-serif font) commonly used for web pages
Are these the ONLY fonts you can use? No. If you are creating a web site for an intranet, you can use
any font installed on your computer
as everyone with access to the site will have the same font list.
For the Internet, there are many other fonts that are fairly common. (However, if you want everyone to
view your pages as you designed them, it is still safest to use the core fonts.)
Note:
You can use any font you want for titles, logos or headings ... IF you create them as graphics. That
way, everyone will see the font correctly regardless of what they have on their system.
Of course, the other side of that coin, is that the more graphics you have, the slower your pages will
load. This can work against you if it causes visitors to give up and leave your website.
Don't use several different fonts on your web site. One sans-serif and one serif font, with all the
variations of bold, italic and color, is more than enough to allow for freedom of design.
Style
Once you have decided on the "appearance" of web page text; what about the "style" of the text?
Style refers to -uppercase, bold, italic, underlined, subscript and superscript text as well as font color
and size.
A good rule of thumb is to avoid using uppercase text as much as possible; it's difficult to read when
you are skimming a page. (Plus, on the Internet, capital letters symbolize "SHOUTING"!) Save the
bold, italics and underlining for very important text and use it in small doses.
It is best to use a sans-serif font for all of your website text styles. This not only provides easy reading
for your website visitor but also gives an appearance of uniformity and professionalism to the site.
Font Color vs Background
The color of font you use for the bulk of your pages should be one that contrasts sharply with the
background for easy readability. If the background is too colorful or dark, use a graphics program to
lighten it.
The example given below shows the need to contrast your text with it's background. In order for your
web text to be easily readable you must consider the web page background vs the text color. Do they
contrast effectively? Are your visitors going to be able to read your content without trouble?
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
P a g e | 11
Shown is an example of web page background graphics vs text color and readability.
Font Size
Font size is a matter of preference and is often determined by the type of web site you have.
However, it's usually pretty easy to spot a web site by someone new to the Internet ... the font size is
very large and is the same for everything. This is because most of us are conditioned to use a size
12pt font for creating printed correspondence and we transfer that habit to a web site. To compare, A
10pt font is used for these pages with a larger 12pt for headers.
Here is what a 12pt font looks like on the web. You can imagine how fast this would fill up a web
page. Plus, text this large is unnecessary on the web, except as headers.
Rather than using bold, italics or underlining, a slightly larger or different colored font can call attention
to important information. And smaller text, as in the links at the bottom of this page, let the reader
know this is something different from the rest of the web page.
Avoid harsh font colors
Don't get carried away with a lot of different text colors; too many and a web site can take on a circuslike appearance.
The colors red and yellow will draw the eye's attention, but they also tire the eyes. So use these
colors sparingly - just to emphasize something you really want your visitors to see.
A lot of text in either red or yellow, and your visitors will move on not even realizing it's because the
color has tired their eyes.
Layout
More important than either appearance or style is the arrangement of text. On web pages, text needs
to be short, concise and to the point. Make every word count and don't use passive language. Instead
of "This link will take you to another one of my graphics pages" - use command verbs such as "Click
here for more graphics" or simply "More Graphics".
White Space
Break content into chunks of information separated by white space. Use this white space to
distinquish the different sections of your site.
Reading is more difficult onscreen; avoid long paragraphs. Don't let your paragraphs, or any text, run
the full width of the screen.
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
P a g e | 12
Use margins and/or tables to keep the width of text to within 10 to 15 words per line.
White space example
In the graphic below the main elements of the webpage are arraigned in such a way that the eye
moves in a counterclockwise direction around the page, moving from the top to the left to the bottom
to the right of the page following the white space.
Example of a typical webpage layout using white space to organize the content.
Internal Navigation Links
Links to other sections of your site should be visible on the opening screen - don't make visitors scroll
to find them. If you are offering a number of links to other sites, don't just list them - group them under
categories.
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2
P a g e | 13
Stay consistant
Keep in mind that not all visitors will enter your site through the "front door" (your home page). They
could access any page on your site directly. So, it's important to have the following things on every
page of your web site:
The site or company name - A link to the home/index page - Links to other sections of the site - Email
address of contact person = Copyright information
REFERENCES:
Book: Web Design Introductory Concepts and Techniques, Shelly Cashman Kosteba
Web: http://rootapex.com/design/read-my-design-a-guide-typography-in-web-design
http://www.rocketface.com
http://webdesignfromscratch.com/web-design/colour.php
Website Design –DDM3233 - By Huzaini Bin Saari
Information Sheet 2