Principles of Web Design Identify Web site domains, and relate a site's domain to its purpose.

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

+
Lesson 1 - Principles ofWeb
Design Objectives
 1.1: IdentifyWeb site domains, and relate a site's domain
to its purpose.
 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.
 1.3: Define aesthetic design, and explain how aesthetics can
affect a visitor's perception of a Web site's information.
 1.4: Demonstrate knowledge of color wheel concepts and
effective use of color on a Web site.
 1.6: Critique the aesthetic design, usability and accessibility
of sampleWeb 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 201
Tempe, AZ 85281-1247
www2.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 website
 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.

+
CARP
‫التباين‬:
‫من‬ ‫أكثر‬ ‫أو‬ ‫عنصرين‬ ‫عرض‬ ‫يتم‬
‫في‬ ‫مختلف‬ ‫بشكل‬ ‫الصفحة‬ ‫عناصر‬
‫الملمس‬ ‫أو‬ ‫الشكل‬ ‫أو‬ ‫الحجم‬ ‫أو‬ ‫اللون‬
‫الحركة‬ ‫أو‬ ‫الموضع‬ ‫أو‬ ‫االتجاه‬ ‫أو‬
‫الصفحة‬ ‫على‬ ‫العناصر‬ ‫فصل‬ ‫أو‬ ‫لتجميع‬
‫التكرار‬:
‫المتكررة‬ ‫العناصر‬ ‫تتضمن‬ ‫أن‬ ‫يمكن‬
‫والخطوط‬ ‫واألنسجة‬ ‫واألشكال‬ ‫األلوان‬
‫والعالقات‬ ‫والرسومات‬ ‫والطباعة‬
‫ذلك‬ ‫إلى‬ ‫وما‬ ‫المكانية‬.
‫المحاذاة‬:
‫وتوجيهها‬ ‫وموضعها‬ ‫العناصر‬ ‫وضع‬
‫وتجميعها‬.
‫القرب‬:
‫والبنية‬ ‫البيضاء‬ ‫المساحة‬ ‫استخدام‬
(
‫ذات‬ ‫العناصر‬ ‫تجميع‬ ‫مثل‬ ‫المنطقية‬
)
‫بصرية‬ ‫وحدة‬ ‫إلنشاء‬ ‫الصلة‬

Principles of Web Design Identify Web site domains, and relate a site's domain to its purpose.

+
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)

