อยากเป็น Web Design ทำไง [ตอนที่ 2: Pages Layout]

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

 

Intro of Series

หลังจากที่ผมได้สอนกันไปครั่งที่แล้วตอนที่ 1 link เกี่ยวกับการออกแบบว่าสมัยนี้เขานิยมอะไรกัน มาถึงตรงนี้เราจะเริ่มมาพูดเกี่ยวกับ Pages Layout (อาจจะมีเขียนโคดนิดหน่อย) เป็นอีกสิ่งนึงที่จำเป็นต่อก่อนเป็น Web Designer ไม่เพียงแต่ Designer ต้องรู้เท่านั้น Web Developer เองก็ต้องรู้ในตรงจุดนี้เช่นกันเพราะมันมีผลต่อการเขียนโค้ดครับ

 

Why we have to leaning about Pages Layout

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

  1. Static Page Layout
  2. Liquid Page Layout
  3. Adaptive Page Layout
  4. Responsive Page Layout
  5. Elastic Page Layout

 

Static Page Layout

Static Page หรือบางเว็บจะเรียกว่า “fixed” layout  หรือ “fixed width” ซึ่ง Static เป็นคำที่เก่าหน่อย เว็บแบบนี้จะเป็นกำหนดค่าความกว้างแบบตายตัวครับ โดยความกว้างที่มักจะกำหนดเข้าไปจะมี 760px กับ 960px  แต่ส่วนมากเราจะใช้ที่ 960px เพราะจะเหมาะกับหน้าจอที่มีขนาด 1024 x  768 ขึ้นไป และสำหรับ 760px จะเหมาะกับหน้าจอ 800 x 600 ขึ้นไป แต่คิดว่าสมัยนี้จอขนาด 800 คงเหลือน้อยละครับ

สำหรับหน่วยวัดที่ใช้ในการกำหนดขนาดคือ pixels หรือสากลเรียกว่า fixed units ซึ่งไม่ว่าหน้าจอคอมพิวเตอร์หรืออุปกรณ์ใดๆ เข้ามาดูเว็บก็จะมีขนาดเดียวเท่านั่น และปัญหาของมันคือยิ่งจอเล็กก็จะทำให้เกิดสกอบาร์เลือนซ้าย ขวา ทำให้หน้าจอเล็กจะดูเว็บได้แบบไม่เต็มจอนั่นเอง 

สำหรับการเขียนโค้ดนั่นสำคัญมากถ้าเรา fixed width จะต้องทำให้เว็บนั่นแสดงผลอยู่ตรงกลางจอนะครับ (ดูตัวอย่างด้านล่าง) ปกติโค้ดก็จะใช้ margin: 0 auto;

 

กดดูเต็มจอ link

 

Liquid Page Layout

ตัวนี้อ่านว่า “ลิควิด” ที่แปลว่าของเหลวนะครับ หรือชื่ออื่นๆ สมัยนี้จะเรียกกันว่า “fluid” หรือ “fluid width” และอีกคำนึงจะไม่ค่อยมีเว็บไหนพูดถึงแล้วคือว่า relative layout เก่าพอๆ กับคำว่า Static เลยครับ ตัวนี้จะใช้หน่วยวัดเป็น % (percentages) คำสากลเรียกว่า relative units หรืออาจจะใช้ em ก็ได้ ซึ่งการออกแบบเว็บแบบนี้จะทำให้หน้าเว็บ ปรับเปลี่ยนไปตามขนาดของจอที่เปิดเว็บได้  และการเซตค่าระยะห่าง หรือด้านที่เกี่ยวกับความยาว หรือเว้นระยะซ้ายขวา Designer หรือ Web Developer ต้องใช้ % ทั่งหมด

กดดูเต็มจอ link

 

Adaptive Page Layout

ตัวนี้จะออกแนวยืดหยุ่นหน่อยโดยเราจะใช้ CSS media queries ในการจับขนาดของหน้าจอและแสดงผลตามที่เขียนไว้ในแต่ละหน้าจอ สำหรับหน่วยวัดเราก็ยังคงใช้ fixed units เหมือน กับ Static แต่แตกต่างกันนิดนึงที่ Static เรามี fixed width อันเดียว แต่ Adaptive เรามีหลายขนาดหลายหน้าจอนั่นเองครับ

