เปิดเผยเบื้องหลังการออกแบบโลโก้และเว็บ Content Shifu ใหม่ใน 37 วัน

Think

วันนี้เราจะมาเล่าให้ฟังถึงเบื้องหลังการ Rebranding ของ Content Shifu ก่อนอื่นต้องขอแนะนำตัวซักเล็กน้อย สวัสดีทุกคนค่ะ ปิ่น เป็น UX/UI Designer จาก Magnetolabs ที่ได้รับมอบหมายในงานรีแบรนด์ Content Shifu ใหม่ทั้งหมดตั้งแต่เริ่มโลโก้และ Corporate Identity (CI) ทั้งหมด ไปจนถึง UX/UI ของเว็บไซต์ที่ปล่อยออกมาให้ทุกคนเห็นกันในตอนนี้

เราคงเถียงไม่ได้ว่า เวลาผ่านไป ทุกอย่างก็ต้องเปลี่ยนแปลงไปตามกาลเวลา ไม่อย่างนั้นคงไม่มีคำว่า ‘ทันสมัย’ เพราะทุกอย่างต้องมีการพัฒนา เว็บไซต์เราเองก็เช่นกัน วันนี้เราเลยอยากจะมาแชร์วิธีการรีแบรนด์ตั้งแต่เริ่มตั้งไข่ไปจนถึงขั้นตอนสุดท้ายที่ออกมาเสร็จสมบูรณ์ให้ทุกคนเห็นกันวันนี้ ว่าเรามีวิธีในการคิดและวางแผนกันอย่างไรบ้างก่อนจะมาเป็น Content Shifu โฉมใหม่

บทความนี้จะมาเล่าเบื้องหลังการรีแบรนด์ Content Shifu ระหว่างทางมีองค์ประกอบที่ต้องทำหลากหลายเรื่อง เรามาติดตามไปด้วยกันนะคะ

การออกแบบโลโก้

ดวงตาคือหน้าต่างของหัวใจ โลโก้ก็คือหน้าตาของแบรนด์เช่นกัน เรียกได้ว่าทุกสิ่งทุกอย่าง ตัวตนของแบรนด์นั้นจะสื่อออกมาผ่านเพียงแค่โลโก้ชิ้นเดียว ทั้ง ฟอร์ม สี รวมถึง ฟอนต์ก็ด้วยเช่นกัน บ่งบอกถึงภาพลักษณ์ของตัวแบรนด์แทบทั้งหมด ฉะนั้นโลโก้สำคัญมากแทบจะที่สุดเลยด้วยซ้ำไป เราจึงทุ่มเทและให้เวลากับส่วนนี้เยอะพอสมควร

ตีโจทย์ความหมายของโลโก้

Content Shifu (คอนเทนต์ ชิฝุ) Shifu (师傅) เป็นคำภาษาจีน มีความหมายว่า Practitioners / Skilled person หรือผู้มีทักษะ มีประสบการณ์ลงมือปฏิบัติ เราคือเว็บไซต์คอนเทนต์ที่ให้ความรู้ และสร้างให้คนมีทักษะดิจิทัลเพิ่มมากขึ้น

ออกแบบโลโก้ content shifu แบบเดิม
โลโก้เดิมของ Content Shifu

ด้วยความที่ชื่อและโลโก้เดิมนั้นมีความเป็นจีนค่อนข้างมากจากชื่อ โลโก้และ Look & Feel เดิม ที่สื่อถึงความจีน เราจึงเริ่มจากการหาข้อมูลและ Element ต่างๆ ที่มีกลิ่นอายความเป็นจีนอยู่

Sketch & Develop

เริ่มต้นจากสเกตช์ลงกระดาษให้เยอะเท่าที่จะนึกออก (Start with Quantity) และเลือกไอเดียที่คิดว่ามันน่าจะเวิร์กมาลองวาดลองวางในคอมดู เพราะบางทีเราวาดด้วยมือลงกระดาษ มันอาจจะเวิร์กแค่ในกระดาษเราก็ได้ พอลองวาดในคอมดูปุ๊บ กลายเป็นไม่เหมาะกับความเป็นกราฟิกขึ้นมาซะอย่างนั้น หรืออีกวิธีคือสเกตช์แค่คร่าวๆ ในกระดาษ และลองทำจริงเลยในคอม

