Templates by BIGtheme NET
หน้าแรก / การสร้างเว็บไซต์ / 3. ออกแบบเว็บไซต์

3. ออกแบบเว็บไซต์

การออกแบบเว็บไซต์

3. ออกแบบเว็บไซต์

design-website

3. ออกแบบเว็บไซต์ ปัจจุบันมีเว็บไซต์อยู่มากมาย และก็มีเว็บไซต์ใหม่เกิดขึ้นทุกวันในอินเตอร์เน็ต นั่นทำให้เรามีทางเลือกมากขึ้นที่จะเข้าไปใช้บริการเว็บไซต์ใดก็ได้ ถ้าเว็บไซต์ไหนใช้งานยาก ข้อมูลมากแต่ก็หาสิ่งที่ต้องการไม่เจอ ใช้เวลาโหลดหน้าเว็บนานเกินไป เราก็คงไม่อดทนต่อปัญหาที่เกิดขึ้น ปิดมันไปซะ แล้วก็เปลี่ยนไปดูเว็บไซต์อื่นๆ แทน ปัญหาเหล่านี้มักเกิดจาก การขาดการออกแบบเว็บไซต์ที่ดีนั่นเองค่ะ เว็บไซต์ที่ได้รับการออกแบบที่ดี ดูเรียบง่าย สวยงาม ข้อมูลจัดเป็นหมวดหมู่ ใช้งานง่าย ย่อมได้รับความสนใจจากผู้ใช้มากกว่า การออกแบบเว็บไซต์จึงเป็นกระบวนการหนึ่งที่สำคัญในการสร้างเว็บไซต์ เพื่อให้เกิดความประทับใจแก่ผู้ใช้ และทำให้อยากกลับเข้ามาใช้บริการเว็บไซต์ของเราอีกในครั้งต่อไป ถ้าเราคิดไม่ออกว่าจะออกแบบเว็บไซต์อย่างไรดี ให้ลองศึกษาจากเว็บไซต์อื่นๆ เป็นแนวทาง หรือว่าจะประยุกต์จากรูปแบบในสิ่งพิมพ์ต่างๆ เช่น นิตยสาร หนังสือ แผ่นพับ ที่มีรูปแบบน่าสนใจ   หัวข้อที่เราจะศึกษาเกี่ยวกับเรื่องการออกแบบเว็บไซต์ 3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) 3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design) 3.3 การออกแบบหน้าเว็บเพจ (Page Design)

อ่านต่อ »

3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

design-website

การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) คือ การจัดหมวดหมู่ และลำดับของเนื้อหา แล้วจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ ซึ่งจะทำให้เรารู้ว่ามีเนื้อหาอะไรบ้างภายในเว็บไซต์ และแต่ละหน้าเว็บเพจนั้นมีการเชื่อมโยงกันอย่างไร โครงสร้างเว็บไซต์ที่ดีจะช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว ไม่ควรเป็นลำดับที่ลึกหลายชั้นเกินไป เพราะผู้ใช้จะเบื่อเสียก่อน กว่าจะค้นหาเจอหน้าที่ต้องการ อันนี้เจอกับตัว เช่น เว็บไซต์ดาวน์โหลดบางแห่ง คลิกแล้วคลิกอีก ยังหาไม่เจอลิงค์ดาวน์โหลด หาเว็บใหม่เลยค่ะ 1. จากเนื้อหาเว็บไซต์ที่เราเตรียมไว้ ให้นำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง Section 1       Section 1.1       Section 1.2       Section 1.3               Section 1.3.1               Section 1.3.2 Section 2 Section 3       ...

อ่านต่อ »

3.2 การออกแบบระบบนำทาง (Site Navigation Design)

design-website

ระบบ Navigation เป็นระบบนำทางที่จะนำผู้ชมไปยังหน้าต่างๆ ของเว็บไซต์ ให้สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และรู้ว่ากำลังอยู่ตรงไหนของเว็บไซต์ นอกจากนี้ยังใช้กำหนดบทบาทของผู้ใช้ซึ่งแบ่งเป็นกลุ่มๆ ได้ โดยผู้ใช้แต่ละกลุ่มจะสามารถเข้าถึงหน้าเว็บเพจได้อย่างมีขอบเขต ตามสิทธิที่วางไว้เท่านั้น . องค์ประกอบของระบบ Navigation 1. เครื่องนำทาง เมนูหลัก เป็นเมนูสำหรับลิงค์ไปยังหน้าหัวข้อหลักของเว็บไซต์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟฟิก และมักถูกจัดวางอยู่ด้านบนในเว็บเพจทุกหน้า เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มี เนื้อหาเกี่ยวเนื่องกัน มักอยู่ในรูปแบบของลิงค์ข้อความหรือกราฟฟิกเช่นกัน เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนู มีได้หลายรูปแบบ เช่น ช่องค้นหาข้อมูล (Search Box) , เมนูแบบดร็อปดาวน์ (Drop-Down menu) , แผนผังเว็บไซต์ (Site Map), อิมเมจแมพ (Image Map) 2. เครื่องมือบอกตำแหน่ง (Location Indicator) เป็นสิ่งที่ใช้แสดงว่า ขณะนี้ผู้ชมกำลังอยู่ในตำแหน่งใดในเว็บไซต์ เครื่องบอกตำแหน่งมีได้หลายรูปแบบ เช่น ข้อความภาพกราฟฟิกที่แสดงชื่อเว็บเพจ ...

