Get In Touch
[email protected]
Th: +6620263180

สิ่งที่ควรรู้ก่อนเริ่มต้น ออกแบบเว็บไซต์

สิ่งที่ควรรู้ก่อนเริ่มต้น ออกแบบเว็บไซต์

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

ประเภทของเว็บไซต์ 

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

1. Sale Page

salepage_example

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

 

ข้อดีของเว็บ Sale Page 

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

 

เว็บ Sale Page เหมาะกับใคร ?

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

2. Corporate

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

3. E-Commerce

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

Brand CI กับการออกแบบเว็บไซต์

CI_example

ที่มา : maxrosero.com/airbnb

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

    • โลโก้
    • Font ประจำแบรนด์
    • สีประจำแบรนด์
    • ลายกราฟิกประจำแบรนด์ 
    • ไอคอนต่างๆ 
    • Mood&Tone

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

การทำ Mock Up Design

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

เครื่องมือสำหรับการออกแบบ

แนะนำเครื่องมือที่ใช้ในการออกแบบเว็บไซต์ที่ได้รับความนิยมมาให้รู้จักแบบคร่าวๆ ซึ่งจะมีทั้งเครื่องมือสำหรับการออกแบบเว็บไซต์ และ Mock-up

  • Adobe Photoshop โปรแกรมที่มีเครื่องมือมากมายเพื่อการสร้างงานประเภทสิ่งพิมพ์ งานวิดีทัศน์ งานนำเสนอ งานมัลติมีเดีย ตลอดจนงานออกแบบและพัฒนาเว็บไซต์
  • Clean Mock เครื่องมือในการทำ Mock-up ที่ใช้งานผ่านเบราว์เซอร์ คุณสามารถอัพโหลดหรือ Drag&Drop ภาพเว็บไซที่ออกแล้วเลือก Mock-up ที่ต้องการได้เลย
  • Mockuuups โปรแกรมที่มีรูป Mock-up ให้เลือกหลากหลายอุปกรณ์ตั้งแต่ มือถือ , TV ไปจนถึงสมาร์ทวอทช์ และความดีงามของโปรแกรมนี้คือ แค่อัพโหลดรูปที่คุณออกแบบเพียงครั้งเดียวโปรแกรมจะนำภาพไปแสดงในทุก Mock-up ให้คุณเห็นตัวอย่างทั้งหมด
  • Figma เครื่องมือมาแรงที่สุดแห่งปีที่ใช้สำหรับการทำ  UI Design และยังสามารถใช้สำหรับออกแบบเว็บไซต์และ Mock-up ได้เช่นกัน

รู้จัก Grid System

grid_rows
grid_columns

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

ซึ่งระบบจะแบ่งสัดส่วน Layout ของหน้าเว็บบน Desktop ออกเป็น 12 ,Tablet 8 ,Mobile 4 column เพื่อให้รองรับได้ทุก Device ข้อดีของการออกแบบโดยใช้โครงสร้าง Grid นั้นคือสร้างความเป็นระเบียบ และง่ายต่อการนำไปพัฒนาต่อโดยผู้พัฒนาเว็บไซต์ 

เราใช้คุกกี้เพื่อประสบการณ์การใช้งานที่ดีที่สุดบนเว็บไซต์