ตัวอย่างสเกตช์ที่อยู่ในกระดาษ

ภาพร่างออกแบบโลโก้ Content Shifu

หยิบมาลองวาดในคอม

ตัวอย่างการออกแบบโลโก้ Content Shifu แบบใหม่

ตัวอย่างการออกแบบโลโก้ Content Shifu แบบใหม่

เมื่อสเกตช์ได้ระดับหนึ่ง เราก็จะนำมา Mock up กับหน้าเว็บไซต์เพื่อดูความเหมาะสมและข้อดีข้อเสียของแต่ละแบบอีกหนึ่งที

การออกแบบโลโก้ สำหรับเว็บไซต์

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

ที่มาของการออกแบบโลโก้

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

และนี่คือโลโก้สุดท้ายที่เราได้ออกมาออกแบบโลโก้ content shifu

ความหมายที่ซ่อนอยู่มีสองความหมายค่ะ

  1. ปิ่นเอาคำว่า SHIFU มารวมร่างและดัดแปลงให้มีหน้าตาดูคล้ายตัวอักษรจีน
  2. รูปร่างที่ได้ออกมา เมื่อนำเขามาใส่ในวงกลม หน้าตาที่ได้ทำให้ดูเหมือน ‘ครั่ง’ หรือตราประทับหน้าซองจดหมาย

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

สำหรับเรา โลโก้ที่ดีไม่ได้มีแต่ความสวยเท่านั้น เราให้ความสำคัญกับความหมายของมันมากที่สุดด้วย

Design System สำคัญไม่แพ้โลโก้

การทำงานเว็บไซต์ ไม่เหมือนการทำโปสเตอร์หรืองานดีไซน์ที่สามารถจบได้ในดีไซน์เนอร์เพียงคนเดียว เพราะเราต้องทำงานร่วมกับเป็นทีมกับ Developer ซึ่งเป็นปัญหาที่เราประสบกันบ่อยมาก คือ Designer และ Developer สื่อสารไม่เข้าใจกัน เพราะเราคิดกันคนละแบบ เพราะฉะนั้น Design System คือสิ่งที่จะมาช่วยเป็นตัวกลางเชื่อมความสัมพันธ์ระหว่างสองฝ่ายให้เกิดความเข้าใจที่ตรงกัน ไม่ต้องมานั่งเถียงกันอีกต่อไป

Design System คืออะไร

Design คือ งานออกแบบ System คือ ระบบ นั่นแปลว่า ‘ระบบของงานดีไซน์’ เพราะในงานเว็บไซต์มีหลายองค์ประกอบ มีทั้ง Color (สี) Font (ตัวหนังสือ) Image (รูปภาพ) ที่เป็นส่วนประกอบของเว็บทั้งหมด เพราะฉะนั้น Design System จะสร้างความเข้าใจที่ตรงกันให้ทั้งสองฝ่าย เปรียบเสมือนแผนที่นำทางให้ทั้งทีมที่ทำงานร่วมกันไปในทิศทางเดียวกัน

Color (สี)

สีสามารถบอกอะไรได้หลายอย่างมากๆ ทั้งความหมาย ความรู้สึก รวมถึงบอกตัวตนทั้งหมดของแบรนด์ โจทย์คือเราอยากดูโตและดูโมเดิร์นขึ้น ฉะนั้นเราจึงพยายามหาสไตล์การใช้สีที่จะสามารถเล่าตัวตนของเรา และสามารถสื่อคาแรกเตอร์ในแบบที่เราอยากเป็นให้ได้

