ขั้นตอนการออกแบบ Website

Posted by kkool | Filed under Web Design & Web Develope

การออกแบบเว็บอาจจะไม่ใช่เรื่องยากสำหรับผู้ที่มีความคิดในทางสร้างสรรค์ศิลปะ แต่การจะเริ่มต้นออกแบบและสร้างให้ดีนั้นต้องมีการวางแผน เรียนรู้เทคนิค ในการออกแบบอย่างถูกวิธีและถูกขั้นตอน รู้จักเลือกใช้เครื่องมือที่เหมาะสมกับการออกแบบ ผู้อ่านเคยสงสัยบ้างหรือเปล่าว่า ผู้ที่ไม่เคยมีประสบการณ์เกี่ยวกับการออกแบบเว็บมาก่อน แต่สามารถที่สร้างสรรค์ผลงานที่มีคุณภาพเหมือนกับมืออาชีพได้ ก็เพราะเขาเหล่านั้นรู้จักเลือกใช้เครื่องมือ เรียนรู้และทำความเข้าใจในหลักการ พร้อมทั้งพัฒนาฝีมือของตนเองอยู่เรื่อยๆ เพื่อให้เห็นความแตกต่างระหว่างจุดเริ่มต้นและก้าวต่อๆ ไป ฉะนั้นแนวทางที่จะพาคุณก้าวสู่จุดเริ่มต้นกับการเป็นนักออกแบบมือใหม่มีดังต่อไปนี้…

1.เข้าใจวัตถุประสงค์ก่อนออกแบบเว็บ
การทำงานทุกอย่างต้องมีวัตถุประสงค์ไว้เพื่อเป็นข้อกำหนดที่เราจะต้องทำ และงานที่ลงมือทำนั้นก็จะได้อยู่ในขอบเขตวัตถุประสงค์ที่เราต้องการ อย่างน้อยก็ให้เราได้รู้ถึงเป้าหมายของการทำงานที่แน่นอน พูดง่ายๆ ก็คือเราจะทำอะไรก็ต้องตั้งวัตถุประสงค์ขึ้นมาไว้ก่อนแล้วค่อยดำเนินการตามขั้นตอนที่เราได้ตั้งวัตถุประสงค์เอาไว้ การสร้างเว็บก็เช่นกัน ต้องมีวัตถุประสงค์ในการสร้าง เช่น เพื่อเป็นการนำเสนอข่าวด้านการท่องเที่ยว เพื่อเป็นแหล่งความรู้เกี่ยวกับดอกไม้ เพื่อให้บริการร้านขายดอกไม้ออนไลน์ เพื่อให้บริการประชาชน เพื่อพัฒนาท้องถิ่น เป็นต้น อย่างนี้ถือมีเป้าหมายที่ชัดเจน การออกแบบก็จะได้มองเห็นภาพว่า เว็บที่กำลังจะสร้างขึ้นนั้นมีวัตถุประสงค์อะไร อะไรคือจุดเด่นเพื่อนำเสนอให้ตรงกลุ่มเป้าหมาย

2.ออกแบบให้ตรงกับกลุ่มเป้าหมาย
ถ้าพูดถึงเรื่องของการออกแบบให้ตรงกับกลุ่มเป้าหมายนี้เว็บทุกประเภทต้องมีเป้าหมายที่ชัดเจนอยู่แล้ว และแต่ละเว็บก็ย่อมมีเป้าหมายที่แตกต่างกัน การออกแบบก็จะต้องให้เหมาะกับกลุ่มเป้าหมายนั้นๆ เช่น กลุ่มวัยรุ่น กลุ่มวัยผู้ใหญ่ กลุ่มวัยทำงาน กลุ่มวัยสูงอายุ เป็นต้น นี้คือกลุ่มเป้าหมายของเว็บที่เป็นตัวกำหนดให้การออกแบบสอดคล้องกับพฤติกรรมที่จะเกิดขึ้นกับผู้ใช้บริการในเว็บของเรา ผู้ที่เข้ามาใช้บริการอย่างน้อยความคาดหวังที่เขาต้องการนั้นคือสิ่งสำคัญสำหรับเขา

