ICT Web Design Lesson 1.pptx

+
ICT Web Design
V2.0
LESSON 1 – PRINCIPLES OF WEB DESIGN

+
Lesson 1 - Principles of Web
Design Objectives
 3.1.1: Identify Web site domains, and relate a site's domain to its
purpose.
 3.1.2: Relate basic components of a Web page (e.g., color, space,
written content, typography, images, links, multimedia) to aesthetic,
functional and/or usable design principles.
 3.1.3: Define aesthetic design, and explain how aesthetics can affect a
visitor's perception of a Web site's information.
 3.1.4: Demonstrate knowledge of color wheel concepts and effective
use of color on a Web site.
 3.1.6: Critique the aesthetic design, usability and accessibility of
sample Web sites.

+
Web Site Categories & Domains
Top Level
Domain
.com .edu .uk .org
Identifies the type of
organization to which
the Web site belongs
Domain suffix, provides visitors with a clue to the purpose
or location of the organization that owns the Web site
www.totalbaseball.com
Server
Name
Top level
Domain

+
Web addresses
Certification Partners
1230 West Washington St
Suite 208
Tempe, AZ 85281-1247
www.certification-partners.com
IP: 50.63.202.1
Home address Web address
1. Server (host) name: name given to a server (usually “www”)– assigned
by the network administrator
2. Domain name: the registered company domain name
3. Top level domain: tends to identify what “type” of Web site it is
All 3 parts together create a “unique” address just like a street address

+
Aesthetic Web Design
https://www.youtube.com/watch?v=3iVVM_DgWY4

+
Aesthetic Web Design
What does aesthetics mean?
The look and feel of a Web site
 How engaging it is to viewers
 Invites exploration, etc.
Is more than just graphics and images:
 Layout
 Color scheme
 Typography

+
Aesthetic Web Design - Layout
The layout helps form relationships and define
meaning of page elements
Creates visual hierarchy and visual interest
Increases readability and usability
Should follow the CARP design principles
 Contrast
 Alignment
 Repetition
 Proximity
CARP

+
CARP
Contrast:
Two or more page elements
display differently in color, size,
shape, texture, orientation,
position or movement to group or
separate elements on the page
Repetition:
Repeated elements can include
colors, shapes, textures, fonts,
typography, graphics, spatial
relationships and so on.
Alignment:
The placement, position,
orientation and grouping of
elements.
Proximity:
The use of white space and
logical structure (such as
grouping related items) to create
visual unity.

+
Aesthetic Web Design - Color
 Web site’s color scheme should enhance the page
and help establish or reinforce branding.
 Should provide a good contrast
Color Psyhology Infographic

+
Color Wheel
 Primary colors:
 Red
 Blue
 Green
 Secondary colors
(Two Primary Colors)
 Magenta
 Cyan
 Yellow
 Tertiary colors
(1 Primary & 1 Secondary)

+
Color Schemes
 Monochromatic color schemes
use varying colors, shades or
tints of the same hue. (See
Figure 1-6.) Start with a base
color, generally darker, and then
choose at least two other shades
of the base color.
 Complementary colors are
across from each other on the
color wheel.
 Analogous color schemes use
colors that are next to each
other on the color wheel. They
are usually a good match and
create eye-pleasing effects.
 Triadic colors are colors that
are evenly spaced around the
color wheel.

+
Aesthetic Web Design - Graphics
Can enhance Web pages and help to create an
engaging, interesting experience.
Popular graphics applications:
 Adobe Photoshop
 Adobe Fireworks
 GIMP
 Inkscape
 Paint.net
 Pixlr

+
Aesthetic Web Design - Graphics
High-quality, web-optimized images are needed
 Raster – images made of pixels (small dots)
 Vector – composed of lines and curves
Raster Image Vector Image

+
Bitmap - Raster
Made up of grid of pixels
File Extensions:
JPG (JPEG) – PNG – GIF – BMP - TIFF
Used for:
 Graphics - pictures
 Web & print
 Loses clarity when enlarged

+ Graphics - Compression
Graphics should complement and be relevant to the Web
site’s look and feel.
Media Compression:
 Lossless compression = an image is compressed & all the
