11. Graphic Design Workflow
Program Conceptual Case Preliminary Design
Analysis Design Study Design
วิิเคราะหโจทย สรางแนวคิิดหลัก
ั ศึึกษากรณีศึกษา
ี ออกแบบราง ออกแบบจริิง
ของงานที่จะออกแบบ ที่มีอยูแลว
12. Graphic Design Workflow
Program Analysis
วิเคราะหโจทย ทีมีมาใหแกไข
่
What เราจะทํางานอะไร ?
Where งานของเราจะนําไปใชที่ไหน ?
Who ใ ปนคนที่ีมาใชงาน ?
ใครเป ใ
How จะทํางานชิ้นนี้อยางไร ?
Conceptual Design
p g
สรางแนวคิดหลักของงานที่จะออกแบบ
งานทดตองมแนวคด
งานที่ดีตองมีแนวคิด
21. โปรแกรมทีใชงาน
่
Image HTML Animation
• Adobe WYSIWYG • Adobe
Photoshop Image Ready
• Macromedia
Adobe
• Ad b D
Dream weaver •M
Macromedia
di
Illustrator Flash
• MS. Front Page
g
• CorelDraw • Ulead
• Fi
Firework
k
24. Sitemap ทีี่ดี
Sit
• ทุก Web Page จะตองมีลิงคทางออกเสมอ
• ทุก Web Page ควรจะตองมีลิงคกลับไปยังหนา Home Page เสมอ
• ถา Web Site ของเรามีจํานวนหนามากๆ ควรจะมี Web Page
ททาหนาทเปน
ที่ทําหนาที่เปน Site Map
25. I t f
Interface Design
D i
การออกแบบหนาตาเว็บไซต
ใชงานไดงายและสะดวก • มีระบบ Navigation นําทาง
• เขาใจงายไมซับซอน
สวยงามและสื่อความหมาย • สี
• Layout
• องคประกอบโดยรวม
ไมโหลดนาน •ไมควรรอเกิน 7 วินาที ในการโหลดหนาแรก
•ไฟลโดยรวมควรมีขนาดไมเกิน 300-400 Kbps
bps
อารมณเดียวกันทั้งเว็บ • theme เดียวกันทั้งเว็บไซต
เดยวกนทงเวบไซต
78. Tableless Layout Design
XHTML ( Xt
(eXtensible H
ibl HyperText M k L
T t Markup Language)
)
• การรวมเอา HTMLและXML เขาไวดวยกัน
เขาไวดวยกน
• แตกตางจาก HTMLตรงที่จะตองเปน Well-format เทานั้น
CSS (Cascading Style Sheets)
• ตกแตงเอกสาร HTML หรือ XHTML หรือ XML
79. HTML, XML, XHTML, CSS & Tableless Layout Design
, , , y g
+ =
HTML XML XHTML CSS
Tableless Layout Design
XHTML+CSS
83. ตัวอยางการวาง Layout ดวยเทคนิค Tableless Layout Design
ตวอยางการวาง ดวยเทคนค
ขั้นที่ 1
เริ่มแรกดวยการออกแบบวาในเว็บไซตของเราจะมี Layout ทีประกอบไปดวยสวน
่
ตางๆอะไรบาง โดยตัวอยางนี้เราจะแบง Layout ออกเปน 4 สวนคือ header, left
t i ht layout และfooter
layout, right l
l t f t
84. ขั้นทีี่ 2
เริ่มเขียน HTML โดยไดโคด HTML ดังนี้
90. สรุป
ุ
• การออกแบบ La o t โดยไมใช Table(ตาราง)
Layout โดยไมใช
• ใช <di > และ < > ในการวาง L t และใช CSS ในการควบคมการแสดงผล
ใช <div> <span> Layout และใช ในการควบคุมการแสดงผล
• เปนการออกแบบ Layout ทีี่แยกสวนของเนืื้อหา ออกจากสวนแสดงผล
ป
91. แหลงขอมูล
Image www.flickr.com
www.istockphoto.com
Template www.oswd.org
www.cssplay.co.uk
l k
Font
F t www.f0nt.com
fontstruct.fontshop.com
ชุดสีี www.colourlovers.com