Mockup-less Web Design การทำเว็บแบบไม่ต้อง Mockup ใน Photoshop !!

Mockup-less Design เป็นเทคนิคการเริ่มทำเว็บไซต์โดยเขียน HTML & CSS เลย ไม่ต้องมาดีไซน์ใน Photoshop ก่อน บริษัททำเว็บไซต์แห่งหนึ่งได้นำมาใช้ในการทำเว็บไซต์ให้ลูกค้าและได้ผลตอบรับดีมาก ผมไปอ่านเจอเทคนิคนี้ในเว็บไซต์ A List Apart และเห็นว่าน่าจะเป็นประโยชน์ต่อหลาย ๆ คน จึงนำมาเรียบเรียงให้ทุกท่านได้อ่านกันครับว่ามันดียังไง

ก่อนอื่นต้องขออภัยที่ห่างหายจากการอัพเดทหน้าเว็บไซต์นะครับ เนื่องจากติดธุระส่วนตัว + มีงานเข้ามา แต่ก็อัพเดทลิงค์ที่น่าสนใจ และแจกของฟรีเกี่ยวกับเว็บดีไซน์ต่าง ๆ ใน Designil Facebook Page อยู่เรื่อย ๆ นะครับผม ไปติดตามกันได้ครับ มีประโยชน์แน่นอน

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 ต่าง ๆ (ใครไม่รู้ว่า Semantics Tag เป็นยังไง อ่านบทความสอนพื้นฐาน HTML5 ได้เลยครับ) แล้วจัดตำแหน่ง + ตกแต่งส่วนต่าง ๆ ด้วย 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 ที่ผมเคยแนะนำไปก่อนหน้านี้ด้วย (อ่านบทความ LESS CSS ได้เลย)

เมื่อลูกค้าโอเคแล้ว แต่ยังต้องการแก้ไขเล็กน้อย การแก้ไขส่วนต่าง ๆ ใน HTML & CSS ก็ทำได้ไม่ยาก เช่น เปลี่ยนสีฟ้อนต์ หรือเปลี่ยนฟ้อนต์ของ Header ทั้งหมด การแก้โค้ดจะเร็วกว่าการแก้ใน Photoshop แน่นอน

บริษัทผู้เขียนบทความหลังจากที่ได้ใช้วิธีนี้กับลูกค้า ก็พบว่าใช้เวลาในขั้นตอนการทำ Mockup เพิ่มอีกประมาณ 35% แต่ลดเวลาในขั้นตอนการเขียน HTML & CSS ของเว็บจริงได้มากถึง 50% ซึ่งถือว่าใช้เวลาได้คุ้มค่า และได้กำไรกว่าแบบเดิมมาก

การ Design = การ Code = การ Design

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

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

อย่างไรก็ตาม บางครั้งอาจเจอปัญหาคนหลายคนแย่งกันแก้ไฟล์เดียวกัน ซึ่งในกรณีนี้ให้ใช้ Git ซึ่งเป็นระบบการเก็บเวอร์ชั่นของไฟล์ไว้หลายเวอร์ชั่น + รวมไฟล์ที่หลายคนแย่งกันเขียน ซึ่งลดปัญหาคนนี้เซฟทับคนนั้นได้มาก

รออะไรอยู่? ลองนำเทคนิคนี้ไปใช้กันเลย

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

อีกอย่าง การทำเว็บไซต์ด้วยขั้นตอนแบบเดิม ๆ ซ้ำไปซ้ำมาก็น่าเบื่อ ลองมาทำเว็บด้วยขั้นตอนแปลก ๆ ใหม่ ๆ กันบ้างก็ไม่เสียหายใช่มั้ยครับ

สำหรับวันนี้ก็ขอจบบทความแต่เพียงเท่านี้ หากท่านใดมีข้อสงสัยสามารถโพสถามในส่วนคอมเม้นท์ได้เลย หรือแวะไปทักทายกันไป Designil Facebook Page ได้นะครับ ^^

บทความอ้างอิง

• Responsive Comping: Obtaining Signoff with Mockups – A list Apart (เรื่อง Mockupless Design)
• Organizing Mobile – A List Apart (เรื่อง Mobile First)