1
Principles Of Web
Based Application
PRESENTATION BY SHAKEEL AHMAD & MUHAMMAD IDREES
Basics of Web Design 2
Simplicity and consistency
Standard HTML
Content and navigation
Organization
Typography
Web-safe Color
Accessibility
Rule of Thumb 3
Use careful layouts of text and links with relatively small graphics
Web page graphic should not be more than 535 pixels wide or
more than about 320 pixels high (within letter size paper)
Browser safe area: 600 x 350
Web Grid 4
5
BALANCE
Formal
Informal
6
Optical Center
The viewer will tend to focus at the screen’s optical
center, located slightly above the center of the
screen.
Tend to locate objects at this optical center
Rule of Thirds 7
•Divide the screen into thirds horizontally and vertically
•Place focus of interests on the four intersections
Rule of Thirds 8
•Upper right position
•See full shadow and tracks
9
Layout
Use 2/3 - 1/3 format or 2
columns.
Use header and picture
column
Use table formatting
Try inventive layouts
10
Layout
Leave 20% white space.
Use shorter paragraphs
Avoid heavy lines.
11
Fonts
T Serif fonts have thin lines and
feet.
Sans-serif fonts have even lines and NO
feet.
T
12
Fonts
T Serif fonts are easier to read in print
media.
T
Sans-serif fonts are more legible in projected
media.
Readability of Fonts 13
This is a serif font (Times)
Can you read this easily? Do the letters all run together? Would you like to see an
entire screen full of this? This is Times 18points
This is a sans-serif font (Arial)
Which is easier to read, this text block or the block above? In general, sans-
serif fonts look better on computer monitors. This is Arial 18-point.
14
Legi bility
Usesans-serif for
headers.
Usesans-serif for
projected visuals.
Useat 18 points for
projected visuals.
Change preferences
in web browsers.
15
Readability
Use serif font for lots of printed text.
Use 12 points for adult learners.
Use 14 for children & special needs.
16
Readability
Use ragged right justification.
Avoid centering.
Avoid full justification.
Avoid italic fonts, look awful in
small fonts
Fonts to be used 17
Font Legibility: No
significant
difference
Reading Time:
Tahoma faster than
Corsivia
Perceived Font
Legibility: Courier,
Comic, Verdana,
Georgia, and
Times
Fonts to be used 18
Elegant Font Type:
Corsivia
Youthful & Fun: Comic
Business Like: Times
and Courier
General Preference:
Arial, Comic, Tahoma,
Verdana, Courier,
Georgia, and
Schoolbook
The Use Of CAPS 19
DON’T USE ALL CAPS FOR LARGE BLOCKS OF TYPE.
READERS READ FASTEST WHEN SENTENCES ARE
PRINTED IN UPPER AND LOWER CASE - THE WAY THEY
NORMALLY ARE SEEN IN PRINT. HEADLINES ARE SET IN
ALL CAPS BECAUSE THEY REQUIRE THE READER TO
SLOW DOWN, GIVING EMPHASIS TO A FEW WORDS.
WASN’T THIS BLOCK OF ALL CAPS DIFFICULT TO READ?
Comparison b/w Caps & not 20
DON’T USE ALL CAPS FOR LARGE BLOCKS OF TYPE.
READERS READ FASTEST WHEN SENTENCES ARE
PRINTED IN UPPER AND LOWER CASE - THE WAY THEY
NORMALLY ARE SEEN IN PRINT. HEADLINES ARE SET IN
ALL CAPS BECAUSE THEY REQUIRE THE READER TO
SLOW DOWN, GIVING EMPHASIS TO A FEW WORDS.
WASN’T THIS BLOCK OF ALL CAPS DIFFICULT TO READ?
Compare
Don’t use all caps for large blocks of type. Readers read
fastest when sentences are printed in upper and lower case -
the way they normally are seen in print. Headlines are set in
all caps because they require the reader to slow down, giving
emphasis to a few words. Wasn’t this better?
Single Concept 21
Concept A
Concept B
Concept C
Color 22
Use color to enhance your
presentation.
Avoid more than 5
colors on one slide
23
Selecting Color
•Complementary colors: colors opposite each other,
e.g., red-green, blue-orange
•Split colors: the 2 colors next to its complement, e.g.,
purple-orange & green
Complementary Colors Split Complement
24
When two pure complementary The effect of this color
hues are placed next to each scheme is similar to using
other, the design seems to complementary colors, except
vibrate. They create an exciting that it offers the artist a little
feeling that quickly attracts more variety with which to
attention. work.
Keep In mind Back color 25
26
BEST LEGIBILITY for text
------------------------------------------------------------------------
black text on a white background
dark green text on a white background
dark blue text on a white background
brown text on a white background.
WORST LEGIBILITY for text
------------------------------------------------------------------------
red text on green background
green text on red background
green text on blue background
BEST VISIBILITY to attract attention 27
but not for large blocks of text
text
black on orange
text
red on white
text
dark blue on yellow
text
white text on purple
Source: http://library.thinkquest.org/50065/psych/effects.html
Color Psychology 28
Green can signify growth and
movement.
Red can stand for power,
energy, or danger.
Blue , the most universally liked
color, can convey calm.
Color 29
Psychology
Yellow is thought of as positive,
used for highlighting against
dark background.
Color 30
Psychology
Purple has spiritual meaning for
some people.
31
Background
White Red
or or
Yellow Black
Remember good design is 32
invisible.
Learn more.
Decrease anxiety.
Increase motivation.
Increase time studying.
Accessibility I 33
Make sure your site is usable on the main
browser flavors and versions
Makesure it's usable without having to
download a plug-in first
Test your site at the development stage to
check it works on various operating systems
with different browser flavors/versions
Use style sheets to separate style and
content
Accessibility II 34
Use the appropriate html tags to define your text -
enables the text readers blind people use to read the
text on your site
Make good use of headings, <em> and <strong>
Always specify alternative text for graphics - <img
src="image.gif" width="10" height="10" alt="image description">
Check the colors you use aren't bad for those with
various forms of color blindness
If in doubt - desaturate (make black and white) the design to see if
it still makes sense
Don't use color as the only indicator of change (e.g. in a new
section)
Always underline links
That’s Is 35
Thank You