+
‫األلوان‬ ‫عجلة‬
‫األساسية‬ ‫األلوان‬:
‫أحمر‬
‫أزرق‬
‫أخضر‬ ‫لون‬
) (
‫أساسيان‬ ‫لونان‬ ‫الثانوية‬ ‫األلوان‬
‫أرجواني‬
‫سماوي‬ ‫ازرق‬
‫األصفر‬
( ‫الثالثية‬ ‫األلوان‬
1
‫و‬ ‫أساسي‬
1
)‫ثانوي‬

+
Color Combinations
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.
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.

+
‫األلوان‬ ‫تركيبات‬
‫تستخدم‬
‫أحادية‬ ‫األلوان‬ ‫أنظمة‬
‫اللون‬
‫صبغات‬ ‫أو‬ ‫اًل‬‫ظال‬ ‫أو‬ ‫ا‬ً‫ألوان‬
( .
‫انظر‬ ‫اللون‬ ‫نفس‬ ‫من‬ ‫مختلفة‬
‫الشكل‬
1
-
6
).
، ‫أساسي‬ ‫بلون‬ ‫ابدأ‬
‫اختر‬ ‫ثم‬ ، ‫عام‬ ‫بشكل‬ ‫أغمق‬ ‫يكون‬
‫اللون‬ ‫من‬ ‫األقل‬ ‫على‬ ‫أخرى‬ ‫ظالل‬
‫األساسي‬
‫تستخدم‬
‫األلوان‬ ‫أنظمة‬
‫األلوان‬ ‫المتشابهة‬
‫المجاورة‬
.‫األلوان‬ ‫عجلة‬ ‫على‬ ‫البعض‬ ‫لبعضها‬
‫وتخلق‬ ‫جيدة‬ ‫مطابقة‬ ‫تكون‬ ‫ما‬ ‫عادة‬
‫العين‬ ‫ترضي‬ ‫تأثيرات‬.

+
Color Combinations
Complementary colors are
across from each other on the
color wheel.
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

+
- ‫للمواقع‬ ‫الجمالي‬ ‫التصميم‬
‫الرسومات‬

‫الرسومات‬ ‫أهمية‬

‫التفاعل‬ ‫تعزيز‬
:
‫الزوار‬ ‫انتباه‬ ‫جذب‬ ‫في‬ ‫تساعد‬ ‫الجذابة‬ ‫الرسومات‬
.‫الموقع‬ ‫مع‬ ‫ل‬c
‫ع‬‫للتفا‬ ‫وتحفيزهم‬

‫التجربة‬ ‫تحسين‬
:
‫المستخدم‬ ‫تجربة‬ ‫تجعل‬ ‫أن‬ ‫يمكن‬ ‫الجيدة‬ ‫الصور‬
.‫وإثارة‬ ‫ة‬c
‫ع‬‫مت‬ ‫أكثر‬

‫الشهيرة‬ ‫الرسومات‬ ‫تطبيقات‬

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

+
‫الصور‬ ‫أنواع‬

‫الصور‬ ‫أنواع‬

Raster
‫نقطية‬

.‫الفوتوغرافية‬ ‫الصور‬ ‫مثل‬ ،‫بكسالت‬ ‫من‬ ‫تتكون‬
‫عند‬ ‫جودتها‬ ‫تفقد‬
.‫التكبير‬

Vector
‫متجهة‬

.
‫تفقد‬ ‫ال‬ ‫واأليقونات‬ ‫الشعارات‬ ‫مثل‬ ،‫ومنحنيات‬ ‫خطوط‬ ‫من‬ ‫تتكون‬
.‫التكبير‬ ‫عند‬ ‫جودتها‬

+
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

.‫التكبير‬ ‫ند‬c
‫ع‬ ‫جودتها‬ ‫تفقد‬

+ Aesthetic Web Design - Graphics
Graphics should complement and be relevant to the
website’s look and feel.
File 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
N 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
L:ossless compression, larger
file size than JPEG

+
JPEG GIF PNG
‫بشكل‬ ‫النوع‬ ‫هذا‬ ‫يستخدم‬
‫الفوتوغرافية‬ ‫للصور‬ ‫أساسي‬
،‫الخطية‬ ‫للفنون‬ ‫ستخدم‬
،‫األشكال‬ ،‫المتحركة‬ ‫الرسوم‬
‫التوضيحية‬ ‫الرسوم‬
.‫والرسومات‬
‫الفوتوغرافية‬ ‫للصور‬ ‫يستخدم‬
.‫الدقيقة‬ ‫الفنية‬ ‫والرسومات‬
‫الطباعة‬ ‫في‬ ‫استخدامه‬ ‫يمكن‬ ‫العرض‬ ‫في‬ ‫لالستخدام‬ ‫األفضل‬
.‫اإللكتروني‬
‫العرض‬ ‫في‬ ‫لالستخدام‬ ‫األفضل‬
.‫اإللكتروني‬
‫الرسوم‬ ‫أو‬ ‫الشفافية‬ ‫يدعم‬ ‫ال‬
‫المتحركة‬
‫والرسوم‬ ‫الشفافية‬ ‫يدعم‬
.‫المتحركة‬
‫الرسوم‬ ‫ويدعم‬ ‫الشفافية‬ ‫يدعم‬
‫امتداد‬ ‫باستخدام‬ ‫المتحركة‬
APNG
.
‫بفقدان‬ ً‫ضغطا‬ ‫يستخدم‬
‫حجم‬ ‫إلى‬ ‫يؤدي‬ ‫مما‬ ،‫الجودة‬
.‫صغير‬ ‫ملف‬
‫فقدان‬ ‫بدون‬ ً‫ضغطا‬ ‫يستخدم‬
‫يكون‬ ‫الملف‬ ‫وحجم‬ ،‫الجودة‬
‫بـ‬ ‫مقارنة‬ ‫أكبر‬
JPEG PNG
.
‫فقدان‬ ‫بدون‬ ً‫ضغطا‬ ‫يستخدم‬
‫يكون‬ ‫الملف‬ ‫وحجم‬ ،‫الجودة‬
‫من‬ ‫أكبر‬
JPEG
.

‫المواقع‬ ‫تصميم‬ ‫في‬ ‫الملفات‬ ‫ضغط‬

‫سرعة‬ ‫لضمان‬ ‫الويب‬ ‫مواقع‬ ‫على‬ ‫المستخدمة‬ ‫الصور‬ ‫ملفات‬ ‫حجم‬ ‫تقليل‬ ‫عملية‬ ‫هو‬ ‫الملفات‬ ‫ضغط‬
.‫المستخدم‬ ‫تجربة‬ ‫وتحسين‬ ‫الصفحات‬ ‫تحميل‬

:‫الملفات‬ ‫ضغط‬ ‫من‬ ‫رئيسيان‬ ‫نوعان‬ ‫هناك‬

‫فقدان‬ ‫بدون‬ ‫ضغط‬
Lossless Compression

‫بفقدان‬ ‫ضغط‬
Lossy Compression

+
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
 “Loss less” 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.

+
-
‫والخطوط‬ ‫الطباعة‬ ‫النصوص‬ ‫تنسيق‬

‫والكلمات‬ ‫الحروف‬ ‫هيكلة‬ ‫تقنية‬ ‫هي‬ ‫الطباعة‬

‫الطباعة‬ ‫أهمية‬

‫القراءة‬ ‫تحسين‬
. :
‫والفهم‬ ‫القراءة‬ ‫يسهل‬ ‫للنصوص‬ ‫الجيد‬ ‫الترتيب‬

‫الجمالي‬ ‫الشكل‬ ‫تحسين‬
:
‫الجمالي‬ ‫المظهر‬ ‫زز‬c
‫ع‬‫ت‬ ‫الجيدة‬ ‫الطباعة‬
.‫المستخدم‬ ‫تجربة‬ ‫وتدعم‬ ‫للصفحة‬

+
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).

