ประสบการณ์เข้าร่วมประกวด Seed Webs Awards 2020

ช่วงประมาณกลางเดือนสิงหาคม 2020 ได้อ่านบทความของพี่เม่นเขียนไว้เกี่ยวกับ วิถีของบริษัทขนาดเล็กที่ชื่อ Seed Webs รู้สึกสนใจแนวคิดและความตั้งใจที่จะเป็น SME ที่สร้างกำไรและจ่ายเงินปันผลได้ต่อเนื่อง บนสินค้าและบริการที่เป็นประโยชน์กับคนในวงกว้าง แทนที่จะเป็นสตาร์ตอัป

และหลังจากนั้นไม่นาน พี่เม่นก็ได้เปิดตัวด้วยการจัดประกวดสร้างเว็บไซต์ด้วย Seed Webs เมื่อวันที่ 31 สิงหาคม 2020 ผมเองไม่รอช้า รีบสมัครทันที (กลัวเต็ม เห็นว่ารับสูงสุดประเภทละ 200 คน) พออ่านรายละเอียดกติกาต่าง ๆ แล้ว ก็คิดว่าไม่น่าจะติดอะไร จะมีก็แค่เรื่องเวลา ที่ต้องแบ่งเวลามาทำส่วนนี้ให้ทันส่งก่อนหมดเขตเที่ยงคืนวันที่ 27 กันยายน 2020

สมัครเข้าร่วมแล้ว ต้องทำให้เต็มที่

หลังจากสมัครไปแล้ว ก็ได้อีเมลแจ้งให้เข้าไปเปิดใช้งานที่ https://try.seedwebs.app/ โดยจะใช้งานได้ฟรี 3 เดือน (ปกติจะเปิดให้ทดลองใช้งานในราคา 90 บาท/3 เดือน ถูกมาก ถูกกว่าสั่งอาหารเดลิเวรี่อีก) ระบบของ Seed Webs นั้นจะใช้ WordPress Multisite และธีมจาก SeedThemes

ช่วง 2 สัปดาห์แรก ยังไม่มีอะไรเคลื่อนไหวมาก นั่งคิดไอเดียว่าจะทำเว็บอะไรดี ที่เราอยากทำ บวกกับน่าจะมีคนทั่วไปที่สนใจอยากทำเว็บแนวนี้ เลยได้ไอเดียคร่าว ๆ ที่ได้แรงบันดาลใจจากสถานการณ์ COVID-19 ในตอนนี้ ที่กลุ่ม marketplace เกิดขึ้นเยอะมาก ธุรกิจส่วนใหญ่ก็ต้องปรับมาเป็นออนไลน์กัน เว็บที่คนน่าจะอยากทำน่าจะเป็นกลุ่ม SME ที่เคยขาย product หรือ service แบบมีหน้าร้าน ต้องปรับให้มี online presence มากขึ้น และโฟกัสลงมาที่สิ่งที่ผมสนใจเป็นการส่วนตัว คร่าว ๆ ก็ได้ไอเดีย เช่น เว็บผลิตภัณฑ์สปา ร้านนวด, ร้านขายต้นไม้, เว็บผลิตภัณฑ์ทำความสะอาด, เว็บรถคลาสสิก, เว็บแมวของผมเอง, เว็บขายกาแฟ ชา, เว็บคาเฟ่ ร้านน่ารักแถวบ้าน ไปจนถึงเว็บร้านข้าวมันไก่ ร้านทับทิมกรอบแถวบ้านที่สนิทกัน

หลังจากนั้นก็ได้เข้าไปดู Live ปฐมนิเทศน์ วันอาทิตย์ที่ 13 กันยายน 2020 พี่เม่นก็ได้แนะนำระบบ Seed Webs, ธีม Plant และปลั๊กอินต่าง ๆ ที่ติดตั้งแบบ Premium ไว้ให้ใช้งานกันได้เต็มที่เลย ผมสารภาพเลยว่า ผมไม่เคยใช้งานธีม Plant มาก่อนเลย พอได้ดูพี่เม่นสาธิตการตั้งค่าต่าง ๆ แล้วก็รู้สึกว่าธีมนี้คุณภาพมาตรฐานระดับโลกเลย และผมถูกใจแนวทางที่ Seed Webs ให้ความใส่ใจกับเรื่อง Speed Optimization และที่ถูกใจเป็นพิเศษคือเรื่อง ฟอนต์ภาษาไทย ที่หาจากธีมเมืองนอกไม่ได้ Seed Webs ได้รวบรวมฟอนต์ไทยสวยที่สุดเท่าที่จะสวยได้ มาไว้ให้ใช้เรียบร้อยแล้ว