information can be restored
 Lossy compression = permanently eliminates certain
information and image cannot be fully restored
JPEG GIF PNG
Use for photographs Use for line art, cartoons,
shapes, illustrations and
drawings
Use for photographs, fine
art drawings
Can be used for prints Best used for electronic
display
Best used for electronic
display
Does NOT support
transparency or animation
Supports transparency and
animation
Supports transparency and
supports animations with
APNG extension
Lossy compression, small
file size
Lossless compression,
larger than JPEG and PNG
Lossless compression,
larger file size than JPEG

+
Graphic File Formats
 Most common file type
 No transparent background
 “Lossy” compression – file is
compressed from original size
and loses some of it’s detail
 Now commonly used on the
Web
 Does maintain a transparent
background
 “Lossless” compression
 Animated with the .APNG
extension
JPEG PNG

+
Common File Types
 Can be animated
 Maintains transparent background
 Fewer colors (256 RGB)
GIF

+
Aesthetic Web Design -
Typography
Typography is fun!
Typography is fun!
Typography is fun!
Typography is fun!
Color and font styles affect the “mood”
of the text.

+
Fonts & Typography
Fonts are the style of "type face" used to display text, numbers,
characters and other "glyphs".
Fonts
The most effective way to control font and other
typographical styles is through the use of Cascading Style
Sheets (CSS).

+
Fonts & Typography
 Typography refers to the arrangement and appearance of text.
 Typography concerns not only the look of the glyphs, but how
they are placed on the page.
Typography includes page margins, the amount of empty
space between paragraphs or lines, the alignment of text, etc.)
Typography

+
Fonts & Typography
 It is important to use “real text”
as opposed to text as graphics.
 Text as graphics can become
pixelated when enlarged
 Best practice is to use the most
readable fonts.
 It is best to use fonts that are
native to modern operating
systems (installed on pc).
Text as Graphics Font Readability

+
Font Families
Fonts are categorized into "families" based on their
characteristics.
The most common font families are
 serif
 sans-serif
 cursive
 fantasy
 monospace

+
Font Families
 Serif fonts are characterized by the flared extensions, or strokes, on the tips of
such letters as f, l, and i, as seen in the screen shot below:
 Serif fonts also usually have a combination of thick and thin strokes, as seen in
the curve of the letter "f" above.
 Examples of serif fonts include
 Times New Roman
 Georgia
 Book Antiqua
Serif fonts

+
Font Families
Sans-serif fonts have plain endings, and appear blockier than
serif fonts.
They do not have the flared extensions, strokes, or other kinds
of ornamentation.
"Sans" means without, and "serif" refers to the extra strokes, or
lines.
Sans-serif

+
Font Families
 Cursive fonts resemble hand-written pen or brush strokes.
 Often have artistic ornamentation, and sometimes have strokes
that connect the letters together.
 Generally more difficult to read - they are usually a poor choice
in terms of usability or accessibility
Cursive

+
 Fantasy fonts are primarily
decorative, and are not
designed to be used as the
main font for long passages of
text.
 Fantasy fonts vary wildly in their
appearance and artistic
content.
 There are no elements or
particular characteristics that
categorize fantasy fonts other
than their decorativeness.
Fantasy Monospace
 Monospace fonts get their name from
the fact that each letter takes up the
same width of space.
 Even letters which might seem to
require different widths, such as an
uppercase "W" and a lowercase "i"
take up the same width in monospace
fonts.
 Even the empty spaces between
words are the same width as all of the
letters themselves. Common
monospace fonts are Courier and
Courier New.
 Both of these fonts have the
appearance of old typewriter font
faces, and are commonly used to
display computer code, HTML
markup, and other technical content.

+
Electronic Media Fonts
 Verdana is one of the most
popular of the fonts designed
for on-screen viewing. It has a
simple, straightforward design,
and the characters or glyphs
are not easily confused. For
example, the upper-case "I"
and the lower-case "L" have
unique shapes, unlike Arial, in
which the two glyphs may be
easily confused.
 Tahoma is another alternative
to the Arial/Helvetica style of
font.
 Tahoma is somewhat larger
