home-page-design2

5 องค์ประกอบในการออกแบบเว็บสมัยใหม่

webdesign-nability

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

1.หลักการลำดับความสำคัญขององค์ประกอบในหน้าเว็บไซต์อย่างถูกต้อง (Visual Hierarchy) เป็นการจัดองค์ประกอบให้เป็นไปตามลำดับของความสำคัญ web site ส่วนใหญ่จะประกอบไปด้วย Main menu, Banner slide, Call To Action bottun และข้อมูลการใช้ติดต่อ เป็นต้น โดยมองในแง่มุมของผู้เข้าชมเว็บ หรือลูกค้า เพื่อเพิ่มประสิทธิภาพของเว็บ และสร้างแรงจูงใจให้เกิดการซื้อ หรือความสนใจในเนื้อหาของเว็บไซต์นั้นๆ

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

3.การเน้นการใช้งานและความเรียบง่าย (Simplicity) นั่นคือลูกค้าสามารถเข้าถึงบริการต่างๆ ได้สะดวก ไม่ต้องเสียเวลาค้นหาข้อมูลให้ยุ่งยาก หรือต้องเสียเวลาเลื่อนดูข้อมูลที่ไม่ตรงกับความต้องการของลูกค้า ควรมีเนื้อหาที่กระชับ ชัดเจน สีสันของเว็บที่เหมาะสม ไม่มากไม่น้อยจนเกินไป ทำให้ผู้เข้าชมประทับใจว่า เข้ามาใน web site ของเราแล้วได้ข้อมูลและบริการตรงตามที่ต้องการ ไม่ใช่ว่าเข้ามาแล้วหาข้อมูลไม่เจอ หรือบางครั้งข้อมูลไม่ตรงตามที่ลูกค้าต้องการ

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

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

home-page-design2

The new technology กับ Html5

html5_design_website

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

ความแตกต่าง html กับ html5

– Doctype เขียนง่ายขึ้น ในจณะที่เวอร์ชั่นเก่าๆ จะต้องตามด้วยรายละเอียดยาวๆ แต่ Html5 จะเหลือแค่ <!DOCTYPE html>

– การกำหนดภาษาทำได้ง่ายขึ้น คือ เวอร์ชั่นเก่าจะต้องเขียน xml:lang ในแท็ก <html> เพื่อกำหนดภาษาของเพจ แต่  HTML5 จะเหลือแค่ <html lang=”en”>

– แท็กเก่าๆ บางส่วนไม่รองรับใน HTML5

– ไม่ต้องมี “/” สำหรับแท็กเดี่ยว เวอร์ชั่นเก่า แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <br /> แต่ Html5 ไมต้องมี

– กำหนดชุดตัวอักษรทำได้ง่ายขึ้น เวอร์ชั่นเก่าๆ ต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8 แต่ Html5 เขียนแค่ <html lang=”en”>

หลักของการเขียน HTML5

1.เตรียมเครื่องมือให้พร้อม  เครื่องมือหลักๆ

ในการเขียน Html นั้นมีอยู่ 2 อย่าง คือ Text Editor คือเครื่องมือที่สามารถเซฟไฟล์เป็น Html ได้ อย่างที่สอง คือ Browser ที่มาสารถตรวจสอบองค์ประกอบได้ เช่น Google Chrome หรือ Mozilla Firefox เป็นต้น

2.รู้จักโครงสร้างพื้นฐาน ทุกเอกสารของ Html จะประกอบไปด้วย

<!doctype html> เป็นตัวที่ทำมห้รู้ว่านี่เป็นเอกสาร HTML

<html>  จะเป็นข้อมูลต่างๆ ที่ประกอบไปด้วย <head></head> เป็นข้อมูลที่โหลดก่อน และ <body></body> เป็นข้อมูลแสดงผล ตัวอย่างเช่น เมื่อเราโหลดเข้าไปในเว็บไซต์ๆหนึ่ง ชื่อของเว็บไซต์นั้นจะขึ้นก่อนเสมอ แม้ตัวเว็บจะยังโหลดไม่เสร็จก็ตาม เป็นเพราะว่าชื่อเว็บไซต์แต่ละเว็บนั้นมีข้อมูลอยู่ที่ส่วน <head></head> ข้อมูลที่อยู่ในส่วน <head></head> นั้นจะเป็นข้อมูลที่ใช้ก่อนแสดงผล เช่น เว็บนี้ภาษาอะไร เว็บนี้มีลูกเล่นอะไรบ้าง เว็บนี้จัดรูปแบบสไตล์ใด และในส่วนที่ใช้แสดงเนื้อหา คือถ้าเราพิมพ์ข้อความใดๆ ก็ตามแต่ ใน<body></body> มันจะแสดงข้อความนั้นเป็นปกติ แต่ถ้าเราเว้นวรรคหลายๆ ครั้ง มันจะเว้นวรรคเพียงครั้งเดียว หรือถ้าเราขึ้นบรรทัดใหม่ หรือจัดย่อหน้าใดๆ มันจะไม่แสดงผลตามที่เราต้องการ ดังนั้นสิ่งที่เราควรรู้เพิ่มเติม คือ การใช้ Tag ให้ถูกประเภท

3.ใช้ Tag ให้ถูกประเภท คือ

<html>  จะประกอบไปด้วย 2 ส่วนคือ ส่วนของ <head></head> และส่วนของ <body></body> ซึ่งจะมี Tag หมายๆ Tag ที่ใช้ได้เฉพาะแค่ส่วนนั้น แต่ในหัวข้อนี้เราจะเน้นไปที่ส่วนของแสดงผล หรือ <body></body>  นั่นเอง

นั้นมีหลากหลาย แบ่งง่ายๆ เป็น 5 ประเภท นั่นก็คือ

1.Tag ที่ใช้สำหรับการจัดวาง ไม่ว่าจะเป็นช่องต่างๆ หรือตารางต่างๆ

2.Tag ที่ใช่ในการจัดวางข้อความ หรือ Text นั่นเอง ไม่ว่าจะเป็นหัวข้อ ใส่สี ขึ้นหน้าใหม่ ย่อหน้าใหม่

3.Tag ที่ใช้ในการจัดการแบบฟอร์ม ไม่ว่าจะเป็นการใส่ข้อความต่างๆ หรือปุ่มต่างๆ

4.Tag ที่ใช้ในการจัดการสื่อต่างๆ หรือ media นั่นเอง เช่น รูปภาพ วีดีโอ และไฟล์เสียง

5.Tag อื่นๆ ไม่ว่าจะเป็น สร้างลิ้งค์ สร้างเมนู หรือเรียก web อื่นๆ ให้มาแสดงผล

4.เริ่มฝึกฝนทักษะในการเขียน Html