แจกของฟรี

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



ผมไม่ได้เรียนด้านการออกแบบมาโดยตรงนะครับ จริงๆแล้วผมจบมาจากคณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ และแน่นอนครับว่า อาชีพที่ตรงสายที่จบมาก็คือ การเป็น “โปรแกรมเมอร์” แต่ด้วยความที่ผมเองก็ชอบในงานศิลปะ และผมคิดว่าศิลปะมันมีอยู่ในตัวเราทุกคนอยู่แล้ว แม้ไม่ได้จะเรียนจบจากด้านนี้ในมหาวิทยาลัย ก็ไม่ได้หมายความว่าเราจะพัฒนาตัวเองไม่ได้นี่นา  ผมเลยเริ่มศึกษาค้นคว้าด้วยตัวเอง จากการอ่านหนังสือ สอบถามผู้รู้ อ่านจากเว็บ ครับ ผมเลยคิดว่าคำแนะนำเหล่านี้ก็น่าจะมีประโยชน์บ้าง
 
ก่อนอื่นมาทำความรู้จักกันก่อนครับว่า ไอ้เจ้า “เว็บไซต์” เนี่ย จริงๆแล้วมันมีกระบวนการทำอย่างไรถึงจะได้เป็นเว็บสักเว็บหนึ่ง
 โดย ทั่วไปแล้ว การทำเว็บไซต์ จะมีขั้นตอนหลักๆอยู่ สองขั้นตอนครับ นั่นคือ “ขั้นตอนการออกแบบ” และ “ขั้นตอนการพัฒนา” ดังนั้นเพื่อนๆจึงอาจจะเคยได้ยินคำศัพท์เหล่านี้ครับ Web Designer กับ Web Developer สองคำนี้ทำงานแตกต่างกัน  ตัวแรกหมายถึงคนที่ออกแบบเว็บ ส่วนตัวที่สองก็คือคนที่พัฒนาเว็บนั่นเอง
คนที่ออกแบบเว็บ จะเริ่มตั้งแต่การเข้าใจถึงตัวงาน เข้าใจคอนเซ็ปท์ แล้วก็เริ่มออกแบบโดยใช้เครื่องมือต่างๆ  คนที่ทำงานด้านนี้จะต้องมีองค์ความรู้หลายอย่างที่เกี่ยวกับการออกแบบ อาทิเช่น องค์ประกอบเรื่องสี การจัดตำแหน่ง  การคำนึงถึงประสบการณ์ของผู้ใช้ การรู้จักเลือกฟอนต์ที่เหมาะสม การใช้โปรแกรมที่เกี่ยวข้อง เป็นต้น
 
ส่วนคนที่พัฒนาเว็บไซต์ จะเริ่มตั้งแต่ การนำเว็บไซต์ที่ฝ่ายออกแบบออกแบบเรียบร้อยแล้ว มาทำการเปลี่ยนดีไซน์ให้กลายเป็นเว็บ ด้วยการโค้ดภาษาต่างๆ เช่น HTML CSS Javascripts ในฝั่งนี้คนที่ทำงานด้านนี้จะใช้ความรู้ในด้านของภาษาโปรแกรมมิ่งเป็นหลัก ครับ
 
หลังจากที่รู้แล้วว่าแต่ละตำแหน่งมีหน้าที่หลักๆอย่างไร ทีนี้มาดูกันว่า ถ้าอยากจะเป็นนักออกแบบเว็บไซต์ต้องศึกษาอะไรกันบ้าง…

ทฤษฎีพื้นฐานว่าด้วยการออกแบบ
แม้จะมีคนบอกว่า อย่าพยายามยึดกรอบ หัดนอกกรอบบ้างงานจะได้โดดเด่น แต่ว่าถ้าเราไม่รู้จักกรอบ แล้วเราจะหลุดกรอบได้อย่างไร ใช่ไหมละคับ ดังนั้นหากต้องการทำงานออกแบบ ก็ควรจะรู้ว่า เห้ย การออกแบบเนี่ย ต้องรู้อะไรบ้าง เช่น การเลือกใช้สีมีความสำคัญอย่างไร การเลือกใช้ตัวอักษรที่เหมาะสมมีผลอย่างไรกับตัวเว็บไซต์ มันอาจจะฟังดูเป็นคำพูดที่กว้างมาก แต่เพื่อนๆสามารถลองค้นหาอ่านได้ครับจาก Google เช่น web design principles รับรองว่าจะมีเนื้อหาพวกนี้ให้อ่านเพียบเลย

เครื่องมือที่ใช้ในการออกแบบ
พอรู้ทฤษฎีพื้นฐานในการออกแบบแล้ว ต่อมาก็มาเรียนรู้วิธีการใช้เครื่องมือสำหรับการออกแบบเว็บกันครับ โดยทั่วไปเครื่องมือที่เป็นที่นิยมมากๆในการออกแบบเว็บไซต์ ก็คือโปรแกรม Adobe Photoshop ครับ ซึ่งเพื่อนๆก็น่าจะคุ้นเคยกันดี อีกตัวคือก็คือ Adobe illustrator สำหรับโปรแกรมนี้มีไว้ในการออกแบบงานกราฟิกจำพวกเวกเตอร์ไฟล์ (ภาพที่ขยายแล้วไม่แตก) และอีกตัวที่น่าสนใจมากๆก็คือ Adobe Firework ครับ ตัวนี้เป็นตัวที่เอาความสามารถของ Photoshop + illustrator  มาผสมผสานกัน ทำให้การออกแบบเว็บทำได้สะดวกมากขึ้น

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

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

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