+
‫والطباعة‬ ‫الخطوط‬

" "
‫واألرقام‬ ‫النص‬ ‫لعرض‬ ‫المستخدم‬ ‫الوجه‬ ‫كتابة‬ ‫نمط‬ ‫هي‬ ‫الخطوط‬
. " "
‫األخرى‬ ‫الرسومية‬ ‫الحروف‬ ‫و‬ ‫واألحرف‬

‫األخرى‬ ‫المطبعية‬ ‫واألنماط‬ ‫الخط‬ ‫في‬ ‫للتحكم‬ ‫فعالية‬ ‫األكثر‬ ‫الطريقة‬
‫استخدام‬ ‫خالل‬ ‫من‬ ‫هي‬
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

+
‫الخطوط‬ ‫عائالت‬

:
Serif
‫في‬ ‫تساعد‬ ،‫الحروف‬ ‫نهايات‬ ‫في‬ ‫يرة‬c
‫غ‬‫ص‬ ‫زوائد‬ ‫على‬ ‫تحتوي‬
.‫المطبوعات‬ ‫على‬ ‫القراءة‬

:‫أمثلة‬
Times New Roman، Georgia
.

Sans-serif
. :
‫الشاشات‬ ‫على‬ ‫للقراءة‬ ‫مثالية‬ ،‫زوائد‬ ‫على‬ ‫تحتوي‬ ‫ال‬

:‫أمثلة‬
Arial، Verdana
.

Cursive
:
‫للنصوص‬ ‫وليس‬ ‫للزخرفة‬ ‫تستخدم‬ ،‫اليدوية‬ ‫الكتابة‬ ‫تشبه‬
.‫الطويلة‬

Fantasy
. :
‫الزخرفية‬ ‫والعناصر‬ ‫للعناوين‬ ‫تستخدم‬ ،‫زخرفية‬ ‫خطوط‬

Monospace
. :
‫األكواد‬ ‫رض‬c
‫ع‬‫ل‬ ‫مثالية‬ ،‫العرض‬ ‫نفس‬ ‫حرف‬ ‫ل‬c
‫ك‬ ‫تأخذ‬
:‫أمثلة‬
Courier، Courier New
.

+
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,
 and Book Antiqua
Serif fonts

+
Font Families