than Arial, but smaller than
Verdana. The spacing between
letters in Tahoma is tighter than
either Arial or Verdana, giving a
somewhat "scrunched together"
appearance, especially when
compared to Verdana, and
especially when used for long
passages of text.
Verdana Tahoma

+
Proper use of fonts
Capitalization
 Typing sentences or phrases IN ALL
CAPITALS is rarely a good idea. It
may make sense under some
circumstances, but only rarely.
Font Variations
 Two elements in HTML create a bold
text appearance, the element and
the element.
 The element has no semantic
meaning. The element
means "strong emphasis.”
 If the purpose in using bold text is to
emphasize content or give its
meaning importance, the 
element is appropriate.
 If the purpose is to simply present
fatter text, the is appropriate as
this is purely cosmetic or stylistic.
Number of fonts
 Use limited number of fonts
 Using too many fonts can clutter the
document and make it more
confusing.
 Documents with no more than 2 or 3
font faces look more organized, more
streamlined, and more coherent.

Aesthetic Web Design -
Typography
 Improve a Web site's readability, establish
branding, and enhance the tone or style of the
Web site
 Font techniques link:
http://webaim.org/techniques/fonts/
https://www.youtube.com/watch?v=Sdau-8CUQZw

+
Functional and Usable Design
 3.1.2: Relate basic components of a Web page (e.g., color,
space, written content, typography, images, links, multimedia)
to aesthetic, functional and/or usable design principles.
 3.1.5: Compare functional and usable design principles, and
explain how usability can affect a Web site's success.
 3.1.6: Critique the aesthetic design, usability and accessibility
of sample Web sites.
Objectives

+
A functional Web site renders without error
and functions as expected:
 All internal and external links work
 All forms of interactivity function
 The page loads quickly

+
Usability assesses how easy a user interface
is to use.
Measures the quality of a person’s experience
while interacting with a Web site.
 Anticipate and responds to the needs of visitors
(FAQ)
 Visitors can quickly and easily locate needed
information

+
Functional and Usable Design –
HCI and Writing Web Content
Human-Computer Interaction (HCI) = the study, planning, design
and uses of the interaction between people and computers.
 Learnability – How easy is it for people to use the first time they
try?
 Efficiency – Once users are familiar with the design, how quickly
can they do what they want or need to do?
 Memorability – If someone doesn't use the design for some time,
how easy will it be for them to become familiar with it again?
 Errors – How many errors users make, how quickly do they
recover from them and how much trouble is it to fix?
 Satisfaction – How pleasant is it to use this product?

+
HCI and Writing Web Content
Writing Tips for the Web:
 Do not use industry jargon or slang
 Be cautious using humor or clever headings
 Write headings that clearly communicate
the content of the Web page or subtopic
 Do not underline text or headings. They may be
confused for hyperlinks

+
Browser Compatibility
Web sites should be tested in variety of
browsers and devices to verify that they
display consistently

+
Accessibility
Accessibility is the practice of making Web sites
usable by people of all abilities and disabilities.
 Provide text links as an alternative to image links.
 Choose a high amount of contrast between page
background and text colors.
 Do not use color alone to convey meaning, because you
will exclude people who are color blind or use screen
readers.
 Provide alternative text description for images and other
visual elements.
 Summarize tables and provide headings as appropriate for
line-by-line reading.
 Provide transcripts for audio and captioning for video.

+
Multi-media & Interactivity
 3.1.7: Define multimedia, and identify its role in Web page
interactivity.
Objectives

+
Multimedia and Interactivity
 Multimedia is the combined use of audio, video,
animation and other interactive features.
 Common Web page interactivity components
 Clicking a link
 Moving the mouse to cause an image to appear
 Clicking buttons on a form or survey
 Customizing a Web page view or contents
 Watching a video or listening to audio
 Taking surveys or live chats
 Multimedia and interactivity can make Web pages more
interesting and informative

ICT Web Design Lesson 1.pptx

More Related Content

What's hot (20)

Similar to ICT Web Design Lesson 1.pptx (20)

Recently uploaded (20)

ICT Web Design Lesson 1.pptx

Editor's Notes