Home » design » Recent Articles:

dribbble.com

September 4, 2010 Website Review, design No Comments

dribbble

ได้ยินชื่อเสียงมาพอสมควร สำหรับเว็บไซต์แนวคิดใหม่ที่ชื่อว่า dribbble.com (ผมพิมพ์ไม่ผิดครับ ตรงกลางมีตัว B 3 ตัว)ครั้งแรกจากแมกกาซีนที่อ่านอยู่ ครั้งนี้รับรู้ผ่านประเด็นเรื่อง icon ใหม่ของ itunes10 ที่มีดีไซน์เนอร์คนหนึ่งเขียนอีเมล์หา Steve Jobs ว่า icon ใหม่นั้น ดูไม่ได้เรื่องเลย จึงทำให้มีดีไซน์เนอร์อีกมากมายลองทำ icon สำหรับ itunes10 ขึ้นมาประชันโฉมกัน

เว็บไซต์ dribbble.com มี concept ที่น่าสนใจก็คือ เป็นเว็บไซต์สำหรับให้เหล่าดีไซน์เนอร์บอกผู้คนว่า ตัวเองกำลังออกแบบอะไรอยู่ จากนั้นก็ให้เพื่อนเข้ามา follow ได้ด้วย

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

แวะเวียนเข้าไปดู สิ่งที่ได้อีกอย่างคือ ได้เห็นงานสวยๆของดีไซน์เนอร์ทั่วโลกครับ

  • Share/Bookmark

พบ be>our>friend

วันนี้ได้มีโอกาสไปพบเพื่อนที่ไม่ได้เจอกันแบบตัวเป็นๆมานาน นั่นคือไอ้คุณนัท แห่ง be>our>friend

นัทเป็นเพื่อนตั้งแต่สมัยทำงานอยู่ ewit ส่วนจุดมุ่งหมายของการพบปะกันในวันนี้ก็เพื่อคุยกันเรื่องงานนิดหน่อย แล้วก็เป็นโอกาสที่ดีที่เราจะได้อัพเดทสมองเรา (และอาจจะสมองมัน) ซึ่งนอกจากวันนี้จะได้รู้ว่า ปัจจุบันนี้นัทกำลังทำอะไรอยู่ ทดลองอะไรอยู่ แล้วมี invention อะไรใหม่ๆ หรือแม้กระทั่งเรื่องราวการไปสอนหนังสือที่มหาวิทยาลัยกรุงเทพที่กำลังให้นักศึกษาเขียนโปรแกรมการบังคับเครื่องบินบังคับด้วย iPhone (ซึ่งผมตื่นเต้นเอาซะมากๆ) ผมก็ยังได้ของติดมือกลับมา

ไม่ใช่อะไร แต่เป็นนามบัตร นามบัตรของ be>our>friend มีลักษณะเป็นสี่เหลี่ยมผืนผ้าเหมือนนามบัตรทั่วไป แตกต่างตรงที่มีรอยตัดตรงกลางเป็นรูปตัว “U” ซึ่งมีเอาไว้สำหรับ “ขั้นหนังสือ”

เห็นว่า creative ดี เลยเอามา post ให้ได้ดูกัน

be our friend business card

  • Share/Bookmark

Logo สวยด้วย Helvetica

August 22, 2010 design No Comments

Heveltica อีกแล้วววววว.. ใครต่อใครก็ชมกันหนักหนา ชอบกันมากมาย ไอ้ font ที่ชื่อ Helvetica เน๊ยะ บางคนว่าสวยงามมากมาย บางคนยังแยกไม่ออกด้วยสายตาได้ระหว่าง Helvetica กับ Arial .. (แต่หลายคนบอกได้ด้วยความรู้สึก .. เท่ซะงั้น) วันนี้ไปขอข้อมูลมาจากเว็บ webdesignerdepot.com ในหัวข้อ 40 Excellent Logos Created with Helvetica ที่รวบรวม logo ดังๆ ที่สร้างโดยใช้ font Helvetica มาให้ได้ดูกัน รวมๆกันแล้วจะเห็นว่า Helvetica นี่ บางครั้งแค่พิมพ์ลงไปเฉยๆ ก็เป็น logo ได้แล้ว

  • Share/Bookmark

5 เทรนด์ของการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก (ตอนที่5)

หัวข้อนี้เขียนต่อเนื่องในกลุ่มเรื่อง “5 เทรนด์ของการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก” โดยได้เริ่มต้นจากเทรนด์ที่หนึ่ง ซึ่งสามารถติดตามได้จาก link นี้ >http://www.blog72.net/index.php/2010/08/16/5-smallbiztrends-1

มาต่อสำหรับ เทรนด์ การออกแบบเว็บไซต์แบบที่ห้า (สุดท้ายแล้ว) สำหรับธุรกิจขนาดเล็ก

5. A/B Testing

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

