Embed Size (px)
Citation preview
หลกการท างานของเวบไซตและการออกแบบเวบไซต
PRINCIPLES OF WEBSITE AND WEBSITE DESIGN
PRINCIPLES OF WEBSITE PART1
bull History of WWW
bull Generation of website
bull Structure of website
bull Basic knowledge of website
bull Type of website
CHAPTER OUTLINE
STATISTICS OF INTERNET USER IN THAILAND
HISTORY OF INTERNET
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
PRINCIPLES OF WEBSITE PART1
bull History of WWW
bull Generation of website
bull Structure of website
bull Basic knowledge of website
bull Type of website
CHAPTER OUTLINE
STATISTICS OF INTERNET USER IN THAILAND
HISTORY OF INTERNET
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull History of WWW
bull Generation of website
bull Structure of website
bull Basic knowledge of website
bull Type of website
CHAPTER OUTLINE
STATISTICS OF INTERNET USER IN THAILAND
HISTORY OF INTERNET
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
STATISTICS OF INTERNET USER IN THAILAND
HISTORY OF INTERNET
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
HISTORY OF INTERNET
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull CERN System develop to Internet
bull Tim Berners-Lee create Browser in 1990
bull Using HTML Language(Hypertext Markup Language)
HISTORY OF WEBSITE
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
GENERATION OF WEBSITE
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and
JavaScript applicationsndash Ex Wiki Facebook weblog
Youtube Flickrndash Readwrite = ldquosharerdquo
bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo
WEB10 AND WEB20
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull Web30ndash Semantic web (the meaning
of data )ndash Use Metadata Tag for
manage datandash A Global Databasendash Create information that
human and machine readable
ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo
WEB30
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
HOW WEBSITE WORK
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
VOCABULARY OF WEBSITE
Domain name
ISP
URLHosting
FTP
HTMLClient
Server
WebsiteWebpage
DNSWeb browser
IPaddress
Server Operating System
Data transfer
Sub Domain
Hosting Transfer
Web Control Panel
CMSMySQL 51
FTP Accounts
POP3IMAPSMTP
Ref Download
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล
ตวอยาง com edu gov net org info biz
- httpwwwgooglecom
2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ
ตอยอสวนท 2 co ac or net go
ตอยอสวนท 3 cn th jp au eu us
- httpwwwrsuacth
3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ
- httpnewsrsuacthcom
TYPE OF DOMAIN NAME
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull Portal site เวบทใหบรการมากมาย
bull News site เวบขาว
bull Information site ใหบรการขอมลตางๆ
bull Business Marketing site เวบธรกจ
bull Education site เวบการศกษา
bull Entertainment site ใหความบนเทง
bull Non Profit Organization site เวบการกศล
bull Personal site เวบสวนบคคล
แบงตามประเภท
การใชงานไดดงน1 เนอหาและการใชงาน
2 ลกคา E-commerce
3 E-commerce site
TYPE OF WEBSITE
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
ลกคา e-commerce
bull B2B Business to Business
bull B2C Business to Customer ขายของ
bull C2C Customer to Customer พนทป
bull G2B Government to Business เวบสงออก dpi
bull G2G Government to Government สถานทตไทยในออส
TYPE OF WEBSITE
e-commerce Site
bull e-classified site เวบประกาศซอขายของ
bull Online catalog site น าเสนอสนคาonline ขายของทวไป
bull e-shop site รานคา online มระบบshopping cart
bull Auction site น าเสนอสนคาผานการประมล
bull e-market place ตลาด online รวมรานคาตางๆ
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
PRINCIPLES OF WEBSITE PART2
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull Know the user
bull Header
bull Navigation
bull Layout
bull Color
bull Content Organization
bull Prototyping
CHAPTER OUTLINE
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
CONTENT MANAGEMENT LIFE CYCLE
Create
สราง
Manage
ปรบปรง
Distribute
ตรวจสอบ
Deliver
เผยแพร
17
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
KNOW THE USER
Why we need to know the user
ลด
คาใชจาย
ในการดแล
ลดขนตอน
ในการ
พฒนา
ท างาน
เพม
ยอดขาย
รกษาฐาน
ลกคาไว
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
USER LEARNING STYLE
READ THEN DO
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
USER LEARNING STYLE
DO THEN READ
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull Physical Difference age gender generation
bull Tool perform
bull Cultural
bull Education High-school University
bull Primary user = staff Secondary user=customer
bull Application familiarity
ndash Novice Advanced Beginner Competent Performer Expert
ndash unknown knows basics diagnose simple problem diagnose complex problem
ขนตอนการศกษาผใชงาน
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
APPLICATION FAMILIARITYExpert
Competent Performer
Advance beginner
Novice
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย
ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน
หลกการออกแบบ Layoutผรบสารเขาใจเนอหาไดเรวมองคประกอบอยางเปนระบบตองมความโดดเดน
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
wwwfreepikcom
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน
bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน
bull Movement เกดการเคลอนไหว
bull Balance เกดความสมดลในชนงาน
bull Direction การรบรทศทาง
bull Order ล าดบของเนอหาสาระ
GRID
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
GRID DESIGN
28
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
HEADER bull Not too large File
bull Loading Time 4-6 second
bull Create 1-2 web concepts
bull Logo Link Contact info Promotion Slogan
bull ldquoMake it Freshrdquo
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
NAVIGATION
เปนเครองมอทชวยผใชเวบรวาตวเองอยสวนไหนในเวบและเปนตวน าทางไปสเปาหมายทตองการ
Navigation type Hierarchical (hyperlink)Database
Navigation bar Text Graphic
Best location Center Top-left on the page
Breadcrumbs show
ldquoThis is where you are how you got hererdquo
Local Navigation bar To access sub-site
Global Navigation bar To access main content
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
EYE TACKING
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
COLOR51 Color Mode
A Time-Tested Model RYB = Red Yellow Blue
Additive Color RGB = Red Green Blue
Subtractive Color CMYK = Cyan Magenta Yellow Black
The HSB System Color Hue(Color type) Saturation(Color range)Brightness
52 Color in Text and Background
-Dark Text on the Light Background
-Avoid the Background Color Blue
-Maintain Contrast between Text and Background
COLOR COLOR
COLOR
COLOR
COLOR
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies
The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
COLOR THEORY FOR WEB DESIGNERS
53 Color- Harmony Schemes
-Cool Color
-Worm Color
-Monochromatic Color
-Complementary Color
-Analogous Color
-Triadic Color
-Split Complementary Color
-Square Color
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
MOOD AND TONE COLOR
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
CONTENT ORGANIZATION
Exact Organizational ขอมลถกแบงออกเปนแบบแผนอยางแนนอน
I Alphabetical เรยงตามตวอกษร
II Chronological เรยงตามล าดบเวลา
III Geographical เรยงตามทตงหรอแผนท
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
CONTENT ORGANIZATIONAmbiguous Organizational Schemes
ขอมลถกแบงออกเปนแบบแผนอยางคลมเครอ
I Topical เรยงตามหวขอ
II Task oriented เรยงตามขนตอนการท างานหรอหนาท
III Audience specific เรยงตามกลมใช
IV Metaphor driven เรยงตามตนแบบเดมทมอยแลว
V Hybrid scheme รวมเอาหลายๆเขาดวยกนใชในการเรยง
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
ORGANIZATIONAL STRUCTURESbull โครงสรางขอมลบนเวบไซต
ndashHierarchy Family Tree ไมสามารถเชอมจาก Level ลางถงกน
ndashHypertext มความยดหยนสงเชอมตอถงกนไดหมด
ndashDatabase ใชการคนหาขอมลเปนการเขาถงขอมลจากลาง-บน ldquoBottom-uprdquo
Indexhtml
Home Product
P1 P2
Contact us
C1
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
WHAT IS WEBSITE DESIGN
bull การออกแบบหนาเวบไซตใหดด และน าเสนอขอมลไดอยางเหมาะสม และเขาใจไดงายภายในเวลาอนสน
bull ความส าคญของการออกแบบเวบไซตndash User ไมอดทนรอตอการออกแบบทผดพลาด หรอ
ปญหาในการออกแบบ (Click out)
ndash website คแขงเยอะ ตองออกแบบใหโดดเดน แตกตาง (Differentiate)
ndash ผใชตองใชงานงาย และตองมการเคลอนไหวไมเยอะไป และ Load เรว
(Usability and Fast load in 3 second)
ndash ถาผใชงานชอบเวบไซตพวกเคาจะกลบมาอก (กด Like)
45
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
KEY OF SUCCESS ON WEB DESIGN
bull เนอหามประโยชน และตอบสนองความตองการ(Useful content)
bull ปรบปรงเนอหา web อยตลอดเวลา และพฒนาอยางตอเนอง
(Make it fresh)
bull โหลดเรว หนาแรกไมยาวไป
(Fast Load)
bull การใชงานสะดวก เนอหาเขาใจงายดแลวใชงานไดทนท(Usability) 46
Web design
Content
Fast Load
Usability
Fresh
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
TOP TEN DESIGN ERROR1 ใชเฟรม Frame ผใชสบสน เพราะ link มาจาก web อน
2 เทคโนโลยสงเกนไป Java หรอ Flash มากไป (ผใชสนใจ Content + Usability มากกวา)
3 ภาพเคลอนไหวตลอดเวลา spam
4 URL ยากไป ยาวเกนไป จ ายาก (สน กระชบ จ างาย มความหมาย 2-3 ค า)
5 ไมมชอเวบหรอสนคาในเวบไซต ท าใหผใชจ าเวบไซตไมได
6 หนาเวบยาวเกนไป หาขอมลไดยาก Load นาน
7 Navigation ซบซอนเกนไป ท าใหสบสน
8 ใชส Link ไมเหมาะสม ควรใช ldquoสน าเงนrdquo เปนสสากลเขาใจไดงาย
9 ขอมลเกาเกนไป out of date ท าใหเวบตายผใชไมเขา
10 Load หนาแรกชา เพราะกราฟกเยอะเกนไป (3-8 วนาท max) 47
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
SOFTWARE DEVELOPMENT LIFE CYCLE
1 (Feasibility) ศกษาความเปนไปไดในการสราง เวบอะไรหรอจะพฒนาอะไรรวบรวมขอมลโดยสมภาษณบคคล ประเมนราคา ก าไรขาดทน
2 (Analysis) วเคราะห วตถประสงคของเวบTarget Content Function
ldquoWhat we need to dordquo
3 (Design) ออกแบบโครงสราง
(sketch up on paper)
4 (Construction and Testing) สรางและทดสอบการใชงานและปองกนขอผดพลาด
สราง Prototype ดวย CSS HTML amp Testing
5 (Launch) เผยแพร upload ขนเวบจรง
Run บน Internet ผาน FTP
6 (Maintenance) บ ารงรกษา แกไขขอผดพลาด + อพเกรด เพม content48
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
WEB DESIGN SUGGESTION
bull 1Simplicity ความเรยบงาย เลอกเสนอสงทเราตองการน าเสนอจรงๆ ใชกราฟกสเสนตวอกษรภาพเคลอนไหว
bull 2Consistency ความสม าเสมอ เลอกใชรปแบบเดยวกนทงเวบ
สขนาดTheme
bull 3Identity ความเปนเอกลกษณ จะตองออกแบบเวบใหสะทอนลกษณะหลกขององคกรหรอสนคาดวย
bull 4Useful Content เนอหาส าคญทสดในเวบไซต จะตองมการ update อยเสมอ ระวงถาใส Link เวบอนเขาจะไมเขาเวบเราอก
bull 5Use-friendly Navigation เปนระบบทชวยใหผใชไมสบสนระหวางชมเวบไซต ควรเขาใจงาย ใชงานงาย และมความสม าเสมอ
bull 6Visual Appeal มลกษณะทนาสนใจ ขนอยกบรสนยมของผชมโดยสวนใหญ กราฟกดไมมปญหา อกษรอานงาย โทนสสวย เขาใจงาย
49
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
bull 7Compatibility การใชงานอยางไมจ ากด ใชงานไดดในสภาพทหลากหลาย ไมควรใหตองตดตงโปรแกรมอน
bull 8Design Stability คณภาพของการออกแบบ ตองใสใจในการออกแบบ และวางแผนศกษากลมเปาหมายใหมากกอนลงมอท า
bull 9Function Stability ระบบการใชงานทถกตอง หมนตรวจสอบระบบใหท างานได 100 เสมอ
50
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
Find out the target
Drawing the draft web
Design sitemap
Create web prototype
Evaluate prototype YN
HOW TO START
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
PROTOTYPE
Design bull ออกแบบ
Prototype bull สรางตวอยาง
Evaluatebull ประเมนผล
bull ผาน = Final web
bull ไมผาน = Redesign