วางแผนสำหรับการประกวด

กติกาการส่งผลงานเข้าประกวด

• ต้องทำบนเว็บไซต์ seedwebs.app เท่านั้น
• สามารถเลือกใช้ปลั๊กอินที่ติดตั้งไว้ให้ได้เท่านั้น
  → มีเยอะมาก แต่ผมพยายามจะใช้ให้น้อยที่สุด
• ไม่สามารถแก้โค้ด php ของธีมได้ แต่สามารถเพิ่ม CSS / JS เองได้
  → เพิ่ม CSS เองได้ก็พอใจละครับ ที่เหลือธีม Plant จัดการได้ดีอยู่แล้ว
• แนะนำให้ทำเว็บภาษาเดียว
• ต้องใช้รูปที่ถูกลิขสิทธิ์
  → ประเด็นนี้ผมให้ความสำคัญมาก เลยต้องหาจาก source ที่อนุญาตให้นำไปใช้งานและปรับแต่งได้ ทุกที่จะระบุเรื่องการนำไปใช้อย่างชัดเจน เช่น ต้องใส่เครดิตด้วยเป็นต้น
• เนื้อหาต่างๆ ต้องไม่ละเมิดสิทธิ สามารถใช้เนื้อหาจำลอง (เช่น Lorem Ipsum) ได้ แต่แนะนำให้เขียนเนื้อหาขึ้นใหม่จะทำให้ประสบการณ์ผู้ใช้งานดีกว่า
  → ผมเป็นคนเขียน content ไม่เก่งเลย ในบางหน้าจึงต้องใช้ lorem ipsum สำหรับพวกเนื้อหาบทความต่าง ๆ

เกณฑ์การตัดสิน

1. First Impression: ความประทับใจ
2. Design: ความสวยงาม การนำเสนอที่เหมาะสม
3. User Experience: ประสบการณ์การใช้งาน
4. Mobile First: ให้คะแนนสำหรับการดูผ่านมือถือ 70% ส่วนจอคอม 30%
5. Page Speed: คะแนนของทุกหน้า ได้เกิน 70/100
6. SEO: การตั้งค่าพื้นฐานของ SEO และ Open Graph
7. การตัดสินของกรรมการ ถือเป็นอันสิ้นสุด

ผมคิดไว้ก่อนเลยว่า ต้องสวยงาม น่าประทับใจก่อนเป็นอันดับแรก รองลงมาคือใช้งานในมือถือได้ง่าย ซึ่ง Page Speed จะตามมาเอง (ตามที่พี่เม่นโฆษณาไว้ตอน demo ธีม Plant) ส่วน SEO ก็ใช้ Rank Math ซึ่งผมไม่ค่อยห่วงเท่าไหร่

วางแผนการออกแบบและทำเว็บ

ผมมี mood & tone ในใจว่าอยากจะทำเว็บให้ดูทันสมัย (modern) และสะอาด (clean) ตามที่ผมถนัดและชอบเป็นการส่วนตัว เลยเอาไอเดียที่คิดไว้ทั้งหมดมาเลือกว่าสรุปจะทำเว็บอะไรดี เว็บร้านนวดเนี่ยก็ต้องรีทัชรูปคน รูปบรรยากาศเยอะ, เว็บแมวก็น่ารักตามประสาแมวคงไม่ทันสมัยอะไรได้มาก, เว็บร้านขายต้นไม้ก็เดี๋ยวไปคล้ายกับ demo ธีม Plant, เว็บร้านข้าวมันไก่ ทับทิมกรอบก็สีออกโทนสีแดงและเน้นตำนานเก่าแก่ สุดท้ายเลยมาจบที่เว็บของสินค้าที่ขายออนไลน์ได้ มีรูปสินค้าที่สวยงาม สรุปเลยได้ไอเดียเว็บขายกาแฟโคลด์บรูว์ (Cold Brew) มา เพราะชอบเป็นการส่วนตัว แล้วก็มาตั้งชื่อแบรนด์เล่นกับชื่อ Cold Brew กลายเป็น COLD BLUE พอดี