ว่าแต่เราจะรู้ได้อย่างไรล่ะ ว่าเว็บของเรานั้น ดีพอที่จะทำหน้าที่เหล่านั้นได้ บางครั้งการที่ปุ่ม “Free Trial” ของเราอยู่ซ้าย หรือ อยู่ขวา ก็อาจจะสร้างความแตกต่างทางจำนวนคนกดคลิกเข้ามาก็เป็นได้

หนึ่งในวิธีการทดสอบซึ่งเป็นที่นิยมมากๆนั่นคือการทดสอบแบบเปรียบเทียบ หรือที่เค้าเรียกกันว่า A/B testing (หรือบางครั้งก็เรียกว่า split testing) A/B testing เป็นการทดสอบเพื่อหาความแตกต่างระหว่างงานออกแบบสองแบบ (หรือบางครั้งก็มากกว่า) ซึ่งจะทำการทดสอบโดยให้คนที่เข้ามา ได้พบกับเว็บไซต์ในเวอร์ชั่นที่ต่างกัน และทำการวัดผล ยกตัวอย่างเช่น เราออกแบบเว็บมาสองแบบ เพื่อทำการทดสอบ แบบแรกมีปุ่ม Free Trial อยู่ทางซ้าย อีกแบบอยู่ทางขวา จากนั้น เมื่อมีคนเข้ามาในเว็บไซต์ 100 คน 50คนจะไปพบกับเว็บไซต์เวอร์ขั่นแรก อีก 50 คนจะไปพบกับเว็บไซต์เวอร์ชั่นที่สอง แล้วเราก็จะเอาตัวเลขมาประมวลผลดูว่า การวางปุ่มไว้ด้านซ้ายนั้น คนจะชอบกดคลิกมากกว่า การวามปุ่มทางด้านขวาเท่าไร่

ทางทดสอบ A/B testing นั้น ไม่จำเป็นว่าจะทดสอบได้กับแค่ปุ่มเท่านั้น ยังสามารถทดสอบได้กับอีกหลายอย่าง เช่น layout, headline, icons, สี, และอื่นๆอีกมากมาย อธิบายกันมาเยอะมาก ต่อไปนี้เป็นเทคนิคที่ควรรู้ในการเริ่มทำ A/B testing

1. รู้ให้ชัดถึงความต้องการที่แท้จริงในการทำ A/B testing เช่น ต้องการเพิ่มจำนวนคนกดปุ่ม Sign Up ดังนั้น สิ่งที่ต้องทำการทดสอบน่าจะเป็น ประเภทของแบบฟอร์ม, ความยาวinput box ของแบบฟอร์ม เหล่านี้เป็นต้น

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

3. อย่าทำการทดสอบแค่ A/B testing อย่างเดียว จริงๆแล้วมี tools อื่นๆอีกมากมายที่จะทำให้เราพัฒนาเว็บไซต์และเห็นความแตกต่างได้มากกว่านี้ ยกตัวอย่างเช่น Feedback Army หรือ User Testing ทั้งนี้เพื่อให้เราสามารถรู้เรื่องความต้องการของผู้เยี่ยมชมได้มากขึ้น

การทำ A/B testing ไม่ได้แปลว่าจะทำให้งาน design ของเราดูดีขึ้น แต่จะทำให้เว็บของเราใช้งานได้ดีขึ้น เหมาะสมมากขึ้น

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

** ผมเห็นว่าการทำ A/B testing แม้ว่าในต่างประเทศจะทำกันมามากแล้ว แต่ก็ยังคิดว่าเป็นเรื่องที่น่าสนใจ ดังนั้นถ้ามีโอกาสจะพยายามมาเขียนเรื่อง A/B testing อย่างละเอียดกันนะครับ **

———————————

ข้อมูลจาก American Express Open Forum ในกลุ่มหัวข้อ Idea Hub > Technology  > 5 เทรนด์ในการออกแบบสำหรับธุรกิจขนาดเล็ก (5 Small Biz Web Design Trends to Watch) ตาม link นี้ http://www.openforum.com/idea-hub/topics/technology/article/5-small-biz-web-design-trends-to-watch-grace-smith

  • Share/Bookmark

5 เทรนด์ของการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก (ตอนที่4)

หัวข้อนี้เขียนต่อเนื่องในกลุ่มเรื่อง “5 เทรนด์ของการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก” โดยได้เริ่มต้นจากเทรนด์ที่หนึ่ง ซึ่งสามารถติดตามได้จาก link นี้ >http://www.blog72.net/index.php/2010/08/16/5-smallbiztrends-1

มาต่อสำหรับ เทรนด์ การออกแบบเว็บไซต์แบบที่สี่สำหรับธุรกิจขนาดเล็ก

4. Clear Calls to Action

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