ดังนั้นสิ่งสำคัญในการออกแบบเว็บให้ตรงกับเป้าหมาย คือ เรื่องของเนื้อหา รูปแบบ กราฟิก การนำเสนอและองค์ประกอบในส่วนต่างๆ ควรจัดให้เหมาะสมกับวัย เพื่อสร้างความประทับใจ ฉะนั้นการทำงานทุกอย่างเป้าหมายคือสิ่งที่เป็นคำตอบที่ทุกคนรอคอย

3.ออกแบบหน้าโฮมเพจอย่างมีสไตล์
การออกแบบเว็บหน้าแรกหรือเรียกว่าโฮมเพจนั้น ต้องออกแบบให้เห็นถึงความมีเอกลักษณ์ของตนเอง มีรูปแบบเป็นของต้นเอง มีสไตล์เป็นของตนเอง เมื่อผู้ใช้บริการเข้ามาครั้งแรกเขาจะจำได้ว่าเราสามารถนำเสนอในสิ่งที่เขาต้องการ มีการแสดงถึงความทันสมัย ไฮเทค ดูมีเอกลักษณ์โดดเด่นเฉพาะตัว โดยมีการเปลี่ยนแปลงรูปแบบการนำเสนอตามความเหมาะสม สร้างความสม่ำเสมอตลอดทั่วทั้งเว็บ ผู้ใช้ก็จะสามารถจดจำลักษณะของเว็บได้อย่างดียิ่ง

ปัจจัยเหล่านี้เป็นเครื่องชี้วัดความนิยมในตัวของเว็บได้เหมือนกัน เพราะการออกแบบหน้าแรกสิ่งที่สำคัญในการออกแบบคือ ความคาดหวังของผู้ใช้ ดังนั้นลักษณะขององค์ประกอบต่างๆ ต้องคำนึง เช่น กราฟิกเพื่อสื่อความหมาย โลโก้ สัญลักษณ์ ตำแหน่งของชื่อเรื่องและเนื้อหา เป็นต้น นอกจากนี้แล้วการออกแบบเพื่อให้มีสไตล์ต้องมีเป้าหมายที่ชัดเจน สามารถสร้างความเพลิดเพลินให้เข้ากับบรรยากาศระหว่างเว็บกับผู้ใช้บริการได้

4.จัดรูปแบบโครงสร้างเว็บอย่างเหมาะสม
การจัดวางโครงสร้างเว็บเพื่อให้ระบบการจัดวางตำแหน่งของข้อมูลสามารถใช้งานได้ง่ายขึ้น โดยในแต่ละส่วนต้องมีความเหมาะสมซึ่งกันและกัน เช่น ส่วนหัวของหน้า ส่วนของสารบัญ ส่วนของเนื้อหา ส่วนท้ายของหน้า เป็นต้น ต้องจัดให้มีรูปแบบที่เป็นระเบียบ เน้นให้เห็นถึงส่วนที่สำคัญและมีรูปแบบที่เหมาะสม สิ่งเหล่านี้จะช่วยให้เว็บมีความชัดเจนน่าเชื่อถือ นอกจากนี้ การออกแบบเว็บที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุล มีการเชื่อมโยงสัมพันธ์กันระหว่างหน้าเว็บเพจต่างๆ รวมถึงลักษณะการเชื่อมโยงภายในแต่ละหน้าเว็บเพจ ซึ่งต้องวางแผนโครงสร้างให้ดี เพื่อป้องกันอุปสรรคที่จะเกิดต่อผู้ใช้ เช่น การหลงทางของผู้ใช้ในขณะเข้าสู่เนื้อหาในส่วนต่างๆ เป็นต้น

จากหลักการนี้แสดงว่าโครงสร้างของเว็บเป็นส่วนที่ควรให้ความสำคัญ โครงสร้างที่ดีจะช่วยส่งผลที่ดีต่อผู้ใช้ ในขณะเดียวกันโครงสร้างที่ไม่ดีก็ย่อมส่งผลเสียต่อผู้ใช้เช่นกัน โครงสร้างของเว็บสามารถแบ่งออกได้เป็น 4 รูปแบบใหญ่ๆ คือ