สีเดิมของ Content Shifu คือสีน้ำเงินและแดง ใช้คู่กันมาตลอดทั้งแบบ Gradient (ไล่สี) และ Solid (ไม่ไล่สี) จนเป็นที่จดจำของแบรนด์ไปแล้ว ทำให้สิ่งที่คิดในตอนแรกเลย คือไม่อยากทำให้ความรู้สึกเดิมๆ ของแบรนด์หายไป ยังอยากจะใช้คู่สีเดิมอยู่

สีโลโก้ Content Shifu แบบเก่า

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

Shifu แนะนำ
ตามหลักการทฤษฎีสีแล้ว เมื่อสีคู่ตรงข้ามมาผสมกันในสัดส่วนที่เท่ากัน ผลลัพธ์ที่ได้คือ ‘สีดำ’ ดังนั้นถ้ายังอยากให้มีคู่สีเดิมอยู่ สิ่งที่ควรทำก็คือไม่ควรผสมหรือให้น้ำหนักในสัดส่วนเท่ากัน โดยเฉพาะเมื่อใช้กับการไล่สี
คู่สีตรงกันข้าม
ตัวอย่างสีคู่ตรงข้าม

ทางออกของปัญหานี้คือ เราปรับให้โทนสีสว่างขึ้น เป็นน้ำเงินที่สดใสเพิ่มความเป็นดิจิทัลมากขึ้นด้วยการใช้ Gradient อยู่ แต่เพิ่มสีม่วงเข้ามาเป็นตัวช่วยเชื่อมไม่ให้เจอกับสีแดงโดยตรง ทำให้มันสมูทมากขึ้น ชูสีน้ำเงินและม่วงขึ้นมามากขึ้น และลดการใช้ปริมาณสีแดงลง เป็น 80/20 ทำให้ทุกอย่างดูไปในทางเดียวกันมากขึ้น มีความรู้สึกใหม่ เพราะสีที่สดใสขึ้น และรู้สึกดิจิทัล นำสมัยมากขึ้น ไม่ตุ่นจนรู้สึกเก่าอีกแล้ว

ออกแบบโลโก้ Content Shifu โดยใช้สีเทคนิคการไล่ระดับสี

ในส่วนของความหมายของสี ก็มีเช่นกัน

  1. สีน้ำเงิน หมายถึง ความน่าเชื่อถือ
  2. สีม่วง หมายถึง พลัง/ปัญญา
  3. สีแดง หมายถึง Passion

อ่านเพิ่มเติมเกี่ยวกับความหมายของสีได้ที่บทความสีนั้นสำคัญไฉนกับ Marketing

Font (ตัวหนังสือ)

ตัวหนังสือ ก็ต้องลงดีเทลเช่นกัน เราพยายามหาแบบฟอนต์กันนานพอตัว เลือกแล้วเลือกอีกเปลี่ยนไปมาจนเหมาะกับภาพลักษณ์ใหม่ที่เราต้องการจริงๆ และด้วยความที่พี่โบ Design Director ของเราที่มีตาเหยี่ยว ฟอนต์ไหนเบี้ยวสวยไม่สวย ไม่ผ่าน QC โดนตัดออกไป จนสรุปที่ฟอนต์ภาษาอังกฤษ เราใช้ Museo Sans และ ภาษาไทย DB Heavent ซึ่งยอมเสียเงินซื้อฟอนต์กันเลยทีเดียว เพื่อหน้าตาที่ดี อยากสวยก็ต้องลงทุนกันหน่อยใช่ไหม 🙂

ตัวอย่างฟอนค์ภาษาไทยสำหรับโลโก้ ตัวอย่างฟอนต์ภาษาอังกฤษ

Image (รูปภาพประกอบเว็บไซต์)

รูปภาพที่ใช้ในเว็บไซต์เป็นอีกอย่างที่ต้องมีการกำหนดทิศทางการใช้ให้ไปในทางเดียวกัน ไม่มั่วซั่ว เพราะมันจะง่ายกับคนที่ทำกราฟิก ทั้งคนที่ทำอยู่และคนที่จะมาทำต่อ

ตัวอย่างรูปภาพประกอบเว็บไซต์

