Refleksi Media Design - Kritik Web

Assalmmaualaikum dan salam sejahtera..

Kali ini saya diberi tugasan untuk mengkritik sebuah laman web berkenaan beberapa elemen yang penting dalam sesebuah laman web. Saya telah buat keputusan untuk memilih membuat kritikan pada sebuah laman web Sekolah Menengah Teknik Taiping. Laman web tersebut boleh di capai pada capaian berikut http://www.freewebs.com/tekniktaiping/ .. Saya dapati banyak kekurangan elemen rekabentuk pada laman web tersebut.

Berikut adalah antara paparan laman web tersebut :-

paparan hadapan

Paparan hadapan (bahagian bawah)

Laman web sekolah ini kelihatan agak padat dengan info dan maklumat yang berada dalam keadaan berterabur. Keadaan ini menyusahkan pengguna untuk mencapai maklumat dengan cepat. Berikut adalah beberapa kelemahan elemen pembangunan web yang saya temui dalam laman web ini :-

KELEMAHAN

1.     Pada laman web ini terdapat banyak maklumat yang tidak tersusun.
2.  Web ini tidak dibangunkan sesuai dengan resolusi yang seuai untuk semua komputer. Kerana terdapat sebahagian web ini dalam keadaan kosong (blank area).
3.   Banyak pautan menu (link) yang diletakan berselerak pada muka utama laman web.
4.  Tidak terdapat strategi maklumat pada laman web tersebut.
5. Tidak terdapat sebarang elemen yang boleh menarik perhatian pengunjung.
6. Meletakan menu utama pada frame. Serta menu utama itu akan hilang masuk kedalam frame bila diskrol.

KEKUATAN

1. Laman web ini menyediakan banyak maklumat yang berkaitan dengan sekolah.

REFLEKSI

Secara kesimpulanya, untuk mencari laman web untuk dijalankan kajian kritikan ini memerlukan masa yang agak lama.. kerana banyak laman web sekarang sudah dibina menggunakan CMS (Content management System). Kebetulan terjumpa laman web ini selepas saya menyemak muka demi muka di enjin carian google.

Antara perkara baru yang saya belajar dalam tugasan kritikan ini ialah :-

1. Kita perlu mempunyai pengetahuan dari dasar sampai ke umbi tentang elemen penting sesebuah laman web sebelum membuat kritikan.

2. Kritikan yang dilakukan tidak boleh dibuat mengikut suka hati dan ikut suka rasa mata.

3. Sekurang-kurangnya kita mesti pernah membangunkan laman web dan pernah mencuba pelbagai bahan untuk pembangunan laman web sebelum kita melakukan kritikan.

4. Membangun satu sistem media adalah mesti menepati citarasa dan memuaskan hati pengunjung atau pelanggan. Bukan membangunkan mengikut citarasa sendiri.

5. Teknikal baru yang saya belajar berkenaan tugasan kritikan adalah berkaitan dengan elemen white space, yang selama ini saya tidak ketahui namanya.

6. Teknikal kedua tentang broken link yang banyak sangat ditemui dalam laman web ini menjadikan ianya sebuah laman web yang membosankan.

Akhir sekali terima kasih Prof. Madya Dr. Jamal atas bimbingan..

Minggu ke 12 - Video

Assalammualaikum dan salam sejahtera..

Minggu ini kita belajar tajuk video pula.. Seperti biasa.. Kaedah Pembentangan dijalankan..

Apakah tujuan video.
Pengiraan saiz video (Tajuk kumpulan saya)
Video Compression Technique (Teknik Pemadatan Video)
Video Editing Software
Video File Format
Analog & Digital Video

______________________________________________________

Tujuan Video 

• Terdapat teori captologoy (Persuade) - memujuk dan merayu penonton
• Untuk mengubah sikap (Change behavior)
• Menyampaikan maklumat terus tersimpan di memori ingatan.

Penggiraan video

Frame Size

merujuk kepada bilangan pixel yang dipapar secara mengufuk dan menegak (horizontal and vertical)

contoh : 800 x 600 (minimum monitor hari ini)

semakin kecil frame size, semakin kecil saiz fail, maklumat dpat dipindahkan dengan cepat

Frame Rate

Frame rate  merupakan bilangan imej yang dipaparkan dalam tempoh masa tertentu.

Biasanya diukur dalam unit ‘frame per second’ (fps) 

Pita video piawai mempunyai 30 fps.