โครงสร้างแบบเรียงลำดับ (Sequential Structure)
โครงสร้างประเภทนี้จะมีลักษณะการเรียงลำดับแต่ละเว็บเพจตายตัวโดยเนื้อหาจะดำเนินไปในลักษณะเส้นตรง ซึ่งใช้แนวคิดเช่นเดียวกับหนังสือ ข้อดีของโครงสร้างรูปแบบนี้ก็คือง่ายต่อการสร้างและดูแลปรับปรุงแก้ไข ส่วนข้อเสียนั้น ผู้ใช้จะต้องผ่านหน้าเว็บเพจที่ไม่จำเป็นก่อนเพื่อเข้าสู่เว็บเพจที่ต้องการ

โครงสร้างแบบลำดับขั้น (Hierarchy Structure)
โครงสร้างประเภทนี้ตั้งอยู่บนพื้นฐานแนวคิดของแผนผังลำดับขั้น คล้ายกับต้นไม้ ที่แตกกิ่งก้านสาขาออกไปเป็น กิ่งเล็ก กิ่งใหญ่ ใบและผล โดยมีจุดเริ่มต้นที่หน้าแรกก่อนแล้วจึงเข้าสู่เว็บเพจถัดไป ซึ่งอยู่ในลักษณะการแยก เป็นหัวข้อเรื่อง ต่างๆ และภายในแต่ละหัวข้อก็มีหัวข้อย่อยหรือเนื้อหาแยกต่อกันไป ข้อดีของโครงสร้างรูปแบบนี้ก็คือง่ายต่อการแยกแยะและการจัดระบบข้อมูล ส่วนข้อเสียคือต้องออกแบบให้มีโครงสร้างที่สมดุล

โครงสร้างแบบตาราง (Grid Structure)
โครงสร้างประเภทนี้มีความซับซ้อนมากกว่าสองรูปแบบที่ผ่านมา เป็นการออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เว็บเพจของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกัน ระหว่างเว็บเพจแต่ละส่วน การเข้าสู่เว็บเพจของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เว็บเพจที่ต้องการได้

โครงสร้างแบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ไม่มีโครงสร้างที่แน่นนอนตายตัว ส่วนการเชื่อมโยงเว็บเพจแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้า ตัวเชื่อมโยงนี้ไม่ว่าจะปรากฏอยู่บนตำแหน่งใดๆ สามารถที่จะเชื่อมโยงไปยังเว็บเพจหน้าอื่นๆ ได้ทันที

5.จัดหมวดหมู่และหัวข้อให้เข้าใจง่าย
การจัดระบบข้อมูลในเว็บไซต์เป็นสิ่งที่สำคัญอย่างยิ่งและคงไม่แตกต่างกับหน้าที่บรรณารักษ์ที่จะต้องมีการจัดหมวดหมู่ของหนังสือในห้องสมุด เพื่อให้สามารถค้นหาหนังสือตามที่ต้องการได้อย่างรวดเร็วและถูกต้อง ในเว็บไซต์การจัดระบบข้อมูลนั้นไม่ได้หมายถึงการจัดเนื้อหาเพียงอย่างเดียวแต่รวมไปถึงส่วนอื่นๆ ที่เกี่ยวกับข้อหัว ชื่อเรื่อง สารบัญและระบบเนวิเกชันรวมถึงการเชื่อมโยงลิงค์ต่างๆ ในเว็บ ฉะนั้นการจัดวางกลุ่มของข้อมูลหรือชื่อเรื่องต้องมีความสัมพันธ์และสอดคล้องซึ่งกันและกัน เพื่อให้ง่ายในการค้นหาข้อมูลได้อย่างสะดวก และตรงกับความต้องการของผู้ใช้ ซึ่งลักษณะการจัดหมวดหมู่หรือการจัดระบบข้อมูลก็มีหลากหลายรูปแบบ เช่น การจัดตามลำดับตัวอักษร การจัดตามกลุ่มผู้ใช้ การจัดตามหัวข้อเรื่อง เป็นต้น ดังนั้น การจัดระบบข้อมูลนอกจากจะทำให้ผู้ใช้เข้าใจได้ง่ายแล้ว ยังกลายเป็นสิ่งสำคัญที่จะช่วยให้เว็บมีความน่าเชื่อถืออีกด้วย

