4
Dec

เทคนิคทำเว็บให้เร็วขึ้น ด้วยการสร้าง UI KIT

Category: Blog / 685 views

สวัสดีคร้าบผม บักสนกลับมาแล้วครับ หลังจากที่ห่างหายหนีไปเที่ยวต่างประเทศอยู่นาน วันนี้ผมกลับมาพร้อมกับเรื่องเล่าใหม่ๆที่อยากนำมาแบ่งปันให้กับพี่น้องทุกท่านครับ

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

ก่อนอื่นขยายความคำว่า “รูปแบบการนำเสนอที่ไม่ได้หลากหลายเท่าไหร่” เสียก่อน เดี๋ยวคนจะเข้าใจผิด

คือว่าการทำเว็บไซต์มันเป็นการทำเว็บไซต์โดยใช้การออกแบบเพื่อให้ “ตอบสนอง” ต่อพฤติกรรมผู้ใช้งาน ดังนั้น มันจะไม่เน้นแค่สวยงามอย่างเดียว แต่ต้องสวยและใช้งานง่ายด้วยครับ การดีไซน์ประหลาดนอกกรอบ ในบางครั้งเป็นเรื่องที่ดี แต่ในบางครั้ง ก็หลุดโลกมากไปแล้ว user ไม่แฮปปี้ และหนีจากเว็บ แบบนี้ก็ถือว่าเฟลในการทำเว็บครับ ดังนั้น เราจะเห็นว่า เว็บไซต์เดี๋ยวนี้มันเลยมีลักษณะการจัดวางเลเอาท์เริ่มซ้ำๆแล้ว เช่น โลโก้อยู่ซ้าย อยู่กลาง เมนูอยู่ขวามือ อะไรทำนองนี้ นั่นก็เป็นเพราะ user คุ้นเคยกับเลเอาท์แบบนี้แล้วนั่นเอง

และนี่คือที่มาที่ว่าทำไมผมถึงบอกว่า “รูปแบบการนำเสนอไม่ได้หลากหลายเท่าไหร่” นั่นเองครับ

เพื่อให้เห็นภาพ ลองดูรูปแบบ Header ของเว็บสมัยนี้กันดูนะครับ ว่ามีกี่รูปแบบ

อย่างแรก เมนูอยู่ซ้ายขวา โลโก้อยู่กลาง

header1

แบบที่สอง โลโก้อยู่กลาง เมนูอยู่ด้านล่าง

menu2

 แบบที่สาม โลโก้อยู่ซ้าย เมนูอยู่ขวามือ (รูปแบบนี้จะเห็นได้บ่อยสุด)

menu3

แบบที่ 4 โลโก้ และเมนูอยู่ด้านซ้าย เนื้อหาอยู่ด้านขวา

menu4

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

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

และไอ้การนั่งทำ Pattern รูปแบบทั้งหลายนี่แหล่ะครับ เราเรียกมันว่า Ui Kit เช่น ผมก็นั่งทำเลยครับว่า เมนูแบบแรก โลโก้อยู่ตรงนี้ เมนูอยู่ตรงนั้น ส่วนเมนูแบบสอง ก็วางตำแหน่งไว้ตรงนี้ บลาๆๆ และเมื่อจะใช้งานก็แค่เอาไอ้ที่ทำไว้แต่ละส่วนมา “ประกอบกัน” ซึ่งมันทำให้งานเสร็จได้เร็วขึ้นมากครับ ผมมีตัวอย่างเว็บไซต์ที่ผมด้วยการใช้ Ui Kit เพื่อจะบอกว่ามันประหยัดเวลาออกแบบได้มากแค่ไหน

และเลเอาท์ข้างต้นครับ ผมประยุกต์จาก Ui Kit ที่ผมทำไว้ ปรากฎว่ามันลดระยะเวลาในการนั่งทำงานขึ้นได้มากเลยครับ

แล้วถ้าอยากทำ Ui Kit ใช้เองละ ทำไง? 

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

หรือถ้าไม่อยากออกแบบเอง สมัยนี้ก็มี Ui Kit แจกฟรีเยอะแยะมากเลยครับ สามารถค้นหาใน google ด้วยคีย์เวิร์ดดังกล่าวได้เลย

พอใช้ Ui Kit มากๆไป เลเอาท์มันจะเริ่มซ้ำหรือเปล่า?

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

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

หวังว่าเทคนิคนี้จะมีประโยชน์กับท่านผู้อ่านนะครับ ออกแบบแล้วเอามาแบ่งปันกันดูแนเด้อพี่น้อง ^^

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours
ปิดโหมดสีเทา