MOCKUP-LESS DESIGN คืออะไร
ขั้นตอนในการทำเว็บไซต์ให้ลูกค้า ปกติจะเริ่มจากการดีไซน์ใน Photoshop -> ส่งให้ลูกค้าเช็ค -> แก้ไขจนพอใจ -> แปลง Photoshop เป็น HTML & CSS -> จบด้วยเขียนระบบ PHP หรือทำธีมใส่ CMS หรืออะไรก็ว่าไป ซึ่งตัวดีไซน์ที่ทำใน Photoshop ที่เราส่งให้ลูกค้าดู มีชื่อเรียกว่า Mockup
Mockup-less Design เป็นการเริ่มต้นทำเว็บไซต์โดยไม่ต้องดีไซน์ใน Photoshop ก่อน แต่เราร่างเว็บไซต์แบบคร่าว ๆ ด้วย HTML & CSS แล้วส่งให้ลูกค้าเทสบนบราวเซอร์ได้เลย ซึ่งมีข้อดีที่น่าสนใจหลายอย่างมาก
ลิสต์ก่อนว่าเว็บไซต์เราต้องการสื่ออะไรบ้าง
ก่อนจะเริ่มทำ Mockup ส่งให้ลูกค้าดูได้ เราต้องเริ่มเก็บข้อมูลจากลูกค้าก่อน ดูว่าลูกค้าต้องการสื่ออะไร ต้องการให้คนที่เข้ามารู้อะไรบ้าง เพราะการทำเว็บไซต์ไม่ใช่แค่งานศิลปะที่จะทำให้สวย ๆ อาร์ต ๆ ก็พอ จุดประสงค์หลักของเว็บไซต์คือการ “นำเสนอข้อมูล” ต่างหาก หลังจากพูดคุยกับลูกค้าเรียบร้อยแล้ว เราก็เริ่มลิสต์ได้เลยว่าแต่ละหน้าต้องมีอะไรบ้าง เช่น หน้าแรก ต้องสื่อได้ว่าองค์กรเราทำอะไร ต้องมีเมนู มีส่วนของสมาชิก มีปฏิทินกิจกรรม มีลิสต์บทความน่าอ่าน เป็นต้น
เริ่มร่าง MOCKUP ด้วย HTML
หลังจากลิสต์สิ่งที่เราต้องการในหน้าเว็บมาครบแล้ว ก็ได้เวลานำมันมาจัดเรียงบนหน้าเว็บ ซึ่งการขยับเนื้อหาก้อนนู้นก้อนนี้ไปมาใน Photoshop นี่ค่อนข้างลำบาก แต่ถ้าเป็น HTML & CSS สามารถแก้ไขโค้ดนิดหน่อยก็พอแล้ว เริ่มต้นโดยจัดเรียงเนื้อหาด้วยแท็ก HTML5 ที่เป็น Semantics ต่าง ๆ แล้วจัดตำแหน่ง + ตกแต่งส่วนต่าง ๆ ด้วย CSS แบบง่าย ๆ
สำหรับเทคนิคในการตัดสินใจวางอะไรไว้ตรงไหน บริษัทนั้นเค้าแนะนำให้ใช้การคิดแบบ Mobile-First คือการเริ่มทำดีไซน์สำหรับมือถือก่อน โดยเริ่มคิดว่าในหน้าจอมือถือที่เว็บไซต์เราจะเล็กลงหลายเท่า สิ่งไหนที่สำคัญควรใส่ไว้ในจุดที่เข้าถึงได้ง่าย และสิ่งไหนสำคัญรองลงมาก็นำไปใส่ในจุดอื่น ๆ
หลังจากดีไซน์โดยทำตามหลัก Mobile-First แล้ว ค่อยมาดีไซน์สำหรับเว็บไซต์หน้าจอใหญ่ ซึ่งเราสามารถเพิ่มส่วนอื่น ๆ ให้เหมาะกับการใช้งานบนหน้าจอคอมพิวเตอร์มากขึ้น โดยไม่จำเป็นต้องแก้จากดีไซน์ตอนแรกเยอะเพราะเราสิ่งที่สำคัญเราได้ใส่ไปเรียบร้อยแล้ว
สำหรับการทำ Layout ในขั้นตอนนี้ แนะนำให้ใช้พวก CSS Framework เข้ามาช่วย หรือจะเขียน Framework ขึ้นมาใช้เองก็ได้ ซึ่งความสามาารถสำคัญที่เราจะนำมาใช้คือ Grid ที่ใช้เพื่อวางเนื้อหาบนหน้าเว็บไซต์ (Framework ที่แอดมินเคยใช้ และแนะนำให้ใช้ คือ Twitter Bootstrap หรือ ZURB Foundation)
มาถึงตอนนี้เราจะได้ Mockup ที่เป็น HTML & CSS ซึ่งแน่นอนว่าเมื่อลูกค้าโอเคกับดีไซน์เมื่อไร เราสามารถนำไปเขียนต่อยอดเป็นเว็บไซต์จริงได้เลย
ถึงเวลาแต่งหน้าให้ MOCKUP
ตอนนี้ Mockup ของเราจะเป็นเพียงหน้าขาว ๆ ที่จัดเรียงเนื้อหาเรียบร้อย ไม่มีการใส่ลวดลายสีสัน ซึ่งการตกแต่งสามารถทำได้ง่าย ๆ โดยการจับภาพหน้าจอของ Mockup แล้วโยนเข้าไปใน Photoshop เพื่อทำการตกแต่ง/สร้างกราฟฟิก จากนั้นเซฟรูปออกมาใส่ใน Mockup ของเราอีกที
การทำ Mockup เป็น HTML & CSS ก่อนจะทำให้เรารู้ขนาดของกราฟฟิกที่ต้องการแน่นอน ช่วยลดปัญหาดีไซเนอร์ทำกราฟฟิกขนาดแปลก ๆ มาได้อย่างดี
นอกจากนั้นยังช่วยลดเวลาที่เราต้องขยับส่วนต่าง ๆ ใน Photoshop ทีละ 1 pixel เพื่อหาตำแหน่งที่เหมาะสมที่สุด การใช้ Mockupless Design เราสามารถแก้โค้ดเพื่อดูผลลัพธ์บนบราวเซอร์จริงได้เลยด้วยเครื่องมือในบราวเซอร์ เช่น Firebug / Chrome Developer Tools
การส่งงานให้ลูกค้าจะลำบากขึ้นมั้ย?
การส่ง Mockup แบบ HTML & CSS ให้ลูกค้าดูนี่ง่ายยิ่งกว่าการแนบรูปไปในอีเมลอีก เราแค่อัพโหลดลงโฮสต์แล้วแนบ URL ไปให้ลูกค้าดูบนบราวเซอร์ได้เลย
เทคนิคในการอัพโหลด Mockup แต่ละครั้ง คือ ตั้งชื่อโฟลเดอร์ /v1 ตามไปด้วย เช่น www.designil.com/projects/v1 สำหรับเวอร์ชั่นแรก พอลูกค้าให้ความคิดเห็นมา เราก็แก้ไขแล้วอัพโหลดเข้าไปในโฟลเดอร์ /v2 /v3 /v4 … แบบนี้ไปเรื่อย ๆ จนลูกค้าพอใจ
ข้อดีของวิธีนี้คือเราและลูกค้าสามารถกลับไปเช็คง่ายได้ว่าแต่ละเวอร์ชั่นเป็นแบบไหน ถ้าลูกค้าบอกว่าชอบส่วนไหนของเวอร์ชั่นไหนมากกว่า เราก็เข้าไปก็อปโค้ดมาแปะใช้ได้เลย
แบบนี้จะทำให้ใช้เวลา MOCKUP นานขึ้นมั้ย?
ถามว่าถ้าลูกค้าไม่ชอบ Mockup แม้แต่นิดเดียว เราก็ต้องไปเขียนใหม่หมดใช่มั้ย? ใช่ แต่เหตุการณ์นี้ก็เกิดได้กับการทำ Mockup ด้วย Photoshop เหมือนกัน ถ้าลูกค้าไม่ชอบเราก็ต้องทำใหม่หมด หลายคนอาจบอกว่าการทำใหม่ใน Photoshop ง่ายกว่า อันนี้อย่าลืมว่าการทำ HTML & CSS เดี๋ยวนี้ก็มีเครื่องมือช่วยขึ้นเว็บมากมาย รวมถึง LESS CSS ที่ผมเคยแนะนำไปก่อนหน้านี้ด้วย
เมื่อลูกค้าโอเคแล้ว แต่ยังต้องการแก้ไขเล็กน้อย การแก้ไขส่วนต่าง ๆ ใน HTML & CSS ก็ทำได้ไม่ยาก เช่น เปลี่ยนสีฟ้อนต์ หรือเปลี่ยนฟ้อนต์ของ Header ทั้งหมด การแก้โค้ดจะเร็วกว่าการแก้ใน Photoshop แน่นอน
บริษัทผู้เขียนบทความหลังจากที่ได้ใช้วิธีนี้กับลูกค้า ก็พบว่าใช้เวลาในขั้นตอนการทำ Mockup เพิ่มอีกประมาณ 35% แต่ลดเวลาในขั้นตอนการเขียน HTML & CSS ของเว็บจริงได้มากถึง 50% ซึ่งถือว่าใช้เวลาได้คุ้มค่า และได้กำไรกว่าแบบเดิมมาก
การ DESIGN = การ CODE = การ DESIGN
วิธีนี้จะทำให้ดีไซเนอร์กับโปรแกรมเมอร์ได้มานั่งทำงานร่วมกันมากขึ้น เพราะการทำดีไซน์ไม่ได้เริ่มต้นด้วยการให้ดีไซเนอร์นั่งเทียนต่อสู้กับ Photoshop อยู่คนเดียว แต่เริ่มต้นด้วยการพูดคุยกับโปรแกรมเมอร์ว่าอยากให้เว็บออกมารูปแบบไหน ระหว่างการพูดคุยยังช่วยให้เกิดการแลกเปลี่ยนทัศนคติกันระหว่างโปรแกรมเมอร์กับดีไซเนอร์ ทำให้สองอาชีพนี้เข้าใจกันมากขึ้นด้วย
อย่างไรก็ตาม บางครั้งอาจเจอปัญหาคนหลายคนแย่งกันแก้ไฟล์เดียวกัน ซึ่งในกรณีนี้ให้ใช้ Git ซึ่งเป็นระบบการเก็บเวอร์ชั่นของไฟล์ไว้หลายเวอร์ชั่น + รวมไฟล์ที่หลายคนแย่งกันเขียน ซึ่งลดปัญหาคนนี้เซฟทับคนนั้นได้มาก
รออะไรอยู่? ลองนำเทคนิคนี้ไปใช้กันเลย