6.เน้นการเข้าถึงเว็บด้วยความรวดเร็ว
ในบางครั้งถ้าคุณใช้เวลาในการดาวน์โหลดหน้าเว็บเพจนานๆ คุณจะรอดูจนกว่าหน้าเว็บจะดาวน์โหลดมาจนครบหรือเปล่าถ้าเว็บนี้ไม่มีเนื้อหาที่น่าสนใจจริง การออกแบบเว็บนอกจากจะออกแบบให้ดูดีและสวยงามแล้ว ต้องคำนึงถืงความเร็วในการดาวน์โหลดของหน้าเว็บเพจอีกด้วย แต่ถ้าเว็บเพจปราศจากรูปภาพและกราฟิกก็คงจะไม่มีอะไรดูดี เพราะรูปภาพหรือกราฟิกคือเครื่องมือในการสื่อความหมายได้อย่างชัดเจน พร้อมทั้งสามารถสร้างความรู้สึก ความสัมพันธ์ที่ดีต่อผู้ใช้บริการอีกด้วย

คุณสามารถกำหนดไฟล์ของกราฟิกให้เป็นนามสกุล GIF และ JPEG เพราะเป็นไฟล์นามสกุลที่นิยมใช้ในเว็บมากที่สุดในปัจจุบัน ใช้ภาพเคลื่อนไหวเพื่อสร้างจุดสนใจเท่านั้นอย่าใช้มากจนเกินไป กำหนดค่าความกว้าง(WIDTH) และความสูง (HEIGHT) ให้เหมาะสม ถ้ามีขนาดใหญ่เกินไปให้ตัดรูปภาพออกเป็นส่วนๆ กำจัดตัวอักษรและการเชื่อมลิงค์โดยที่ไม่จำเป็นออกไป ออกแบบเว็บโดยใช้สไลต์ CSS เพื่อลดปริมาณคำสั่งของไฟล์ HTML และสิ่งที่สำคัญอย่าให้หน้าเว็บมีความยาวเกินไป

7.การแสดงผลหน้าเว็บบนเบราเซอร์
โดยปกติคุณใช้ระบบปฏิบัติการของวินโดวส์เวอร์ชันไหนหรือใช้ระบบปฏิบัติการลีนุกซ์ แล้วคุณก็มองไปยังกลุ่มผู้ใช้ว่าเขาเหล่านั้นใช้ระบบปฏิบัติการใดบ้าง ความแตกต่างของระบบปฏิบัติการย่อมมีผลต่อการออกแบบเว็บเพจ เพราะกลุ่มผู้ใช้มีสภาพแวดล้อมที่แตกต่างกัน นี่คือสิ่งที่ผู้ออกแบบต้องคำนึงถึง การออกแบบไม่ใช่ว่าจะออกแบบให้เหมาะกับเฉพาะเครื่องของตัวเองที่ใช้งานอยู่เท่านั้น ถ้าเป็นอย่างนี้คุณคิดผิดตั้งแต่เริ่มต้นแล้ว ลองพิจารณาให้ดีว่า ถ้าคุณออกแบบแล้วเมื่อผู้ใช้บริการเปิดขึ้นมาแล้วผลลัพธ์ที่ได้อาจจะมีลักษณะที่เปลี่ยนแปลงไปอย่างน่าจนใจเลยก็ได้

ฉะนั้นคุณควรศึกษาถึงลักษณะการใช้งานของกลุ่มเป้าหมายให้ได้รายละเอียดมากที่สุด เพื่อเป็นประโยชน์สำหรับการออกแบบ เช่น ระบบปฏิบัติการ ชนิดรุ่นของเบราเซอร์ ความละเอียดของหน้าจอ จำนวนสีที่ใช้ในการแสดงผล เป็นต้น ข้อมูลทั้งหมดเหล่านี้น้อยนักที่นักออกแบบเว็บจะไขว่คว้าหาเพราะมันเป็นเรื่องยาก แต่ผู้ออกแบบที่ฉลาดย่อมมีทางออกที่ดีไม่ว่าจะเป็นออกแบบเว็บให้รองรับกลุ่มผู้ใช้หลายระดับ โดยให้สนับสนุนเบราเซอร์ที่แตกต่างกันด้วย และออกแบบความละเอียดของหน้าจอที่มีผู้ใช้มากที่สุด