‘Frame’ bagi ‘movie’ dipanggil sel.

Semakin kecil kadarnya, semakin cepat data dapat diproses dan semakin kecil fail video

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

Video Compression (Pemampatan video)

• Kaedah pemampatan menggunakan algorithma matematik untuk mengurangkan data video dengan ‘eliminating’, ‘grouping’ atau ‘averaging’ data yang hampir sama ....
• Pemampatan perlu supaya video digital mudah untuk diuruskan untuk penyimpanan, penghantaran dan pemprosesan. 
• Dengan pemampatan, saiz data dapat dikurangkan
• Semakin banyak video dimampatkan, semakin tinggi nisbah pemampatan. 
• Tetapi kualiti video akan menjadi semakin berkurangan jika nisbah pemampatan semakin tinggi
• Nisbah pemampatan berbeza mengikut kaedah mampatan yang digunakan

Minggu ke 11 - Audio

Assalammualaikum.. Kelas kali ini membahaskan tentang Audio ...

Minggu Ke 10 - Pembelajaran

Kelas di ambil alih oleh pelajar PHD

Minggu ke 9 (Teknik Animasi)

Assalammualaikum dan salam sejahtera...

Setelah seminggu cuti kini kelas Media Design disambung semula.. Untuk sesi selepas cuti Med Sem ini, kelas telah sepenuhnya diambil oleh Dr.Shafie..

Kelas pertama bersama beliau, kami terus diberi tugasan untuk mencari maklumat dalam 40 minit secara kumpulan berkaitan tajuk TEKNIK ANIMASI. Beliau yang percaya dan yakin bahawa pembelajaran akan lebih baik dan berlaku apabila pembelajaran andragogi ini dilaksanakan secara konstruktivis.. Saya secara peribadi turut menyokong pendapat beliau bahawa pembelajaran akan lebih sempurna melalui kaedah pebelajaran konstruktivis..

Antara tajuk berkaitan dengan animasi yang perlu di kaji ialah :-

• Digital Animation
• 2D and 3D animation
• Cutout
• Drawing
• Stop Motion
• Virtual Reality
• Augmented Reality

Kumpulan saya memilih tajuk  "Digital Animation"

Walaubagaimanapun, saya jelaskan beberapa perkara berkaitan dengan semua tajuk yang ada :-

Digital Animation

Digital Animation adalah gabungan perkataan  Digital + Animation.. Digital bermaksud proses pendigitalan..proses pendigitalan adalah proses yang dilakukan kepada apa saja bentuk fizikal untuk diterjemahkan dalam bentuk digital agar ianya dapat berfungsi secara maya yang dapat dicapai oleh komputer...

Manakala Animation - adalah satu perkataan yang berasal dari latin yang berbunyi "animatio" bermaksud memberi nyawa / memberi kehidupan.. Satu imej pegun yang diberi gerakan mengikut kehendak pencipta. Bermula dari satu gerakan sehingga gerakan yang lain sehingga tamat.

Sejarah animasi ini bermula sejak dari zaman tamadun awal manusia lagi.. mereka melakarkan sebuah cerita seakan-akan story board di dinding-dinding.. dari awal hingga akhir.. contohnya seperti lakaran-lakaran dinding yang ditemui pada zaman paleolitik..

Animasi ini berlaku  evolusi dari dahulu sehingga sekarang.. Antara contoh animasi yang di perolehi pada tahun 1893 - Phenakistoscope ..yang dicipta oleh Eadweard Muybridge ..

Animasi 2D dan 3D 

Animasi bermula dengan gerakan 2D sehingga kepada 3D... (D = Dimensi)

Animasi 2D ialah adalah bersifat secara tradisional.. dimana imej yang dilukis dari satu posisi kepada posisi yang lain. biasanya dalam bentuk 24 frame persaat..

Animasi secara 2 D ini boleh dibuat didalam sebuah buku kosong yang mengandungi muka surat yang banyak. Setiap muka surat tersebut dilukiskan setiap pergerakan yang diinginkan..Seperti menggunakan teknik flipbook. Sebagai contoh kita lihat video ini :-

Pada zaman kini, peredaran teknologi semakin bertambah canggih dan baik.. Animasi 2D ini dapat dihasilkan dengan menggunakan komputer berserta software animasi. Cth : Flash, Flipnote studio & Toon Boom..

Animasi 3D