ในเว็บเราจะมีการกำหนดอยู่สามรูปแบบคือ 1. Illustrator (ภาพวาด) 2. Portrait (ภาพคน) 3. Photograph (ภาพถ่าย)

โดยจะมีการกำหนดรูปแบบของกราฟิกที่ใช้ โทนสี และสไตล์การแต่งรูปให้เหมาะสม และเข้ากับตัวเว็บ ไม่แตกเหล่าแตกกอกัน ทำให้ไม่ว่ารูปนั้นจะถูกแชร์ไปที่ไหนก็ตาม มันจะยังคงแบกความเป็น Content Shifu ไปด้วยตลอดเวลา และนั่นคือสิ่งที่เราอยากจะให้เป็น

Unity (ความเป็นอันหนึ่งอันเดียว)

เมื่อเราดีไซน์และวางแผนไว้ทุกองค์ประกอบแล้ว สิ่งที่สำคัญที่สุดคือเราต้องเอาทุกอย่างมาวางและประกอบกัน และดูว่ามันเป็นอันหนึ่งอันเดียวกันมั้ย ทั้งภาพประกอบ เว็บไซต์ และองค์ประกอบอื่นๆ

การวางองค์ประกอบเว็บไซต์ให้เป็นอันหนึ่งอันเดียวกัน การวางองค์ประกอบเว็บไซต์ให้เป็นอันหนึ่งอันเดียวกัน การวางองค์ประกอบเว็บไซต์ให้เป็นอันหนึ่งอันเดียวกัน

เข้าสู่ขั้นตอนทำ Website ได้ (UX&UI)

ก่อนจะสวย ต้องใช้งานง่ายก่อน (UX)

ก่อนจะเริ่มดีไซน์ ในส่วน UX นี้ถือว่าเราให้เวลากับมันค่อนข้างเยอะพอสมควรเลย เพราะผลผลิตที่ดีต้องเริ่มจากพื้นฐานที่ดีก่อน

ตัวอย่างของการทำ UX เช่น การทำความเข้าใจ Persona การทำความเข้าใจเว็บไซต์อื่นๆ ในธุรกิจเดียวกัน การออกแบบ User Journey การออกแบบ Site Structure เป็นต้นในทุกๆ ส่วนที่เราออกแบบเราได้สร้าง User Journey ของเราได้ใช้งานได้อย่างสะดวก

ทำความเข้าใจ Persona

ก่อนหน้าที่ปิ่นจะกระโดดเข้ามาทำงานในวงการเว็บดีไซน์ ก็ไม่รู้จักสิ่งนี้อย่างจริงจังมาก่อน ว่า Persona คืออะไร แต่ตอนนี้กลับชอบทั้งกระบวนการในการทำและวิธีใช้ของมันเอามากๆ เพราะมันสามารถนำไปใช้ในงานเราทั้ง UX และ UI ได้อย่างน่าเหลือเชื่อ เปรียบเสมือนเป็นเข็มทิศนำทางให้เราไปถึงเป้าหมายได้อย่างรวดเร็วและตรงเป้าหมายมากที่สุด

การทำ Persona คือการทำความเข้าใจกลุ่มเป้าหมายหรือคนที่จะเข้ามาใช้งานเว็บไซต์หรือผลิตภัณฑ์ของเรา ว่าคาแรกเตอร์ของเขาจะเป็นคนประมาณไหน ชอบไม่ชอบอะไร ลักษณะนิสัยเป็นคนยังไง ทำให้เราสามารถเดินเกมได้ถูกจุด รู้ว่าจะต้องทำอะไร เพื่อใคร

ตัวอย่างกลุ่มลูกค้า Content Shifu
ภาพตัวอย่าง Persona (นามสมมติ) ของ Content Shifu

อันที่จริงแล้ว Persona มีหลากหลายรูปแบบมาก แล้วแต่ว่าผลิตภัณฑ์ไหนเหมาะจะมีหัวข้ออะไรบ้างที่จะช่วยให้เข้าถึงกลุ่มเป้าหมายได้ใกล้มากที่สุด กับธุรกิจอื่นๆ ก็อาจมี Persona ที่แตกต่างกันออกไป