‫خطوط‬ ‫تتميز‬
Serif
‫مثل‬ ‫الحروف‬ ‫أطراف‬ ‫على‬ ‫الحدود‬ ‫أو‬ ‫المتوهجة‬ ‫باالمتدادات‬
f
‫و‬
l
‫و‬
i
،
:‫أدناه‬ ‫الشاشة‬ ‫لقطة‬ ‫في‬ ‫موضح‬ ‫هو‬ ‫كما‬

‫خطوط‬ ‫تحتوي‬
Serif
‫هو‬ ‫كما‬ ،‫والرفيعة‬ ‫السميكة‬ ‫الحدود‬ ‫من‬ ‫مزيج‬ ‫على‬ ً‫ة‬‫عاد‬ ‫ا‬ً‫ض‬‫أي‬
" ‫الحرف‬ ‫منحنى‬ ‫في‬ ‫موضح‬
f
. "
‫أ‬
 Examples of serif fonts include
 Times New Roman,
 Georgia,
 and 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

‫خطوط‬
Sans-serif
‫من‬ ‫إعاقة‬ ‫أكثر‬ ‫وتظهر‬ ،‫واضحة‬ ‫نهايات‬ ‫لها‬
‫خطوط‬
serif
.

.‫الزخرفة‬ ‫من‬ ‫أخرى‬ ‫أنواع‬ ‫أو‬ ‫حدود‬ ‫أو‬ ‫متوهجة‬ ‫امتدادات‬ ‫لديهم‬ ‫ليس‬

‫كلمة‬
Sans
" ‫وكلمة‬ ،‫بدون‬ ‫تعني‬
serif
"
‫أو‬ ‫الخطوط‬ ‫إلى‬ ‫تشير‬
‫اإلضافية‬ ‫الخطوط‬
.
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

+
Font Families

.‫الفرشاة‬ ‫ضربات‬ ‫أو‬ ‫اليد‬ ‫بخط‬ ‫المكتوب‬ ‫القلم‬ ‫المتصلة‬ ‫الخطوط‬ ‫تشبه‬

‫تربط‬ ‫ضربات‬ ‫على‬ ‫تحتوي‬ ‫ا‬ً‫وأحيان‬ ،‫فنية‬ ‫زخارف‬ ‫على‬ ‫تحتوي‬ ‫ما‬ ‫ا‬ً‫غالب‬
.‫ا‬ًc
‫ع‬‫م‬ ‫الحروف‬

-
‫ا‬‫ًئ‬‫سي‬ ‫ا‬ً‫خيار‬ ‫تكون‬ ‫ما‬ ‫عادة‬ ‫فهي‬ ‫وبة‬c
‫ع‬‫ص‬ ‫أكثر‬ ‫القراءة‬ ‫تكون‬ ،‫عام‬ ‫بشكل‬
‫الوصول‬ ‫إمكانية‬ ‫أو‬ ‫االستخدام‬ ‫سهولة‬ ‫حيث‬ ‫من‬

.‫الطويلة‬ ‫للنصوص‬ ‫وليس‬ ‫للزخرفة‬ ‫تستخدم‬
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.

+

‫خطوط‬ ‫هي‬ ‫الخيالية‬ ‫الخطوط‬
‫وليست‬ ،‫األول‬ ‫المقام‬ ‫في‬ ‫تزيينية‬
‫رئيسي‬ ‫كخط‬ ‫الستخدامها‬ ‫مصممة‬
.‫النص‬ ‫من‬ ‫الطويلة‬ ‫للمقاطع‬

‫بشكل‬ ‫الخيالية‬ ‫الخطوط‬ ‫تختلف‬
.‫الفني‬ ‫ومحتواها‬ ‫مظهرها‬ ‫في‬ ‫كبير‬

‫معينة‬ ‫خصائص‬ ‫أو‬ ‫عناصر‬ ‫توجد‬ ‫ال‬
‫بخالف‬ ‫الخيالية‬ ‫الخطوط‬ ‫تصنف‬
.‫الزخرفي‬ ‫طابعها‬
Fantasy Monospace

