Refleksi Minggu ke-12 : Video

Alhamdulillah pada minggu ke-12, kami telah dibahagikan kepada kumpulan (2orang) untuk membentangkan topik VIDEO bagi setiap subtopik berikut :

1. Apakah tujuan video?
2. Pengiraan saiz video
3. Video Compression Technique (Teknik Pemadatan Video) - final exam!!
4. Video Editing Software - final exam!!
5. Video File Format
6. Analog & Digital Video - final exam!!

=================================================

Tujuan Video

• menggunakan teori Captology
• sebagai teknologi untuk memujuk
• mampu mengubah sikap (to change behaviour) menggunakan teknologi

Pengiraan Saiz Video

• ditentukan oleh :
• Frame Size
• merujuk kepada bilangan pixel yang dipapar secara mengufuk dan menegak
• contoh : 800 x 600 (minimum frame size for today)
• semakin kecil frame size, semakin kecil saiz fail, maklumat dpat dipindahkan dengan cepat
• Frame Rate
• merupakan bilangan imej yang dipapar dalam tempoh masa tertentu
• diukur dalam fps
• biasanya 12 fps (sesuai untuk flash, animasi)
• 30 fps (untuk TV dan video biasa)
• 36 - 45 fps (sesuai untuk movie di panggung, youtube)
• semakin kecil frame rate, semakin cepat data dapat diproses, saiz semakin kecil
• Color Depth @ Resolution


• jumlah warna untuk setiap pixel dalam setiap imej
• contoh : 8 bit/pixel = 256 warna @ 16 bit/pixel = 65 536 warna @ 24 bit/pixel = 16.7 milion warna
• Sound & Tempoh masa
• Pengiraan saiz fail :

Contoh soalan : (1 byte = 8 bit)

= 414 MB (jawapan)



Teknik Pemadatan Video (Video Compression)

• Video yang belum dimampat biasanya mempunyai saiz kira-kira 1.5 GB dalam tempoh 1 minit
• Jenis Codec dan file extension :
• Cinepax - .avi
• Indeo - .avi
• Apple QuickTime - .mov
• MPEG - .mpg
• Pemampatan menggunakan algorithma matematik dengan eliminating, grouping atau averaging
• penting bagi memudahkan proses penyimpanan, penghantaran dan pemprosesan
• semakin banyak video dimampatkan, semakin berkurang kualiti, semakin kecil saiz
• Kaedah pemampatan :
• Lossy
• Lossless
• Interframe
• Intraframe

Video Editing Software

• 3 bentuk asas :
• Video Capture
• mempunyai kebolehan mengawal isyarat input video, warna dan kecerahan
• mengawal pemilihan compression, algoritma, saiz frame dll
• Video Editing
• Memampatkan video kepada saiz lebih kecil
• berfungsi untuk copy, paste, cut, delete frame
• boleh mencantumkan beberapa frame
• menukar saiz frame rate
• menambah kesan khas (special effect) pada video
• Video Playback Applications
• memainkan video pada skrin penuh
• berfungsi untuk mengawal (play, pause, stop, rewind, fast forward dll)
• dapat pergi ke mana-mana frame yang dikehendaki
• Contoh software :
• Sony Vegas
• Windows Movie Maker
• Adobe Premier
• iMovie (diperkenalkan oleh Apple)
• Adobe After Effects
• Gold Disk's Astound Studio

Video File Format

• .avi
• Audio Video Interleave
• menyokong semua platform window
• digunakan dalam windows media player
• .mov
• QuickTime
• menyokong platform Windows dan Mac
• perlu install QuickTime Player
• Banyak digunakan dalam penyebaran video menerusi internet
• .mpg
• Motion Picture Expert Group
• terdapat sehingga MPEG-7 (standard for video presentation)

Analog & Digital Video

• Video Analog
• mempunyai set nilai yang berterusan (linear)
• gambar boleh diperbesarkan ke sebarang saiz tanpa kehilangan kualiti imej
• Contoh : tayangan gambar pada VCR dan cakera laser, magnetik
• Analog ditukar ke digital : Demodulation
• Proses demodulation memerlukan peranti berikut :
• sumber analog
• CPU yang pantas dan RAM yang besar
• semakin laju pemproses (CPU) semakin baik video digital dihasilkan
• dicadangkan minimum Pentium 100 MHz
• RAM yang banyak juga diperlukan untuk memastikan kualiti video yang baik. (minimum 32 MB RAM)
• Video Capture Card (disedikan bersama perisiannya)
• untuk ubah ke screen capture
• menghubungkan analog video ke komputer
• adakalanya video card tak mampu tangkap bunyi, maka sound card diperlukan.
• Harddisk