ซึ่งถ้าเป็นเช่นนั้น การที่เราต้องการให้เค้า “ทำอะไรบางอย่าง” หรือที่เรียกว่า Calls to Action นั้น เราก็ควรจะมีวิธีการดึงความสนใจ และทำให้เค้าเข้าใจในสิ่งที่เรานำเสนอได้อย่างง่ายๆ

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

1. การใช้ภาษา ลองใช้คำที่สั้นๆ แต่ได้ใจความ จะให้ดีควรเขียนบอกด้วยว่า หลังจากที่เค้าได้ทำกิจกรรมนั้นๆ แล้ว เค้าจะได้อะไรเป็นผลตอบแทน นอกจากนี้การใส่คำที่ช่วยสร้างความตื่นตัวให้กับคนอ่าน ก็อาจจะมีประโยชน์เช่นกัน เช่นคำว่า Hurry!, Free! เป็นต้น

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

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

4. ขนาด แน่นอนว่าขนาดของปุ่มที่เราต้องการให้เค้ากดนั้น ควรต้องมีขนาดที่ใหญ่ ใหญ่พอที่ผู้เยี่ยมชมเข้ามาแล้วจะเห็น เห็นแล้วจะกด ที่สำคัญต้องใหญ่กว่าภาพรวมของการออกแบบทั้งหมด ทั้งนี้เพื่อความชัดเจนและโดดเด่น

แน่นอนว่า ทั้งหมดนี้ คุณควรต้องทดลองกับปุ่มหลายๆรูปแบบ หลายๆขนาด และต่างโทนสี ลองดูว่าปุ่มที่แตกต่างกัน สร้างความน่าสนใจที่แตกต่างกันให้กับคุณได้อย่างไร

———————————

ข้อมูลจาก American Express Open Forum ในกลุ่มหัวข้อ Idea Hub > Technology  > 5 เทรนด์ในการออกแบบสำหรับธุรกิจขนาดเล็ก (5 Small Biz Web Design Trends to Watch) ตาม link นี้ http://www.openforum.com/idea-hub/topics/technology/article/5-small-biz-web-design-trends-to-watch-grace-smith

  • Share/Bookmark

Search This Site:



rgb72 on Facebook

72's Friends

Useful Links

  • Blognone - News and technology update
  • Divland - แหล่งรวมข้อมูลการเขียน CSS
  • theFWA - Favorite web awards, update great website everyday
  • usably.net - It’s all about user experience
  • Web designer wall ข้อมูลดีดีจากต่างประเทศสำหรับ web designer

อ่านย้อนหลัง

being72


being72 คือหนังสือที่รวบรวมเรื่องราวความเป็น rgb72 บริษัทออกแบบเว็บไซต์ ตั้งแต่อดีตถึงปัจจุบัน โดยจัดทำเนื่องในโอกาสครบรอบ 10ปี

+ บทความจากผู้เขียน
+ ตอนที่1: Pre-rgb72 / ทำงานกับ Martha Stewart
+ ตอนที่2: Pre-rgb72 / Arcadian
+ ตอนที่3: Pre-rgb72 / ewit
+ ตอนที่4: เริ่มต้นอย่างเงียบๆ
+ ตอนที่5: Generation 1 (ยุคที่1:บุกเบิก) / เริ่มต้นที่ศูนย์
+ ตอนที่6: โทร โทร โทร...
+ ตอนที่7: นามบัตร
+ ตอนที่8: หนังสือพิมพ์และโทรทัศน์
+ ตอนที่9: MATCHING STUDIO
+ ตอนที่10: มีเงินที่ไหน ให้ไปที่นั่น
+ ตอนที่11: พนักงานคนแรก
+ ตอนที่12: ภาพแทรก ออฟฟิสที่สองของ rgb72
+ ตอนที่13: เพื่อนจาก ewit
+ ตอนที่14: GettyImages ฟ้องจริง ถึงจริง
+ ตอนที่15: เว็บไซต์ที่ทำแบบมากที่สุด
+ ตอนที่16: ความฝันที่ 1 พบชื่อลูกค้าทุกๆ ห้านาทีที่ขับรถ
+ ตอนที่17: สมุย.. สร้างเสร็จได้ในวันเดียว
+ ตอนที่18: ขึ้นศาล.. มันไม่สนุก
+ ตอนที่19: นักธุรกิจต่างชาติ





Recent Comments:

  • iballbaa: เก่ง.การเว็บ...
  • iballbaa: 555 คุณบีภาพนี้โครตเท่ห์อะ :D...
  • B.TWF: ถูกใจอย่างแรงครับ...
  • sittipong: ถถถถ.ถ.ถ..ถ.. ถูกต้ออองง รึเปล่า ไม่บอกดีกว่าครับ เผาเค้าไว้เยอะ -_-"...
  • sittipong: 5555555 คุณนี่.. ผมอุตส่าห์ไม่พูดแล้วนะคับ..​พยายามมาขุดคุ้ยอยู่นั่น 555555...