กดดูเต็มจอ link

 

Responsive Page Layout ( ปัจจุบันกำลังได้รับความนิยม )

ตัวนี้จะเขียนหมือน Adaptive เลยครับ ใช้ CSS media queries เหมือนกัน แตกต่างกันที่หน่วยวัดเราจะใช้ relative units ( % / em) นั่นเอง แนวคิดการออกแบบตัวนี้มาจากการเอา Adaptive มารวมกับ Liquid เพื่อให้ตอบสนองต่อหน้าจอที่มีหลายขนาด และการเขียนโค้ดเราจะใช้การกำหนดขนาดความกว้างให้มีขนาดเดียว จะไม่เหมือน Adaptive ที่เราจะกำหนดให้มีหลายๆ และการแสดงผลจะให้ความนุ่นนวลต่างกันตัวอย่างเช่น ผมขอไปเอาบทความของ CSS-Trick มาให้ดูนะ

ที่มา link

จากรูปสีเหลี่ยมบนคือเขียนโค้ดด้วย Responsive style อันล่างจะเป็น Adaptive style จะเห็นว่าแตกต่างกันสิ้นเชิง และให้ User Experience (UX) ที่แตกต่างกันด้วย

กดดูเต็มจอ link 

 

Elastic Page Layout

ตัวนี้เป็นเหมือน Responsive ครับ ใช้หน่วยวัดเหมือนกันแต่เราจะใช้ em แทน % ทำไมน่ะหรอ? ขอเท้าความกลับไปนิดนึงในการทำให้เว็บแสดงผลได้ทุกหน้าจอ นอกจากการเขียนโค้ดหรือออกแบบขนาดของ element ต่างๆ แล้วยังมีเรื่องขนาด font , media อีกด้วย ซึ่งถ้าหากเราใช้ Responsive ในทุก CSS media queries เราจะต้องมีการเขียนกำหนดขนาดลงไปในนั่นด้วยจึงเกิดความยุ่งยากนิดนึง แต่ em นั่นก็มาทำให้ความยุงยากตรงนี้หายไป แต่ก็เพิ่มความยุงยากมาเหมือนกันเพราะขนาดของ em อิงจาก font-size ครับ ยกตัวอย่างเช่นถ้าผมกำหนดให้เว็บมี font-size เป็น 16px นั่นหมายความ 1em จะเท่ากับ 16px นั่นเอง เดียวมาดูตัวอย่างกัน

ปล. Designer คนไหนยังเขียน HTML / CSS  ไม่ได้แนะนำให้ข้ามไปยกเว้น Developer ไม่มีปัญหา

กล่องแรก (อย่าลืมกดที่แทบ CSS และ html ) ผมกำหนดให้ html: font-size: 16px;  จากนั่นกล่องหมายเลข 1 ( ดูที่ parent1 ) ผมกำหนดความกว้าง ความสูง 4em มันก็จะเอา 16 (font html) มาคูณกับ 4 กล่องแรกจึงมีขนาด 64 x 64 ครับ

กล่องทีสอง ผมกำหนดให้มี parent2 , child และผมกำหนดค่าใหม่ให้ parent2 มีขนาด font เป็น 26px โดยไม่เอาขนาดของ html คือ 16px มาใช้ และผมกำหนดขนาดของ child เป็น 1em แปลว่า 26 x 1 = 26 ดังนั่นผมก็จะได้กล่องขนาด 26 x 26 นั่นเองครับ

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

ลองดูตัวอย่างเว็บที่ทำด้วย em ดูครับ www.clearleft.com และลองปรับขนาดบราวเซอร์ดูจะพบว่า font เปลี่ยนไปตามขนาดหน้าจอและการปรับหน้าเว็บก็เหมือน Responsive เลย

 

What is CSS media queries

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

 

What is a right page layout you should use?

