ทริคเล็กๆในการหัดทำเว็ปไซต์

การทำเว็ปไซต์สิ่งสำคัญเลยเราต้องกำหนดทิศทางให้กับเว็ปไซต์เสียก่อน

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

นอกจากเว็ปไซต์องค์กร ก็จะมี Social Website ซึ่งที่โด่งดังมากและทุกคนรู้จักกันดีที่สุดคือ Facebook.com นั่นเอง หรือจะเป็น Twitter, Instragram ก็มีเช่นกันแต่ว่าจะเน้นไปที่ Mobile Application เสียมากกว่า

อีกรูปแบบคือ E-Commerce หรือเว็ปไซต์ขายของ ซึ่งเป็นที่นิยมอย่างมากๆในปัจจุบัน มีทั้งเว็ปไซต์ขนาดเล็กและขนาดใหญ่ เช่น Shoppee หรือ Lazada เป็นต้น หรือถ้าเป็นตัวอย่างเว็ปไซต์ต่างประเทศก็เช่น Taobao, Alibaba เป็นต้น

Single Page หรือเว็ปไซต์ที่มีหน้า Landing Page เพียงหน้าเดียว

เว็ปไซต์เหล่านี้มักจะเป็นเว็ป Portfolio โชว์ผลงาน ซะเป็นส่วนใหญ่ เช่น เว็ปโชว์พอร์ทถ่ายภาพ หรือ งานกราฟฟิกต่างๆ เป็นต้น เว็ปเหล่านี้มักจะทำได้ง่าย เนื้อหาไม่มาก ใช้เวลาในการวางแผนและจัดทำไม่นาน

Online Academy เป็นเว็ปไซต์แนวสอนการเรียนรู้ต่างๆแบบออนไลน์ ซึ่งมีทั้งสอนออนไลน์เลย หรือสอนออฟไลน์ เนื้อหาที่สอนมีทั้งสอนดนตรี สอนงานวาดรูปกราฟฟิก หรือสอนทำเว็ปไซต์ก็ได้เช่นกัน แล้วแต่แนวทางทำเว็ปไซต์กันเลย

แบบสุดท้ายที่จะยกตัวอย่างคือเว็ปไซต์ Entertainment เว็ปเพื่อความบันเทิง เช่น Youtube.com

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

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

ซึ่งการวางแผนทาง Visual นี้มีทริคดีๆแนะนำคือให้ดูองค์ประกอบโดยรวมให้ดี อย่างเรื่อง Size ขนาดของสิ่งต่างๆในเว็ปจะมีผลต่อการมองเห็นของ User หรือ สีและ  Texture ต่างๆ

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