Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - พื้นฐานการออกแบบ

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Images
Web Design for Kids: Typography

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

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

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

และอย่าลืมที่จะถามคำถามใดๆ ก็ตามในช่องคอมเม้นต์ด้านล่างได้เลย

ผู้ใช้งาน (User)

มีบางสิ่งที่เราคุยกันบ่อยมากก็คือเรื่องผู้ใช้งาน (user) หรือผู้เข้าชมเว็บไซต์ (visitor) ทุกๆ การคิดที่เราทำ แนวคิดการออกแบบเว็บที่เราได้คุยในบทเรียนที่ผ่านมามีจุดมุ่งหมายเดียวกันคือ เพื่อทำเว็บไซต์นั้นเข้าใจง่ายและใช้สบายให้มากที่สุดเท่าที่จะทำได้

ผู้ใช้งานดูมีความสุขไหม?

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

เนื้อหาต่างๆ (Content)

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

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

การจัดการเนื้อหาและการวางเลย์เอ้าท์

เมื่อเนื้อหาของเราพร้อมแล้ว เราต้องการจัดมันเข้าไปใส่ในหมวดหมู่ หรือกลุ่มที่เกี่ยวข้อง ดังนั้นผู้ใช้งานสามารถค้นหาทุกอย่างได้โดยไม่ติดขัด

เว็บไซต์ที่ดีที่สุดจะลื่นไหลอย่างเป็นธรรมชาติและเพื่อให้แน่ใจว่าผู้ใช้นั้นไม่ต้องลำบากในการคิดมากเกินไปเกี่ยวกับบางอย่างที่ควรจะเป็น

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

มุมมอง (The Visual)

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

รูปภาพและกราฟิก

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

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

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

ไอคอน (Icon)

ไอคอนนั้นคือภาพกราฟิกเล็กๆ ที่บ่งบอกถึงสิ่งบางอย่าง

ไอคอนที่ดีนั้นจะเข้าใจได้ง่าย และสามารถทำให้ค้นหาข้อมูลสำคัญในเว็บไซต์ได้รวดเร็วขึ้น

นี่คือบางตัวอย่างของการใช้ไอคอนที่เป็นประโยชน์จริงๆ

คุณรู้ไหมว่าไอคอนเหล่านี้สื่อถึงอะไร

ยังมีวิธีการอีกมากที่เราสามารถสื่อสารโดยไม่ต้องใช้ตัวอักษรและการใช้ไอคอนแทนที่ตัวอักษรในสถานการณ์ที่เหมาะสมจะช่วยให้เราเข้าถึงเว็บไซต์ที่สะอาดตาได้ง่าย

ลำดับชั้นของมุมมอง (Visual Hierarchy)

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

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

รูปภาพท้องฟ้าของเมืองในฝันนั้นถูกออกแบบว่า บอลลูนจะสะดุดสายตาผู้เข้าชมก่อนเสมอ ตามมาด้วยก้อนเมฆ ทุกสิ่งทุกอย่างในภาพพื้นหลังจะทำให้ดูไม่ค่อยชัดเพื่อให้บอลลูนและเมฆนั้นดูโดดเด่นขึ้นมา

รูปภาพด้านบนแสดงการเปลี่ยนแปลงสิ่งที่เรามองที่แรก คุณรับรู้ได้ไหมว่าคุณมองเมฆก่อน จากนั้นก็บอลลูน

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

พื้นที่ว่างสีขาว (Whitespace)

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

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

ดังนั้น ลองมาดูว่าเราจะทำให้มันดูดีขึ้นได้อย่างไร

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

พื้นที่ว่างในเว็บเมืองในฝัน

พื้นที่ว่างสำหรับเว็บไซต์เมืองในฝันของเรานั้นมีสีเหลืองอ่อน

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

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

รูปแบบตัวอักษร และ สี

รูปแบบตัวอักษรและสีนั้นสำคัญสำหรับการออกแบบเว็บมาก และพวกมันมีวิธีการที่จะติดตามสิ่งเหล่านี้ ดังนั้นเราแค่สัมผัสพวกมันเหล่านี้บ้าง

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

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

อีกครั้ง เราจะคุยเรื่องนี้กันอีกเร็วๆ นี้

สรุปทุกสิ่งทุกอย่างเข้าด้วยกัน

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

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

ถัดไปเราจะคุยกับเกี่ยวกับ รูปแบบตัวอักษร (typography) ศิลปะของการเลือกและเรียงตัวอักษร หนึ่งในสิ่งที่น่าสนใจและสนุกสนานของการออกแบบ

แล้วเจอกันรอบตัวเมืองเช่นเดิม

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.