คงบอกไม่ได้ว่าเราควรออกแบบด้วย layout แบบไหน เพราะแต่ละแบบก็มีการแสดงผลที่ต่างกันออกแบบ แก้ปัญหาแต่ละแบบบางที่เว็บที่ Modern ก็ไม่จำเป็นต้อง Responsive ก็ได้ เราอาจใช้แค่ fixed ก็ได้ มันขึ้นอยู่กับหลายๆ ปัจจัย แล้วแต่ความต้องการและการตกลงระหว่าง Designer , Developer , Marketing , Customer คุยกัน ดังนั่นเลือกให้ถูกงานคุณก็จะดูเป็นมือโปรได้เหมือนกันครับ

เพิ่มเติมสำหรับใครอยากลองเล่นหน้าจอเว็บแต่ละแบบ ลองเล่นเว็บนี้ได้ครับ www.liquidapsive.com มุมขวามีให้ปรับมุมมองแต่ละ layout ด้วยแล้วลองปรับขนาดจอเล่นดู

 

If you are designer and you don’t know about how to coding, What should you do?

ถ้าคุณเป็น Designer ที่เขียนโค้ดไม่เป็น คุณจะออกแบบไปให้ Developer ยังไง ???? ปกติแล้วคนที่จะเป็น Web Designer ผมแนะนำว่าคุณต้องเขียน HTML/CSS เป็นนะครับ ย้ำว่าแค่ HTML/ CSS เพราะว่าคุณจะได้รู้กระบวนการคิดและวิธีการเขียนโค้ดในแต่ละ layout  และมันจะทำให้คุณออกแบบได้ถูกวิธีการของแต่ละ layout และสามารบอกกับ Developer ที่คุณส่งงานไปให้เขาได้ถูกต้องครับ และยังทำให้คุณรู้ว่างานที่คุณออกแบบมันเขียนเป็นโค้ดได้ไหม เพราะคุณสามารถเปิดหาโค้ด หรืองานที่คนอื่นทำไว้และแกะโค้ดเขาได้ หรือเอามาเป็นตัวอย่างการออกแบบได้ (สำคัญนะครับ)

แล้วเขียนไม่เป็นละ จะเริ่มมันก็นานกว่าจะเข้าใจ แค่ออกแบบก็ไม่มีเวลาหัดเขียนโค้ดแล้ว ผมแนะนำว่าทุกๆ การตัดสินใจในการออกแบบระบบหรือออกแบบ UI ควรมี Developer ที่รับผิดชอบงานนั่นๆ หรือเชียวชาญด้านๆ นั้นเข้าร่วมคุยด้วย เหตุผลเพราะ Developer เขาทำงานอยู่กับคอมพิวเตอร์ดังนั่นเขาจะรู้ว่าในงานที่คุณกำลังจะทำมีความเป็นไปได้ที่จะทำมันให้เสร็จทันไหม และมันสามารทำมันได้หรือป่าว และเขายังบอกได้อีกว่า Design Guild-line ของแต่ละ platform  ที่ถูกต้องตามระบบสากลควรทำยังไง ถ้าคุณเป็นมือใหม่เรื่องการออกแบบหรือไม่แน่ใจในการตัดสินใจ นอกจากนี้ยังช่วยให้การประเมินระยะเวลางานเป็นไปได้อย่างถูกต้องด้วย  ก่อนจบผมแนะนำว่า Developer เองก็ต้องเข้าใจกระบวนด้านออกแบบด้วย และ Designer เองก็ต้องเข้าใจกระบวนทำงานด้านคอมพิวเตอร์ด้วย

 

จบแล้วนะครับมีเขียนโค้ดด้วยละ Designer คงปวดหัวแย่กว่าจะอ่านจบ แต่ผมย้ำอีกทีว่าการที่คุณเขียน HTML/CSS ได้มันจะทำให้คุณออกแบบได้ถูกวิธี ถูกหลัก และยังทำให้คุณพัฒนาตัวเองได้อีกไกลนะครับ ปัจจุบันตำแหน่งงานด้าน Web Designer สกิลขาดไม่ได้คือ HTML/CSS นะครับ ยังไงมีเวลาก็ฝึกสักวันละ ชม. ก็ได้นะครับ หรือถาม Developer ใกล้ๆ ตัวคุณให้เขาสอนก็ได้ครับ ฝากไว้เท่านี้เจอกันใหม่ตอนที่ 3 ครับ

Facebook Comments