• Video Digital
• mempunyai set nilai diskrit
• bersifat interactive (boleh dicapai secara rawak)
• gambar diperolehi dari pixel atau elemen gambar.
• gambar akan kehilangan kualiti jika ia diperbesarkan.
• mudah disimpan dan dipindahkan secara berkesan
• Contoh : klip video yang dimainkan dalam komputer
• Digital ditukar ke analog : Modulation

Refleksi Minggu ke-11 : Audio

Alhamdulillah..pada minggu ke-11, kami telah berbincang mengenai topik AUDIO dengan subtopik seperti berikut :

1. analog & digital audio
2. how to calculate audio file size
3. audio sampling
4. factor that influence audio quality
5. audio compression
6. audio file formats
7. audio editing software

=====================================================

Analog & Digital Audio

• Analog audio
• adalah bunyi yang dihasilkan daripada gelombang (wave) yang berpunca dari getaran (vibration) 
• apabila dipindah daripada satu medium ke medium lain contohnya kaset ke kaset lain, kualitinya berkurang
• boleh mengalami distortion
• adakalanya ada noise (punca dari tape) yang boleh mengganggu gelombang bunyi
• ADC : Analog Digital Converter -> untuk menukar audio dari analog ke denyutan digital (bagi memudahkan proses editing)
• contoh : tape, kaset, piring hitam
• Digital audio
• berasal daripada analog audio tetapi gelombangnya bertukar ke format binary
• gelombang bunyi analog disample (ditiru) semula dan disimpan dalam digital (binary)
• Lagi banyak nilai sample (nilai binary) yang dibuat maka semakin hampir bunyi tersebut kepada bunyi asal
• apabila dipindah daripada satu medium ke medium lain, kualitinya tetap sama selagi tiada compression dibuat.
• telinga manusia biasa hanya boleh mengesan perbezaan perubahan (analog ke digital) di dalam lingkungan 20khz atau 40khz (192kHz : nilai maksimum sample rate)
• tidak terpengaruh gangguan noise
• DAC : Digital Analog Converter -> untuk menukar audio dari denyutan digital ke gelombang analog
• contoh : CD

Audio Sampling (Persampelan audio)

• adalah proses menukar analog audio ke digital audio
• Signal analog dipecahkan (disampelkan) sekerap mungkin bagi setiap saat
• Semakin tinggi kadar sampel, semakin banyak maklumat sampel yang diambil, semakin tinggi kualiti audio
• Menggunakan ADC.
• Semakin tinggi frekuensi semakin jelas dan nyaring bunyi yang dihasilkan.

Faktor yang Mempengaruhi Kualtiti Audio

• 3 faktor yang mempengaruhi kualiti audio :
• Kadar sampel (Sample rate)
• semakin tinggi kadar sampel, semakin tinggi kualiti audio
• kadar sampel diukur dalam Hertz (Hz)
• Standard sampel audio (11.025 kHz, 22.05 kHz, 44.1 kHz)
• website (11.025 kHz dan 22.05 kHz)
• CD (44.1 kHz)
• Saiz sampel (Sample size)
• merujuk kepada berapa banyak maklumat (bilangan bit) dalam satu sampel.
• Dua jenis sampel yang biasa digunakan ialah 8 bit dan 16 bit
• saiz 16 bit (CD) lebih berkualiti daripada 8 bit (radio)
• saiz sampel yang dipilih turut dipengaruhi oleh sound card (16 bit / 8 bit)
• semakin tinggi saiz sampel , semakin besar saiz fail
• Saluran (Channel)
• 2 jenis saluran mono dan stereo

Kiraan Saiz Fail Audio

• Saiz standard fail adalah dalam bytes.
• kadar sampel (Hz), 
• tempoh masa (saat), 
• Resolusi/Saiz sampel (bits, 1 untuk 8 bits @ 2 untuk 16 bits)
• bilangan saluran = 1 untuk mono, 2 untuk stereo
• Contoh : Kirakan saiz fail audio untuk 1 minit, 44.1 kHz, 16 bits, stereo sound

Audio Compression