Brand Identity เป็นพื้นฐานสำคัญ

ด้วยความที่เป็น graphic designer เวลาจะออกแบบอะไรที่ไม่มี identity ก็จะรู้สึกโหวง ๆ ไม่มีหลักยึด เลยทำ brand identity คร่าว ๆ ขึ้นมา มี logo / color / typography เท่าที่จำเป็นต้องใช้ และทำ mockup ของสินค้าขึ้นมา 3 อย่าง

• 

• 

• 

ผมใช้ mockup จากคุณ Rami Kelazle โดยค้นหาคำว่า free mockup ใน behance แล้วดาวน์โหลดมาออกแบบ graphic เองใน photoshop ให้เข้ากับ identity ที่วางเอาไว้

ส่วนรูปพื้นหลังของส่วน header หน้าแรก ผมทำใน Illustrator อยากให้ดูเป็นเหมือนควันบรรยากาศ แต่ดู techy + surreal หน่อย ใช้หลัก 80/20 เพื่อสร้าง contrast ดึงดูดความสนใจให้เส้นเฉียงไปตามแกนของขวด

ส่วนของ Typography ผมใช้ฟอนต์ IBM Plex Thai ทั้งตัว heading และ body โดยใช้หลัก Type Scale Major Third (1.250) สำหรับ H1-H6 เพื่อให้จังหวะการไล่ลำดับมีความกลมกล่อมเข้ากัน คล้าย ๆ กับ scale ของดนตรี

h1 { font-size: 3.815rem; }
h2 { font-size: 3.052rem; }
h3 { font-size: 2.441rem; }
h4 { font-size: 1.953rem; }
h5 { font-size: 1.563rem; }
h6 { font-size: 1.25rem; }

ถึงเวลาทำบน Seed Webs

อันดับแรกเลยสำหรับการทำเว็บ คือ Content เนื้อหาทั้งหมดของเว็บ ผมคิดจากมุมว่าถ้าผมเป็นเจ้าของกิจการนี้ มี product ขาย 3 อย่างคือ Nitro Cold Brew, Original Cold Blue, Cold Blue Black ผมจะต้องมีเนื้อหาอะไรให้คนทำเว็บบ้าง ก็ได้ออกมาเป็น หน้าแรก / หน้า our coffee / หน้า About เกี่ยวกับเรา / หน้า Contact ติดต่อสอบถาม / และเพิ่มเติมบทความเกี่ยวกับสูตรสำหรับเอา Cold Brew ไปทำเป็นแบบต่าง ๆ

หลังจากได้ content แล้ว ก็เริ่มจากเข้าไป Customize ปรับแต่งตามที่ธีม Plant ให้มาก่อน ก็จะเป็นพวก header, footer, สี, ฟอนต์, รูปแบบ element ที่จะแสดง แค่ปรับตรงนี้หมดก็สวยแล้ว

เสร็จแล้วก็ไล่ทำทีละหน้า ผมใช้ Stackable Gutenberg Blocks เพิ่มเติมขึ้นมา เพราะว่าเคยใช้แล้วถนัด (ถ้ามีเวลาจะมาเขียนรีวิวเปรียบเทียบระหว่าง Stackable, Qubely, Kadence, GenerateBlocks) ด้วยข้อจำกัดเรื่องเวลาทำที่มีไม่มาก ผมใช้วิธีทำไปปรับไป (หลายร้อย revisions มาก) จนในที่สุดก็ได้ออกมาเป็นเว็บ (สำหรับดูบน desktop) แต่ในการประกวดครั้งนี้เน้นการแสดงผลใน mobile เป็นหลัก จึงต้องทำ custom CSS และปรับแต่งสำหรับ mobile ให้สวยงาม

