การทำต้นแบบความคิดเพื่อสร้าง ‘เว็บ’ และ ‘แอพ’ ให้ตอบโจทย์ SME

ในยุคสมัยนี้เจ้าของธุรกิจหลายรายมองว่า การมีช่องทางสื่อสารออนไลน์แค่เฟสบุ๊ค ไอจี หรือไลน์ ก็น่าจะเพียงพอแล้ว  แต่บางรายก็มองว่าหากมีเว็บไซต์หรือแอพเฉพาะของแบรนด์ ก็น่าจะช่วยให้การจัดระบบระเบียบข้อมูลหรือรูปภาพเป็นไปได้ดีกว่า…แน่นอนว่าอันนี้ก็ขึ้นอยู่กับมุมมองและรสนิยมของแต่ละบุคคล  แต่ถ้าใครคิดอยากจะทำเว็บหรือแอพขึ้นมาอย่างจริงจังแล้วล่ะก็  วันนี้ TCDCCONNECT มีสองเครื่องมือออนไลน์ดีๆ มาแนะนำ รับประกันว่าแม้คุณจะเขียนเว็บหรือแอพเองไม่เป็น แต่คุณก็จะสามารถจะร่าง ‘ต้นแบบ’ ของเว็บและแอพในฝันขึ้นได้  ถือเป็นการเตรียมความพร้อมที่จะส่งต่องานและแลกเปลี่ยนความคิดกับทีมออกแบบในโอกาสต่อๆ ไป

"ในส่วนนี้เจ้าของธุรกิจหลายรายพิสูจน์มาแล้วว่า การร่างแบบให้ชัดที่สุดก่อนจะลงมือผลิตเว็บหรือแอพจริงนั้น จะทำให้ประหยัดได้ทั้งเวลาและต้นทุน เหนือชั้นกว่าการพูดคุยคร่าวๆ แล้ว ‘ทำไปแก้ไป’ เป็นอย่างมาก"

สำหรับในขั้นแรก เรามาทำความเข้าใจกับคำศัพท์บางคำกันก่อน เช่นคำว่า ‘wireframe’ ซึ่งหมายถึงการวาดกรอบโล่งๆ (frame) เพื่อจำลองหน้าจอเว็บหรือแอพอย่างคร่าวๆ  เช่นว่าในหน้านี้จะมีกรอบบนเป็นเมนู กรอบล่างเป็นเนื้อหา ฯลฯ จากนั้นก็ลากเส้น (wire) เพื่อโยงว่าลิงค์ใดจะพาไปต่อที่หน้าไหน เป็นต้น ต้นแบบที่ว่านี้หากเป็นแค่โครงคร่าวๆ เราจะกันเรียกว่า ‘mock up’  แต่หากมีหน้าตาสีสันคล้ายของจริง สามารถลองกดเมนูต่างๆ ได้ (แต่ยังทำงานจริงไม่ได้) เราจะเรียกว่า ‘prototype’ และหากเป็นการออกแบบเว็บที่เปิดดูได้ทั้งใน desktop และ mobile (ซึ่งหน้าตาจะไม่เหมือนกัน) เราจะเรียกว่าเป็นแนว ‘responsive’

WebandApp01.jpg

WebandApp02.jpg

คราวนี้มาทำความรู้จักกับ ‘เครื่องมือ’ ที่สามารถใช้ในการสร้างต้นแบบกันบ้าง  ชิ้นแรกมีชื่อว่า ‘Mockflow’ ใช้ออกแบบเว็บไซต์สำหรับจอคอมพิวเตอร์ (desktop site)  ซึ่งตัวนี้เราสามารถใช้งานบนเครื่องคอมพิวเตอร์เท่านั้น และต้องเปิดบราวเซอร์ Google Chrome ขึ้นมาก่อน  จากนั้นให้เข้าไปที่ chrome.google.com/webstore  เสิร์ชคำว่า Mockflow เลือก Add to Chrome พอติดตั้งเสร็จก็ให้เรียกใช้โดยพิมพ์ที่อยู่เว็บว่า chrome://apps แล้วกดไอคอน MockFlow ได้เลย 
เมื่อเข้าใช้ครั้งแรก ให้เราล็อกอินด้วยชื่อ Gmail แล้วเลือก New Project เราจะพบหน้าจอว่างๆ สำหรับออกแบบ (ที่เข้าใจง่ายมาก) มีเครื่องมือต่างๆ ให้คลิกค้าง ลาก วาง บนจอว่างๆ ทางซ้ายได้ทันที  และหากจัดวางแล้วต้องการให้สิ่งนั้นไปอยู่ฉากหลัง ก็ให้กดเมนู edit ด้านบนและ send to back แต่หากต้องการให้อยู่ด้านหน้าสุด ก็กด send to front …ง่ายๆ แค่นี้

WebandApp03.jpg

WebandApp04.jpg

เครื่องมือแนะนำชิ้นที่สองชื่อ ‘FluidUi’  ใช้ออกแบบเว็บบนมือถือหรือแอพมือถือเป็นหลัก (Mobile web/ Mobile app)  ซึ่งการใช้งานก็คล้ายๆ กับตัวแรก แต่หน้าจอจะเป็นทรงยาวๆ เล็กๆ เหมือนหน้าจอมือถือมากกว่า   ใน FluidUi  นี้เราต้องกำหนดก่อนว่าจะออกแบบให้กับหน้าจอของระบบไหน เช่น ของแอนดรอยด์ หรือของ iPhone เพราะจอจะมีขนาดต่างกัน จากนั้นก็กดเลือกชิ้นส่วนต่างๆ ไปลองจัดวางได้เลย

ข่าวดีของชาว SME คือ เครื่องมือทั้งสองชุดนี้สามารถนำมาใช้งานได้ฟรี แต่มีข้อจำกัดอยู่บ้างเช่น ใน FluidUi เวอร์ชั่นฟรีจะทำได้แค่ 1 แอพ มีไม่เกิน 10 หน้าจอ (ถ้าเราจะทำมากกว่านั้นต้องจ่ายค่าสมาชิกรายเดือน)  ส่วนใน MockFlow จะมีให้แค่กรอบพื้นฐานที่จำเป็น ไม่มีไอคอนสวยๆ หรือแม่แบบสำเร็จรูปต่างๆ ให้ (ถ้าอยากเพิ่มต้องจ่ายเงินซื้อ)  ...แต่เชื่อเถอะว่าถ้าคุณเป็นผู้ประกอบการธุรกิจขนาดย่อมถึงขนาดกลาง (SME) แค่มีฉบับฟรีให้ใช้นี่ก็เพียงพอสุดๆ แล้ว  แถมเรียนรู้ได้ง่ายกว่าด้วย


เครดิตภาพ
https://www.mockflow.com/
https://www.fluidui.com/
https://picjumbo.com
Posted on 8 January 2016

Written By
Designer & Creative

Comments


Written By
Designer & Creative
Share

Comments