สาเหตุที่ Designer ควรเขียนโค้ดเป็น

คงจะมีเพื่อนๆ ในที่นี้ไม่น้อยเลยที่เป็นนักออกแบบเว็บไซต์ (Web Designer) หรือบางคนอาจเป็นคนเขียนเว็บไซต์ (Web Developer) และหลายๆ คนที่ต้องทำงานกันเป็นทีม

การทำงานเป็นทีมหลักๆ แล้วก็จะแบ่งเป็น 2 หน้าที่คือ Web Design กับ Web Development ซึ่งในบทความนี้จะขอพูดถึง Front-end Development เท่านั้นละกัน (ไม่รวมกับการเขียนระบบภายใน) “บทความนี้จะอยู่ในมุมของผมซึ่งเป็นทั้งสองฝ่าย แล้วแต่งานที่ได้รับมา บางทีก็ทำสองอย่างเลย ฉะนั้นลองฟังแง่มุมของผมบ้างละกันนะครับ”

ทำไม Web Designer ควรเขียนโค้ดเป็น ?

ผมเจอมาหลายงานแล้วครับ งานดีไซน์สุดเท่ส์ สวยอย่าบอกใครเลย แต่โค้ดนี่เขียนยากมาก ไม่ใช่ยากแค่เรื่องนำสิ่งที่พวกเขาออกแบบมาเรียบเรียงให้เป็นโค้ด (HTML/CSS) นะครับ แต่อยากในการนำมาเขียนเป็นเว็บไซต์จริงๆ งงละสิ? มาดูเป็นข้อๆ กันดีกว่าครับ

บางคนออกแบบมาไม่ตรงเส้นตรงวา

อันนี้ปัญหาแรกๆ เลยครับ เบี้ยวบ้าง, paragraph ไม่ตรงบ้าง, รูปภาพอยู่ดีๆ ก็อยู่ในจุดที่ไม่ควรอยู่บ้าง ต่างๆ นาๆ พูดง่ายๆ คือ layout ไม่เป็นเส้นตรง

ถ้านักออกแบบเคยเขียนโค้ดเองด้วยก็คงจะเห็นใจในจุดนี้ แล้วออกแบบมาให้คนเขียนโค้ดเรียบเรียง section ได้ง่ายๆ ไม่ต้องมีปัญหาแบบว่า โค้ดอยู่ดีๆ มี layout แปลกๆ เบี้ยวๆ มาอีกละ ต้องมานั่งแก้โค้ดเก่าๆ อีก…

รูปภาพไม่เหมาะสม

นี้เป็นปัญหาหลักๆ ขอแบ่งเป็นข้อๆ ดังนี้ละกัน

รูปภาพในทรงประหลาด

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

รูปภาพใน Photoshop

ผมเจอมาหลายครั้งละปัญหางานใน Photoshop บางคนออกแบบมาเอากราฟิกทับนู่น ซ้อนนี่ โปร่งแสงตรงนั้น โปร่งแสงตรงนี้ สามารถทำได้ แต่ควรให้อยู่ใน Layer เดียวไปเลย และอย่าใช้ Layer properties ต่างๆ เช่น Overlay , Multiply… เพราะ web browser ส่วนใหญ่ยังไม่รองรับพวกนี้ ฉะนั้นกราฟิกแต่ละตัว ควรอยู่ใน Layer เดียวกัน

คุณภาพ / ขนาดของรูป

ถ้าอยากให้คนเขียนโค้ดสบาย ให้ลองเอารูปกราฟิกที่มีคุณภาพสูง ที่สามารถขยายโดยภาพไม่แตกได้ (Photoshop ก็ Covert to Smart Object ก่อนที่จะลดขนาด) เพื่อให้คนเขียนโค้ดสามารถแก้ไขกราฟิกของคุณได้ เมื่อต้องการปรับเปลี่ยนขนาด และจำไว้ว่า ถ้าจะให้กราฟิกในเว็บไซต์ดูไม่แตกในจอ Retina display กราฟิกต้อง x2

ควรออกแบบให้มีช่องว่างข้างๆ เว็บ

อะไรคือช่องว่างข้างๆ เว็บ? มันก็คือช่องว่างซ้ายขวา และตรงกลางคือเนื้อหานั้นเอง

เช่นถ้าในความคิดของเราจะออกแบบเว็บไซต์ขนาดมาตราฐาน 800px ฉะนั้นเราอย่าตั้งขนาดใน Photoshop/Illustrator แค่ 800px แต่ให้ตั้งเพิ่มขึ้นมา สมมติกำหนดช่องว่างข้างละ 200px ก็จะได้ (200 x 2) + 800 = 1200px นั่นเอง นอกจากนั้น เรายังควรออกแบบให้คนเขียนโค้ดรู้ด้วยว่า พอมีช่องว่างข้างๆ นั้นแล้ว รูปแบบของเว็บไซต์จะออกมาเป็นอย่างไร มันจะง่ายขึ้นมากสำหรับคนเขียนโค้ด

ติดตามตอนต่อไป…