• 2 jenis pemadatan audio
• Lossy
• kualiti berkurang dengan banyak sehingga 75% daripada asal
• membuang lebihan maklumat audio (eliminate redundant)
• Lossless
• membuang maklumat sedikit berbanding lossy compression (25%)
• saiz lebih besar berbanding lossy
• maklumat yang tidak penting sahaja dibuang

Format Fail Audio

• AIFF
• Audio Interchange File Format
• diguna pada Mac dan IBM
• MIDI
• Musical Instrument Digital Interface
• boleh diterima oleh semua peranti
• saiz kecil
• RIFF
• format yang diperkenalkan oleh Microsoft
• mengandungi pelbagai jenis data termasuk Wave dan MIDI
• SND
• Sound
• diperkenalkan oleh Apple 
• hanya sesuai bagi audio dengan saiz sampel 8 bit
• WAV
• Wave (gelombang)
• format paling meluas digunakan
• dibangunkan oleh Microsoft
• mampu menyokong saiz sampel 16 bit (mono & stereo)
• kualiti yang tinggi, tiada compression, merupakan audio asal
• MP3
• MPEG Level 3
• Format audio yang popular bagi tujuan penyaluran muzik melalui internet
• mempunyai teknik audio compression (pemadatan audio) yang baik, memadatkan audio daripada 45 MB WAV kepada 4 MB MP3.
• RAM @ RA
• popular juga dalam penyaluran melalui internet secara langsung
• membolehkan siaran radio dan TV ditayang terus melalui internet

Audio Editing Software

• SonicFoundry Sound Forge
• Macromedia SoundEdit
• mampu melakukan editing sehingga 10 jenis format

=====================================================

Refleksi :

• Audio mampu menarik perhatian
• Audio mampu mempengaruhi emosi dan pemikiran seseorang
• Audio bertindak sebagai panduan kepada pengguna
• Dapat mengenalpasti jenis audio yang sesuai dimasukkan ke dalam multimedia dari segi saiz dan kualiti.

Rujukan

http://www.scribd.com/doc/13446118/TOPIK6

Reflection of Media Design Critique

Alhamdulillah, saya dan Syakirah telah menyiapkan tugasan 1 tentang kritikan rekabentuk media sebuah laman web pendidikan iaitu laman web SMK Tendong.

Berikut adalah antaramuka asal laman web dan antaramuka yang telah direkabentuk semula :

Home page (original)

Home page (redesign)

Background and history of school (original)

Background and history of the school (redesign)

Gallery of photos (original)

Gallery of photos (redesign)

Secara ringkasnya, antaramuka laman web asal diubah keseluruhannya kerana :

