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 ซึ่งเป็นระบบการเก็บเวอร์ชั่นของไฟล์ไว้หลายเวอร์ชั่น + รวมไฟล์ที่หลายคนแย่งกันเขียน ซึ่งลดปัญหาคนนี้เซฟทับคนนั้นได้มาก
รออะไรอยู่? ลองนำเทคนิคนี้ไปใช้กันเลย การนำเทคนิคใหม่ ๆ มาใช้อาจทำให้ช้าลงในช่วงแรก ๆ แต่เมื่อใช้คล่องแล้วจะช่วยลดเวลาการทำเว็บไซต์ของเราได้อย่างดี ทำให้เรามีเวลาพักผ่อนมากขึ้นในระยะยาว
อีกอย่าง การทำเว็บไซต์ด้วยขั้นตอนแบบเดิม ๆ ซ้ำไปซ้ำมาก็น่าเบื่อ ลองมาทำเว็บด้วยขั้นตอนแปลก ๆ ใหม่ ๆ กันบ้างก็ไม่เสียหายใช่มั้ยครับ
ที่มา:
http://www.designil.com/mockup-less-design-no-more-photoshop.html
