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