การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web...
Transcript of การออกแบบหน้าเว็บacademic.udru.ac.th/~samawan/content/Web...
การออกแบบหนาเวบ
หนา 1
ขนตอนการพฒนาเวบไซต
1. ก าหนดเปาหมายและวางแผน (Site Definition and Planning) 2. วเคราะหและจดโครงสรางขอมล (Analysis and Information
Architecture) 3. ออกแบบและเตรยมขอมล (Page Design and Content Editing) 4. ลงมอสรางและทดสอบ (Construction and Testing) 5. เผยแพรและสงเสรมใหเปนทรจก (Publishing and Promotion) 6. การดแลและปรบปรงอยางตอเนอง (Maintenance and
Innovation)
หนา 2
ก าหนดเปาหมายและวางแผน ในการพฒนาเวบไซทเราควรก าหนดเปาหมาย และวางแผนไวลวงหนา เพอใหการท างานในขนตอๆไปมแนวทางทชดเจน เรองหลกๆทเราควรท าในขนตอนนประกอบดวย
1.ก าหนดวตถประสงคของเวบไซท 2.ก าหนดกลมผชมเปาหมาย 3.เตรยมแหลงขอมล 4.เตรยมทกษะของบคลากร 5.เตรยมทรพยากรตางๆ ทจ าเปน
หนา 3
1.ก าหนดวตถประสงคของเวบไซท เพอใหเหนภาพทชดเจนของเวบไซทนตองการน าเสนอหรอตองการใหเกดผลอะไร เชน เปนเวบไซทส าหรบใหขอมลหรอขายสนคา ซงวตถประสงคนจะเปนตวก าหนดรายละเอยดอนๆ ทจะตามมา เชนโครงสรางของเวบไซท รวมทงลกษณะหนาตา หรอสสนของเวบเพจ ในกรณทเปนเวบไซทของบรษทหรอองคกร วตถประสงคนกจะตองวางใหสอดคลองกบภารกจขององคกรดวย
2.ก าหนดกลมผชมเปาหมาย เพอใหรวาผชมหลกของเราคอใคร และออกแบบใหตอบสนองความตองการหรอโดนใจผชมกลมนนใหมากทสด ไมวาจะเปนการเลอกเนอหา โทนส กราฟก เทคโนโลยทน ามาสนบสนน และอนๆ
หนา 4
3.เตรยมแหลงขอมล เนอหาหรอขอมลคอสาระส าคญทแทจรงของเวบไซท เราจะตองรวาขอมลทจ าเปนตองใชจะมาจากแหลงใดไดบาง เชน ถาเปนเวบของบรษท ใครทจะเปนผใหขอมล หรอถาเปนเวบไซทขาวสาร ขาวนนจะมาจากแหลงใด มลขสทธหรอไม
4.เตรยมทกษะของบคลากร การสรางเวบไซทตองอาศยทกษะหลายๆ ดาน เชน ในการเตรยมเนอหา ออกแบบกราฟก เขยนโปรแกรม การดแลเวบเซรฟเวอร เปนตน ซงถาเปนเวบไซทขนาดใหญอาจจะตองมบคคลเปนจ านวนมาก แตส าหรบเวบไซทเลกๆ ทตองดแลเพยงคนเดยว เราจะตองศกษาหาความรในเรองนนๆเพอเตรยมพรอมเอาไว
5.เตรยมทรพยากรตางๆ ทจ าเปน เชน โปรแกรมส าหรบสรางเวบไซท , โปรแกรมส าหรบสรางภาพกราฟก , ภาพเคลอนไหว และมลตมเดย , โปรแกรมยทลตอนๆ ทตองใช , การจดทะเบยนโดเมนเนม ตลอดจนการเตรยมหาผใหบรการรบฝากเวบไซท (Web Hosting) และเลอกแผนบรการทเหมาะสม
หนา 5
วเคราะหและจดโครงสรางขอมล
• ขนตอนนจะเปนการน าขอมลตางๆทไดรวบรวมจากขนแรก ไมวาจะเปนวตถประสงคของเวบไซท , คณลกษณะ ขอจ ากดของกลมผชมเปาหมาย รวมทงเนอหาหลกของเวบไซท น ามาประเมนวเคราะหและจดระบบ เพอใหไดโครงสรางขอมล และขอก าหนด ซงจะใชเปนกรอบส าหรบออกแบบและด าเนนการในขนตอๆไป
หนา 6
ผลทไดรบจากขนการวเคราะหและจดโครงสรางขอมลควรจะประกอบดวย • แผนผงโครงสรางของเวบไซท (Site Structure) , สารบญ (Table of Content) , ล าดบการน าเสนอ (Storyboard) หรอแผนผง (Flowchart)
• ระบบน าทางเนวเกชน (Navigation) ซงผชมจะใชส าหรบเปดเขาไปยงสวนตางๆของเวบไซท ตวอยางเชน โครงสรางและรปแบบของเมน
• องคประกอบตางๆ ทจะน ามาใชในการสรางเวบเพจมอะไรบาง เชน รปภาพและภาพกราฟก , เสยง , วดโอ , มลตมเดย , แบบฟอรม ,ฯลฯ อะไรบางทบราวเซอรของผชมสนบสนน และอะไรบางทตองอาศยโปรแกรมเสรม
• ขอก าหนดทเกยวกบลกษณะหนาตาและรปแบบของเวบเพจ • ขอก าหนดของโปรแกรมภาษาสครปตหรอเวบแอพพลเคชน และฐานขอมลทใชในเวบไซท
• คณสมบตของเวบเซรฟเวอร รวมถงขอจ ากด และบรการเสรมตางๆทมให
หนา 7
ออกแบบและเตรยมขอมล
1. วาดลงในกระดาษ เปนวธทงายมาก คณตองการใหแตละหนาเวบมอะไรบาง โลโกอยตรงไหน วางเนอหาและรปภาพอยางไร วาดลงไปในกระดาษไดเลย
ขอด รวดเรว แกไขเพมเตมสงทตองการไดงาย เหมาะกบเวบเพจทมรายละเอยดไมมาก ขอเสย ก าหนดการวางองคประกอบตางๆ ในเวบเพจไดอยางคราวๆ เทานน 2. ออกแบบผานโปรแกรมกราฟก วธนเปนมาตรฐานของเหลาบรรดามออาชพปฏบตกน โดยโปรแกรมทนยมใชในการออกแบบ mock up ส าหรบเวบเพจคอ Adobe Photoshop และ Macromedia Fireworks
ขอด ก าหนดสวนประกอบในเวบเพจไดชดเจน วาอะไรอยตรงไหน ในต าแหนงไหนและมขนาดเทาไร • สวนประกอบบางสวนเชน รปน าไปใชไดจรงโดยเลอกตดเฉพาะสวนทตองการ ท าใหการลงมอสรางเวบจรงนนงายขน เนองจากมการเตรยมรปไวบางแลว
ขอเสย ของวธนกคอ จ าเปนตองอาศยความช านาญในการใชโปรแกรมกราฟกพอสมควร แตถาคณพรอมจะหด นนกเปนสงทดมาก
หนา 8
ลงมอสรางและทดสอบ
• เปนขนตอนทเวบเพจจะถกสรางขนมาจรงทละหนาๆ โดยอาศยเคาโครง และองคประกอบกราฟกตามทออกแบบไว
• เนอหาตางๆ จะถน ามาใสและถกจดรแบบลงค และระบบน าทางถกสราง องคประกอบเสรมตางๆถกวางเขาท
• เมอลงมอสรางเวบเพจเราอาจพบวาสงทออกแบบไวแลว บางอยางไมเหมาะสม หรอควรไดรบการปรบแตง กสามารถท าได
• โปรแกรมทใชในขนตอนนกคอโปรแกรมส าหรบสรางเวบไซท เชน Adobe Deramweaver • เวบไซททสรางขนมาควรไดรบการทดสอบกอนทจะน าออกเผยแพร • ไมวาจะเปนในเรองความถกตองของเนอหา , การท างานของลงคและระบบน าทาง , ตรวจหาความผดพลาดของโปรแกรมสครปตและฐานขอมล
• ทดสอบโดยใชสภาพแวดลอมทเหมอนกบของกลมผชมเปาหมาย เชน เวอรชนของบราวเซอร ความละเอยดของจอภาพ และความเรวในการเชอมตอกบอนเทอรเนต เพอดวาผชมเปาหมายสามารถชมเวบไซทไดอยางสมบรณและมประสทธภาพหรอไม
หนา 9
เผยแพรและสงเสรมใหเปนท รจก
• โดยทวไปการน าเวบไซทขนเผยแพรบนอนเทอรเนตจ าเปนตองท าการอพโหลดไฟลทงหมด คอไฟล HTML และไฟลอนๆทเกยวของกบเวบเราขนไปบนอนเทอรเนต
• การอพโหลดทละมากโดยใชโปรแกรมสรางเวบไซทเอง หรอจะใชโปรแกรมยทลต ประเภท FTP เชน CuteFTP และ WS_FTP
• เวบไซททประสบความส าเรจ นอกจากมเนอหาทด มการวางโครงสรางและออกแบบทเหมาะสมแลว ยงตองไดรบการโฆษณา และสงเสรมใหเปนทรจกในกลมของผชมเปาหมายหรอในวงกวางออกไปแลว
• การสงเสรมนมกลยทธทท าไดหลายวธ ตงแตแบบงายๆคอการแลกเปลยนลงคและแบนเนอร ประกาศบนเวบบอรดสาธารณะ การสงอเมล เพมขอมลในเสรชเอนจน หรอเวบไดเรคทรอร เรอยไปจนแบบทใชงบประมาณมากขน
หนา 10
การดแลและปรบปรงอยางตอเนอง
• เวบไซททเผยแพรไปแลวควรทจะดและโดยตลอด ซงหนาทนครอบคลมหลายเรอง ตงแตการตรวจสอบเวบเซรฟเวอร ลงคเชอมโยงไปภายนอกยงใชไดหรอไม (เนองจากบางเวบไซทอาจเปลยน URL หรอ ถกปด)
• คอยตอบค าถามหรอจดหมายทมคนฝากไวบนเวบเพจ , ถาเปนขาวสารควรทจะมการปรบปรงขอมลอยเสมอและใหทนสมยตลอดเวลา
• นอกจากนนควรจะมการตรวจสอบสถตของการเขาชมเวบไซทเปนระยะๆ ซงเปนบรการเสรมทใหใหบนอนเทอรเนต เชน จ านวนผชม , สถตเวบทมผชมเขามาชมมากทสดหรอเปนทนอยมคอเวบอะไร , ผชมมรการเปลยนคณสมบต (เชน ความละเอยดของหนาจอภาพและรนของบราวเซอร ไปหรอไม) หรอ เขาสเวบเราจากทางใดมากทสด เชน จากเวบไซทอนทลงคมาหาเรา หรอ มาจากเสรชเอนจนใด ฯลฯ
• หลงจากทเวบไซทไดรบการเผยแพรไประยะหนง เราควรทจะปรบปรงเพอใหผชมสกวาเวบไซทนมการเปลยนแปลง ทนสมย
หนา 11
หลกการออกแบบเวบ
•สรางล าดบชนความส าคญขององคประกอบ
• เนนในสงทส าคญมาก ส าคญรองลงมา หรอส าคญนอยตามล าดบ
•ต าแหนงและล าดบขององคประกอบ
•สและความแตกตางของส
•ภาพเคลอนไหว
หนา 12
หลกการออกแบบเวบ(ตอ)
•สรางบคลกและสไตล • การจดโครงสรางของหนา รปแบบกราฟก ชนดและการจดตวอกษร
•สรางความสม าเสมอตลอดทวทงไซท
•จดวางองคประกอบทส าคญไวในสวนบนของหนาเสมอ • ชอของเวบไซท ชอหวเรอง ชอแสดงหมวดหม
• ระบบเนวเกชน
หนา 13
หลกการออกแบบเวบ(ตอ)
•สรางจดสนใจดวยความแตกตาง • ใชเทคนคการจดโครงสรางของหนา (Page Layout) • การจดระเบยบตวอกษร การใชส
•จดแตงหนาเวบใหเปนระเบยบและเรยบงาย • แยกเปนสดสวน ไมดแนน แออดจนเกนไป
• ใชกราฟฟกอยางเหมาะสม
หนา 14
หลกการออกแบบเวบ (ตอ)
•สรางล าดบชนความส าคญขององคประกอบ • ต าแหนงและล าดบขององคประกอบ
• สและความแตกตางของส
• ภาพเคลอนไหว
หนา 15
• ในการออกแบบเวบไซท เราจะตองน าขอมลตางๆ ทรวบรวมไวไมสาจะเปนวตถประสงคของเวบไซท กลมผชมเปาหมาย ตลอดจนเนอหาทงหมด มาวเคราะหจดระบบ และสรปเปนแนวคด เพอจดสางโครงสรางและก าหนดรปแบบของเวบไซททจะน าเสนอออกสผชม การออกแบบเวบไซทมองคประกอบ 2 สวน คอ
1.ออกแบบโครงสรางเวบไซท (Site Structure Design)
2.การออกแบบระบบเนวเกชน (Site Navigation Design)
หนา 16
1.ออกแบบโครงสรางเวบไซท • โครงสรางเวบไซท (Site Structure) เปนแผนผงของการล าดบเนอหาหรอการจดวางต าแหนงเวบเพจทงหมด ซงจะท าใหเรารวาเวบไซทประกอบไปดวยเนอหาอะไรบาง และมเวบเพจหนาไหนทเกยวของเชอมโยงถงกน ดงนนการออกแบบโครงสรางเวบไซทจงเปนเรองส าคญ เปรยบเสมอนการเขยนแบบอาคารตางๆ กอนทจะลงมอสราง เพราะจะท าใหเราสามารถมองเหนหนาตาเวบไซทเปนรปธรรมมากขน สามารถออกแบบเนวเกชนไดเหมาะสมไดเหมาะสม และมแนวทางการท างานทชดเจนส าหรบขนตอนตอๆ ไป นอกจากนโครงสรางเวบไซททดยงชวยใหผชมไปสบสน และคนหาขอมลทตองการไดรวดเรว
• วธจดโครงสรางเวบไซทสามารถท าไดหลายแบบ แตแนวคดหลกๆ ทนยมใชกนมอย 2 แบบคอ (ในทางปฏบตอาจมการใชหลายแนวคดผสมผสานกนกได)
• จดตามกลมเนอหา (Content-based Structure) • จดตามกลมผชม (User- based Structure
หนา 17
1. รปแบบโครงสรางเวบไซท (Structure)
•แบบเรยงส าดบ (Sequence)
•แบบทละขนตอนแบบล าดบชน (Hierarchy)
•แบบผสม (Combination)
หนา 18
* แบบเรยงล าดบ ( Sequence) เหมาะส าหรบเวบไซททมจ านวนเวบเพจไมมากนก หรอเวบไซททมการน าเสนอขอมลแบบทละขนตอน
หนา 19
* แบบระดบชน (Hierarchy) เหมาะส าหรบเวบไซททมจ านวนเวบเพจมากขนเปนรปแบบทเราสามารถพบไดทวไป
หนา 20
*แบบผสม (Combination) เหมาะส าหรบเวบไซททซบซอน เปนการน าขอดของรปแบบ ทงสองขางตนมาผสมกน
หนา 21
2.การออกแบบระบบเนวเกชน (Site Navigation Design)
เปาหมายของ “ระบบน าทาง” หรอ “เนวเกชน” คอชวยใหผชมสามารถเขาถงขอมลทตองการไดอยางรวดเรวและไมหลงทาง ดงนนองคประกอบของระบบน าทางจงม 2 สวน
• เครองน าทาง (Navigation Control)
• เครองบอกต าแหนง (Location Indication)
หนา 22
เครองน าทาง (Navigation Control) คอ เครองมอส าหรบใหผชมเปดไปยงเวบเพจตางๆ ภายในเวบไซท • เมนหลก เมนส าหรบไปยงหวขอเนอหาหลกของเวบไซท มกอยในรปของลงคทเปนขอความหรอ กราฟก และตองมปรากฏอยบนหนาเวบเพจทกหนา
• เมนเฉพาะกลม เปนเมนทเชอโยงเวบเพจปจจบนกบเวบเพจอนภายในกลมยอยทมเนอหาเกยวเนองเทานน มกอยในรปของลงคขอความหรอกราฟกเชนเดยวกน
• เครองมอเสรม ส าหรบชวยเสรมการท างานของเมน มไดหลายรปแบบ เชน ชองคนหาขอมล (Search Box) , อมเมจแมพ (Image Map) , แผนทเวบไซท (Site Map)
หนา 23
เครองบอกต าแหนง (Location Indication)
เปนสงทใชแสดงวาขณะนผชมก าลงอยทต าแหนงใดในเวบไซท เครองบอกต าแหนงมไดหลายรปแบบ เชน ขอความหรอกราฟกทแสดงชอเวบเพจ หรอขอความบงชในลกษณะน
• Books > Computer & Internet > Hardware
หนา 24
หนา 25
ลกษณะระบบเนวเกชนทด
• อยในต าแหนงทเหนไดชดและเขาถงงาย • เขาใจงายหรอมขอความก ากบชดเจน ใชไดทนทโดยไมตองเสยเวลาศกษา • มความสม าเสมอและเปนระบบ ไมชวนใหสบสนหรอกลบไปกลบมา • มการตอบสนองเมอใชงาน เชน เปลยนสเมอผชมชเมาสคลก • มจ านวนรายการพอเหมาะไมมากเกนไป • มหลายทางเลอกใหใช เชน เมนกราฟก , ขอความ , ชองคนหาขอมล (Search Box), เมนแบบดรอปดาวน (Drop-down menu) , แผนทเวบไซท (Site Map) • มลงคใหคลกกลบไปยงหนาโฮมเพจไดเสมอ เพอใหผชมกลบไปเรมตนใหมในกรณทหลงทางไมรวาตวเองอยทต าแหนงใด
หนา 26
เขาใจลกษณะการใชงานของเวบเพจ • ออกแบบหนาเวบใหมความยาวทเหมาะสม • สรางเวบขนาดสน •หนาทเปนแหลงรวมลงค •หนาเวบทคาดวาจะถกอานบนจอ
• สรางเวบขนาดยาว •ความสะดวกในการพมพหรอดาวนโหลด •ความสะดวกในการจดการกบจ านวนไฟลและลงคทนอยลง • โครงสรางของเนอหาจะไดไมถกตดแบง
หนา 27
เขาใจลกษณะการใชงานของเวบเพจ
• ออกแบบหนาเวบส าหรบการพมพ • แบงเนอหาเปนสวนยอยประมาณ 2-3 หนาจอ เพอใหอานงายบนจอ
• สรางลงคจากหนาแรกไปยงเวบทรวมเนอหาทงหมดไวในไฟลเดยวกน เพอสะดวกแกการพมพหรอดาวนโหลด
หนา 28
การออกแบบหนาเวบ 2
รปแบบโครงสรางของหนาเวบ
• โครงสรางหนาเวบในแนวตง
• โครงสรางหนาเวบในแนว
• โครงสรางหนาเวบทพอดกบหนาจอ
• โครงสรางหนาเวบแบบสรางสรรค
สวนประกอบของหนาเวบ • สวนหว (Page Header) • เปนสวนทส าคญทสดในหนา เพราะเปนสวนดงดด • ประกอบดวยชอเวบ หวขอหลก ชอเนอหา ระบบเนวเกชน • ทมมซายบนเปนบรเวณแรกทผใชใหความสนใจ
• สวนของเนอหา (Page Body) • สวนทายของหนา (Page Footer)
สวนของเนอหา (Page Body)
• ควรจะมความกะทดรด จดเปนระเบยบ เพอใหมองหาไดอยางรวดเรว
• แสดงความส าคญไวในสวนตน ๆ
• จดรปแบบตวอกษรไดอยางเหมาะสม
• ขนาดตวอกษร
สวนทายของหนา (Page Footer)
• เปนสวนเพมเตมเกยวกบเนอหาและเวบไซท • โดยอาจเปนระบบเนวเกชนแบบโกลบอล • รวมลงค • ลขสทธ • วธการตดตอกบผดแลเวบไซท และทอย • จ าเปนตองคงความสม าเสมอในทก ๆหนาเชนเดยวกบสวนหวของหนา
เทคนคการจดโครงสรางของหนา
• จดโครงสรางของหนาโดยใชตาราง
• จดโครงสรางของหนาโดยใชเฟรม
• ก าหนดพนทวางโดยใชกราฟฟกใส
จดโครงสรางของหนาโดยใชตาราง • เปนการแบงขอบเขตท าใหสามารถจดรปแบบโครงสรางของเวบได • ใสตวอกษร หรอ กราฟก ลงในต าแหนงทตองการ • ก าหนดความยาวของบรรทดใหเหมาะสมหรอการสรางคอลมนใหกบเนอหา • จดระเบยบองคประกอบตาง ๆ • รวมภาพกราฟกหลายๆรปใหตดกน • สรางพนทวาง หรอ White Space ขนในบรเวณทตองการ
จดโครงสรางของหนาโดยใชเฟรม
• เปนการรวมเวบเพจหลาย ๆหนาใหอยภายใตหนาตางบราวเซอรเดยวกน
• ขอด คอผใชสามารถคลกเนวเกชนเพอเรยกดเวบในอกพนทหนง โดยทแถบเนวเกชนไมเปลยนแปลง • เมอตองการปรบปรงเนวเกชน กสามารถปรบปรงทเดยว
• ขอเสยคอท าใหการ Bookmark ผดพลาดได
ก าหนดพนทวางโดยใชกราฟกใส
• นกออกแบบนยมใชกราฟกประเภท gif ขนาด1 x 1
พกเซลทมลกษณะใส (Transparent) เขามาชวยในการวางต าแหนงรป หรอตวอกษรไดตามตองการ
ออกแบบหนาโฮมเพจ
• แสดงถงภาพรวมและสงทเปนประโยชนในเวบไซท
• ดนาสนใจและมลกษณะทสมพนธกบเนอหา
• มลงคทสามารถเชอมโยงไปสสวนหลก ๆของเวบไซท
• แสดงผลไดอยางรวดเรว โดยใชรปกราฟฟกอยางจ ากด
• แสดงถงสงทปรบเปลยนใหมตลอดเวลา
ออกแบบหนาโฮมเพจ (ตอ)
• แสดงถงเอกลกษณของเวบไซท
• ใชองคประกอบทมลกษณะเหมอนกบในหนาอน ๆ ท าใหผใชรวาก าลงอยในเวบเดยวกน
แนวทางของการแสดงวาขอมลในเวบไซท มการเปลยนแปลงอยเสมอ • แสดงวนทปจจบน
• เปลยนแปลงรปกราฟฟกเปนประจ าทกวน สปดาห หรอเดอน
• แสดงขาวหรอขอมลความเคลอนไหวใหม ๆ ใหผใชไดรบรในหนาแรก
• สรางสวนของเนอหาทแสดงถงสงใหม ๆ (What’s New)
หนากอนโฮมเพจ
การออกแบบหนาแบบฟอรม
เทคนคการออกแบบเวบใหแสดงผลเรว
• ลดขนาดของไฟล HTML • ใชตวอกษรและลงคแบบ HTML • ใชไฟลกราฟกใหถกประเภท
• ก าหนดคา Width และ Height ของกราฟก
• การก าหนดคา Lowsrc (low resolution source) และ Alt
ก าหนดคา Width และ Height ของกราฟก
• เปนการบอกบราวเซอรเตรยมพนทขนาดตามทก าหนดไวในขณะททก าลงดาวนโหลดกราฟก
• การก าหนดคา ALT ไว บราวเซอรกจะแสดงใหผใชรวากราฟกนนเกยวกบอะไร
การก าหนดคา Lowsrc (low resolution source) และ Alt
• ถามรปกราฟกขนาดใหญทตองใชเวลาในการดาวนโหลดคอนขางมาก
• การก าหนดคา LOWSRC ใหบราวเซอรน ารปทมไฟลขนาดเลกมาแสดงกอน
เทคนคการออกแบบเวบใหแสดงผลเรว(ตอ)
• น ากราฟกกลบมาใชใหมในหนาอน ๆ • บราวเซอรมระบบความจ าพเศษทเรยกวา “แคช” • ซงเปนการเกบรวบรวมไฟลชนดตาง ๆรวมถงรปกราฟกทดาวนโหลดมาแลว
• ใช Style Sheet (CSS) ในการออกแบบ • สามารถน าสไตลชทไปใชกบขอมลทกหนาเวบ • ชวยประหยดเวลา และลดปรมาณค าสงเกยวกบรปแบบภาษา HTML ใหไฟลขนาดเลกลง
ขอแนะน าในการออกแบบ
• ออกแบบโครงสรางของหนา โดยใชโปรแกรมกราฟก • การเรมตนออกแบบโครงสรางของหนาเวบในโปรแกรมกราฟกทมคณสมบตของ
Layer เชน Photoshop ดวยการก าหนดพนทใหกบองคประกอบตาง ๆตามความเหมาะสม
• ก าหนดชอของเวบใหสอความหมาย
ขอแนะน าในการออกแบบ (ตอ)
• สรางความแตกตางของสงทแตกตางกนใหเหนชดเจน
• เลอกใชรปพนหลงทเหมาะสม
• หลกเลยงการใชเทคโนโลยขนสง
• อยาใชภาพเคลอนไหวมากเกนไป