VISUAL DESIGN SPM 4342: Pembangunan Multimedia Berasaskan Web
<ul><li>What is visual design ? </li></ul><ul><li>What exactly constitutes  good  visual design (aka interface design or p...
<ul><li>Visual Design: Planning how your web site will look. </li></ul><ul><li>What  colours  will look good together on y...
<ul><li>A background that reflects the theme. </li></ul><ul><ul><li>Colours or Images </li></ul></ul><ul><li>Foreground el...
<ul><li>Choose a visual theme –connected to your content. </li></ul><ul><li>Use template concepts– consistent </li></ul><u...
<ul><li>Typography </li></ul><ul><ul><li>Keep it simple </li></ul></ul><ul><ul><ul><li>Limit number of fonts per page and ...
<ul><li>Thumbnails Sketches </li></ul>Tools in Visual Design
<ul><li>Thumbnails Sketches </li></ul><ul><li>Help designer think about the visual aspects of the web pages they are desig...
<ul><li>Rough Sketches </li></ul>Tools in Visual Design
<ul><li>Rough Sketches </li></ul><ul><li>Usually choose 2 or 3 of the thumbnails to develop further. </li></ul><ul><li>Thi...
<ul><li>Prototype </li></ul>Tools in Visual Design
<ul><li>Prototype </li></ul>Tools in Visual Design
Thank You ! www.jz-media.com
Upcoming SlideShare
Loading in …5
×

Visual Design

2,155 views

Published on

Discussion on Visual Design.

Published in: Technology, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,155
On SlideShare
0
From Embeds
0
Number of Embeds
498
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Visual Design

  1. 1. VISUAL DESIGN SPM 4342: Pembangunan Multimedia Berasaskan Web
  2. 2. <ul><li>What is visual design ? </li></ul><ul><li>What exactly constitutes good visual design (aka interface design or presentation design). </li></ul>Introduction
  3. 3. <ul><li>Visual Design: Planning how your web site will look. </li></ul><ul><li>What colours will look good together on your site? </li></ul><ul><li>What fonts or styles you will use for the written part of your web pages? </li></ul><ul><li>What graphics and multimedia effects are needed? </li></ul><ul><li>How will all of these elements be combined or arrange into an attractive layout ? </li></ul>Visualizing Your Web Site
  4. 4. <ul><li>A background that reflects the theme. </li></ul><ul><ul><li>Colours or Images </li></ul></ul><ul><li>Foreground elements that reflect the theme. </li></ul><ul><ul><li>Content and Links (title, headings, sub headings, body text, illustrations, captions) </li></ul></ul><ul><li>Other elements that support the theme. </li></ul><ul><ul><li>Text, images, buttons, navigation bars, animation, video, etc. </li></ul></ul>Elements of User Interface
  5. 5. <ul><li>Choose a visual theme –connected to your content. </li></ul><ul><li>Use template concepts– consistent </li></ul><ul><li>Use table or division (div) or frame for layout/arranging your visual elements. </li></ul>General Issues
  6. 6. <ul><li>Typography </li></ul><ul><ul><li>Keep it simple </li></ul></ul><ul><ul><ul><li>Limit number of fonts per page and per site </li></ul></ul></ul><ul><ul><ul><li>Use the same fonts consistently throughout the site </li></ul></ul></ul><ul><ul><li>Make good font choices </li></ul></ul><ul><ul><ul><li>Sans serif vs. serif ? </li></ul></ul></ul><ul><ul><ul><li>Commonly installed fonts </li></ul></ul></ul><ul><ul><ul><li>Mood </li></ul></ul></ul><ul><ul><ul><li>Readability </li></ul></ul></ul><ul><ul><li>Will be discuss in details at later lessons… </li></ul></ul>General Issues
  7. 7. <ul><li>Thumbnails Sketches </li></ul>Tools in Visual Design
  8. 8. <ul><li>Thumbnails Sketches </li></ul><ul><li>Help designer think about the visual aspects of the web pages they are designing. </li></ul><ul><li>To help make choices about web site’s presentation design. </li></ul><ul><li>Storyboard vs Thumbnails Sketches? </li></ul><ul><ul><li>Storyboard – helps on web site’s interaction. </li></ul></ul><ul><ul><li>Thumbnails – help to focus on how web pages will look. </li></ul></ul>Tools in Visual Design
  9. 9. <ul><li>Rough Sketches </li></ul>Tools in Visual Design
  10. 10. <ul><li>Rough Sketches </li></ul><ul><li>Usually choose 2 or 3 of the thumbnails to develop further. </li></ul><ul><li>This more developed sketch is called rough sketches. </li></ul><ul><li>More carefully drawn – proportions are more accurate. </li></ul>Tools in Visual Design
  11. 11. <ul><li>Prototype </li></ul>Tools in Visual Design
  12. 12. <ul><li>Prototype </li></ul>Tools in Visual Design
  13. 13. Thank You ! www.jz-media.com

×