อ่านต่อ »

3.3.1 ส่วนประกอบของหน้าเว็บเพจ

design-website

ในหัวข้อก่อนหน้านี้เราได้ศึกษาเรื่องการออกแบบเว็บไซต์ (Site Design) ซึ่งเป็นภาพรวมไปแล้ว ได้แก่ 3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) 3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design) . ในหัวข้อนี้เราจะได้ศึกษาในรายละเอียดการออกแบบหน้าเว็บเพจ (Page Design) ซึ่งเป็นส่วนประกอบของเว็บไซต์กันค่ะ 3.3 การออกแบบเว็บเพจ (Page Design) ส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วนหลักๆ คือ 1. ส่วนหัวของหน้า (Page Header) เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์  มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ   ส่วนใหญ่ประกอบด้วย โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ ชื่อเว็บไซต์ เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์ . 2.ส่วนของเนื้อหา ...

อ่านต่อ »

3.3.2 โครงสร้างและรูปแบบของเว็บเพจ

design-website

ในหน้าเว็บเพจหนึ่งๆ ประกอบไปด้วยส่วนหัวของหน้า (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body)  และส่วนท้ายของหน้า (Page Footer) ย้อนอ่านเนื้อหาเดิมเรื่องส่วนประกอบของหน้าเว็บเพจ คลิกที่นี่ . ในเว็บไซต์หนึ่งๆ อาจมีโครงสร้างหน้าเว็บเพจหลายๆ แบบก็ได้ แต่จะต้องมีเอกลักษณ์ และลักษณะที่ใกล้เคียงกัน จะต้องจัดองค์ประกอบของหน้าเว็บเพจให้เหมาะสม ได้แก่ เนื้อหา กราฟฟิก โลโก้ ระบบเนวิเกชั่น ป้ายโฆษณา และอื่นๆ การแบ่งพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบต่างๆ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ ตัวอย่าเว็บไซต์ . แบ่ง 2 ส่วน . แบ่ง 3 ส่วน จะมีส่วน Footer หรือไม่ก็ได้ ตัวอย่างเว็บไซต์   ส่วนเนื้อหายังสามารถแบ่งสัดส่วนเพื่อแสดงเนื้อหาต่างๆ ได้อีก ตัวอย่างเว็บไซต์

อ่านต่อ »

การใช้งานภาพกราฟฟิก

ประเภทของไฟล์รูปภาพ ไฟล์รูปภาพที่ใช้อยู่ในปัจจุบันนี้มีหลายประเภท แต่ไม่สามารถนำมาใช้กับเว็บเพจได้ทุกประเภท ประเภทของไฟล์รูปภาพที่นิยมมาใช้กับเว็บเพจมี 3 ประเภทคือ 1. ไฟล์ประเภท GIF (Graphics Interchange Format) เป็นไฟล์ภาพที่มีขนาดเล็ก คุณภาพต่ำ เนื่องจากถูกบีบอัดข้อมูลให้มีขนาดเล็ก แสดงสีได้ 256 สี แต่เป็นที่นิยมสำหรับผู้เขียนเว็บเพจเป็นอย่างมากเนื่องจากสามารถทำเป็นภาพเคลื่อนไหว (Animation) และกำหนดให้แสดงภาพแบบโปร่งแสง มองทะลุไปด้านหลังได้ ไฟล์ประเภทนี้ส่วนใหญ่จะเป็น รูปวาด ภาพการ์ตูน รูป icon, emotion, ป้ายโฆษณาแบนเนอร์ และภาพที่ไม่ต้องการความละเอียดมากนัก ตัวอย่าง รูป emotion ต่างๆ สามารถทำภาพแบบโปร่งแสงได้ เมื่อนำไปวางบนพื้นหลังสีอะไร ด้านหลังรูปจะเป็นสีตามพื้นหลัง 2. ไฟล์ประเภท JPEG หรือ JPG (Joint Photographics Expert Group) เป็นไฟล์รูปภาพที่มีการบีบอัดข้อมูลน้อยกว่าไฟล์ประเภท GIF สามารถแสดงสีได้ 16.7 ...

