บทความนี้ขอให้เครดิตกับบทความ So, You’re a Web Designer, Right?
การทำเว็บสมัยก่อน
ในสมัยก่อนการทำเว็บ flow งานมันจะเป็นแบบนี้
- ออกแบบหน้าเว็บด้วย Photoshop หรือ Illustrator (ด้วยเว็บดีไซเนอร์)
- ตัดภาพออกมาจัดเป็น HTML และ CSS (ด้วยคนตัด css)
- นำมา Implement กับตัวเว็บ (ด้วยเว็บโปรแกรมเมอร์)
แต่พอทำนานๆ เข้า เว็บโปรแกรมเมอร์มักจะพบว่ามันเกิดงานที่การมีซ้อนทับกับงานข้อ 1 และ 2 คืออาจต้องมาแก้ css เพิ่ม เพราะต้องเปลี่ยนความสามารถ ในกรณีเลวร้ายสุดคือรับภาพปุุ่ม 1 ปุ่มมาเพิ่มที่หลังงานที่หลัง
การทำเว็บสมัยนี้
ในบทความข้างบน ได้มีการพูดถึงข้อความหนึ่งที่ค่อนข้างแรงและตรง ซึ่งผมก็แอบเห็นด้วย
“นักดีไซน์ที่ไม่ได้เขียนมาร์คอัพและ css นั้นไม่ใช่การออกแบบเว็บหรอก มันแค่การวาดรูป” – Andy Rutledge
เพราะจริงๆ การออกแบบเว็บ มันก็เป็นการออกแบบการทำงานของเว็บ ไม่ใช่ออกแบบหน้าตาของเว็บ อันนี้คืออีกหนึ่งข้อความที่บทความเขาได้อ้างอิงเอาไว้
“คนส่วนมากมักคิดผิดว่าการออกแบบคือการทำออกมาให้เห็นเป็นยังไง นั้นไม่ใช่สิ่งที่พวกเราคิดเกี่ยวกับการออกแบบเลย มันไม่ใช่แค่ว่าทำให้เห็นเป็นยังไงหรือรู้สึกได้ยังไง แต่การออกแบบคือการคิดว่ามันจะทำงานอย่างไร” – Steve Jobs
โดยในช่วงนี้กระแสการออกแบบหน้าเว็บประเภทการให้ความสำคัญกับมือถือก่อน (Mobile-first) หรือการออกแบบเว็บที่สามารถปรับเปลี่ยนได้ (Responsive design) พวกนี้กำลังมาแรง และดูเหมือนจะแสดงความเป็นมืออาชีพได้ด้วย ทำให้การทำเว็บมันเกิดการร่วมงานกันมากขึ้น ฝ่าย Business ก็ต้องเรียนรู้สิ่งใหม่ๆ เพิ่ม ฝ่ายนักออกแบบก็ต้องคิดให้แตกต่างออกไป และฝ่ายเว็บโปรแกรมมิ่งก็ต้องสร้างมันออกมา …. แต่จริงๆ กับในไทยมันควรเป็นแบบนี้หรือ?
“การออกแบบเว็บก็คือการออกแบบผลิตภัณฑ์” – Andy Rutledge
เรื่องมันเครียดขึ้นครับเมื่อธรรมเนียมไทยดันไม่เหมือนธรรมเนียมต่างประเทศ คนไทยจะมองงานทุกอย่างเป็นสัดเป็นส่วน คนออกแบบก็ออกแบบไป ออกแบบมาก็ตัด css ต่อ สุดท้ายก็มา implement ลง ซึ่งจริงๆ ในไทยงานพวกนี้จะถูกแบ่งออกไป ต่างกับต่างประเทศครับที่ทุกคนจะเป็นลักษณะ Jack-of-All-Trades คือทำได้ทุกอย่างตั้งแต่ออกแบบหน้าเว็บ แต่ง css ยัดเขียน php แสดงออกมาเป็นเว็บ การทำงานแบบ flow อย่างนี้จะเรียกกันว่า end-to-end ทำให้คนทำเว็บแนวนี้สามารถเรียกได้เต็มปากว่านี้แหละ นักออกแบบผลิตภัณฑ์
การทำเว็บในวันพรุ่งนี้
เว็บในอนาคตมันจะเป็นเว็บที่รองรับการเปลี่ยนแปลงสูง เว็บจะไม่ใช่แค่เอกสาร 4 เหลี่ยม อาจจะมี 3D แสดงออกมา อาจจะมีเสียงที่ตอบสนอง ทั้งเว็บดูกลืนกันไปหมด ซึ่งนี้แหละ เราต้องการนักออกแบบผลิตภัณฑ์ ไม่ใช่นักออกแบบหน้าตาเว็บอย่างเดียว และก็ไม่ใช่นักเขียนระบบเว็บอย่างเดียว แต่เป็นคนที่เข้าใจว่าเว็บเป็นยังไงได้ทั้งหมด
แสวงหาจอกศักดิ์สิทธิ์
เรื่องนี้ดูจะเป็นเรื่องอยากถ้าคุณทำงานในองค์กรที่มันมีวัฒนธรรมไปแล้วว่าคุณต้องรับงานอันนี้จากคนนี้มาทำต่อ คุณไม่ได้คิดตั้งแต่เริ่ม และทำจนถึงจุดสิ้นสุด แต่ถ้าคุณเป็นฟรีแลนด์หรือคุณทำบริษัทสตาร์ทอัพ และคุณมีทีมงานของคุณ คุณพร้อมจะเปลี่ยนแปลง สิ่งที่ควรทำคือ
1. เลิกใช้ Photoshop ออกแบบเว็บทั้งก้อน ทั้งกรณีทำ mock up หรือออกแบบเว็บจนเสร็จ เหตุผลคือ
- งานซ้ำซ้อน ในเมื่อคุณต้องไปดูบนหน้าเว็บอีกที ยกเว้นคุณจะส่งไฟล์ภาพให้คนดูในเน็ตแทน
- ลูกค้าไม่ได้ใช้มัน ไฟล์ psd นะครับ ใครใช้?
- คุณไม่สามารถแก้มันได้ทันที ถ้าคุณอยากเปลี่ยนสีปุ่ม แค่นี้ก็หลายขั้นตอนแล้ว
- css น่ะ ของชั้นดีเลย ทำได้ทุกอย่าง
- Photoshop มันแพง
- Photoshop มันมีข้อจำกัด
- Photoshop ไม่มีคุณค่าพอในฐานะการใช้เป็นต้นแบบ ลองคิดว่าคุณอยากทำเว็บแบบ Google+ หรือ Facebook ครับ ไปออกแบบใน Photoshop ดูเอาเอง
- สุดท้าย คุณเริ่มทำเว็บด้วยเนื้อหา ไม่ใช่หน้าตา
แล้วเมื่อคุณเลิกใช้มัน สิ่งที่คุณควรใช้คือการออกแบบเว็บจาก markup เลย แล้วแต่งให้สวยด้วย css หรือถ้าอยากหาเครื่องมือช่วย ทั้ง Bootstrap หรือ Foundation พวกนี้ช่วยลดงานได้มากมาย รวมถึงทำเว็บให้รองรับมือถือได้ด้วย และถ้าใครเคยใช้จะสังเกตได้ ว่าจริงๆ การทำเว็บสมัยใหม่ ปุ่มน่ะไม่ได้ทำด้วยภาพแล้วนะครับ
2. ไอเดียของเขาก็คือไอเดียของเรา อันนี้ไม่มีอะไรมาก คุณเห็นเว็บไหนที่คุณถูกใจ คิดว่ามันดี สิ่งที่ต้องทำคือทำตามเขาเลย อันนี้อ้างอิงจากข้อความหนึ่ง
“หยิบชิ้นส่วนมันออกมา ขโมยชิ้นที่คุณถูกใจ แล้วนำมาประยุกต์กับการทำงานของตัวคุณเอง” – Joni Korpi
ส่วนเรื่องทางเทคนิค อันนี้คงไม่ต้องสอน มันอยู่ที่ประสบการณ์และความตั้งใจ
3. ออกแบบเว็บโดยดูว่าอยากเห็นอะไรจาก browser ไม่ใช่ออกแบบด้วยว่าคุณจะเห็นอะไรจากโปรแกรม ไม่ว่าจะ Photoshop หรือ Dreamweaver เพราะจริงๆ เราดูเว็บจาก browser ครับ ไม่ได้ดูจากโปรแกรมเหล่านี้ และถ้าคุณออกแบบให้รองรับมือถือด้วย ก็ควรจะเทสดูในมือถือไปด้วยกัน
4. ทำตัวให้เป็นพวกช่างสงสัย เว็บเราเดียวนี้เนื่องจากดูได้หลายที่ ถ้าคุณคิดว่าออกแบบเว็บเห็นบนคอมคุณ มือถือของคุณสวยแล้วจบล่ะคุณคิดผิด มีคนใช้หน้าเว็บกับมอนิเตอร์หลายขนาด ใช้กับ browser หลายตัว บางคนยังรัก IE หรือไม่เคยคิดถึงเลยๆ ไม่รู้ว่าตัวเลือกอื่นด้วย
คุณจึงควรออกแบบเว็บให้รองรับกับทุกสถานการณ์ที่อาจจะเกิด และหมั่นศึกษาจากเว็บอื่นๆ ลองใช้ inspector ในการสำรวจและเล่นเว็บคนอื่น เมื่อคุณใช้มันจนคล่อง คุณจะคนพบว่าคุณขนาดมันไม่ได้เลย