Animasi yang dihasilkan dalam bentuk 3 dimensi. Imej bebentuk model yang boleh dilihat dari atas, bawah depan dan belakang. Berbanding dengan 2 dimensi yang hanya dalam bentuk imej yang hanya boleh dilihat dalam satu paparan sahaja..

CUTOUT

Animasi cutout adalah teknik untuk menghasilkan animasi menggunakan aksara secara rata, prop dan latar belakang dipotong daripada bahan-bahan seperti kertas, kad, kain sengit atau gamb

Virtual Reality

Animasi virtual reality adalah animasi secara interaktif yang dipaparakan seolah-olah ia berada pada keadaan tersebut. Dipaparkan dalam bentuk 3D .. Pengguna akan merasakan bahwa mereka berada didalam animasi tersebut.

AUGMENTED REALITY

Animasi augmented reality adalah kembangan daripada virtual reality. Maksud perkataan augmented itu sendiri adalah "Melengkapkan". Jadi ianya adalah animasi yang melengkapkan persekitaran sekeliling secara 3D. Boleh juga dijelaskan sebagai pandangan secara nyata secara terus atau tidak dalam bentuk fizikal digabungkan bersama elemen audio, video, grafik ataupun data GPS .

Minggu Ke-8 (Cuti Mid Sem)

Yer.. Kita cuti.. betul...cuti

30 Mac - 6 April

Refleksi Minggu ke 7

Minggu ke-7 ..

Minggu ini Prof. menerangkan tentang beberapa elemen lain yang berkaitan dengan media iaitu:-
Grafik & imej. Perkara yang dijelaskan adalah berkaitan dengan elemen yang terdapat pada grafik dan imej.

Jenis grafik

1. Bitmap ( Gambar sebenar)

- Turut dikenali sebagai "raster image" - gambar berformat bitmap akan mengalamai perkembangan pixel yang akan menjadikan gambar/imej itu kabur apabila dibesarkan.

    2. Vector ( Gambar lukisan) 

- Imej vector tidak akan mengalami kekaburan walaupun dibesarkan.

Kualiti Grafik

1. Resolution

2. Colour Depth

PENGENALAN GRAFIK

Grafik adalah imej yang dijelaskan dalam bentuk visual untuk menyampaikan atau menerangkan tentang sesuatu gambaran maklumat serta dapat ditayangkan pada skrin komputer dan boleh juga di cetak.

Grafik terjadi dalam bentuk2 berikut :-

• Carta
• Lukisan
• Cat
• Foto
• Logo 

Kegunaan Grafik untuk :

• Gambaran sesebuah prosedur
• Menjelaskan data
• Menyampaikan idea
• Menceritakan 
• Memujuk
• Menggambarkan emosi dan perasaan

Kelebihan & Kekurangan dalam menggunakan Imej

Kelebihan

• Dapat menjelaskan maklumat dengan cepat berbanding perkataan
• Menambah keupayaan simulasi visual dan warna
• Boleh berinteraksi secara bahasa badan
• Meningkatkan keupayaan sesebuah media

Kekurangan

• Tidak dapat menjelaskan secara menyeluruh - sebagai contoh dalam bidang perniagaan dan teknikal
• Boleh jadi kepada salah tafsiran
• Jika ingin digunakan kepada paparan komputer, perlu kepada pertukaran kepada digital
• Perlu disimpan dalam simpanan komputer - Yang mengakibatkan perubahan pada struktur imej yang sebenar.

Minggu ke 6

Assalammualaikum..

Pembelajaran bermula dengan pembentangan tajuk-tajuk yang lepas yang belum habis lagi dibincangkan.. Antara pembentangan ialah berkaitan dengan Principle Design :-

1. Rythm & Harmony

2. Emphasis

3. White space

Seterusnya penerangan berkenaan tugasan yang perlu disiapkan secara berkumpulan.. Tugasan Kritikan Media Design yang perlu dihantar pada 19 April 2014..

40 minit seterusnya, Dr Jamalludin menjelaskan tentang FONTS / Types Font / Typo

Penjelasan mengenai Typeface adalah tidak sama dengan fonts.

Typeface adalah "Family Graphic Characters"

Sans serif - (Bahasa France yang membawa maksud sans=tiada /  serif=ekor/lengkok)

Serif - (Keluarga fonts yang mempunyai lengkok)

Working With Text

- Dalam persembahan multimeda, text adalah elemen multimedia yang "membosankan"..

- Hanya 3 saat untuk menarik perhatian pembaca.

5 

- Padat

- Boleh dibaca

- Jenis style dan warna yang pasti.