วิเคราะห์เว็บไซต์อื่นๆ ในธุรกิจเดียวกัน (Competitor Analysis)

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

แต่ในสายการตลาดคงคุ้นเคยกับการวิเคราะห์คู่แข่งเป็นเรื่องปกติอยู่แล้ว แต่การวิเคราะห์ครั้งนี้ไม่ได้ทำขึ้นมาเพื่อซัพพอร์ทเรื่อง Marketing เลย เป็นการวิเคราะห์ในเชิง UX และ UI เพื่อหาแนวทางในการออกแบบ ทั้ง UX และ UI โดยตรง ซึ่งก่อนจะเริ่ม พี่อรของเราก็ได้วางแผนว่าจะต้องวิเคราะห์คู่แข่งทางตรง (Direct Competitor) และคู่แข่งทางอ้อม (Indirect Competitor) ก่อน

  • Direct Competitor

คู่แข่งทางตรงของเรา คือคู่แข่งที่ทำธุรกิจคล้ายกับเรา มาดูว่าเขาทำอะไรอยู่บ้างและเราจะทำอะไรให้แตกต่างและสร้างจุดเด่นให้กับตัวเราเอง

  • Indirect Competitor

คู่แข่งทางอ้อม คือคู่แข่งที่ไม่มีผลกับเรามากนักเช่นตลาดเมืองนอกหรือคนละธุรกิจแต่ก็ยังมีความใกล้เคียง หรือสิ่งที่เราสนใจอยากจะนำมาวิเคราะห์ถึงข้อดีและข้อเสียของเขาไม่ว่าจะในด้าน UX หรือ UI ก็ตาม

โดยการวิเคราะห์ทั้งสองคู่แข่งนี้ เราจะวิเคราะห์ถึงการใช้งาน ข้อดีข้อเสียในด้าน UX/UI เท่านั้น สิ่งนี้จะทำให้เรามีเหตุผลในการออกแบบมากขึ้น ไม่มาเถียงกันว่าแบบนี้ดีแบบนี้ไม่ดี ทำให้ทุกการออกแบบเรามีเหตุผลรองรับกับมัน

ออกแบบ Site Structure และ User Journey

เราต้องวางภาพรวมของเว็บไซต์เราทั้งหมด สิ่งไหนที่ Persona เราต้องการ อันไหนจำเป็นหรือไม่จำเป็น การเรียงลำดับความสำคัญ ว่าเราอยากจะชูอะไรมากที่สุด และอะไรรองลงมา จะทำให้ User ถูกพาไปตามเส้นทางที่เราวางแผนไว้ ทำให้ทั้งเขาและเราไม่หลุดออกจากเส้นทาง สร้างความเข้าใจที่ตรงกันและสื่อสารกันได้ถูกจุด

 

การวางภาพรวมของเว็บไซต์
ภาพตัวอย่าง Site Structure ของเว็บไซต์ Content Shifu โฉมใหม่

เริ่มวาด Wireframe

เมื่อวางหน้าหลักครบแล้ว ก็เริ่มวาดเพื่อให้เห็นภาพ ใส่รายละเอียดของแต่ละหน้าเพื่อให้เห็นถึงข้อมูลที่จะแสดงในแต่ละหน้าว่ามีอะไรบ้าง และยังไม่ต้องคิดถึงความสวยงามใดๆ ทั้งสิ้น จงคิดถึงแต่การใช้งานที่ง่ายและเข้าใจเท่านั้น

  1. หา Reference
    ไปดูว่าเขาทำอะไรกันที่มันเวิร์ก การจะข้อมูลแบบไหนที่ทำให้คนเข้าใจได้อย่างง่ายได้ รวมถึงวิธีไหนที่เวิร์กละเราสามารถนำมันมาปรับใช้กับงานของเราได้บ้าง
  2. Sketch ลงกระดาษก่อน
    อาจจะไม่ต้องวาดให้สวยที่สุด แต่ต้องเข้าใจที่สุดก่อน ว่าเราจะวางอะไรยังไงไว้ตรงไหนบ้าง ก่อนจะเริ่มลงในโปรแกรมต่างๆ เพื่อจะได้ไม่ต้องมาเสียเวลานั่งแก้นานๆ ถ้าเราทำไปแล้ว