‫خطوط‬ ‫تحصل‬
Monospace
‫اسمها‬ ‫على‬
‫نفس‬ ‫يشغل‬ ‫حرف‬ ‫كل‬ ‫أن‬ ‫حقيقة‬ ‫من‬
.‫المساحة‬ ‫عرض‬

‫تتطلب‬ ‫أنها‬ ‫تبدو‬ ‫قد‬ ‫التي‬ ‫الحروف‬ ‫حتى‬
" ‫الكبير‬ ‫الحرف‬ ‫مثل‬ ،‫ًا‬‫ف‬‫مختل‬ ‫ا‬ً‫ض‬‫عر‬
W
"
" ‫الصغير‬ ‫والحرف‬
i
"
‫العرض‬ ‫نفس‬ ‫تأخذ‬
.‫المسافة‬ ‫أحادية‬ ‫الخطوط‬ ‫في‬

‫الكلمات‬ ‫بين‬ ‫الفارغة‬ ‫المسافات‬ ‫حتى‬
.‫نفسها‬ ‫الحروف‬ ‫جميع‬ ‫عرض‬ ‫بنفس‬ ‫تكون‬
‫هي‬ ‫الشائعة‬ ‫المسافة‬ ‫أحادية‬ ‫الخطوط‬
Courier
‫و‬
Courier New
.

‫خطوط‬ ‫بمظهر‬ ‫الخطين‬ ‫هذين‬ ‫كال‬ ‫يتميز‬
‫بشكل‬ ‫ويستخدمان‬ ،‫القديمة‬ ‫الكاتبة‬ ‫اآللة‬
‫للكمبيوتر‬ ‫برمجية‬ ‫تعليمات‬ ‫لعرض‬ ‫شائع‬
‫وعالمات‬
HTML
‫التقنية‬ ‫والمحتويات‬
.‫األخرى‬

+
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

+
‫اإللكترونية‬ ‫الوسائط‬ ‫خطوط‬

‫يعد‬
Verdana
‫األكثر‬ ‫الخطوط‬ ‫أحد‬
‫على‬ ‫للعرض‬ ‫المصممة‬ ‫ًا‬‫ع‬‫شيو‬
.
‫بسيط‬ ‫تصميم‬ ‫ذو‬ ‫إنه‬ ‫الشاشة‬
‫بين‬ ‫الخلط‬ ‫يمكن‬ ‫وال‬ ،‫ومباشر‬
‫الرسومية‬ ‫الحروف‬ ‫أو‬ ‫األحرف‬
.‫بسهولة‬

‫الكبير‬ ‫الحرف‬ ،‫المثال‬ ‫سبيل‬ ‫على‬
"
I
" "
‫الصغير‬ ‫والحرف‬
L
"
‫أشكال‬ ‫لهما‬
‫عكس‬ ‫على‬ ،‫فريدة‬
Arial
‫قد‬ ‫حيث‬ ،
‫الرسوميين‬ ‫الحرفين‬ ‫بين‬ ‫الخلط‬ ‫يتم‬
.‫بسهولة‬

‫يعد‬
Tahoma
‫الخط‬ ‫لنمط‬ ‫آخر‬ً ‫بديال‬
Arial/Helvetica
.

،‫أريال‬ ‫من‬ ‫ما‬ ‫حد‬ ‫إلى‬ ‫أكبر‬ ‫تاهوما‬
.
‫المسافات‬ ‫فيردانا‬ ‫من‬ ‫أصغر‬ ‫ولكنها‬
‫في‬ ‫الحروف‬ ‫بين‬
Tahoma
‫أكثر‬
‫من‬ ‫ًا‬‫ق‬‫ضي‬
Arial
‫أو‬
Verdana
‫مما‬ ،
" "
‫حد‬ ‫إلى‬ ‫ا‬ً‫متماسك‬ ‫ا‬ً‫مظهر‬ ‫يعطي‬
‫بـ‬ ‫مقارنتها‬ ‫عند‬ ‫خاصة‬ ،‫ما‬
Verdana
‫استخدامها‬ ‫عند‬ ‫وخاصة‬ ،
.‫النص‬ ‫من‬ ‫طويلة‬ ‫لمقاطع‬
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.
FontVariations
 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.