- Penggunaan typefaces secara konsisten

Multimedia Design Principle

Terdapat beberapa prinsip design (Design Principle) yang sering digunakan dalam Multimedia design.. Prinsip ini perlu ada pada setiap Multimedia Design supaya pandangan visual  design tersebut menjadi lebih cantik dan menarik perhatian. Antara Design Principle ialah :-

1. Contrast
2. Unity
3. White Space
4. Proximity
5. Repetition/ Consistency
6. Balance
7. Rhythm or Harmony
8. Allignment
9. Space
10. Emphasis

Diantara design principle ini, saya akan bincangkan  2 prinsip design :-

1. RHYTM / HARMONY 

Harmony is achieved through the sensitive balance of variety and unity. Color harmony may be achieved using complementary or analogous colors. Harmony in design is similarity of components or objects looking like these belong together. Harmony may be visually pleasing and harmony is when some of the objects like drapes and couches share a common trait. A common trait between objects could be: color(s), shape(s), texture, pattern(s), material, theme, style, size, or functionality.

sumber : http://www.flashcardmachine.com/principles-of-design1.html

Secara ringkasnya harmony didalam Multimedia Design adalah keseimbangan kepelbagaian elemen serta perpaduan diantara elemen yang terdapat dalam multimedia tersebut. Harmony itu dapat dilihat pada warna yang ada pada multimedia tersebut. Satu sifat yang sama atau hampir-hampir sama diantara gabungan beberapa elemen. Permainan warna yang seakan-akan diantara kepelbagaian elemen. Sebagai contoh dalam realiti, bila kita lihat pada hiasan dalaman rumah yang mempunyai cat dinding bewarna Hijau cair manakala langsir nya bewarna hijau pekat / hijau daun pisang.

Manakala kita  lihat dalam contoh sesebuah laman web keseimbangan warna itu dapat dilihat pada warna yang terdapat "background" dan warna tulisan pada "content" dan juga warna tulisan pada "header"..

Contoh gabungan harmony : (Dalam Sesebuah Laman Web)

• Theme + Fonts + Colour
• Icon + Fonts + Colour + Layout
• Web Banner + Colour + Theme + Thumbnail

2. PROXIMITY 

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

Sumber : http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/

PROXIMITY ini bermaksud "Dekat" / "Kumpul" dalam bahasa melayu.. prinsip design ini membawa maksud "mendekatkan" atau "mengumpulkan item yang terdapat didalam sesebuah multimedia.. Dalam maksud yang lain ia juga boleh di panggil sebagai "pengkategorian" beberapa item yang mempunyai persamaan atau item yang berhubung antara satu sama lain. Tujuanya untuk memudahkan pandangan pengguna melihat elemen didalam multimedia secara teratur dan tersusun serta tidak menyemakan mata.

Proximity juga membawa maksud kepada "JARAK UNTUK DIHIMPUN".. Dalam sesuatu text yang ditulis kemungkinan ianya rapat semuanya... Perlu kepada Jarak mengikut keseuaian elemen ayat untuk di dekatkan.. Agar lebih menarik..

Sebagai contoh kita melihat kepada web design .. Terdapat web design yang menghimpunkan "kumpulan link" yang berkaitan antara satu sama lain..

Contoh yang lain dapat kita lihat pada "kategori" iklan yang terdapat dalam design web seperti web berikut :-

Contoh lain didalam design sebuah image untuk flyer.. Jarak untuk dihimpun..

CONTOH 2 :

SEBELUM

SELEPAS

MInggu 5 DESIGNING FOR MULTIMEDIA

Kelas dimulakan dengan tajuk  Designing For Multimedia

- Output of multimedia.web design
- Bermula dengan fasa design
- 3 Elemen penting dalam design multimedia :-

• Content Design
• Interaction design
• User Interface design

- Tumpuan diberikan kepada tajuk User Interface Design : An Overview

- Juga dikenali sebagai presentation design

- Proses secara ergonomical dan strategi penyampaian media untuk menyampaikan mesej komunikasi

- mesej boleh membawa maksud :-

- informasi

- emosi

-UI - User interface adalah termasuk :-

Minggu 4

Assalammualaikum...

Minggu keempat kelas ditunda pada minggu hadapan.. Prof tidak dapat menghadirkan diri kerana sebab-sebab yang tidak dapat dielakan..

Minggu Ke 3 Media Design

Assalammualaikum dan salam sejahtera..