เริ่มวาดจริงๆ ซักที

เย้ ในที่สุดก็เริ่ม Wireframe ซักที จะเห็นได้ว่ามันมีหลายขั้นตอนมาก กว่าจะมาถึงส่วนนี้ เพราะถ้าเราวางแผนรอบคอบเราก็จะผิดพลาดน้อยที่สุด และเราก็อยากจะผิดพลาดให้น้อยที่สุด ในส่วน Wireframe นี้เราใช้ โปรแกรม Balsamiq ในการทำ Wireframe ในครั้งนี้ เพราะมันจะทำให้ดีไซน์เนอร์อย่างเราไม่ไปจดจ่อกับความไม่เท่ากันหรือความสวยงามจนเกินไป เพราะเข้าใจเหล่าดีไซน์เนอร์ทั้งหลาย ถ้าไม่สวยไม่เป้ะมันจะหงุดหงิดมาก…เราก็เป็น ฮ่าๆการงจัดเรียงเนื้อหาบนเว็บไซต์ลง Layout การงจัดเรียงเนื้อหาบนเว็บไซต์ลง Layout

พี่โบบอกไว้ว่า “UX ไม่ใช้การ Invent สิ่งใหม่ แต่คือการนำสิ่งที่ผู้ใช้คุ้นเคยอยู่แล้วมาใช้” คือไม่ต้องให้คนใช้มานั่งเรียนรู้ใหม่ว่าใช้งานอย่างไร ถึงจะเรียกได้ว่าเป็น UX ที่ดี ถ้าคนใช้งงไม่รู้ว่าควรต้องทำอะไรต่อก็เท่ากับ Fail

สร้าง UI ของเว็บไซต์

“ความสวยคือ Subjective เราควรจะดูว่าเหมาะหรือไม่เหมาะ”

เริ่มมาด้วยประโยคสุดอลังการ จากพี่แบงค์ ของเรา ซึ่งก็เห็นด้วยกับประโยคนี้ ความเหมาะสมคือสิ่งที่ควรคำนึงมากที่สุด ส่วนความสวยงามคือเรื่องของปัจเจกบุคคล เพราะเราทุกคนมีความชอบที่ต่างกัน

ถึงตรงนี้ทุกคนคงอ่านมากันจนเหนื่อย จะบอกว่าเราถึงขั้นตอนสุดท้ายแล้ว เย้ ก่อนจะมาเป็นเว็บไซต์ที่ทุกคนเห็นกันอยู่ตอนนี้ เราก็ยังคงมีกระบวนการก่อนสุดท้ายก่อนจะออกมาเป็นดีไซน์ในที่สุด

ความพยายามครั้งที่ 101

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

ออกแบบเว็บไซต์ใหม่
ดีไซน์เริ่มแรกก่อนจะเป็น Content Shifu โฉมใหม่
เว็บไซต์รูปแบบใหม่ Content Shifu
ดีไซน์ล่าสุด (เพิ่มดีเทลและอัตลักษณ์ของแบรนด์มากขึ้น)


เราไม่รู้ว่าครั้งไหนที่จะสำเร็จ อาจจะเป็นครั้งที่ 101 ก็ได้ หากเราไม่หยุดที่จะพยายาม

อย่าลืมว่ายุคนี้ Mobile first