เมื่อปรับจนทุกอย่างลงตัวเป็นที่พอใจแล้ว ก็เริ่มทำการ optimize ขนาดไฟล์รูปให้เล็กลงด้วย ปลั๊กอิน ShortPixel และทำ speed optimization ด้วยปลั๊กอิน WP Rocket แทบจะไม่ต้องตั้งค่าอะไรเป็นพิเศษเลย คะแนนที่ได้ออกมาสำหรับ Mobile 76-87 / Desktop 96-98 ถือว่าผ่านเกณฑ์ที่ตั้งไว้ เป็นไปตามที่พี่เม่นได้โฆษณาไว้จริง ๆ

ส่วนเรื่อง SEO ผมเลือกใช้ปลั๊กอิน Rank Math เพราะหน้าตา UI เลย ใช้งานง่ายกว่า Yoast SEO แต่เนื่องจากเนื้อหาเป็น mockup ซะส่วนใหญ่ เลยไม่ได้เน้นการทำ SEO แบบจริงจังมากมาย

อีกสิ่งหนึ่งที่ผมแอบใส่ใจเป็นพิเศษคือ Contact Form ที่ใช้ปลั๊กอิน Gravity Forms และเขียน custom CSS ให้สวยงาม มีสีและ mood & tone ของ brand identity เพื่อให้คนที่จะกรอกแบบฟอร์มสัมผัสได้ถึงผู้รับที่จะส่งข้อความไปหา ช่อง input field ที่เป็นเส้นประข้างใต้ เหมือนเขียนบนกระดาษที่ทางร้านเตรียมไว้ให้ เพราะนี่เป็น call to action อย่างเดียวของเว็บนี้ที่มี

เข้าไปดูเว็บที่ผมส่งประกวดได้ที่ https://try.seedwebs.app/ibdz

ส่ง รอ ลุ้น

หลังจากส่งผลงานไปแล้ว เช้าวันรุ่งขึ้นก็ได้เห็นเว็บของผู้เข้าร่วมคนอื่น ๆ โอ้ สวย ๆ ทั้งนั้นเลย และมีการเปิดโหวตทาง facebook ระหว่างนี้ก็รอ 1 สัปดาห์จนถึงวันประกาศผล 4 ตุลาคม 2020 ลุ้นมาก ๆ ในใจก็แอบหวังไว้เล็ก ๆ ว่าน่าจะได้ติดอันดับบ้างแหละ แต่ถึงจะไม่ได้ก็ไม่เสียใจเพราะได้ทำเต็มที่แล้ว และในที่สุดทาง Seed Webs ก็ได้ประกาศผลทาง facebook ช่วงค่ำ และสิ่งที่ผมเห็นก็คือ

ผมได้รางวัลที่ 1 หรอ! ดีใจ ๆ ความรู้สึกเหมือนตอนรู้ผลว่า entrance ติดเลย 😀 ขอบคุณทุกคนที่เป็นกำลังใจและแรงผลักดันให้เข้าร่วมครั้งนี้ ขอบคุณผู้เข้าร่วมประกวดทุกคน ผมได้เรียนรู้หลาย ๆ อย่างจากเว็บของคุณ ขอบคุณทีมงาน Seed Webs ที่จัดการประกวดดี ๆ นี้ขึ้นมา และผมเป็นกำลังใจให้ Seed Webs ได้ทำสิ่งที่ตั้งใจไว้และยกระดับวงการทำเว็บและ WordPress ของไทย

สุดท้าย ขอขอบคุณความบ้า ทำเอามันส์ ทำ brand identity / packaging เพื่อความสะใจในฐานะ graphic designer การประกวดครั้งนี้ทำให้ผมมีแรงใจอย่างที่เคยบอกไว้ว่า Passionate about making a better design & web มันกลับมาแล้ว ผมอยากบอกว่า “ผมชนะใจตัวเองแล้ว” ขอบคุณทุกคนครับ 🙂