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

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 ซึ่งเป็นระบบการเก็บเวอร์ชั่นของไฟล์ไว้หลายเวอร์ชั่น + รวมไฟล์ที่หลายคนแย่งกันเขียน ซึ่งลดปัญหาคนนี้เซฟทับคนนั้นได้มาก

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

 992
ผู้เข้าชม

บทความที่เกี่ยวข้อง

ปัจจุบันเรามีโปรแกรมที่จะช่วยสร้าง WEBSITE โดยที่มันจะช่วยทำการใส่ CODE ที่จะสร้าง WEB ให้เอง เพราะฉะนั้นเราแค่ศึกษาวิธีการใช้งานโปรแกรมสร้าง WEBSITE ได้ ก็เพียงพอในการสร้าง WEBSITE ดีๆ ...
2036 ผู้เข้าชม
เว็บไซต์ เป็น แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ
271 ผู้เข้าชม
เทคโนโลยีของ mobile ได้พัฒนาไปมาก แต่ก่อนเราไม่เคยคิดว่าเราจะสามารถทำสิ่งนี้บนมือถือได้ แต่ในวันนี้เรากลับทำได้ สิ่งนี้เองที่ทำให้ mobile users มีความคาดหวังใน mobile ของคนยุคนี้มากขึ้นทุกวันๆ
509 ผู้เข้าชม
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์