• tidak mengikut prinsip rekabentuk multimedia dengan baik (tidak konsisten, tidak seimbang
• banyak jenis typeface yang digunakan dalam satu antaramuka dan tipografi yang digunakan tidak bersesuaian dengan persembahan online yang memerlukan typeface Sans Serif
• penggunaan banyak animasi yang mengganggu elemen utama seperti persembahan slaid gambar diganggu oleh animasi teks di sebelahnya.
• butang navigasi yang tiada nilai konsisten seperti mana laman web yang lain dan berbeza dengan mental model

Atas sebab di atas, kami telah merekabentuk semula antaramuka seperti dalam paparan di atas. Antara kekuatan dan kelemahan rekabentuk baru adalah :

Kekuatan :

1. Antaramuka direkabentuk lebih ringkas dan jelas supaya pengguna tidak keliru untuk melayari laman web.
2. Menu bagi guru, PIBG dan pelajar disediakan pada menu utama supaya pengguna daripada kelompok tersebut terus terarah pada menu yang dikhaskan dan tidak perlu membuang masa mencari maklumat yang berkaitan.
3. Pada menu galeri dimasukkan perkhidmatan muatturun gambar dan video untuk kegunaan guru, pelajar dan pihak-pihak berkepentingan.

Kelemahan :

1. Tidak disediakan kemudahan khas bagi pengguna rabun warna untuk menukar warna tulisan jika perlu.

Refleksi :

Setelah melalui minggu-minggu menyiapkan tugasan ini bermula dengan pencarian laman web yang dirasakan tidak mempunyai ciri-ciri laman web yang baik, kemudian diikuti dengan laporan analisis tentang antaramuka asal, kemudian mencadangkan pengubahsuaian pada laman web daripada pelbagai elemen dan akhirnya merekabentuk antaramuka laman web yang baru.

Terdapat banyak perkara yang dipelajari, antaranya :

1. prinsip reka bentuk media sangat perlu dipatuhi supaya laman web yang terhasil benar-benar menarik pengguna untuk terus melayarinya.
2. setiap kali mencari reka bentuk laman web moden pada web browser, pasti contoh yang diberikan banyak menggunakan latar belakang yang berwarna putih, tidak mempunyai banyak grafik dan sejuk mata memandang kerana penggunaan white space yang sangat baik.
3. antaramuka laman web terkini dan moden banyak meletakkan menu di bahagian atas, tidak lagi di bahagian kiri.
4. melalui tugas berkumpulan, banyak idea dapat dilontarkan dan dikongsi untuk menghasilkan satu tugasan yang baik.
5. penghasilan laman web yang baik menjadi mudah jika kita faham tentang prinsip reka bentuk, tipografi yang betul, reka letak yang tepat dan pemahaman konsep laman web mengikut konteks seperti pendidikan.

Refleksi Minggu ke-9

Alhamdulillah for the 9th week, Dr. Shafie takes turn as a lecturer for this course. For this week, we are introduced some terms in animation technique by presentations from each group of two.

The terms related are :

1. Digital Animation
2. 2D and 3D animation
3. Cutout
4. Drawing
5. Stop Motion
6. Virtual Reality, special effect
7. Augmented Reality

-------------------------------------------------------------------------------

Digital Animation

• Animate : is to give life to the image
• a variety of computer based techniques that the animation is created digitally on a computer. An animation is the rapid display systematic images creating an illusion of movement.

2D and 3D animation

2D Animation

• 2D animation is the traditional animation method that has existed since the late 1800s
• one drawing followed by another in a slightly different pose, followed by another in a slightly different pose, on and on for 24 frames a second
• 
• Traditionally :
• artists drew pencil drawings of every frame of film
• then these images were painted onto clear plastic sheets called ‘cels’
• each of the thousands of handrawn and painted cels were photographed one at a time over a hand painted background image and those thousands of images compiled to run as film at 24 frames a second
• Today :
• using computer software, example flash
• from just digitally coloring the cels to be photographed in the traditional method, to doing every single element in the computer
• 
• Comparison between 2D and 3D animation
• 
• 

3D Animation

• 3D animation (aside from stop-motion, which really is a form of 3D animation), is completely in the computer. 
• Things that you create in a 3D animation program exist in an X, Y & Z world. Instead of a drawing of a globe, I have a sphere that can actually turn 360 degrees.
• 3D objects, once modeled, can be treated almost as a physical object. You can light it differently, you can move a camera to look at it from above, or below. 
• “Moving the camera” in 3D is simply dragging it to another position to see if you like it better. 3D allows you to create realistic objects. You can use textures and lighting to create objects that appear solid, and can even be integrated seamlessly into live video elements.

Cutout Animation

1. is a technique for producing animations using flat characters, props and backgrounds cut from materials such as paper, card, stiff fabric or even photographs.
2. Today, cutout-style animation is frequently produced using computers, with scanned images or vector graphics taking the place of physically cut materials.

Drawing Animation

1. an animation technique where each frame is drawn by hand
2. it is similar with traditionally 2D animation

Stop Motion

1. is an animation technique to make a physically manipulated object appear to move on its own. 
2. The object is moved in small increments between individually photographed frames, creating the illusion of movement when the series of frames is played as a continuous sequence.

Virtual Reality, special effect

1. sometimes referred to as immersive multimedia
2. is a computer-simulated environment that can simulate physical presence in places in the real world or imagined worlds.
3. often used to describe a wide variety of applications commonly associated with immersive, highly visual, 3D environments.

Augmented Reality

1.  is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data
2. conventionally in real-time and in semantic context with environmental elements
3. A key measure of AR systems is how realistically they integrate augmentations with the real world

Refleksi Minggu ke-8

Happy Holiday + Work :-) apo nak dikato..

Refleksi Minggu ke-7

Alhamdulillah for the 7th week, we are introduced another element of media : Graphics/Images. In the graphics element, a few things should be known such as :

• Types/Categories of Graphics :
• Bitmap Graphics
• Vector Graphics
• Grahics Quality determined by :
• Resolution
• Color Depth

----------------------------------------------------------------------------------------

Introduction of Graphics

1. is the visual representation of some information
2. it can be chart, drawing, photograph, diagram and the like.
3. Graphics can :
• convey a lot of information quickly
• enhance other media
• tell stories
• can persuade
• clarify data
4. We can obtain digital image by :
• scanning
• editing existal digital images
• clip art
• use screen capture
• paint or drawing program