อ่านต่อ »

สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บไซต์

ในกระบวนการออกแบบและสร้างเว็บไซต์นั้นมีองค์ประกอบหลายประการที่ผู้ออกแบบจะต้องคำนึงถึงเพื่อที่จะให้เว็บไซต์ที่สร้างขึ้นมานั้นสามารถบรรลุจุดประสงค์สูงสุดที่ตั้งเอาไว้ได้ ทั้งนี้ก็เพื่อผลประโยชน์ต่อบุคคล กลุ่มบุคคล หรือองค์กรที่สร้างเว็บไซต์ขึ้นมานั้นเอง การออกแบบเว็บไซต์ต้องคำนึงถึงองค์ประกอบต่าง ๆ ดังต่อไปนี้ 1. ความเรียบง่าย (Simplicity) หมายถึง หน้าเว็บเพจของเว็บไซต์มีรูปแบบและลักษณะที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้อย่างสะดวก ไม่มีกราฟฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา เพราะการที่เว็บเพจมีกราฟฟิกหรือตัวหนังสือที่เคลื่อนไหวอยู่มากเกินไป ก็จะเกิดการรบกวนสายตาทำให้ผู้ที่ใช้เกิดความรำคาญและอาจทำให้ผู้ใช้สนใจในกราฟฟิกมากเกินไปจนละเลยหรือมองข้ามต่อเนื้อหาสำคัญที่อยู่ในหน้าเว็บเพจได้ 2. ความสม่ำเสมอ (Consistency) หมายถึง การใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า รูปแบบกราฟฟิก ระบบ Navigation และโทนสี ซึ่งสิ่งต่างๆ เหล่านี้ควรมีลักษณะที่เหมือนกันโดยตลอดทั้งเว็บไซต์ ทั้งนี้ก็เพื่อที่จะทำให้ผู้เข้ามาใช้เกิดความรู้สึกว่าแต่ละหน้าของเว็บไซต์มีความเป็นหนึ่งเดียวและรู้สึกถึงความเป็นระเบียบอีกด้วย 3. ความเป็นเอกลักษณ์ (Uniqueness) หมายถึง การออกแบบเว็บไซต์ที่เน้นการสร้างจุดเด่นหรือเอกลักษณ์เฉพาะตัวให้เกิดขึ้นกับเว็บไซต์นั้นๆ โดยที่จุดเด่นหรือเอกลักษณ์นั้นจะต้องสามารถสะท้อนบุคลิกหรือลักษณะเฉพาะที่ไม่เหมือนใครของเจ้าของหรืองค์กรที่สร้างเว็บไซต์นั้นๆ ขึ้นมาได้อย่างดี โดยการสร้างเอกลักษณ์นี้อาจทำได้โดยการใช้สีสัน ตัวอักษร กราฟฟิก การจัดหน้า ฯลฯ ซึ่งผู้สร้างเว็บไซต์จะเลือกใช้แบบไหนนั้นก็ขึ้นอยู่กับเป้าหมายของเว็บไซต์นั่นเอง 4. เนื้อหามีประโยชน์ (Usefulness) หมายถึง การออกแบบเนื้อหาให้มีประโยชน์เป็นสิ่งสำคัญที่ต้องคำนึงถึงเป็นอย่างยิ่ง เพราะเนื้อหาถือว่าเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ...

อ่านต่อ »

ออกแบบเว็บเพจอย่างไรให้ดูดี (Web 2.0 Design)

Web 2.0 Design ส่วนประกอบของดีไซน์ยุคใหม่นั้นมีอะไรกันบ้าง ที่มา : http://www.divland.com/blog/2007/11/13/web-2-design/ เรียบง่าย ความเรียบง่ายหมายถึงการใช้จำนวน pixel ตามที่ต้องใช้เพื่อให้สื่อสารสิ่งที่ต้องการให้ได้และในการสื่อสารนั้นก็ประกอบไปด้วย ข้อมูลหลัก hard data และ เนื้อหาที่ซ่อนอยู่ soft information ตัวอย่างของข้อมูล Hard data – ข้อมูล สาระ เนื้อหาสำคัญที่ต้องการจะสื่อ เช่น ข่าว ราคาสินค้า ตารางเวลารถไฟ Soft Information – ความรู้สึก บรรยกาศของหน้าเว็บ เปรียบเทียบได้กับความรู้สึกเมื่อแรกพบของผู้ชมที่มีต่อเว็บ ว่าน่าไว้ใจแค่ไหน จะเหมาะสมกับผู้ใช้หรือไม่ ตัวอย่างที่ดี ดี เพราะ ละเอียด ตื่นตา น่าสนใจ แต่ก็เรียบง่ายในขณะเดียวกัน ตัวอย่างที่ไม่ดี ไม่ดี เพราะ ยุ่งเหยิง มีขีดเส้นมากมายที่ไม่ได้ช่วยเป็นส่วนประกอบในการสื่อสาร หาเมนูได้ยากไม่โดดเด่น ...

