From The Editor
คนไม่เก่งที่อยากเรียนรู้ กับ คนเก่งที่ไม่อยากเรียนรู้ พอถึ ง ตอนที่ จ ะต้ อ งเลื อ กรั บ เพื่ อ นร่ ว มที ม ใหม่ เรามักจะสนใจคนที่ทำ�งานมาหลายอย่างมากกว่า คนที่ทำ�งานตรงสายมาอย่างยาวนาน
ฮ็อบบิซมีคนในทีมที่จบเศรษฐศาสตร์ เคยท�ำงานเป็นแอดมิน ท�ำบริษัทโลจิกติกส์ ขายครีม (ทั้งๆที่ตัวเองไม่ได้ชอบทา) สนใจ เป็นเซลส์ และมีความฉงนว่าสายการตลาดเค้าท�ำอะไรกันบ้าง? เราชวนเค้ามาท�ำงานโดยที่เราเองก็ไม่รู้หรอกว่าจะท�ำได้ไหม แต่ให้สัญญาได้แน่ๆว่า น้องจะได้เรียนรู้สิ่งใหม่แน่นอน Pimpojanard Prinyapatpakorn
ผ่านมาสองปี หลังจากที่ได้ลองผิดถูกมาหลายเคส ฮ็อบบิซก็ได้ Project Manager คนเก่ง ที่รู้รอบด้านพร้อมทุกงาน และ เข้าใจในวัฒนธรรมองค์กร เพราะอยู่กันมาตั้งแต่แรก ส�ำหรับบริษัทอื่น เค้าอาจจะเป็น Liability (ภาระ) แต่ส�ำหรับ ฮ็อบบิซตอนนี้เค้าคือ Talent ที่หาได้ยากในตลาดแรงงาน นอกจากนี้ีเรายังมีดีไซน์เนอร์ที่เคยดีลงานผ่านอีเมล เค้าเป็น กราฟฟิกที่โรงพิมพ์ ส่วนตอนนั้น เราเป็นอาร์ตไดที่บริษัทที่ มั่นใจมาก (ทั้งๆที่ไม่เคยเห็นหน้านั่นแหละ) ว่าถ้าสั่งงานผ่าน บริษัทนี้แล้วให้เค้าปรู้พสีให้ก็จะไม่ต้องห่วงเลย พอมาท�ำงาน ด้วยกัน ใครจะไปรู้ว่าเค้าเป็นคนที่มีพรสววรค์ด้านการใช้สีใน งานมากๆ (น่าจะเพราะเคยเห็นงานมาเยอะ) และวางงานแนว Material ได้ดี ถ้ามอง Resume ผ่านๆ ก็อาจจะเป็นแค่ Graphic Designer คนนึง เพราะแค่ค�ำว่า "ชอบงานเว็บและอยากเรียนรู้ว่ามันจะ เป็นยังไง" ก็ท�ำให้เราไม่ลังเลที่จะเอาเข้าทีมเลย และก็รู้สึกว่าคิดไม่ผิดเลย รู้สึกสนุกทุกครั้งที่เค้าเอาอะไรใหม่ๆ มาใส่งาน ให้รู้สึกว่าเว็บไม่ใช้แค่ก้อนกล่องๆ เหมือนตีมเท่านั้น แม็กกาซีนเล่มนี้ก็เช่นกัน หากดูเผินๆก็อาจจะเป็นหนังสือ บางๆเล่มหนึ่ง แต่จริงๆแล้วมันคือ ผลลัพธ์จากการท�ำงาน อย่ า งหนั ก ของที ม ที่ ม ากไปด้ ว ยความหลากหลายทางทั้ ง ประสบการณ์ และ ความรู้ แต่มีจุดมุ่งหมายเดียวกันคือ การ ท�ำงานที่ดี ที่มีความหมาย และใช้งานได้จริง CONTACT US บริษัท ฮ็อบบิซ จำ�กัด อาคาร พร้อมพันธ์ 3 ชั้น 2 ห้อง 206-207 ลาดพร้าว ซอย3 ถนนลาดพร้าวจอมพล จตุจักร กรุงเทพ 10900
3
MILLION WAYS TO BUILD A WEBSITE เสกเว็บไซต์อย่างไรให้ คุ้มค่าเงิน
01
7
WHAT IS REACT? ภาษารีแอค คืออะไร? และทำ�ให้เว็บเราโหลดไว อย่างไรบ้าง?
e-mail : hello@hobbiz.co.th tel : 089 822 1223
9
facebook : hobbizdigital Instagram : @hobbizdigital
11
17
TOP 10
IN REVIEW
A BEAUTIFUL WEBSITE THAT UNDERSTANDS REAL BUSINESS
ABOUT HOBBIZ
เว็บไซต์ และไอจีสุดสวยที่ เราคัดแล้วว่า น่ากดติดตาม
(หน้า) สวย (โค้ด) สะอาด และปรนนิบัติคุณได้ มากกว่าใคร
ทำ�ไมถึงควรใช้บริการ ชองเรา ?
THE HARD WORK | VOL. 1
ฮ็อบบิซรับออกแบบ และพัฒนาเว็บไซต์ ที่ให้คุณได้มากกว่าความสวยงาม ฮ็อบบิซ เป็นบ้านที่รวบรวมคนตัวเล็กๆที่มีความรัก และความชอบในการดีไซน์เว็บไซต์ และพัฒนาเว็บไซต์ โดยทุก คนมีสิ่งที่เหมือนกันคือเป็นคนชอบท�ำงาน ชอบความสนุกสนาน ชอบความเป็นระเบียบเรียบร้อย และชอบความ สมบูรณ์แบบ ท�ำให้ทุกอย่างที่ส่งต่อไปจนถึงมือของผู้ใช้งานจริงนั้นต้องเป็นของที่ดีสุด ใช้งานได้จริง และเหมาะสม กับกลุ่มผู้ใช้โดยยังคงคอนเซ็ปต์และผสมผสานไอเดียหลักของโปรเจ็คต์ไว้ได้อย่างลงตัว
Content-Ready Website
Integration Ready
เว็บไซต์พร้อมใช้กับเนื้อหาที่ใช่ รวดเร็ว ถูกต้องแบบมืออาชีพ
ให้ค�ำปรึกษา พร้อมเชื่อมต่อกับทุกระบบ อย่างใจต้องการ เช่น CRM หรือ Live Chat
Precise and Punctual
Beautify Functionality
มีไทม์ไลน์ที่ชัดเจน ส่งงานที่ตรงเวลา มีการอธิบายที่มาที่ไป ตามตัวได้
ไม่ว่าจะเป็นบรรจุภัณฑ์ แบรนดิ้ง รวมถึงอุปกรณ์ส่งเสริมการขาย เรายินดีบริการด้วยทีมงานมากประสบการณ์
ลดความเสี่ยงจากปัญหาที่มักเกิดจาก บริษัทประหยัดงบหรือ Freelance
เสกเว็บไซต์อย่างไรให้คุ้มค่าเงิน
MILLION WAYS TO BUILD A WEBSITE
ro Like a P
10
฿
ถ้าเริ่มไม่มีเวลาท�ำเว็บแล้ว อยากลองหาบริการที่มีคนนั่งท�ำให้สะดวกกว่า เพียง แค่คุณเตรียมเนื้อหาที่จะมี พร้อมทั้งแบบในใจไว้สักสองสามเว็บ เราก็สามารถ จ้างฟรีแลนซ์ท�ำเว็บไซต์ที่ราคาไม่แพง และไม่จ�ำเป็นต้องจ่ายรายเดือนได้แล้ว! เหมาะกับใคร ?
เจ้าของธุรกิจที่กล้าเสี่ยง และมองหาความคุ้มค่าในการจ้างงานเว็บไซต์ ข้อควร ระวังคือเราแทบจะไม่รู้เลยว่าฟรีแลนซ์ที่เค้ารับงานเราอยู่นั้นเป็นคนอย่างไร มีความรับผิดชอบมากไหม และในหนึ่งเดือนนั้น เค้ามีงานอยู่ในมือทั้งหมดกี่ ชิ้น ในกรณีที่ราคาค่าจ้างนั้นถูกมากๆ (ต�่ำกว่าหลักหมื่น) เพราะฉะนั้นระยะ เวลาในการส่งงานอาจจะไม่ตรงตามก�ำหนดการที่ตกลงไว้ อย่างไรก็ตามตัว เว็บไซต์ที่ได้มาสามารถใช้ร่วมกับมาตรฐานระบบบริการอื่นๆ เช่นการท�ำ Email Marketing สามารถต่องานได้ ไม่ต้องลงทุนท�ำระบบใหม่ทั้งหมด
03
THE HARD WORK | VOL. 1
6
แน
สวยงาม/เทคโนโลยี ประหยัดเวลา ความสะดวกสบาย ราคาไม่แพง
คะ
แน
5
คะ
สวยงาม/เทคโนโลยี ประหยัดเวลา ความสะดวกสบาย ราคาไม่แพง
เครื่องมือทำ�เว็บไซต์สำ�เร็จรูป น
ฟรีแลนซ์
น
ความจริงวิธีท�ำมันมีมากกว่าการไปสร้างเพจเฟสบุ๊คเท่านั้นนะ การท�ำเพจเฟสบุ๊คอาจจะไม่เสียค่าใช้จ่าย แต่จะ ไม่ได้ตอบโจทย์จริงๆเท่าไหร่นัก วันนี้เราจะมาพูดถึงวิธีการสรรสร้างเสกเว็บไซต์โดยอิงจากงบลูกค้าพร้อมทั้งค�ำ แนะน�ำว่าการสร้างเว็บวิธีประเภทไหนเหมาะกับสถานการแบบใดมากที่สุดค่ะ
10
฿฿
สวยงาม เรียบง่าย หน้าตาดูดี สามารถแก้ไขเนื้อหาได้ตลอด เครื่องมือ สร้างเว็บส�ำเร็จรูปพวกนี้ก็จะมีเช่น Wix, Weebly และ Squarespace ซึ่งมีรูปแบบหลากหลายให้เลือกสรร และพอเลือกรูปแบบที่ต้องการ เสร็จแล้ว เราก็สามารถปรับแก้ Drag and drop เนื้อหาและรูปภาพที่ เราต้องการได้ทันที แน่นอนว่าถ้าท�ำแล้วไม่workเราก็สามารถเปลี่ยน เป็นรูปแบบอื่นได้ทันทีเช่นกัน ค่าใช้จ่ายก็ถูกแสนถูก เช่น เริ่มจากฟรี เว็บ (โดยที่ติดลายน�้ำ) ไปจนถึงไม่กี่ร้อยบาทต่อเดือน เหมาะกับใคร ?
เจ้าของธุรกิจขนาดเล็กถึงกลางที่ไม่ต้องการลงทุนมากในขั้นต้น ต้องการลองตลาดและเริ่มต้นอยากมีตัวตนบนโลกออนไลน์ที่สวยงาม และดูอินเตอร์ มีเวลาสามารถนั่งท�ำด้วยตัวเองโดยที่ไม่ได้แคร์การ ปรับแต่งหรือการ Integrate กับเพิ่มฟีเจอร์กับระบบอื่นๆมากนัก ไม่ ได้ซีเรียสเรื่องการปรับแต่ง SEO มาก ต้องการเว็บไซต์เพื่อแสดง ข้อมูลทั่วไป
10
฿฿-฿฿฿
เหมาะกับใคร ?
บริษัทที่ต้องการความเป็นมืออาชีพ มีความรู้ความ เชี่ ย วชาญที่ เ ชื่ อ ใจได้ ม ากกว่ า ฟรี แ ลนซ์ ซึ่ ง อาจจะเป็ น นักศึกษาจบใหม่ หรืออาจจะยังไม่มีประสบการณ์มากนัก อย่างไรก็ตามบริษัทรับท�ำเว็บโดยเฉพาะอาจจะขาดมุมมอง ภาพรวมด้านธุรกิจ เช่น การตลาดแบบองค์รวมซึ่งจะ กระทบงานขายและงานพัฒนาสินค้าในอนาคต
การทำ�เพจเฟสบุ๊คไม่เสียค่าใช้จ่าย ก็จริง แต่อาจไม่ได้ตอบโจทย์เท่าไหร่นัก เนื่องจากเนื้อหาถูกดันลงไปเรื่อยๆ ลูกค้าหาข้อมูลยากแน่นอน
10
฿฿฿
ส่วนใหญ่บริษัทประเภทนี้จะเน้นการท�ำเว็บไซต์ที่สวยงามตั้งแต่ต้น มีความ ยืดหยุ่นมากกว่าการใช้ธีมทั่วๆไปในด้านการออกแบบหน้าตาเว็บ (UI) มี การท�ำการบ้านในเรื่องของประสบการณ์ของผู้ใช้งาน (UX) ทั้งในระหว่างใช้ อยู่และหลังจากที่ออกจากเว็บไปแล้ว รวมถึงบางบริษัทก็จะมีความรู้ในด้าน การท�ำการตลาดออนไลน์ และเทรนด์ทั้งในและนอกประเทศได้เป็นอย่างดี แต่อาจจะขาดในเรื่อง Media Planning ลงทางสื่อด้านอื่นๆ ส�ำหรับผู้ ประกอบการที่วางแผนจะท�ำสื่ออย่างครบวงจรในคราวเดียว เหมาะกับใคร ?
เจ้าของกิจการที่ต้องการความสวยงาม Timeless พร้อมทั้งมีความรู้ความ เข้าใจลึกซึ้งเกี่ยวการท�ำเว็บไซต์ในเรื่องของเทคโนโลยีและพฤติกรรมของผู้ เข้าชม มีความยืดหยุ่นสูงในเรื่องของการท�ำเว็บไซต์ให้เข้ากับประเภทธุรกิจ เนื่องจากสามารถแนะน�ำในเรื่องของเนื่้อหาและความเหมาะสมอื่นๆได้ มี เวลาให้ร่วมกันคิดวิเคราะห์ เพื่อผลลัพธ์ที่ดีที่สุดประมาณ 1-2 เดือนขึ้นไป ตามความซับซ้อนของแต่ละโปรเจค
8.5
แน
คะ
สวยงาม/เทคโนโลยี ประหยัดเวลา ความสะดวกสบาย ราคาไม่แพง
สวยงาม/เทคโนโลยี ประหยัดเวลา ความสะดวกสบาย ราคาไม่แพง
8.5
น
บริษัทโฆษณา เอเจนซี่
Digital Production House
น
ลดความเสี่ยงในการชิ่งงานหนีหายไปอย่างแน่นอนด้วยการเป็นบริษัท โดยแลก มากับค่าใช้จ่ายที่เพิ่มขึ้นนิดหน่อย ซึ่งค่าใช้จ่ายในการท�ำขึ้นอยู่กับว่างานนั้นๆมา จากธีมส�ำเร็จ เขียนขึ้นมาเอง และต้องค�ำนึงหลายๆอย่างเช่น 1) เทคโนโลยีที่น�ำ มาใช้นั้นมีความทันสมัยมากน้อยเพียงใด เพราะทั้งหมดนี้มีผลต่อการแสดงผลใน กูเกิ้ล หรือบางครั้งอาจจะส่งผลถึงความปลอดภัยของเว็บนั้นๆด้วย 2) ระบบ จัดการข้อมูลหลังบ้าน ว่าเป็นอย่างไร ใช้ง่ายไหม รวมถึง ยืดหยุ่นแค่ไหนอีกด้วย
คะ แน
สวยงาม/เทคโนโลยี ประหยัดเวลา ความสะดวกสบาย ราคาไม่แพง
7
คว าม คุ้ม ค่า
บริษัทรับทำ�เว็บไซต์
10
฿฿฿฿
นอกจากหน้าตาที่สวยงามแล้ว ทางเอเจนซี่ก็จะมี Data หรือ Research ที่ จ�ำต้องรู้เพื่อการพัฒนากลยุทธ์การตลาดให้เป็นไปอย่างมีแบบแผนและ วัดผลได้ เช่น การสร้างเนื้อหาบนเว็บที่เหมาะสม และการหา Media หรือ Influencer ต่างๆ เพื่อลงโฆษณา และเพิ่มยอดวิวให้มากขึ้น เหมาะกับใคร ?
บริษัทขนาดกลางเป็นต้นไปที่มีเงินทุน มั่นใจในสินค้าและตลาด ของตัวเองแล้ว และต้องการโฆษณาสินค้าหรือบริการให้เติบโตไป อย่างครบวงจร โดยมีเว็บไซต์ที่สวยงามและตอบโจทย์ทางธุรกิจได้ อย่างครอบคลุม
WORK HARD & STAY HUMBLE
เป็นอย่างไรบ้างคะ ส�ำหรับ 5 วิธีในการสร้างเว็บไซต์บริษัท (หรือส่วนตัว) ของตนเองโดยอิงจากงบที่มีและความเหมาะ สมในด้านเวลาและเป้าหมายในการพัฒนาเว็บไซต์ แน่นอนว่า หากผู ้ ป ระกอบการท่ า นไหนสนใจบริ ก ารรั บ ท� ำ เว็ บ ไซต์ ที่ เชี่ยวชาญในเทคโนโลยี และค�ำนึงถึงหลักการทางธุรกิจใน ภาพรวม เพื่ อ การท� ำ ธุ ร กิ จ บนโลกออนไลน์อย่างยั่งยืน สามารถปรึกษาทีมงาน HOBBIZ ได้เลยค่ะ
04
Show Case
CHULA TRANSPARENCY WEBSITE
จะทำ�อย่างไรให้เว็บไซต์ที่นำ�เสนอข้อมูลจำ�นวนมาก ดูน่าอ่าน และน่าค้นหาในเวลาเดียวกัน? โจทย์ง่ายๆ ที่ทีมเราใช้เวลาในการดีไซน์ รวมไอเดีย และพัฒนากันหลายรอบ เพราะเว็บที่น�ำเสนอข้อมูลนั้น มีจุดประสงค์เพื่อ ให้ผู้ใช้เว็บไซต์เข้าถึงข้อมูลให้ง่ายที่สุด และรวดเร็วที่สุด เราจึงจัดการน�ำปุ่มที่ส�ำคัญทั้งหมด ใส่เข้าไว้ในต�ำแหน่งที่หาเจอง่าย มี ขนาดที่ดึงดูดสายตา แต่ยังเรียบร้อย และมีความเป็นจุฬาอย่างชัดเจนรวมเข้าด้วยกัน www.transparency.chula.ac.th
05
THE HARD WORK | VOL. 1
Show Case
TYPOGRAPHY
Thai
Prompt Bold Prompt Regular
COLORS
สีชมพูที่ใช่ ไม่ได้หากันง่ายๆ
หลังจากประชุมเรื่องการจัดระเบียบข้อมูล การวางระบบค้นหา และ การเตรียมการข้อมูลทั้งหมดแล้ว ทีมดีไซน์เนอร์ก็คิด Mood & Tone ของ เว็บไซต์อย่างเร่งด่วน เว็บไซต์ทางการที่ดูเข้าถึงง่าย เป็นระเบียบ และ โดดเด่น นั่นคือคอนเซ็ปต์ที่ได้รับ โชคดีของเราที่สีชมพูของจุฬานั้นเป็น “สีที่ใช่” เมื่อน�ำมาใช้กับสีขาว และสีเทา ท�ำให้เว็บไซต์มีความสะอาดตา น่าอ่านมากขึ้น และติดตาผู้ใช้งาน
#e7297e
#3190eb
#7d7d7d
#fe95c4
#222328
#ffffff
WORK HARD & STAY HUMBLE
06
ภาษารีแอค คืออะไร?
และทำ�ให้เว็บเราโหลดไวอย่างไรบ้าง?
ก่อนที่จะเล่านิทานเรื่อง React ต้องขอย้อนกลับไปเล่าว่าสมัยก่อนที่มือถือยังไม่มี 3g เทรนของเว็บมักจะมีหน้าตาที่ไม่ได้สวยงามนัก บางเว็บอาจดีหน่อยแต่บางเว็บอาจจะมี ไว้เพื่อให้รู้เฉยๆว่ามี หรือบางเว็บเมื่อเปิดด้วยความเร็วเน็ต 56k อาจจะต้องรอมาม่าสุก แล้วค่อยกลับมาเล่น ถ้าจะให้พูดง่ายๆอาจลองนึกถึงเว็บราชการสมัยก่อนดูครับ
ลองนึกถึง facebook ที่์ภายใน 1 หน้า สามารถทำ�อะไรได้หลายอย่างเช่น กดดู notification หรือแม้จะคุยแชทกับเพื่อนๆได้ในหน้าเดียว นี่แหละที่ เรียกว่า Single Page Application
เทรนการท�ำเว็บในตอนนั้นเมื่อผู้ใช้อย่างเราๆเข้าเว็บปุ๊ป เว็บเบราว์เซอร์จะ ต้องท�ำการโหลดทุกสิ่งทุกอย่างไม่ว่าจะเป็นคอนเทนต์ของเว็บ สีที่ใช้ตกแต่ง รวมไปถึงการโหลดเนื้อหาจากฐานข้อมูลเพื่อมาแสดงบนเว็บในครั้งเดียว ถ้า ยังโหลดไม่เสร็จก็จะยังไม่สามารถดูเว็บได้ แต่มันจะยังไม่มีปัญหาอะไรถ้า เว็บนั้นไม่ได้มีเนื้อหาที่เยอะมากๆ แต่ตอนนี้ที่มือถือมี 5g แล้ว ผู้ใช้งานเว็บไซต์นั้นมีพฤติกรรมการใช้เว็บไซต์ที่ เปลี่ยนไป เช่น ความอดทนในการรอโหลดหน้าเว็บต�่ำลง หากเว็บไม่โหลด ภายในสองกระพริบตาละก็ อาจท�ำให้ผู้ใช้เปลี่ยนใจไปหาเว็บอื่นแทนก็ได้ รวมไปถึงการที่ผู้ใช้ชินกับการใช้ application บนมือถือท�ำให้เว็บไซต์ต้อง ปรับตัวให้มีการท�ำงานคล้ายกับ mobile application มากขึ้น จากเหตุผลที่ผู้ใช้มีพฤติกรรมการใช้งานเว็บไซต์เปลี่ยนไปนี้ท�ำให้เกิดแนวคิด ของ SPA (Single Page Application) ขึ้น ถ้านึกไม่ออกให้นึกถึง facebook ของเจ้าพ่อแห่งโซเชียล มาร์ก ซักเคอร์เบิร์กเว็บไซต์ที่์ภายใน 1 หน้า สามารถ ท�ำอะไรได้หลายอย่างเช่น กดดู notification, หรือจะกดดูวีดีโอจาก เพจ youlike หรือแม้จะคุยแชทเม้ามอยกับเพื่อนๆได้ในหน้าเดียว นี่แหละที่เรียก ว่า Single Page Application
07
ลองนึกภาพถ้า facebook ต้องเปิดแท็บนึงเพื่อแชท เปิดอีกแท็บเพื่อดู notification หรือหน้า newfeed ต้องรอให้โหลดเสร็จทั้งหมดก่อน ไม่ได้ใช้วิธี การค่อยๆโหลดเมื่อเลื่อน newfeed ลงแบบตอนนี้ ผู้ใช้งานคงไม่ปลื้มแน่ๆใช่ ไหมครับ ท�ำให้ facebook ต้องท�ำงานแบบ SPA อย่างทุกวันนี้ แต่การที่จะท�ำ เว็บไซต์แบบ facebook นี้ ถ้าจะให้ผู้พัฒนาเว็บไซต์ใช้ภาษาพัฒนาเว็บไซต์ แบบ เมื่อก่อนที่ยังไม่ใช่ SPA คงมีอาการวิงเวียนคล้ายจะเป็นลมแน่ๆ เราจึงต้องใช้ ภาษาที่ใช้ท�ำ SPA โดยเฉพาะ
THE HARD WORK | VOL. 1
เกริ่นมาซะยาวเหยียด เมื่อพูดถึงภาษาที่นำ�มาใช้พัฒนา SPA แล้ว React เป็น 1 ในภาษาที่ไม่พูดถึงไม่ได้ ไม่งั้นบาปแน่ๆ เพราะ React นั้นผู้พัฒนาก็คือเจ้าพ่อ social อย่าง facebook นั่นเอง โดยจุดเด่นของมันคือ
React มีชุมชนนักพัฒนาที่เยอะที่สุดที่ปัจจุบันมีนักพัฒนาใช้งานกว่า 70,000 คน (นับแค่บน github) ซึ่ง หมายความว่ามีคนมั่นใจในการใช้งาน react เยอะ และท�ำให้เราสามารถปรึกษาหรือหาวิธีการใช้งานในชุมชน นักพัฒนาได้ง่าย
React มี package รองรับเยอะที่สุดกว่า 30,000 package ส่งผลให้หากเราจะท�ำอะไรสัก อย่างบนเว็บไซต์ บางทีเราอาจจะหา package ที่มีนักพัฒนาอื่นๆท�ำไว้แล้วมาใช้งานได้โดย ไม่ต้องพัฒนาเองทั้งหมด ซึ่งจะช่วยลดระยะเวลาในการพัฒนาได้เยอะมากๆ ในทาง programming แล้ว react ก็มีประสิทธิภาพในหลายๆด้านที่ท�ำให้เว็บไซต์มีประสิทธิภาพที่ดี อย่าง เช่นการท�ำ Virtual DOM ที่จะส่งผลต่อการแสดงผลหน้าเว็บไซต์ หรือการต้อง coding อย่างเป็นระบบท�ำให้ การดูแลรักษาง่ายและพัฒนาต่อยอดได้ง่ายซึ่งจะส่งผลดีในอนาคต เป็นต้น
ลองนึกภาพถ้า facebook ไม่ได้ใช้วิธี การค่อยๆโหลดเมื่อเลื่อน newfeed ลง แบบตอนนี้ ผู้ใช้งานคงไม่ปลื้มแน่ๆ
เมื่อทาง Hobbiz ได้รู้ถึงความเจ๋งของ React แบบนี้แล้วก็อดใจไม่ได้ที่จะเอา React มาใช้พัฒนาเว็บไซต์ของเราและยังใส่ความคิดสร้างสรรค์ลงไปรวมกับ เทคโนโลยีให้สามารถตอบสนองพฤติกรรมของผู้ใช้ในยุค 5g นี้ให้ผู้ใช้งานได้ทั้ง การใช้งานที่ดีและความเพลิดเพลินไปพร้อมๆกัน
WORK HARD & STAY HUMBLE
08
09
THE HARD WORK | VOL. 1
#web #webdesign #portfolio #design #designer #webdesign #instaui #uiofinstagram #dribbble
5. Michal Korwin-Piotrowski @dsgnr_
#ui #ux #uxdesign #uidesign #workplace #designagency #designoffice #creativeagency
4. MakeReign @makereign
#handlettering #handdrawntype #goodtype #lettering #signpainting #mural #typography #typo
3. Cyril Vouilloz @rylsee
#ui #uidesign #userinterface #ux #uxdesign #userexperience #graphicdesign #webdesign
2. Giga Tamarashvili @gtamarashvili
#3ddesign #typography #illustration #animation #playful #handlettering #handdrawntype
1. Luke Choice @velvetspectrum
8
In Review
TOP 10
7
1
WORK HARD & STAY HUMBLE
10
การออกแบบพริ้วไหวด้วยคอนเซปการพัฒนาเว็บไซต์ ที่ชัดเจนซึ่งก็คือการเชื่อมต่อด้วยเส้นๆหนึ่งที่เชื่อมต่อ กันเป็นเว็บไซต์ Interaction และลูกเล่นที่ลื่นไหล สามารถทำ�ให้เว็บง่ายๆมีเสน่ห์ได้อย่างไม่น่าเชื่อ
10. Studio Details www.details.co.jp/tokyo
เว็บอ่านข่าวทั้งอ่านง่าย แบ่ง Category ชัดเจน มีสี ที่กล้าเล่น กล้าใช้มาก เหมาะกับการศึกษาเว็บไซต์ที่ มีเนื้อหาเยอะมากๆ และอยากรู้ว่าการแบ่งข้อมูลเพื่อ การอ่าน และสแกนได้อย่างไม่มีสะดุด ดูดีทั้งหน้า Desktop และในมือถือ
9. Bloomberg www.bloomberg.com/asia
เว็บ Software ที่สามาถนำ�เสนอความจริงจัง พร้อมๆกับความสดใส และสบายตาได้อย่างลงตัว จุดที่น่าสนใจของเว็บนี้ที่เราสนใจคือการย่อยข้อมูล โครงสร้างต่างๆให้เข้าใจง่ายภายในไม่กี่วินาที
8. Heroku www.heroku.com
เว็บไซต์ Portfolio ที่เทคนิคในการใช้ layer ในการ ประกอบภาพ โดยมีการใช้ parallax effect เข้ามา ช่วยในการสร้างมิติ ความไหลลื่นในการดูข้อมูลซึ่ง เน้นการโชว์ภาพผลงานเป็นหลัก
7. Ronin Amsterdam www.roninamsterdam.com
เว็บ Single-Page Web Application นี้เวลากด เปลี่ยนเนื้อหา page จะไม่ reload หน้าใหม่ รวมทั้ง สี navbar จะเปลี่ยนสีตาม section ให้เลือกทำ�ให้ user รู้ว่าอยู่หมวดไหน ทั้งหมดนี้ทำ�ให้การเปลี่ยนไป หน้าอื่นๆรวดเร็วมากยิ่งขึ้น
6. Making Music Ableton makingmusic.ableton.com
3
10
2
4
6
9
5
(หน้า) สวย (โค้ด) สะอาด และปรนนิบัติคุณได้มากกว่าใคร
A THAT UNDERSTANDS REAL BUSINESS คงปฎิ เ สธไม่ ไ ด้ เ ลยว่ า การน� ำ เสนอตั ว ตนบนโลกออนไลน์ในยุคนี้ไม่ ว่าจะเป็นเฟสบุ๊คเพจ อินสตาแกรม หรือจะเป็นเว็บไซต์ ล้วนเป็นสิ่ง ส�ำคัญในการสร้างโอกาสในการขายสินค้าได้มากขึ้นเป็นเท่าตัว เรียก ได้ว่า ตัวตนบน โลกดิจิตอล (Digital Presence) เปรียบเหมือน ‘หน้าร้าน’ ที่ลูกค้าจะได้พบเจอก่อนที่จะไปเลือกซื้อสินค้าที่หน้าร้าน ของจริงเสียอีก แน่นอนว่าถ้าหน้าร้านมีระบบที่ดี ก็ย่อมมีชัยไปกว่าครึ่ง
หน้าร้านที่ดีไม่ใช้เพียงแค่ สวยงามเท่านั้น พนักงาน ต้อนรับต้องอบอุ่น น่าเข้าหา ในปัจจุบัน ผู้ประกอบการหรือเจ้าของธุรกิจส่วนใหญ่ เลือกที่จะสร้างเว็บไซต์ขึ้นไปเฉยๆ โดยที่ไม่ได้คำ�นึงถึง วัตถุประสงค์อย่างชัดเจน เอารูปสินค้าขึ้น เอาเบอร์ โทรขึ้น อ่ะ... รูปภาพไม่มีหรอ งั้นเดี๋ยวเราไปหาจากใน กูเกิ้ลมาแปะไว้ก็ได้ ส่วนดีไซน์หน้าตาเว็บไซต์ เดี๋ยวเราก็ไปหา เจ้าถูกๆ ทำ�เว็บให้ เอาแบบคู่แข่งนี่แหละ ง่ายดี . อัพโหลดเว็บใหม่ขึ้นไป เรามีเบอร์แปะอยู่หน้าร้านแล้ว ถ้าเค้า สนใจซื้อก็โทรมา ง่ายๆ ไม่ยากเลย . เดือนนึงแล้ว สามเดือนแล้ว ปีนึงแล้ว สามปีแล้ว . เอ... ทำ�ไมถึงไม่มีใครโทรหาเราเลยนะ? . .
11
THE HARD WORK | VOL. 1
กด 1 เพื่อไปต่อ แล้วเมื่อไหร่ AI ถึงควรจะเข้ามาเป็นผู้ช่วยยกระดับความ สามารถในการดูแลบริหารความสัมพันธ์ลูกค้า?
-
ในบางองค์กรการดูแลบริหารความสัมพันธ์ลูกค้า หรือ Customer Relationship Management (CRM) นั้นมักจะเป็น แผนกแยกออกมาเพื่อดูแลความต้องการของลูกค้าที่พบหน้า แต่ ในความเป็นจริงแล้วกิจกรรม CRM นั้นสามารถน�ำมาปรับใช้กับ การท�ำเว็บไซต์ เพื่อพัฒนาร้านค้าของเราให้มีพนักงานต้อนรับ หน้าร้าน เป็นพนักงานคนขยันที่คอยเก็บข้อมูลต่างๆของผู้ใช้ใน ระหว่างที่คุณนอนหลับ หรือพักผ่อนในวันหยุด กด # เพื่อฟังซ้ำ� แล้วเราใช้ AI ร่วมกับเว็บไซต์ ทำ�งานประเภทไหนให้เราได้บา้ ง?
-
ใช่แล้ว! คุณจะได้พักผ่อนเสียทีหลังจากรับลูกค้ามาทั้งวัน นั่งโซฟานุ่มๆแล้วเปิดคอมดูรายงานของพนักงาน AI ของ เรากันดีกว่า มาดูกันสิ ว่าเค้าเหมาะและสามารถท�ำงาน ประเภทได้ให้เราได้บ้าง?
“
• รายงานจ�ำนวน demographic รวมถึงระยะเวลาที่ ลูกค้าอยู่ในร้านของคุณ
ข้อดีของการมีหน้าร้านออนไลน์คือ ลูกค้าสามารถเปิดดูได้ตลอด 24 ชั่วโมงฉันท์ใด พนักงานในร้านก็ (ควรจะ) ต้องพร้อมกับการรับลูกค้า ฉันท์นั้น เวลานี้แหละที่ Artificial Intelligence (AI) สามารถเข้ามา ช่วยแบ่งเบาภาระของเราไปได้
• บอกว่าลูกค้าอยู่ในหน้า หรือส่วนไหนในร้านเรามาก ที่สุด เพื่อประกอบการตัดสินใจด้านการส่งเสริมการ ขายของคุณ รวมถึงการพัฒนาหน้าร้านของเรามี ประสิทธิภาพมากยิ่งขึ้น • น�ำเนื้อหาที่คุณใส่ไว้ในหน้าร้าน ไปโพสลง social media ต่างๆอัตโนมัติ
“
• คอยถามลูกค้าของเราว่าต้องการอะไรเป็นพิเศษ ไหม เมื่อลูกค้าดูสินค้าใดสินค้าหนึ่งเป็นเวลานานๆ • และอื่นๆอีกมากมายที่คุณคาดไม่ถึง . . . กด * เพื่อยืนยัน การทำ�เว็บไซต์ให้เป็นได้ ‘มากกว่า’ หน้าร้านเปล่าๆ ทั่วไป
-
กำ�ลังคนยังเป็นสิ่งที่สำ�คัญและเป็น touch point ที่ทรงพลัง ที่สุดเสมอ หากสงสัย ให้ลองนึกถึงประสบการณ์การโทรหาคอล เซ็นเตอร์ครั้งล่าสุดของคุณ และจำ�นวนครั้งที่คุณกรีดร้องอยาก ที่จะสนทนากับมนุษย์ตัวเป็นๆ มีเนื้อหนัง แน่นอน ว่ามันค่อน ข้างเจ็บปวดทีเดียว อย่างไรก็ตามการมีหน้าร้านโดยปราศจาก โอกาสที่ให้ลูกค้าได้สอบถามหรือมีปฎิสัมพันธ์กับแบรนด์ของคุณ มากกว่าแค่การโชว์เนื้อหา และการมี contact form ก็สามารถ ทำ�ให้คุณเสียโอกาสในการทำ�เงิน และโอกาสในการเก็บข้อมูล ลูกค้าเพื่อการพัฒนาสินค้า ธุรกิจในอนาคตได้อย่างยิ่งเช่นกัน
หากเจ้าของธุรกิจคนไหนสนใจที่มีเว็บไซต์ที่ท�ำมาจากความใส่ใจในทุก รายละเอียด ท�ำได้ ‘มากกว่า’ ค�ำนึงถึงธุรกิจของคุณในภาพรวมโดยทีม พัฒนาที่รักทั้งโค้ดที่อ่านง่าย ดีไซน์ที่ดึงดูด พร้อมบริการที่เป็นกันเอง คุ้มค่ากว่าในราคาที่เท่ากัน สามารถติดต่อเราได้ค่ะ WORK HARD & STAY HUMBLE
12
Show Case
MAC-5 ENTERPRISE WEBSITE
เว็บไซต์ของซอฟต์แวร์ ERP ที่เนื้อหาเยอะ จะจัดการอย่างไร? เว็บไซต์ที่มีเนื้อหาค่อนข้างเยอะ และต้องการสื่อสารกับลูกค้าให้ครบถ้วน พร้อมการบริการออนไลน์ในการให้ค�ำปรึกษาเกี่ยวกับ ซอฟต์แวร์ที่เข้าถึงลูกค้าได้ ท�ำให้เราชาวฮ็อบบิซต้องค้นหาตัวช่วยที่จะท�ำให้เว็บไซต์สามารถท�ำงานได้ในทุกส่วน หรือง่ายๆคือ การค้นหา Plug-in ที่เหมาะสมในการใช้งาน เพื่อทุ่นแรงของลูกค้าในการท�ำงาน การจัดการเนื้อหาก็เช่นกัน เราเน้นการจัด หมวดหมู่ของเนื้อหา (Grouping) โดยดูถึงการใช้งาน และพฤติกรรมการใช้งานของลูกค้าเป็นหลัก เช่น เมนูแบบไหนที่คนนิยม กดเข้าเพื่อดูรายละเอียด หรือปุ่มแบบไหนที่ดึงดูดให้คนกดเพื่อเข้าอ่านข้อมูลมากที่สุด www.doublepine.co.th
13
THE HARD WORK | VOL. 1
Show Case
TYPOGRAPHY
English
Lato Bold Lato Regular Thai
Kanit Regular COLORS
ดีไซน์ที่สวยงาม ทำ�ให้ผู้ใช้งานรู้สึกแปลกตา และประทับใจ
เราเน้นความส�ำคัญในการท�ำให้เว็บไซต์น่าใช้งาน และติดตาลูกค้าแม้ออก จากเว็บไซต์ไปแล้ว โดยการท�ำเว็บไซต์ MAC-5 ในครั้งนี้ เราเน้นการดึงสีที่ ใช่ของ MAC-5 ออกมา พร้อมการเพิ่มลูกเล่นและเสน่ห์ ท�ำให้คนสนุกกับ การเลื่อนเม้าส์เพื่อดูเว็บไซต์ทั้งหมด ส่งผลต่อคะแนนของเว็บไซต์ และส่ง ผลต่อการท�ำการตลาดออนไลน์ด้วย
#bd4249
#f0821c
#bd4249
#be4c2f
#f1911b
#f2f1f1
WORK HARD & STAY HUMBLE
14
Show Case
ASAP WEBSITE WEBSITE
เว็บไซต์ทันสมัย ที่ต้องสื่อสารกับลูกค้าให้ได้ใน 3 วิ หากเป็นเว็บไซต์ทั่วไป ส่วนใหญ่แล้วมักจะเป็นการขายสินค้า หรือการแนะน�ำบริษัท ซึ่งในทางดีไซน์เราถือว่าเป็นการมีสินค้าที่ช่วยในการก�ำหนด Mood & Tone ของเว็บไซต์ได้ แต่โจทย์ที่น่าสนใจในการท�ำเว็บไซต์ ASAP PROJECT คือการที่เราต้องสื่อให้ลูกค้าเข้าใจว่าเราท�ำอะไรภายใน 3 วินาทีที่เข้ามา เว็บไซต์ โดยลูกค้าต้องรู้ว่าเราเป็นใคร ท�ำอะไร ที่ไหน อย่างไร แล้วเขาสามารถใช้บริการ หรือได้ประโยชน์อย่างไรจากเราได้บ้าง ท�ำให้ฮ็อบบิซต้องแก้ไข Landing Page กันหลายครั้งเพื่อการแสดงค�ำอธิบายเกี่ยวกับทีม ASAP PROJECT ไว้ใน 1 Landing Page ท้าทายทีมฮ็อบบิซได้เป็นอย่างดี www.asapproject.co
15
THE HARD WORK | VOL. 1
Show Case
TYPOGRAPHY
English
BWHaasHead 75Bold BWHaasHead 55Roman Thai
Prompt Regular
COLORS
สีสันสดใสที่ดึงดูดให้ผู้ใช้อยู่ในเว็บไซต์นานยิ่งขึ้น
เพื่อเป็นการเน้นย�้ำถึงการท�ำงานของ ASAP PROJECT ที่ให้ค�ำปรึกษาได้ อย่างรวดเร็วทันใจ ทันการใช้งาน เราจึงใช้สีเหลืองและสีน�้ำเงินก็แสดงถึง การเคลื่อนไหว และการท�ำงานอย่างเป็นระบบ
#3a85fc
#f8b24e
#2e3033
#0892da
#fac415
#ffffff
WORK HARD & STAY HUMBLE
16
“เริ่มต้นด้วยคำ�ถาม พร้อมขั้นตอน และทีมงานสุดเจ๋ง” ค้นหาจุดประสงค์ในการทำ�เว็บไซต์ร่วมกัน
บริการด้วยความใส่ใจ มั่นใจได้ในทุกขั้นตอน
เราเริ่มต้นจากการค้นหาเป้าหมายที่ชัดเจนในการท�ำเว็บไซต์ ของคุณเพื่อเพิ่มมูลค่าให้กับสินค้าอย่างตรงจุด ด้วยเทคนิคการ ค้นหาท�ำ Workshop ที่มีประสิทธิภาพจากการศึกษากลุ่มเป้า หมาย ทั้งหมดนี้เพื่อสร้างเว็บไซต์ที่ดี และใช้งานได้จริง ให้คุ้ม ค่าทุกการลงทุนของคุณ เราเชื่อว่าดีไซน์ที่ยั่งยืน คือดีไซน์ที่ผ่าน การใส่ใจในทุกขั้นตอน
มากกว่าการสร้างเว็บไซต์ที่ตอบสนองต่อทุกความต้องการ แต่เราใส่ใจใน ทุกขั้นตอนในการด�ำเนินงานอย่างแท้จริง ไม่ว่าจะเป็นการท�ำความเข้าใจ แบรนด์ของคุณอย่างลึกซึ้ง น�ำไปสู่การวาง Wireframe ที่เหมาะสมด้วย ระบบการท�ำ Prototype ท�ำให้คุณได้มองเห็นภาพรวมของเว็บไซต์ ก่อน เริ่มสร้างสรรค์ผลงานดีไซน์
ร่ายโค้ดด้วยเทคโนโลยีล่าสุด
ไม่ต้องกังวลว่าจะโดนทิ้งงาน
เมื่อดีไซน์ผ่านการอนุมัติ ทางเราจะเริ่มร่ายโค้ดเหมือนร่ายมนต์ เพื่อให้รูปแบบการดีไซน์กลายเป็นเว็บไซต์ที่ใช้งานได้จริงด้วย ภาษาและเทคโนโลยีที่เหมาะสม โปรแกรมเมอร์พอตเตอร์ของ เราจะขึ้นเว็บไซต์จำ�ลองให้คุณได้ลองใช้งาน ก่อนจะส่งมอบงาน ถึงมือคุณ
ไม่ต้องกังวลเรื่องจะโดนทิ้งงานกลางทาง หรือหายตัวไปอย่างไร้ร่องรอย ฮ็อบบิซมีที่อยู่ชัดเจน พร้อมผู้พบเห็นว่ามี(ชีวิต)อยู่จริง ผลงานต่างๆก็เป็น อีกหนึ่งเครื่องการันตีว่าฮ็อบบิซสามารถสร้างสรรค์งานและส่งถึงมือคุณได้ อย่างสวยงาม
ลงทุนทั้งที เลือกของดี เลือกเราไปเป็นผู้ช่วยคุณ
เรารู้ว่าเวลาของคุณนั้นมีค่า และงบประมาณในการท�ำงานก็มี ค่ามากเช่นกัน หากคุณตัดสินใจเลือกผู้ช่วยผิด จากเดิมที่ เว็บไซต์จะได้สร้างก�ำไร กลับอาจจะต้องจ่ายเพิ่มเพื่อเริ่มใหม่ ตั้งแต่ต้น ฮ็อบบิซเป็นผู้ช่วยที่ดีและเชี่ยวชาญ มั่นใจได้เมื่อให้ เราช่วยคุณ
17
THE HARD WORK | VOL. 1
SMALL BUT MIGHTY
ทีมเล็กๆที่จิ๋วแต่แจ๋ว ชอบความท้าทาย รักการทำ�งาน จริงใจกับลูกค้าเป็นหลัก
ทำ�เว็บสวยสุดๆ Neat มาก สวยและ functional ดีลง่ายมาก ตรงไปตรงมา มืออาชีพค่ะ – K. Jidapa Prayoonrat CMO, Doublepine Co., Ltd.
NEVER STOP SURPRISING ทีมที่หลากหลายด้วยความสามารถ และพร้อมเสมอที่จะเป็นผู้ช่วยคุณในทุกๆด้าน Website and Minisite Digital and Offline Marketing Kit Branding Business Automation and Consultation www.hobbiz.co.th
CONTACT US Phone
(+66) 089-822-1223
hello@hobbiz.co.th
www.facebook.com/hobbizdigital