Refleksi CD ROM 9 Okt 2012

VISUAL DESIGN - 
terdiri daripada gambar, animasi, grafik, warna, bentuk, text
bagaimana nak rekabentuk / susun atur visual 

Visual Design : Planning how your web site will look

What colours will look good together on your courseware?
What fonts or styles you will use for the written part of your courseware?

- bahan bacaan yg tiada pancaran seperti buku boleh guna font yang ada ekor
- bahan bacaan yang ada pancaran seperti monitor boleh menggunakan font yg tiada ekor

What graphics and multimedia effects are needed?
How will all of these elements be combined or arrange into an attractive layout?

Elements of User Interface
A background that reflects the theme.

• colours or image

Foreground elements that reflects the theme

• content and links (title, headings, sub headings, body text, ilulstrations, captions)

Other elements that support the theme

• text, images, buttons, navigation bars, animation, video

Critical tasks of Visual Design

• Define the visual theme and style
• Design a system of screen layouts
• Create the structural elements of each screen
• Create the control elements (back, next)
• Integrate the media elements
• Create PROTOTYPE screens - using storyboard

How Contents Defines Style
Target user
young children - bright colours, cartoon like, 

modern, business like masukkan simbol, warna utk mewakili tema tertentu cth jam merujuk masa
Focus on meta-style
Focus on stylistic unity NOT uniformity

Dalam satu antaramuka, semua elemen perlu boleh bekerjasama
designer perlu memahami kefahaman kedudukan, corak, warna, imej semulajadi tidak boleh digabungkan dengan imej kartun


Layout
Scan from top left to bottom right
Assume that items "above" have primacy over items "below"
Look for more to come signals at the bottom center or right
(button next, back, home diletakkan di bawah interface)

Skrin tak semestinya penuh dengan image, text, grafik, yang penting ialah maklumat sampai kepada pengguna.

Backgrounds
reinforces other elements such as quiet colour

pastikan ada kaitan antara latarbelakang dengan maklumat yang ingin disampaikan kepada pengguna


Windows and Panel
windows - 
panel -

dalam satu paparan, disediakan panel tertentu utk membahagikan windows kepada beberapa bahagian... gunakan paparan transparent

Buttons, Icon & Controls

1. Need to be clear but doesn't have to mean predictable or dull
2. Controls are an opportunity to involve users in the content and to amuse and entertain them.

Typography

• keep it simple
• limit number of fonts per screen and per courseware
• use the same fonts consistently throughout the courseware

• Make good font choices
• commoly installed fonts
• mood
• readability

Kesimpulan
Dalam pembangunan perisian, 3 fokus utama :

1. Information design
2. Interaction design
3. Visual design

Reference 
http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html