ศัพท์แสงของนักออกแบบเว็บไซต์: คู่มือสำหรับลูกค้าของคุณ

เผยแพร่แล้ว: 2019-11-09

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

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

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

เงื่อนไขการออกแบบเว็บไซต์ที่สำคัญ 7 ข้อมีดังนี้

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


ภาพฮีโร่

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

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

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

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


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

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

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

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


โครงลวด

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

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

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

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

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


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

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

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

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


รองรับมือถือ

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

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

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

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

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

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


HTML, CSS และ JavaScript

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

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

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

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

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


CMS

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

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

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

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


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

local-wordpress-development-environment-why-large

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

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