+
‫للخطوط‬ ‫السليم‬ ‫االستخدام‬
‫الكبيرة‬ ‫باألحرف‬ ‫الكتابة‬
‫العبارات‬ ‫أو‬ ‫الجمل‬ ‫كتابة‬ ‫تكون‬ ‫ما‬ ‫ا‬ً‫نادر‬
.
‫قد‬ ‫جيدة‬ ‫فكرة‬ ‫الكبيرة‬ ‫باألحرف‬
،‫الظروف‬ ‫بعض‬ ‫في‬ ‫ا‬ً‫منطقي‬ ‫ذلك‬ ‫يكون‬
.‫فقط‬ ‫ا‬ً‫نادر‬ ‫ولكن‬
‫الخط‬ ‫اختالفات‬
‫في‬ ‫عنصران‬ ‫هناك‬
HTML
‫مظهر‬ ‫ينشئان‬
< ‫العنصر‬ ،‫غامق‬ ‫نص‬
b
>
‫والعنصر‬

< ‫العنصر‬
b
. >
‫داللي‬ ‫معنى‬ ‫له‬ ‫ليس‬
< ‫العنصر‬
strong
." " >
‫القوي‬ ‫التأكيد‬ ‫يعني‬
‫النص‬ ‫استخدام‬ ‫من‬ ‫الغرض‬ ‫كان‬ ‫إذا‬
‫أو‬ ‫المحتوى‬ ‫على‬ ‫التأكيد‬ ‫هو‬ ‫الغامق‬
‫العنصر‬ ‫فإن‬ ،‫لمعناه‬ ‫أهمية‬ ‫إعطاء‬

‫ا‬ً‫مناسب‬ ‫يكون‬
‫أكثر‬ ‫نص‬ ‫تقديم‬ ‫هو‬ ‫الغرض‬ ‫كان‬ ‫إذا‬
< ‫فإن‬ ،‫بدانة‬
b
>
‫هذا‬ ‫ألن‬ ‫ا‬ً‫مناسب‬ ‫يكون‬
.‫بحت‬ ‫أسلوبي‬ ‫أو‬ ‫تجميلي‬ ‫أمر‬
‫الخطوط‬ ‫عدد‬
‫الخطوط‬ ‫من‬ ‫محدود‬ ‫عدد‬ ‫استخدام‬
‫الخطوط‬ ‫من‬ ‫ا‬ً‫د‬‫ج‬ ‫كبير‬ ‫عدد‬ ‫استخدام‬ ‫يؤدي‬ ‫قد‬
‫أكثر‬ ‫وجعله‬ ‫المستند‬ ‫في‬ ‫فوضى‬ ‫حدوث‬ ‫إلى‬
‫ا‬ً‫إرباك‬.
‫من‬ ‫أكثر‬ ‫على‬ ‫تحتوي‬ ‫ال‬ ‫التي‬ ‫المستندات‬ ‫تبدو‬
‫وانسيابية‬ ‫ا‬ً‫م‬‫تنظي‬ ‫أكثر‬ ‫خطوط‬ ‫ثالثة‬ ‫أو‬ ‫وجهين‬
‫ا‬ً‫وتماسك‬.

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/

+
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

+
/
‫أو‬ ‫و‬ ‫الوظيفية‬ ‫التصميم‬ ‫مبادئ‬
.‫لالستخدام‬ ‫القابلة‬
:‫متوقع‬ ‫هو‬ ‫ا‬Y‫م‬‫ك‬ ‫ويعمل‬ ‫أخطاء‬ ‫بدون‬ ‫فعال‬ ‫ويب‬ ‫موقع‬ ‫عرض‬ ‫يتم‬

‫تعمل‬ ‫والخارجية‬ ‫الداخلية‬ ‫الروابط‬ ‫جميع‬

‫التفاعل‬ ‫وظيفة‬ ‫ال‬Y‫ك‬‫أش‬ ‫جميع‬

‫بسرعة‬ ‫الصفحة‬ ‫تحميل‬ ‫يتم‬