อ่านต่อ »

แนวทางการดีไซน์บล็อกยุคใหม่ (ตอน1)

ในการออกแบบบล็อก จะสังเกตได้ว่าการออกแบบส่วนประกอบต่าง ๆ จะมีความแตกต่างกัน ในบทความนี้ผมจะแยกส่วนประกอบพวกนี้ออกเป็น 9 ส่วน หากคุณให้ความสนใจในแต่ละส่วนมากเท่าไหร่ ภาพรวมของบล็อกที่ออกมาจะดูดีมากเท่านั้น ส่วนหัว(Header) ส่วนเนื้อหา(Content Area) เมนูหลัก(Primary Navigation) เมนูรอง(Secondary Navigation) หัวเรื่อง(Headlines) ส่วนแสดงความคิดเห็น(Comments) ส่วนท้ายของบทความ(Post’s Footer) ส่วนท้ายของบล็อก(Footer) โฆษณา(Advertisements) 1.ส่วนหัว(Header) ส่วนหัวเป็นส่วนที่ผู้เยี่ยมชมส่วนใหญ่จะเห็นเป็นส่วนแรก เมื่อเข้ามาในบล็อกของคุณ และเป็นส่วนที่สำคัญที่สุด มันเป็นสิ่งเดียวที่จะแยก ให้เห็นถึงความแตกต่างระหว่างบล็อกของคุณกับบล็อกอื่น ๆ นับล้านบล็อก เป็นสิ่งที่แสดงถึงเอกลักษณ์ของบล็อกคุณเพื่อให้เกิดการจดจำ จากที่กล่าวมาแสดงให้เห็นว่าทำไมส่วนหัวจึงสำคัญมากที่สุด ในบรรดากระบวนการออกแบบบล็อก แม้แต่คนที่ไม่ให้ความสนใจกับการออกแบบบล็อกสักเท่าไหร่ แต่เขาก็ให้ความสำคัญกับส่วนหัวมาก ตัวอย่างส่วนหัวที่ดี 1. Octwelve Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร 2. Cult foo ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ...

อ่านต่อ »

แนวทางการดีไซน์บล็อกยุคใหม่ (ตอน2)

6. ส่วนแสดงความคิดเห็น(Comments) ส่วนความคิดเห็น เป็นบริเวณที่มีการถกกันเกี่ยวกับบทความจากผู้อ่าน/ผู้เยี่ยมชม หน้าที่ของผู้ออกแบบ จะต้องออกแบบให้บริเวณนี้ดูเป็นการสนทนากัน ด้วยการแยกแต่ละความคิดเห็นออกจากกัน อาจจะด้วยการกำหนดหมายเลขให้แต่ละความคิดเห็น วิธีนี้ยังช่วยให้ง่ายต่อการอ้างอิงความคิดเห็นต่าง ๆ อีกประการ คือแยกความคิดเห็นของเจ้าของบทความ ให้ต่างจากความคิดเห็นทั่วไป เพื่อเอาไว้คั่นว่าได้ตอบความเห็นของผู้อ่านถึงไหนแล้ว หรือ ดูว่ามีความเห็นเพิ่มมาอีกหรือป่าว ตัวอย่างส่วนแสดงความคิดเห็นที่ดี 1. Chris Shiflett Chris’ ออกแบบแบบเรียบง่าย อ่านง่าย แยกชื่อผู้ออกความคิดเห็น ออกจาก ความคิดเห็นอย่างชัดเจน เพื่อประโยชน์ที่ได้กล่าวไปแล้วข้างต้น 2. Darkmotion ผมชอบที่เขาแยกส่วนชื่อผู้ออกความเห็น กับ ความคิดเห็น และดูแล้วได้อารมณ์มาก เหมือนการคุยกัน 3. Blog Design Blog นี่ก็เป็นอีกตัวอย่างหนึ่ง มีตัวเลขบอกลำดับความคิดเห็น และเน้นชื่อผู้ออกความคิดเห็นด้วยกล่องสีฟ้า ทำให้แยกออกจากส่วนของความคิดเห็น วิธีทำให้การออกแบบส่วนแสดงความคิดเห็นออกมาดูดี แยกแต่ละความคิดเห็นออกจากกัน วิธีที่ง่ายที่สุด ทำได้ด้วยการใช้สี และอีกวิธีคือ วางไว้คนละที่กันอาจจะใช้กรอบครอบแต่ละส่วน หรือใช้เส้นคั่นก็ได้ ใช้สี ...

อ่านต่อ »