จากการสำรวจในหลายเว็บไซต์เกี่ยวกับความนิยมของผู้ใช้งานคอมพิวเตอร์พอจะสรุปเป็นข้อมูล สำหรับนักออกแบบเว็บมือใหม่ใช้เป็นข้อมูลช่วยในการตัดสินใจได้ง่ายยิ่งขึ้นสำหรับการออกแบบและพัฒนาเว็บ ระบบปฏิบัติการ Windows XP ความละเอียดของหน้าจอ 1024 X 768 โปรแกรมเบราเซอร์ Internet Explorer และการแสดงสีของจอมอนิเตอร์ 32 บิต ทั้งหมดนี้เป็นข้อมูลที่ผู้ใช้คอมพิวเตอร์นิยมใช้มากที่สุด

8.การใช้สัญลักษณ์รูปภาพกราฟิกสำหรับเว็บ
หลายเว็บไซต์ได้ใช้กราฟิกในการออกแบบเป็นหลักเพื่อทำให้เว็บมีความสวยงามและน่าสนใจมากยิ่งขึ้น เพราะกราฟิกคือองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บ ที่สามารถช่วยสื่อความหมายของเว็บให้ผู้ใช้บริการได้เข้าใจในสิ่งที่นำเสนอออกไป การออกแบบกราฟิกที่ดีย่อมหมายถึง “หน้าที่ในการชี้นำ” ดังนั้นภาพควรจะทำให้ผู้ใช้เข้าใจได้ง่าย ความสวยงามของกราฟิกไม่เพียงแต่จะสร้างสีสันให้กับเว็บเท่านั้น แต่ยังถ่ายทอดอารมณ์ของเว็บเพื่อให้ผู้ใช้มีปฏิกิริยาโต้ตอบด้วย

พฤติกรรมและการแสดงออกอย่างมีเหตุผล กราฟิกส่วนใหญ่ที่นิยมนำมาใช้บนเว็บจะอยู่ในรูปแบบของ GIF และ JPEG เพราะทั้งสองนานสกุลนี้ เบราเซอร์ทุกชนิดสนับสนุน สำหรับโปรแกรมที่ใช้สำหรับงานกราฟิกบนเว็บ ถ้าคุณถนัดใช้ Photoshop ก็สามารถสร้างชิ้นงานที่เป็นกราฟิกและภาดเอนิเมชันได้ หรือถ้าคุณอยากเห็นความแตกต่างก็ต้องใช้ Macromedia Fireworks โดยเป็นโปรแกรมที่สามารถวาดภาพแบบเว็กเตอร์ที่มีคุณสมบัติในการตกแต่งภาพ ตัวอักษรได้อย่างดีเยี่ยม

การจัดวางองค์ประกอบเป็นสัดส่วนชัดเจน สื่อความหมายเข้าใจง่าย การออกแบบโดยใช้ ImageReady จัดเก็บเป็นไฟล์ .GIF เพื่อให้ไฟล์มีขนาดเล็ก มีสีสันสดใสใช้โทนสีที่เข้ากัน