Alhamdulillah.. hari nie dah sampai minggu ketiga saya belajar dam kelas Media Design.. Masih lagi Prof. Dr. Jamalludin yang menyampaikan ceramah. Kali nie kelas dimulakan dengan pembentangan secara kumpulan.. kumpulan telah memilih tajuk memasing samada social media, immersive multimedia dan Augmented Reality.

Dalam sesi penerangan kumpulan pertama yang menerangkan tentang social media. kumpulan pertama ini lebih menjurus secara khusus kepada satu contoh perisian web yang dirasakan sebagai social media iaitu FROG VLE..  hasil dapatan dari perbincangan bersama prof.. FROG Vle bukanlah satu jenis social media.. ianya hanyalah himpunan kaedah-kaedah multimeda yang digabungkan dalam satu laman web..

Seterusnya kumpulan kedua menerangkan dengan lebih jelas lagi dan terjawap semua soalan  yang berkaitan dengan social media.

Saya dan sahabat saya mendapat giliran ke3 untuk membentangkan tajuk IMMERSIVE MULTIMEDIA.. Kami membentangkan tajuk secara ringkas dan hasil pembentangan kami telah pun dapat menjawab semua soalan yang dikehendaki mengikut tajuk yang diberikan oleh Prof.

Secara ringkasnya Immersive Multimedia ini adalah gabungan beberapa media yang dapat mewujudkan ruang, visual, dan interaksi dua hala antara manusia dan komputer. beberapa contoh immersive multimedia seperti simulasi pembedahan, simulasi pemanduan kapal terbang, smart board dan bermacam- macam lagi.

Selesai pembentangan dari semua kumpulan. Prof Jamalludin telah menyampai syarahan ringkas berkenaan tajuk INTRODUCTION TO MULTIMEDIA yang mempunyai skop :-

1. Multimedia Development Team
- Membicarakan tentang keperluan pasukan yang mempunyai kepakaran-kepakaran yang penting dalam sesuatu projek multimedia. seperti Multimedia developer, software designer, graphic artist, web developer, dan bermacam-macam lagi..
-kami di kehendaki untuk menyenaraikan 3 kepakaran utama dari bermacam2 kepakaran yang ada untuk membuat satu pasukan multimedia mengikut bajet yang tertentu..
- KEY : sekiranya tidak memiliki bajet untuk menyediakan kepakaran pelbagai.. cukup dengan hanya memiliki seseorang yang mahir dalam Authoring..

2. Multimedia Development Process
-
3. Multimedia Development : MPP

Minggu ke dua

Pembelajaran untuk minggu kedua ini di jalankan oleh Prof. Madya Jamalludin Hj. harun. Sesi permulaan membicarakan tentang kepentingan dan perbezaan antara media dan multimedia.. Penggunaan media pada hari ini..

Seterusnya kami diberi tugasan untuk membincangkan tentang tajuk yang akan dibentangkan pada minggu hadapan.. Saya dan sahabat saya telah memilih tajuk "Immersive Multimedia"..

Saya mendapati immersive multimedia ini adalah istilah merujuk kepada simulasi janaan komputer yang menghasilkan realiti, fizikal, dimensi ruang dan visual. Itu definisi secara ringkas yang dapat saya temui melalui carian saya di google.

Ia juga adalah Virtual Reality (Rrealiti Maya) yang dapat menghasilkan simulasi tertentu. Boleh digunakan untuk pelajaran, perniagaan, permainan, perubatan dan sains. Dalam tugasan itu saya dan seorang sahabat saya telah diminta untuk menyatakan apakah efektifnya Immersive Multimedia dan kos .

Hye..Selamat Datang

Assalammualaikum dan salam sejahtera..

Hye.. Saya Alwee Shamrin.. student Master UTM - Teknologi Pendidikan MP 132058 sesi 2013/2014..

Terima kasih kerana melawat blog yang menceritakan tentang journal dan catatan tentang pelajaran dan pembelajaran untuk tajuk Technology Media Design MPT1203 ...

So.. untuk sesi kuliah kali ini bersama Profesor Madya Dr. Jamalludin Hj. Harun dan Dr. Mohd Shafie Rosli.. Untuk sesi pembelajaran pertama.. bermula pada minggu pertama hari rabu yang lepas 12/2/2014  .. Dr Shafie telah menerangkan serba ringkas tentang silibus Technology Media Design yang akan dipelajari serta bagaimana mendapatkan  markah yang terbaik untuk subjek ini..