d64 mockup less web design

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

d64 mockup less web design
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

สอนเทคนิคทำ mockup เว็บไซต์แบบ mockupless

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 ได้นะครับ ^^

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




Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

6 Responses

  1. อ่านเข้าใจง่ายกว่าภาษาอังกฤษเยอะเลย ขอบคุณครับ

    1. ขอบคุณคร้าบ ^^ ผมอ่านจบ 1 รอบแล้วเอามาเรียบเรียงน่ะครับ ไม่ได้อ่านไปแปลไปทีเดียว อยากให้ทุกท่านอ่านแแล้วเข้าใจง่ายที่สุดครับ 

Leave a Reply

Your email address will not be published. Required fields are marked *