9.การเลือกใช้สีอย่างถูกหลักตามทฤษฎี
การเลือกใช้สีสำหรับเว็บนอกจากจะมีผลต่อการแสดงออกของเว็บแล้วยังเป็นการสร้างความรู้สึกที่ดีต่อผู้ใช้บริการอีกด้วย ดังนั้นจะเห็นว่าสีแต่ละสีสามารถสื่อความหมายของเว็บได้อย่างชัดเจน ความแตกต่าง ความสัมพันธ์ที่เกิดขึ้นย่อมส่งผลให้เว็บมีความน่าเชื่อถือมากยิ่งขึ้น การเลือกใช้สีให้เหมาะสมกับเว็บจำเป็นต้องใช้หลักการพอสมควรชุดสีแต่ละชุดมีความสำคัญต่อเว็บ ถ้าเลือกใช้สีไม่ตรงกับวัตถุประสงค์หรือเป้าหมายอาจจะทำให้เว็บไม่สามารถชนะใจผู้ใช้บริการได้ คำว่า “ชนะใจ” หมายความว่า ผู้ใช้ยินดีที่จะกลับมาใช้บริการเรื่อยๆ อย่างไม่มีวันจบสิ้น ฉะนั้นการใช้สีอย่างเหมาะสม การใช้สีเพื่อสื่อความหมายของเว็บต้องเลือกใช้สีที่มีความกลมกลืนกันอย่างสวยงาม

เว็บไซต์ของสำนักข่าวส่วนใหญ่ใช้สีขาวเป็นพื้นหลัง และสีดำหรือสีน้ำเงินเป็นข้อความ ถ้ามองในทางกลับกันอาจจะเป็นกฎของการออกแบบเว็บก็ได้ แต่ถ้าพิจารณาให้ดีจะเห็นว่ามีรูปแบบที่เป็นมาตรฐานดีลองเข้าไปใช้บริการดูสิครับเพื่อจะได้เห็นข้องแตกต่างเพื่อนำมาเปรียบเทียบได้อย่างชัดเจนยิ่งขึ้น

การเลือกใช้สีสำหรับการออกแบบเว็บไซต์ข่าวที่เป็นยอดนิยมของโลก

USNews ออกแบบโดยใช้สีขาวเป็นพื้นหลังส่วนกราฟิกใช้ สีขาวและน้ำเงิน
ABCNews ออกแบบโดยใช้สีขาวเป็นพื้นหลังส่วนกราฟิกใช้ สีขาวและสีน้ำเงิน
Netcenter ออกแบบโดยใช้สีขาวเป็นพื้นหลังส่วนกราฟิกใช้ สีขาวและสีน้ำเงิน
YahooNews ออกแบบโดยใช้สีขาวเป็นพื้นหลังส่วนกราฟิกใช้ สีขาวและสีน้ำเงิน

10.จัดรูปแบบตัวอักษรสำหรับเว็บให้หน้าอ่าน
ตัวอักษรมีหลากหลายรูปแบบที่คุณจะต้องคัดเลือกมาใช้ให้เหมาะสมกับข้อความ หัวข้อเรื่อง ชื่อเรื่องหรือเนื้อหาบนเว็บ เพราะตัวอักษรแต่ละชนิดต่างก็ให้อารมณ์และความรู้สึกที่ไม่เหมือนกัน ตัวอักษรบางชนิดเหมาะสำหรับเด็ก ตัวอักษรบางชนิดเหมาะสำหรับวัยรุ่น และตัวอักษรบางชนิดเหมาะสำหรับวัยผู้ใช้ การเลือกใช้ตัวอักษรให้เหมาะกับกลุ่มบุคคลจึงเป็นเรื่องที่ต้องให้ความสำคัญเป็นอย่างยิ่ง เพราะการอ่านหนังสือตามปกติของคนเรานั้นต้องใช้สายตาที่มองเห็นได้อย่างชัดเจนและสามารถกวาดสายตาได้อย่างปกติตามตัวอักษรในแต่ละบรรทัด

นอกจากนี้การคัดเลือกตัวอักษรที่เหมาะสมแล้วยังต้องให้ความสำคัญกับการจัดตำแหน่งของตัวอักษร ให้มีช่องว่างระหว่างตัวอักษรและระหว่างคำ มีเว้นวรรค มีหัวข้อและเนื้อเรื่องที่ชัดเจน ควรจัดแบ่งเนื้อหาให้มีความยามที่เหมาะสม มีแทรกรูปภาพประกอบเพื่อผ่อนคลายจากการเพ่งดูตัวอักษรเพื่อพักสายตาด้วย

Tags: web, Web Develope, ขั้นตอนการออกแบบเว็บ