ออกแบบเว็บไซต์ต้องทำอะไรบ้าง ฉบับมือใหม่✨
ออกแบบเว็บไซต์ต้องทำอะไรบ้าง ฉบับมือใหม่✨
การออกแบบนั้นมีหลากหลายแขนง เมื่อพูดถึงการออกแบบก็ไม่ได้หมายความว่านักออกแบบทุกท่านจะทำทุกอย่างที่เกี่ยวกับการออกแบบได้ อาจต้องแยกออกไปตามรูปแบบสาขาที่ถนัด ที่ชื่นชอบ เช่นเดียวกันกับการออกแบบเว็บไซต์ เมื่อนักออกแบบสายงานอื่นๆ หรือผู้ที่ต้องการศึกษาอยากจะรู้ว่าการเริ่มต้นออกแบบเว็บไซต์นั้นมีอะไรบ้าง ต้องทำอย่างไรบ้าง และต้องเรียนรู้สิ่งเหล่านั้นอย่างไร บทความนี้อาจเป็นประโยชน์ต่อผู้ที่เริ่มต้นและต้องการศึกษาไม่มากก็น้อย
เพราะการออกแบบนั้นมีพื้นฐานที่ต่างกัน เราจึงจำเป็นต้องเรียนรู้หลักในการออกแบบของสิ่งที่เราต้องการออกแบบ เพื่อให้เป็นไปตามหลักการในการออกแบบสิ่งเหล่านั้นมากที่สุด ซึ่งข้อจำกัดที่แตกต่างของแต่ละงานออกแบบนั่นเองที่เป็นเสน่ห์ที่ทำให้เราจำเป็นต้องศึกษาและเรียนรู้ให้เข้าใจมากที่สุด โดยเราจะเริ่มต้นดังต่อไปนี้
เว็บไซต์มีกี่ประเภท ?
จะออกแบบเว็บไซต์ได้อย่างไรถ้าไม่รู้เลยว่าเว็บไซต์มีกี่ประเภท ด้วยความที่คนเรามีความต้องการที่แตกต่างกันมากมายทำให้เว็บไซต์ประเภทต่างๆ เกิดขึ้นมากมายตามไปด้วย วันนี้เราจะขอยกตัวอย่างประเภทของเว็บไซต์ที่เรามักจะได้ออกแบบเว็บไซต์กันอยู่บ่อยๆ นั้นคือ
1. Corporate
เว็บไซต์ Corporate คือเว็บไซต์ขององค์กรที่ต้องมีข้อมูลสำคัญไว้ใช้ติดต่อ (Contact) หรือข้อมูลต่างๆ เกี่ยวกับองค์กร (About us) หรือข่าวสารอื่นๆ ที่เกี่ยวกับเว็บไซต์ และยังสามารถทำ Content online marketing ผ่านบทความบนเว็บไซต์ได้อีกด้วย
2. Landing page
เว็บไซต์ที่เป็นหน้าเดียว (Single page) หน้าที่ของ Landing page นั่นคือการเปลี่ยนผู้ใช้งานมาเป็นลูกค้า ดังนั้นข้อมูลที่อยู่หน้าเว็บไซต์ไม่ว่าจะเกี่ยวกับสินค้า ผลิตภัณฑ์ หรืออื่นๆ ควรจะเป็นสิ่งที่ดึงดูดให้ผู้ใช้งานสนใจและต้องการที่จะมาเป็นลูกค้าของเราให้ได้ และสิ่งที่เราต้องทำบนเว็บไซต์ประเภท Landing page นี้เองคือทำให้ข้อมูลออกมามีความน่าสนใจมากที่สุด และมีปุ่มที่เรียกว่า Call to action
3. E-commerce
เป็นหนึ่งในประเภทเว็บไซต์ที่มาแรง เติบโตขึ้นอย่างมากมาย เนื่องจากคนเริ่มซื้อขายของออนไลน์กันมากขึ้นกว่าแต่ก่อน ดังนั้นใครที่ทำธุรกิจออนไลน์จึงต้องการที่จะมีเว็บไซต์ E-Commerce การออกแบบเว็บไซต์ประเภทนี้จึงเป็นที่นิยมอีกเช่นกันนั่นเอง
เมื่อรู้แล้วว่าเว็บไซต์มีกี่ประเภท ก็มาต่อกันที่ขั้นตอนการออกแบบเว็บไซต์กันเลยค่ะ
1. การกำหนดเป้าหมาย (Goal identification)
เมื่อใดก็ตามที่มีการจะสร้างเว็บไซต์ขึ้น ไม่ว่ากับการบ้าน ลูกค้า หรืออะไรก็แล้วแต่ เราก็ควรจะกำหนดเป้าหมายและวัตถุประสงค์เป็นอันดับแรก
2. การกำหนดขอบเขตของเว็บไซต์ (Scope identification)
เรารู้แล้วว่าเป้าหมายเราจะทำเพื่อใคร เราก็จะสามารถกำหนดขอบเขตของโปรเจคเราได้ ว่าเว็บไซต์แต่ละหน้าจะมีฟังก์ชั่น มีฟีตเจอร์อะไรบ้าง (แหมทับศัพท์) ผู้ใช้ต้องการรู้อะไรในเว็บไซต์แต่ละหน้า และก็กำหนด Timeline ให้แต่ละงานว่าจะใช้เวลาเท่าไหร่เพื่อให้งานเสร็จทัน
3. การจัดกลุ่มข้อมูลและเรียบเรียงแผนผังเว็บไซต์ (Information Architecture and Sitemap )
กำหนดสโคปงานเรียบร้อยแล้วเราก็จะได้เริ่มทำเว็บไซต์จริงๆจังๆกันซักทีเราก่อนอื่นเลยเราต้องทำการจัดการกับข้อมูลที่เราจะนำเสนอให้ผู้ใช้หรือที่เรียกว่า IA และทำแผนผังเว็บไซต์เพื่อให้ทีมได้เห็นภาพรวมของเว็บไซต์และใช้ในการพัฒนาต่อไป
4. การจัดวางองค์ประกอบภาพ (Wireframe and Visual elements)
เมื่อเราได้โครงสร้างเว็บและเนื้อหาแล้วเราก็จะมาสร้างภาพลักษณ์ ภาพจำให้เว็บไซต์ของเรากัน ซึ่งมันก็จะสอดคล้องกับ Brief และ ความต้องการของลูกค้าหรือตัวเราเองอะไรก็แล้วแต่ มันก็จะล้อกับเป้าหมายที่เราตั้งอ่ะ ซึ่งการจัดวางองค์ประกอบภาพจำเป็นที่จะต้องมีความรู้ด้าน visual hierarchy บ้าง (ไม่รู้ไปเสิร์ชกูเกิ้ลเลยเด้อ) แต่โลกก็ไม่ได้โหดร้ายเสมอไปเพราะมีตัวช่วยมือดีที่ทำให้เราไม่หลุดสีหลุดตรีมนั่นก็คือ Moodboards นั่นเอง
5. การพัฒนาเว็บไซต์ (Site Development)
ถึงเวลาที่ทุกคนรอคอยลอยคอนั่นก็คือเขียนโค้ดจ้า เมื่อ Design ที่ทำทั้งหมดข้างต้นเป็นการทำงานแบบเห็นภาพอยู่กับรูปภาพรูปทรงแต่ในขั้นนี้จะได้เห็นแต่โค้ดหยึ๋ยๆกันเลยทีเดียว มันคือเวลาที่จะปลดปล่อยงานออกแบบของเราทำให้ใช้งานได้จริงนั่นเอง ซึ่งภาษาที่่ใช้ก็มีหลักๆคือ HTML CSS Javascript และอีกมากมายแล้วแต่คนจะตรัสรู้
6. การทดสอบผล (Testing)
ตอนนี้เราทำเว็บไซต์เสร็จแล้วเอ้าปล่อยเลยพวกเรา เย้เย้ เดี๋ยว!!! บั๊คลูกบั๊ค ใจเย็นๆ ตายละหว่าถ้าเราขาดขั้นตอนการทดสอบเว็บไซต์ของเราไปเนี่ยได้ปวดหัวอีกยาวจ้า เพราะฉะนั้นเมื่อเราทำเว็บไซต์เรียบร้อยโอเคแล้วเราก็ต้องทดสอบกันว่ามันสามารถใช้งานได้จริงหรือไม่นั่นเอง วิธีการทดสอบก็มีมากมาย ไปอ่านต่อด้านล่าง
7. การเผยแพร่เว็บไซต์ (Launch)
เย้ยยยยยยยยในที่สุดเว็บเราก็ได้ปล่อยซักที ทุกอย่างสวยเป๊ะหรูดูแพง ให้ประชาชนเห็นกันแล้ว ซึ่งการเปิดตัวเนี่ยก็ไม่ใช่อยู่ดีๆจะอัพขึ้นโฮสต์จดโดเมนโอเคจบลอยแพเว็บไซต์ ไม่นาจา ทุกอย่างที่ทำมีต้นทุนเพราะฉะนั้นทำแล้วต้องเกิดกำไร แต่จะทำอย่างไรก็รอไปอ่านกันอีก
8. การปรับปรุงและพัฒนา (Site Maintenance and Development)
หลังจากที่เว็บไซต์อันสวยงามของเราถูกปล่อยสู่สาธารณะประชาชีแล้วคนมาใช้เยอะใช้จนช้ำ เซิร์ฟพัง หนำซ้ำเทรนด์ดีไซน์เปลี่ยนอีก เวรล้ะจ้า เราก็ต้องดูแลปรับปรุงส่วนต่างๆของเว็บไซต์ให้เป็นปัจจุบันทันด่วนใช้งานได้ดิบได้ดีเหมือนทำใหม่อยู่เสมอนั่นเอง
นอกจากนี้ยังมีในส่วนของ
- Grid
Grid คือส่วนที่ควบคุม Layout ให้กับงานออกแบบ เพราะ Grid System ในเว็บไซต์นั้นมีผลต่อการทำ Responsive ซึ่งเป็นส่วนสำคัญมากที่สุดในขณะนี้ นั่นก็เพราะว่าผู้ใช้งานส่วนใหญ่จะเข้าเว็บไซต์โดยผ่านอุปกรณ์สมาร์ทโฟนต่างๆ จากความสะดวกสบายของการใช้งาน
- ภาพ
เพราะ 80% ของพื้นที่หน้าเว็บไซต์นั้นเป็นรูปภาพ และอีก 20% จะเป็น UI สำหรับการใช้งานรูปภาพนั้น รูปภาพที่ดีจะต้องมีความสวยงาม และสามารถสื่อสารข้อความได้ด้วย
- ฟ้อนต์
เมื่อคุณออกแบบเว็บไซต์ที่มีองค์ประกอบครบแล้วอย่างภาพสวย UI งาม แต่ใช้ฟ้อนต์ Tahoma จากเว็บไซต์อันสวยงามอาจจะกลายเป็นเว็บที่ดูแย่ได้ โดยเทคนิคในการจัดการกับฟ้อนต์ในงานออกแบบเว็บไซต์คือต้องกำหนดรูปแบบของฟ้อนต์เอาไว้เช่น
H1 – หัวข้อเรื่องใช้ฟ้อนต์ขนาด 48px
H2 – ใช้ขนาด 32px
Body – ใช้ฟ้อนต์ขนาด 18px
ในงานเว็บไซต์ฟ้อนต์ทุกหน้าจะต้องมีขนาดที่เท่ากันเพื่อให้ง่ายต่อการเขียน Code และดูเป็นระเบียบเรียบร้อยมากยิ่งขึ้น สำหรับฟ้อนต์ที่มีคุณภาพเราแนะนำให้ลองดู GOOGLE FONTS เพราะว่าคุณภาพดีมีให้เลือกใช้งานหลายรูปแบบหลายภาษาที่สำคัญคือใช้งานฟรี แต่ถ้าใครต้องการฟ้อนต์ที่มีเอกลักษณ์เฉพาะตัวขึ้นมาอีกลองดูที่ สุดยอดแหล่งแจก ฟ้อนต์ฟรี เราคัดแล้วคัดอีกเพื่อนักออกแบบ !! แต่อันนี้ต้องดูในเรื่องของลิขสิทธิ์ให้ดี ฟ้อนต์แต่ละตัวจะมีข้อกำหนดที่แตกต่างกัน
- สี
สีที่อยู่บนเว็บไซต์นั้นจะมีการใช้สีอยู่เพียงไม่กี่สี
สำหรับเทคนิคในการเลือกสีในการออกแบบเว็บไซต์ มีดังต่อไปนี้
สีหลัก = สีโลโก้
สีรอง = พื้นหลังของโลโก้หรือสีที่ขับให้โลโก้เด่นขึ้นมา
สีสำหรับปุ่มกด(Call to action) = สีคู่ตรงข้ามกับสีหลักและพื้นหลังเน้นความโดดเด่น
สีพื้นหลัง (BG) = เน้นไปที่สีโทนขาวหรือดำ
เพราะสีสามารถมีอิทธิพลต่อผู้ใช้งานได้ การเลือกใช้สีให้เข้ากับรูปแบบเว็บไซต์จึงเป็นอีกหนึ่งตัวช่ยให้ผู้ใช้งานติดใจในเว็บไซต์ของเรานั่นเอง
- ไอคอน
ในงานออกแบบเว็บไซต์เราจะต้องใช้งานไอคอนบ่อยมาก ด้วยความที่ไอคอนคือกราฟิกที่ใช้แทนคำพูดได้หรือใช้ประกอบกับข้อความ เพิ่มความน่าสนใจให้กับเว็บไซต์ บนโลกนี้มีไอคอนเป็นจำนวนมากให้เลือกใช้งานให้ลองดูจากเว็บ flaticon.com และ iconfinder.com ก็มีให้เลือกใช้งานมากมาย ถ้าใครอยากรู้วิธีนำไอคอนมาใช้งานแบบลงมือทำลองมาเรียนกับเราได้เลย
- สไตล์การออกแบบ
สุดท้ายของการออกแบบเว็บไซต์คือสไตล์ในการออกแบบที่ควรจะยึดเกาะเทรนด์ในขณะนั้นให้ดี หลายครั้งที่เทรนด์เกิดจากผู้ให้บริการรายใหญ่เช่น Apple ที่เคยทำเว็บไซต์ Iphone ที่ดูเรียบง่ายไร้เงา หรือ Google ที่มี material design ของตัวเอง ถ้าใครไม่รู้จะเริ่มจากตรงไหนเราแนะนำให้ศึกษา Flat design ดูสักนิดเพราะเป็นเทรนด์ที่มีมาระยะหนึ่งเน้นการออกแบบที่ดูเรียบง่ายทำให้ง่ายต่อนักออกแบบด้วย
-----------------------------------------------------------------------------------
สนใจบริการดูแลการตลาดออนไลน์ | ทำการตลาดออนไลน์ | ทำกราฟฟิคครบวงจร | สามารถติดต่อเราได้ตลอด | รับสร้างแบรนด์ | รับทำการตลาดออนไลน์ | รับทำแผนการตลาดออนไลน์ | รับสร้างแบรนด์ | รับดูแล Facebook แฟนเพจ | รับดูแล LINE OA สามารถติดต่อเราได้ตลอด 24 ชั่วโมง
รายละเอียดบริการดูแลการตลาดออนไลน์
ตัวอย่าง ผลงานแบรนด์ต่างๆ ที่เราดูแลการตลาดออนไลน์ให้
------------------------------------------------------------------------------------
💙ปรึกษาทีมงานของเรา💙
📱Tel : 0840104252 📱0947805680
📨 Inbox : http://m.me/ChatStick.TH
┏━━━━━━━━━┓
📲 LINE: @chatstick
┗━━━━━━━━━┛
หรือคลิ๊ก https://goo.gl/KuzCpM
🎉รายละเอียดที่ http://www.chatstickmarket.com/langran
🎉ชมผลงานเราได้ที่ https://www.chatstickmarket.com/portfolio
Comments