Lingo นักออกแบบเว็บไซต์: คำแนะนำสำหรับลูกค้าของคุณ

เผยแพร่แล้ว: 2024-09-15

ทุกการค้ามีศัพท์แสงของตัวเอง ในฐานะนักออกแบบเว็บไซต์ คุณเชี่ยวชาญตัวอักษรของคำศัพท์ต่างๆ ในเว็บไซต์ เช่น UX, CSS และ HTML ได้อย่างคล่องแคล่ว แต่ลูกค้าของคุณ? มันอาจจะเป็นภาษากรีกสำหรับพวกเขาเช่นกัน

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

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

ต่อไปนี้เป็นคำศัพท์การออกแบบเว็บไซต์ที่สำคัญ 7 ข้อ:

  • ภาพฮีโร่
  • เอ็กซ์เอ็กซ์
  • โครงลวด
  • สถาปัตยกรรมสารสนเทศ
  • ตอบสนองต่อมือถือ
  • HTML, CSS และจาวาสคริปต์
  • ซีเอ็มเอส

ภาพฮีโร่

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

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

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

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


UX หรือประสบการณ์ผู้ใช้

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

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

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


โครงลวด

ในระหว่างโครงการเว็บไซต์ส่วนใหญ่ ทีมงานเว็บของคุณจะสร้างโครงร่างของหน้าเว็บก่อนสร้างแบบจำลองการออกแบบ

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

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

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

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


สถาปัตยกรรมสารสนเทศ (IA)

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

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

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


ตอบสนองมือถือ

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

การตอบสนองบนมือถือหมายความว่ามีเทคโนโลยีที่สร้างไว้ในแพลตฟอร์มอยู่แล้ว

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

ลองนึกถึงวิธีการทำงานของโทรศัพท์มือถือของคุณ หากคุณหมุนโทรศัพท์ในแนวนอน เนื้อหาของโทรศัพท์จะปรับโดยอัตโนมัติ

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

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


HTML, CSS และจาวาสคริปต์

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

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

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

Cascading Style Sheets (CSS) ช่วยให้นักออกแบบและนักพัฒนาเว็บไซต์กำหนดรูปลักษณ์และความรู้สึกของเว็บไซต์ได้ HTML เพียงอย่างเดียวนั้นไม่น่าดึงดูดหรือน่าดึงดูดใจ CSS สร้างความแตกต่างในการสร้างการออกแบบหน้าเว็บที่สวยงาม

JavaScript เป็นภาษาสคริปต์ที่นักพัฒนาใช้เพื่อสร้างการโต้ตอบบนเว็บไซต์ แค่ใช้ HTML และ CSS คุณก็จะมีหน้าเว็บที่ดูดี แต่แค่สองหน้านี้ก็ไม่มีอะไรเกิดขึ้นได้ เมื่อมองหานักพัฒนาเว็บหรือทีมพัฒนา ให้มองหาคนที่รู้มากกว่าแค่ JavaScript และตรวจสอบให้แน่ใจว่าทีมของคุณมีประสบการณ์ในแพลตฟอร์มที่คุณกำลังสร้างเว็บไซต์


ซีเอ็มเอส

เราจะปิดท้ายด้วยคำศัพท์ง่ายๆ: ระบบการจัดการเนื้อหาหรือที่เรียกว่า CMS คุณมักจะได้ยินคำนี้เกี่ยวกับ WordPress (ระบบจัดการเนื้อหาอื่น)

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

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

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


ตรวจสอบเนื้อหา WordPress เพิ่มเติม!

ท้องถิ่น-เวิร์ดเพรส-การพัฒนา-สิ่งแวดล้อม-ทำไม-ใหญ่

WordPress เป็นระบบจัดการเนื้อหาที่ได้รับความนิยมมากที่สุดในโลกและมีการใช้งานโดยครีเอทีฟมากขึ้นทุกวัน

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

อ่านต่อที่นี่