ทุกวันนี้เรามีหลากหลายอุปกรณ์มากในการเข้าถึงอินเทอร์เน็ต ทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือที่ทุกคนมีเป็นอวัยวะที่ 33 ไปแล้ว ขนาดหน้าจอในการแสดงผลที่ต่างกัน การออกแบบให้รองรับ Responsive จึงเป็นเรื่องที่ต้องคำนึง ซึ่งส่วนใหญ่แล้วหน้าตาของทั้ง Desktop และ Mobile ก็จะไม่ต่างกัน สิ่งที่ต่างคือการจัดข้อมูล และขนาดของฟอนต์ ขนาดจอที่เล็กลง ฟอนต์ก็จะใหญ่ขึ้นเพื่อให้อ่านง่ายมากขึ้น หรือการย่อข้อมูลหรือยุบรวมกันเพื่อลดความรกของข้อมูล

สิ่งที่ทำได้และทำไม่ได้

เชื่อว่าดีไซน์เนอร์ทุกคน มีจินตนาการที่มากมาย คิดนอกกรอบ และอยากให้งานออกมาสวยที่สุด ปิ่นก็เป็นหนึ่งในนั้นเช่นกัน ที่คิดว่ามันจะเหมือนกับการออกแบบกราฟิกทั่วไป แต่ในความเป็นจริงแล้วงานเว็บไซต์ค่อนข้างมีข้อจำกัดเยอะพอสมควร เช่น ปกติเราออกแบบทุกอย่างหรือวางทุกอย่างด้วยการกะด้วยสายตา แต่สำหรับเว็บแล้ว ต้องคิดในระบบกริด ต้องแบ่งทุกอย่างออกให้เป็นกลุ่ม หรือเอฟเฟคบางอย่างที่ไม่สามารถทำออกมาได้จริง

ฉะนั้นเราจึงควรสื่อสารกับ Developer ตลอดก็จะดี ว่าถ้าออกแบบมาแบบนี้ในแง่การทำจริงมันสามารถเป็นไปได้มากน้อยแค่ไหน และในฐานะ UX/UI Designer เองก็ควรจะมีความรู้ในเรื่องเขียน Code บ้าง นั่นจะทำให้เราเข้าใจการทำงานของ Developer มากขึ้นและเราเองก็จะสามารถออกแบบได้รองรับกับเทคโนโลยีปัจจุบันที่สามารถทำให้งานที่เราออกแบบสามารถใช้งานจริงได้ด้วยเช่นกัน

สรุป

การรีแบรนด์ ไม่ได้มีจุดประสงค์แค่เรื่องให้สวยงามขึ้นเท่านั้น แต่มันคือการเปลี่ยนแปลง การเติบโตขึ้น เป็นการพัฒนาผลิตภัณฑ์ให้ดีขึ้น เพิ่มมูลค่า สร้างความน่าเชื่อถือ แต่ทั้งหมดก็จะยังไม่หยุดอยู่เท่านี้แน่นอน เราจะพัฒนากันต่อไป จากคำติและชมจากผู้ใช้งานชาว Content Shifu ของเรา และถ้ามีอะไรใหม่เราจะมาอัปเดตให้ทุกคนฟังอีกแน่นอน

ตาคุณแล้ว

หวังว่าทุกท่านจะชอบบทความแรกนี้ของปิ่นนะคะ ฝากทุกท่านติชมได้ที่กล่องแสดงความเห็นด้านล่างได้เลยค่ะ อะไรดีไม่ดีหรือสิ่งไหนที่ปรับปรุงเพิ่มได้อีก เรายินดีรับฟังและพร้อมที่จะพัฒนาขึ้นไปให้ดีขึ้นยิ่งขึ้นต่อไปค่ะ : )

Pin thatchaya
Pin thatchaya

UX/UI Designer of Magnetolabs

ปิ่น เป็น UX/UI Designer จาก Magnetolabs ชื่นชอบงานดีไซน์ทุกแขนงโดยเฉพาะการออกแบบบนโลกดิจิทัล รู้สึกท้าทายเพราะโลกดิจิทัลเปลี่ยนแปลงทุกวัน นอกจากเรื่องการออกแบบแล้วยังมี Passion กับเรื่องอาหาร ท่องเที่ยว และชอบรีวิวให้คนอื่นไปลองตาม

More From Me
>