เข้าใจข้อจำกัดของเว็บไซต์
สำหรับข้อนี้เราคนออกแบบควรรู้ครับว่า เว็บไซต์ยังมีบางอย่างที่ไม่สามารถจะแสดงผลได้เหมือนที่เราออกแบบ หรือแสดงแล้วอาจจะไม่เหมาะสม ยกตัวอย่างเช่น การเลือกใช้ฟอนต์ครับ ในงานสื่อสิ่งพิมพ์ การเลือกใช้ฟอนต์จำพวกตัวอักษรลายมือ อาจจะอ่านได้ง่าย แต่พอมาอยู่รูปแบบของเว็บไซต์แล้ว ฟอนต์นั้นก็อาจจะอ่านยากมากๆ ก็เป็นการรบกวนและสร้างความรำคาญแก่ผู้ใช้งานด้วย  หรือแม้กระทั่งขนาดของเว็บไซต์เอง เราต้องเข้าใจว่าคนที่เข้ามาดูเว็บไซต์นั้นดูผ่านอุปกรณ์ต่างๆเช่น desktop, laptop หรือ smartphone ตอนที่เราออกแบบเราก็ต้องรู้ว่าไอ้เจ้าแต่ละตัวเนี่ย มันมีข้อจำกัดอย่างไร อันไหนควรเก็บไว้ อันไหนควรตัดออก
 
ผมเคยเจอคนที่ให้ผมเปลี่ยน ดีไซน์ให้กลายเป็นเว็บให้ เมื่อได้ไฟล์งานมา ถึงกับผงะ เพราะว่าไฟล์ใหญ่มากๆๆๆ ผมเลยโทรไปถามว่าทำไมออกแบบเว็บได้ขนาดอลังการงานสร้างขนาดนี้ เค้าตอบว่า เพราะว่าออกแบบในจอ 27 นิ้ว  ซึ่งในความเป็นจริง คุณจะใช้จอขนาดไหนก็เรื่องของคุณ แต่คุณต้องรู้ว่ามาตรฐานของขนาดเว็บเป็นเท่าไหร่  (ทุกวันนี้มีการสร้าง Framework มาช่วยให้นักออกแบบเว็บไซต์ออกแบบเว็บได้ขนาดที่เป็นมาตรฐาน ที่นิยมคือ 960grids ครับ)
 
พอสอบถามไปสอบถามมาเลยรู้ว่า คนที่ออกแบบเว็บไซต์คนนั้นไม่เคยออกแบบเว็บมาก่อน เคยออกแบบแต่เว็บสื่อสิ่งพิมพ์ ทำให้ไม่เข้าใจว่าเว็บไซต์มีข้อจำกัดอย่างไร  เพื่อไม่ให้เกิดเหตุการณ์แบบนี้ เพื่อนๆก็ควรจะศึกษาเรื่องเหล่านี้ด้วยนะครับ

ศึกษา Framework ที่จะช่วยให้ทำงานง่ายขึ้น
เพราะว่าอาชีพออกแบบเว็บไซต์เป็นอาชีพที่เป็นที่ต้องการของตลาดเป็นอย่างมาก (ณ ขณะนี้) แต่ว่าการออกแบบเว็บไซต์ก็ไม่ใช่เรื่องง่ายนัก ดังนั้นจึงมีคนพัฒนาเครื่องมือต่างๆให้บรรดานักออกแบบได้ใช้งานกัน เพื่อประหยัดเวลามากขึ้น ยกตัวอย่างเช่น Framework สำหรับออกแบบเว็บให้มีขนาดที่เหมาะสมและมีสัดส่วนที่เป็นระบบก็ได้แก่ 960grids  เป็นต้นProject Management การบริหารจัดการโปรเจ็คฟัง ดูอาจจะไม่เกี่ยวข้องกับการออกแบบโดยตรง แต่ถ้าเราคิดจะทำงานด้านนี้แล้ว การรู้จักบริหารโปรเจ็ค ก็เป็นสิ่งที่เราควรรู้ครับ เพราะว่าเวลาเราได้งานมาทำเราต้องรู้ว่าโปรเจ็คนี้ควรใช้ระยะเวลาในการพัฒนา นานเท่าไหร่ เราจะได้แบ่งเวลาได้ถูก บางคนบริหารเวลาไม่เป็น ก็ทำให้ทำงานไม่เสร็จ หรือเสร็จก็แบบลวกๆเพราะเวลาบีบรัดตัว  แม้แต่การใช้เวลามากเกินความจำเป็นก็มีข้อเสียครับ นั่นคือ งานจะช้ามาก เงินก็ได้รับช้าด้วยเช่นกัน ฮ่าๆ

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

ที่มา: https://www.buksohn.com/%E0%B8%AD%E0%B8%A2%E0%B8%B2%E0%B8%81%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A.html