With Graphics, message can be deliver effectively

Categories of Graphics

Bitmap Graphics

• also known as raster images
• graphic made up of hundreds of coloured dots/pixels
• bitmap is a realistic photos/images
• increasing the size of a bitmap = increasing individual pixels = jagged
• Bitmap to vector = using autotracing
• bitmap images :
• photo from scanner, digital camera, drawing (photoshop)
• Advantages : 
• easy to produce
• universally available - has no problem to preview in any computer 
• Disadvantages :
• fixed resolution
• can not be resized
• the higher resolution, the larger file size.
• Format bitmap :
• jpg (realistic images), bmp, gif, png (transparent background)



Diagram showing pixels in a bitmap

become  when dragging the image size

Vector Graphics

• vector is drawn using mathematical formulas to define lines, curves, and other attributes.
• primarily used in Hard Copy documents due to high resolutions possible
• drawing objects (such as boxes, text, circles) can be moved independently
• increasing the size of a vector = relationship between each part stays the same = same quality
• Advantages :
• easy to manipulate and edited
• can be scalable to any size without any loss (because vector use mathematical formulas)
• smaller in size file
• can convert to bitmap image (print screen)
• Disadvantages :
• Must be an expert to produce the high quality images
• More complex the image = larger the file size
• Format vector :
• pcx, wmf

Vector image showing points on a petal

 become when dragging the image size

Graphics Quality 

 * also dependent upon the equipment

Resolution

• number of pixels contained on a display monitor (computer resolution)
• number of pixels contained in a digital image (image resolution)
• Example : 1024x768 pixels, 1200 dpi/ppi (dot per inch/pixel per inch)
• More pixels = the sharper the image look = the higher memory storage space
• 72 dpi = suitable for presentation
• 150 - 300 dpi = needed for printing purpose

Color Depth

• is the range of colour (eg. blue - how many color range of blue, )
• 1 bit = 2 color, 8 bit = 256 color, 16 bit = 65, 536 colors, 24 bit = 16.7 million colors
• the more colors per pixel, the larger the file size
• Dithering = some color have to be removed when decreasing the color depth : million color to 256 color (to decrease the file size)

Reflection :

After we know about the types of graphics and the reason of high/low of images quality, hopefully we can develop any multimedia presentation with suitable size and high in quality.

Bibliografi :

http://www.virtualmv.com/wiki/index.php?title=Multimedia:Graphics

Refleksi Minggu ke-6

Alhamdulillah..for the 6th week, the lecture discusses :

• Multimedia Design Principles (Balance, Rhythm or Harmony, Emphasis, White Space) - Continue from the last post.
• Typography : Basic Concepts and Principles
• Working With Text
• Typography in Media Design

**********************************

In the 5th week post had been explained 2 design principles Contrast and White Space. For this post, will be described about another 5 design principles in multimedia.

Design Principles

Unity

• Refer to Fakharudin's Blog

Repetition/ Consistency

• gives your visitors a sense of site recognition and consistency
• Using a repeated logo and keeping the headings, fonts, colors, sizes and styles the same across all pages adds a repetitive continuity that enhances the flow of the website.
• creates continuity and looks professional
• 

Balance

• equal distribution of visual weight in a design. Visual balance occurs around a vertical axis; our eyes require the visual weight to be equal on the two sides of the axis.

• Symmetry : 
• 
• 
• 
  
• formal balance
• also known bilateral balance
• It can also be boring
• symmetry achieves balance through repetition

• Asymmetry
• 
• 
• informal balance
• asymmetry achieves balance through contrast
• to draw attention
• interesting and more dynamic than symmetrical balance.

Rhythm / harmony

• Repeating a series of elements that progressively increase or decrease in size and spacing
• Alternating dark and heavy with light and thin elements
• Repeating similar shapes or elements throughout the layout
• Presenting consistent elements in the same position of every page throughout a site
• 
• 

Emphasis

• Refer to Syakirah's Blog, Hazani's Blog and Fakharudin's Blog

Typography : Basic Concepts and Principles

• Typography is one of the most fascinating elements of graphic design. If it’s web design, album art, posters, or any other type of graphic design, typographical inspiration can be a great. (Tipografi adalah satu elemen yang menarik dalam rekabentuk grafik. Dalam rekabentuk web, album seni, poster dan lain-lain, tipografi adalah satu idea yang baik)

