สร้างไฟล์ Element ช่วยในการออกแบบเว็บ

Posted by in Design, Web Design


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


ก่อนเข้าเรื่องให้คำนิยามศัพท์กันหน่อย

  • Sitemap คือ แผนที่ของเว็บไซต์ จะแสดงการเชื่อมโยงหน้าต่างๆเข้าด้วยกัน เป็น flow chart
  • Wireframe คือ ภาพร่างหน้าตาคร่าวๆ และการจัดวาง หรือ layout ของเว็บ ก่อนที่จะ mock up จริงๆ
  • Mock up คือ การออกแบบใส่สไตล์ต่างๆ เพื่อเพิ่มความสวยงาม เช่น สีพื้น, ขนาดอักษร,  ลักษณะของกรอบ เป็นต้น
  • Element คือ ส่วนประกอบต่างๆของหน้าเว็บ เช่น ตาราง, หัวข้อ, breadcrumb, เมนู เป็นต้น
  • Layout file คือไฟล์ mock up หน้าเว็บ ที่เป็นรูปแบบเหมือนหน้าเว็บที่ต้องการให้แสดงจริงๆ บนบราวเซอร์
  • Element file คือ ไฟล์ที่แยกมาเฉพาะ element ต่างๆของเว็บ โดยไม่เกี่ยวข้องกับ layout

 

โดยทั่วไปแล้ว การออกแบบเว็บเราเริ่มจากการร่าง Sitemap ก่อน แล้วเขียน Wireframe ของเว็บ เพื่อกำหนด Layout ที่ต้องการ เมื่อทุกอย่างลงตัวแล้ว เราจึงเริ่มเอา Wireframe มาดีไซน์ความสวยงามเพิ่ม หรือ Mock up เมื่อเสร็จแล้วไฟล์ที่ได้ ก็จะมีหน้าตาเหมือนหน้าเว็บที่เราต้องการแสดงจริงๆ บนบราวเซอร์ จากนั้นเราค่อยตัดรูป แล้วเอาไปขึ้นโครงเว็บด้วย HTML กับ CSS ต่อไป

 

Q: ถ้าเว็บเรามีหน้าเดียว แค่นี้เราก็คงเพียงพอ แต่ถ้าเว็บมีหลายๆหน้าล่ะเราจะทำอย่างไร

A: ง่ายๆ เราก็ก๊อปปี้ไฟล์ต้นฉบับ มาอีกอันแล้วก็ Mock up ส่วนที่ยังไม่มีเพิ่มก็แค่นั้นเอง แต่ถ้าต้องการแก้ไฟล์ต้นฉบับ ก็อาจจะต้องเหนื่อยหน่อย

Q: อ้าว แล้วแบบนี้มีวิธีอื่นที่ดีกว่าหรือเปล่า

A: ถ้าเว็บใหญ่ การแตกไฟล์ตามหน้าของเว็บ คงไม่ได้ผล งั้นมาลองดูเทคนิคที่มาช่วยเรื่องนี้กัน

 

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

 

เราจะแยกเฉพาะ Elements ออกมาได้อย่างไร?

 

 

วิธีการการแยกก็ไม่มีอะไรยากเลย เราอาจออกแบบ element เหล่านี้ใน layout file แล้วค่อยลากไปวางไว้ในอีกไฟล์หนึ่ง ที่รวมเฉพาะ elements เอาไว้ หรือ element file ใน element file ก็จะเสมือนเราได้เห็นทุกๆส่วนของทุกๆหน้าพร้อมกัน เราก็จะควบคุมสไตล์ต่างๆได้ง่ายขึ้น การทำแบบนี้ เราก็จะมี layout file แค่อันเดียว โดยคู่มากับ element file อีกอันหนึ่ง ไฟล์แค่ 2 ไฟล์ แสดงหน้าเว็บได้เป็นสิบๆ หน้า

ในกรณีที่เราอยากแก้สไตล์ เราก็สามารถแก้ได้เลย เพราะเรามีแค่ 2 ไฟล์  ทั้งสะดวกและรวดเร็ว

 

เราจะดู mock up หน้าเว็บเต็มๆได้อย่างไร?

ตรงนี้เราจะใช้ smart object และ layer comps เข้ามาช่วย โดยเราดึง element ต่างๆ จากไฟล์ element file เข้ามาแล้วแปลงให้เป็น smart object (ด้วยการคลิ้กขวาที่ Layer หรือ Group Layer นั้นๆ จากนั้นเลือก Convert to Smart Object) จากนั้นเราก็มาจัดวางมันในตำแหน่งต่างๆที่เราต้องการ เมื่อได้หน้าๆหนึ่ง เราก็สร้าง layer comps ไว้อันหนึ่ง ทำซ้ำไปเรื่อยๆ จนครบทุกหน้า ส่วนไหนที่เราต้องการแก้ เราก็เข้าไปแก้ใน smart object เอา ถ้ามีการเปลียนสไตล์ เราก็แค่ลากไฟล์ใน smart object ไปแทนที่ element นั้นใน element file ก็พอ

หน้าตาของ layer ที่เป็น smart object

 


นอกจากที่พูดมาทั้งหมดแล้ว ยังมีอีก 2 ข้อดีที่พบกับตัวเองก็คือ

  1. เราตัดรูปได้ง่ายขึ้น เพราะรูปที่ต้องตัดส่วนใหญ่รวมไว้ใน element file หมดแล้ว
  2. หลังจากที่เราขึ้นโครงเว็บด้วย HTML แล้ว ตอนที่เราจะใส่สไตล์ด้วย CSS เราก็แทบไม่ต้องเปิด layout file ดูเลย เพราะแค่ element file ก็เห็นสไตล์ได้ครบเกือบหมดในหน้าเดียว

 

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