+
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 andWritingWeb 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
‫واستخدامات‬ ‫وتصميم‬ ‫وتخطيط‬ ‫دراسة‬ =
.‫الكمبيوتر‬ ‫وأجهزة‬ ‫األشخاص‬ ‫بين‬ ‫التفاعل‬
‫فيها؟‬ ‫يحاولون‬ ‫التي‬ ‫األولى‬ ‫المرة‬ ‫في‬ ‫األشخاص‬ ‫استخدام‬ ‫سهولة‬ ‫مدى‬ ‫ما‬ - ‫التعلم‬ ‫قابلية‬
‫يمكنهم‬ ‫التي‬ ‫السرعة‬ ‫مدى‬ ‫ما‬ ،‫التصميم‬ ‫على‬ ‫المستخدمون‬ ‫يتعرف‬ ‫أن‬ ‫بمجرد‬ - ‫الكفاءة‬
‫به؟‬ ‫القيام‬ ‫إلى‬ ‫يحتاجون‬ ‫أو‬ ‫يريدون‬ ‫بما‬ ‫القيام‬ ‫بها‬
‫سهولة‬ ‫مدى‬ ‫فما‬ ،‫الوقت‬ ‫لبعض‬ ‫التصميم‬ ‫ما‬ ‫شخص‬ ‫يستخدم‬ ‫لم‬ ‫إذا‬ – ‫التذكر‬ ‫على‬ ‫القدرة‬
‫أخرى؟‬ ‫مرة‬ ‫عليه‬ ‫التعرف‬
‫تعافيهم‬ ‫سرعة‬ ‫مدى‬ ‫وما‬ ،‫المستخدمون‬ ‫يرتكبها‬ ‫التي‬ ‫األخطاء‬ ‫عدد‬ ‫هو‬ ‫ما‬ – ‫األخطاء‬
‫إصالحها؟‬ ‫صعوبة‬ ‫مدى‬ ‫وما‬ ،‫منها‬
‫المنتج؟‬ ‫هذا‬ ‫استخدام‬ ‫متعة‬ ‫مدى‬ ‫ما‬ - ‫الرضا‬

+
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 inWeb
page interactivity.

3.1.7
:
‫صفحات‬ ‫تفاعل‬ ‫في‬ ‫دورها‬ ‫وتحديد‬ ،‫المتعددة‬ ‫الوسائط‬ ‫تعريف‬
.‫الويب‬
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

+
Multimedia and Interactivity

‫المتحركة‬ ‫رسوم‬Y‫ل‬‫وا‬ ‫والفيديو‬ ‫للصوت‬ ‫المشترك‬ ‫االستخدام‬ ‫هي‬ ‫المتعددة‬ ‫الوسائط‬
.‫األخرى‬ ‫التفاعلية‬ ‫والميزات‬

‫الشائعة‬ ‫الويب‬ ‫صفحة‬ ‫تفاعل‬ ‫مكونات‬

‫الرابط‬ ‫على‬ ‫النقر‬

‫الصورة‬ ‫ظهور‬ ‫في‬ ‫ليتسبب‬ ‫الماوس‬ ‫تحريك‬

‫االستطالع‬ ‫أو‬ ‫النموذج‬ ‫في‬ ‫الموجودة‬ ‫األزرار‬ ‫على‬ ‫النقر‬

‫ا‬Y‫ه‬‫محتويات‬ ‫أو‬ ‫الويب‬ ‫صفحة‬ ‫عرض‬ ‫طريقة‬ ‫تخصيص‬

‫الصوت‬ ‫إلى‬ ‫االستماع‬ ‫أو‬ ‫فيديو‬ ‫مقطع‬ ‫مشاهدة‬

‫المباشرة‬ ‫المحادثات‬ ‫أو‬ ‫االستطالعات‬ ‫ء‬Y‫ا‬‫إجر‬

‫وغنية‬ ‫ا‬ً
‫ق‬‫تشوي‬ ‫أكثر‬ ‫الويب‬ ‫صفحات‬ ‫تجعل‬ ‫أن‬ ‫والتفاعلية‬ ‫المتعددة‬ ‫للوسائط‬ ‫يمكن‬
‫بالمعلومات‬

Principles of Web Design Identify Web site domains, and relate a site's domain to its purpose.

More Related Content

Similar to Principles of Web Design Identify Web site domains, and relate a site's domain to its purpose. (20)

More from motasem221 (17)

Principles of Web Design Identify Web site domains, and relate a site's domain to its purpose.

Editor's Notes