April 29, 2024 | IN TIPS

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

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

Step 1: Establish the Identity of Your Site

14

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

ข้อมูลระบุตัวตนของไซต์ที่มีประสิทธิภาพประกอบด้วยสิ่งต่อไปนี้:

อ่านต่อเพื่อเรียนรู้วิธีรวมแต่ละส่วนเข้ากับเอกลักษณ์ของเว็บไซต์ของคุณ

Site icon

ไอคอนคือกราฟิกที่ระบุตัวตนสำหรับเว็บไซต์ของคุณ ซึ่งใช้ใน WordPress.com ในวิดเจ็ตและเป็นบุ๊กมาร์กหรือไอคอนแอปบนหน้าจอหลักเมื่อบันทึกลงในเบราว์เซอร์หรือโทรศัพท์ ไอคอนเวอร์ชันขนาดเล็ก (favicon) จะปรากฏถัดจากชื่อเว็บไซต์บนแท็บเบราว์เซอร์

15

ไอคอนของเว็บไซต์เป็นรูปสี่เหลี่ยมจัตุรัส ขนาดอย่างน้อย 512 x 512 พิกเซล และมักจะบันทึกเป็นไฟล์ PNG, GIF หรือ ICO ไอคอน Fav อาจมีขนาดเล็กลง แต่ต้องมีขนาดอย่างน้อย 196 x 196 พิกเซลสำหรับข้อกำหนดความละเอียดสูงที่ Chrome ใช้ในอุปกรณ์ Android

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

Logo


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

16

โลโก้ต้องมีขนาดเหมาะสมเพื่อให้ทำงานได้อย่างมีประสิทธิภาพบนอุปกรณ์ต่างๆ สิ่งสำคัญที่ต้องระวังคืออุปกรณ์บางอย่าง เช่น Mac และผลิตภัณฑ์อื่นๆ ของ Apple ใช้เทคโนโลยีจอแสดงผล Retina เทคโนโลยีนี้แสดงจุดต่อนิ้วมากกว่าอุปกรณ์รุ่นเก่าที่ประมาณ 300 DPI ส่งผลให้ภาพที่คมชัดยิ่งขึ้น

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

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

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

Web Fonts and Typography


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

17

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

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

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

18

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

Color


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

19

สำหรับเว็บไซต์ สีจะกำหนดเป็นรหัส HEX รหัส HEX เป็นเวอร์ชันเข้ารหัสของสี RGB ในรูปแบบ #RRGGBB (#RedRedGreenGreenBlueBlue) (หากคุณสงสัยจริงๆ เรียนรู้วิธีการทำงานของสี HEX) ไม่แน่ใจว่าจะแปลงตัวอย่าง CMYK หรือ RGB เป็น HEX ได้อย่างไรใช่ไหม รหัสสี HTML ช่วยให้คุณสามารถค้นหาและแปลงรหัสสีได้อย่างง่ายดายโดยใช้เครื่องมือเลือกสีและแผนภูมิสีออนไลน์

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

20

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

21

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

Step 2: Build the Homepage of Your Site

22

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

กฎง่ายๆ สำหรับหน้าแรกคือการปฏิบัติตามกฎของ Hick (ดูกฎทอง #3 ด้านบน) ตรวจสอบให้แน่ใจว่าผู้ใช้จะเห็นตัวเลือกในการดำเนินการจำนวนจำกัดเท่านั้น

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

23

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

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

24

Step 3: Build Templates for Other Pages

25

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

หากเว็บไซต์ของคุณมีฟังก์ชันการค้นหา ก็จะมีหน้าสำหรับผลการค้นหาด้วย

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

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

26

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