• There are some common terms that we use daily with the wrong meaning. Previously, we often using term "FONT" as to refer Arial, Times New Roman, Comic Sans and so on. However, the term should be called TYPEFACE not FONT. (Terdapat beberapa istilah yang biasa digunakan sehari-hari dalam maksud yang salah. FONT bukan merujuk kepada jenis tulisan Arial, Times New Roman, Comic Sans dan lain-lain. Tetapi, ianya patut dipanggil TYPEFACE)

• Instead, FONT refers to Bold, Italic, Underline, Shadow, Strikeout, Subscript and so on. (Manakala, FONT adalah Boldi, Italic, Underline, Shadow, Strikeout, Subscript, size of font dan lain-lain lagi)

• 3 categories of typeface

1. Serif - eg. Bodoni, Times New Roman,


• suitable used in the printing document such as typing in Microsoft Word and printing the document. (Sesuai digunakan pada dokumen yang dicetak seperti penulisan dalam Microsoft word)
• it is suitable for that purpose because the typeface seems creating a line underneath and can help us focusing ones attention on the line of words. (sesuai bagi tujuan di atas kerana Serif menampakkan seakan-akan garisan di bawah tulisan dan dapat membantu kita tertumpu pada satu-satu baris perkataan.
• 
2. Sans Serif - eg. Arial, Arial Narrow, Tahoma, Verdana
• suitable used in the online presentation such as writing in blog, power point presentation. (sesuai digunakan dalam bentuk persembahan seperti penulisan pada blog, persembahan power point.)
• 
3. Decorative - Brush Script, Castellar, Monotype Corsiva
• suitable used as a title, not in a main informational writing (sesuai digunakan untuk tajuk dan bukan pada teks kandungan)
• 

Working With Text

1. Layout
• gunakan White Space untuk memberikan emphasis ke atas isi kandungan/ bingkaikan isi kandungan dengan ruang kosong.
• Jangan meletakkan elemen yang terlalu mengalih perhatian terutamanya bersebelahan dengan teks seperti di sidebar.
2. Measure (Ukuran)
• Ukuran ini merujuk kepada bilangan karakter dalam satu baris.
• 50-80 karakter adalah memadai untuk satu baris.
• Jika terlalu panjang pengguna akan mengalamai kesukaran untuk mencari permulaan perkataan pada setiap baris.
3. Line Height (Ketinggian bagi setiap baris)
• merujuk kepada ruang di antara baris teks.
• Kesesuaian ketinggian adalah 150% daripada saiz tulisan.
• Gunakan ketinggian baris yang lebih panjang jika bilangan karakter yang lebih banyak digunakan dalam satu baris, kerana penggunaan line height boleh membantu mengurangkan kesan sukar memulakan mencari baris seterusnya.
4. Visual Hierarchy
• adalah perbezaan kadar penegasan dalam satu paparan.
• Tanpa visual hierarchy, pengguna akan hanya tertumpu pada bahagian yang menarik sahaja.
• Cara yang mudah adalah dengan menjadikan title, heading dan subheading contrast antara satu sama lain dan contrast pada kandungan teks.
5. Title (Tajuk)
• Gunakan line height 'tajuk'yang lebih kecil berbanding 'kandungan' = 1.1 : 1.5
6. Paragraph (Perenggan)
• Biasanya setiap perenggan dibahagikan dengan white space/ margin di atas dan bawah perenggan.
• Ataupun pada perenggan kedua, permula baris dijarakkan sedikit ke dalam daripada margin kiri.
7. Typeface
• Kita boleh menggunakan satu typeface sahaja dalam satu paparan dengan pelbagai font (saiz, weight)
• Jika ingin menggunakan 2 typeface, pastikan terdapat unsur contrast antara keduanya.
8. Font Size
• Gunakan saiz font yang besar = 16px atau lebih jika x-height typeface rendah.
9. Color (Warna teks)
• Jangan gunakan warna hitam (#000) pada teks kandungan.
• Gunakan warna yang lebih lembut seperti kelabu kehitaman.
• Pada tajuk gunakan warna yang lebih gelap daripada teks kandungan.
• Bertujuan supaya teks kelihatan lembut sedikit pada pandangan mata tetapi masih mengekalkan contrast.
10. Text must be concise - not too much sentences and make it short. (mestilah ringkas dan pendek -
11. Must use in appropriate way - do not be to much decorative text in Drug Prevention Website, because the motive of website will be seen not in serious situation.