>มาดู Yahoo! หน้าตาใหม่กัน

July 23, 2009 Design, Web Review Comments

>
(เว็บไซต์ Yahoo! หน้าตาใหม่)


(หากเข้า Yahoo! ตอนนี้จะเจอหน้านี้ ซึ่งมี option ให้เราเลือกด้านบนเพื่อทดลอง version ใหม่)

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

2 วันก่อนหน้าที่ได้อ่านข้อมูลจากเว็บไซต์ All Things Digital ซึ่งได้มีการ preview วิเคราะห์และมีการ cap หน้าจอมาให้ดูกันก่อนหน้าที่เว็บจริงจะขึ้นหนึ่งวัน ซึ่งบอกตรงๆว่าพออ่านแล้วดูรูป ก็ดูไม่ค่อยรู้เรื่อง แต่เมื่อวานพอได้สัมผัสเว็บจริงตัวจริงแล้ว พบว่า…

การออกแบบของเว็บใหม่นั้นดูดีสะอาดตา ยกเลิกการใช้การไล่สีสำหรับ Background ในส่วนของ header ที่แต่ก่อนมีไว้ให้รู้สึกว่ามีความนูนนั้นออกไป ทำให้ดูแล้วไม่หนัก ดูโล่ง สามารถอ่าน content ได้ชัดเจนมากขึ้น มีการใช้สีหลักของ Yahoo! เข้ามา แต่ก็ไม่ได้มากนัก คงน่าจะเป็นเพราะความไม่ชอบส่วนตัวของ CEO Yahoo! Carol Bartz คนนี้ก็ได้

เว็บใหม่นั้นมี features หลายอย่างเพิ่มขึ้นมา แต่ที่เห็นหลักๆเลยก็คือแถบทางด้านข้างซ้ายมือ ซึ่งเป็นที่สำหรับรวม App และ Widget ต่างๆ ให้เราสามารถ access เข้าถึงข้อมูลส่วนตัวของเราได้อย่างรวดเร็ว ไม่ว่าจะเป็นอีเมล์ ดูดวง เล่นเกม หรือแม้กระทั่ง facebook นอกไปจากนี้ ยังสามารถ add Widget ใหม่เพิ่มเข้ามาได้ด้วย จากการกดปุ่ม “Add” แล้วเลือกจาก List ที่ทาง Yahoo! มีให้อยู่แล้ว หรือว่าถ้าอยากจะ add website ที่เราเข้าบ่อยๆเอง ก็ไม่มีปัญหาอะไร ทั้งนี้ทั้งนั้นสามารถ add ได้มากสุดถึง 36 ตัวเลยทีเดียว


(การใช้แถบเมนูด้านข้าง เมื่อ mouseover ที่ icon Facebook)


(ความสามารถในการ add Apps เพิ่มเข้าไปในแถบเมนูได้)

การใช้งานเมนูด้านข้างนั้นง่ายมาก เพียงแค่เอา mouse ไป over ก็จะมีข้อมูลปรากฎขึ้นมาอย่างรวดเร็ว จากการใช้งานด้วย firefox 3.5 แล้วพบว่าการทำงานของตัวเมนูนั้น เร็วมาก ไม่ได้มีความรู้สึกว่า browser หรือเครื่องต้องทำงานหนักแต่อย่างใด

อีกส่วนหนึ่งที่น่าสนใจคือความสามารถในการ Update Status ที่เป็น short message เหมือน Facebook และ Twitter แต่ว่าหากเราต้องการที่จะ update Twitter ของเราเองนั้น ไม่สามารถทำได้จากตรงนี้ หรือแถบเมนูทางด้านข้าง ซึ่งแม้กระทั่งเว็บ All things digital ก็ยังได้พูดถึงว่า “เป็นเรื่องที่ผิดคาดที่เราไม่สามารถ update twitter ของเราได้จากเมนูด้านข้างเหล่านี้” (no ability to update status to the popular microblogging service Twitter on this part of the homepage).

เท่าที่ดูเหมือนว่า ทาง Yahoo! พยายามที่จะ set ให้หน้า Homepage ของตัวเองเป็นเหมือน center ของทุกอย่าง ให้สิ่งต่างๆที่เราใช้อยู่ในชีวิตประจำวัน รวมกันไว้ในที่เดียว เพื่อให้ง่ายในการเข้าถึงข้อมูลต่างๆ โดยไม่ต้องไปหลายๆเว็บไซต์

การ update หน้า Homepage ของ Yahoo! นั้นเกิดขึ้นไม่บ่อยครั้งนัก แต่ด้วยประวัติศาสตร์อันยาวนาน ทำให้หน้า Homepage นั้นมีหลาย version อยู่ (สามารถย้อนกลับไปดู version ก่อนๆ ได้จาก http://kara.allthingsd.com/20090720/yahoo-home-pages-over-the-last-15-years-the-good-the-bad-and-the-ugly-really-ugly/ ซึ่งการ update แต่ละครั้งนั้น ทาง Yahoo! ต้องคิดให้ดีเพราะการเปลี่ยนแปลงครั้งหนึ่งจะมีผลต่อ unique visitor ที่เข้ามาเป็นจำนวนมากถึง 330ล้าน Unique Visitor ต่อเดือนเลยทีเดียว

>Holiday logo – Google และ YouTube

>

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

การแทนที่ logo ด้วยรูปนั้น ทาง google ทำมานานแล้วครับ .. แต่ว่า.. สำหรับ YOUTUBE ผมเพิ่งเคยเห็นเป็นครั้งแรก

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

ทั้งๆที่ก็รู้อยู่ว่า YouTube นั้นปัจจุบันเป็นของ Google ไปแล้ว แต่ว่าก็เหมือนจะไม่เคยเห็นแบบนี้มาก่อน

เปลี่ยนแค่บางส่วน ไม่ได้ถึงขนาดที่ว่าเปลี่ยนทั้งหมดเหมือน Google

แค่เป็นอะไรที่ได้สังเกตุเห็นในเช้านี้เลยเอามาแบ่งปันกันครับ

สำหรับใครที่อยากจะดู logo ของ google ที่ถูกเปลี่ยนไปตาม event ต่างๆ วันนี้มี link มาฝากกัน เป็นสถานที่ที่รวม logo พวกนี้เอาไว้น่ะครับ ลองเข้าตาม link นี้ดู http://www.google.co.th/intl/th/holidaylogos.html

>มาดู Poster "Harry Potter and the Half-Blood Prince" กับการออกแบบที่แปลกตา

July 20, 2009 Design Comments

>

วันก่อนขับรถผ่าน billboard อันใหญ่เบ้งอันหนึ่ง มองขึ้นไปพบว่าเป็น billboard โฆษณาภาพยนตร์ฟอร์มใหญ่ตอนใหม่เรื่อง Harry Potter and the Half-Blood Prince

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

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

Billboard ของภาพยนตร์เรื่องนี้มีภาพของพระเอกนางเอก เพื่อนพระเอก และพ่อมดปรากฎอย่างเด่นชัด โดยใช้สีโทนน้ำเงินเข้ม พร้อมกับมีตัวอักษรชื่อเรื่องอยู่ทางด้านหลัง

สิ่งที่สังเกตได้ที่ว่าน่าสนใจก็คือ billboard และ poster ของ ภาพยนตร์เรื่องนี้ไม่มีตัวอักษรที่เขียนว่า Harry Potter ได้อย่างชัดเจนเลย มันน่าสนใจตรงที่ว่า แม้ว่าจะไม่มีตัวอักษรที่เขียนชื่อเรื่องว่า Harry Potter แต่เราก็รู้ว่าเป็นเรื่อง Harry Potter

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

เป็นลูกค้าเมืองไทยเราอาจจะไม่ผ่านตั้งแต่นำเสนอ

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

ยังไม่จบเท่านี้ ด้วยการที่ layout ของตัวอักษรนั้นเอียง ทำให้ทุกๆอย่างเอียงด้วย แม้กระทั่ง credit ที่อยู่ทางด้านล่าง ทีแรกผมเองก็ตกใจ คิดว่าจะตัดบางส่วนของ credit ออกไปด้วย!! (คิดว่าจะติสซะขนาดนั้น) แต่เปล่าครับ credits นั้นจบ ณ ขอบของ billboard หรือ poster.

ตอนที่ผมเห็นนั้น คำว่า Harry Potter สะกดเป็นภาษาไทย แต่จะมาหารูปใน web เป็นตัวอย่างให้ดูมันหาไม่ได้ง่ายนัก เลยเอาของภาษาอังกฤษมาแทน

แต่ระหว่าง search นั้นก็ไม่วายเจอ version ภาษาเกาหลี ทำให้รู้ว่า คงจะต้องวุ่นวายเปลี่ยนกันทุกประเทศทั่วโลก แล้วก็เลยติดเอามา post ลงให้ดูใน blog นี้ด้วย


>work:// weloveshopping.com

July 20, 2009 rgb72 Comments

>

อีกครั้ง หลังจากโครงการ truesme ที่เพิ่งจบไป rgb72 ได้รับความไว้วางใจจากทาง true อีกครั้งให้้มาเป็นผู้รับผิดชอบในการสร้างสรรค์ผลงานให้กับเว็บไซต์ที่มียอดผู้เยี่ยมชมอันดับหนึ่งของ true นั่นคือเว็บไซต์ weloveshopping.com

weloveshopping.com เป็นเว็บไซต์ที่ให้บริการสำหรับธุรกิจขนาดย่อม หรือ SME ให้สามารถเปิดอีกช่องทางหนึ่งในการขายสินค้าของตนได้โดยผ่านทางออนไลน์ โดย weloveshopping.com ทำหน้าที่เป็น tools ตัวหนึ่งเพื่อให้นักธุรกิจสามารถจัดการนำสินค้าของตนขึ้น-ลง จากเว็บไซต์ กำหนดราคาสินค้า กำหนดจำนวนหน้า เพิ่มและลดได้ เป็นตัวเชื่อมต่อระหว่าง technology ที่น่าปวดหัวกับนักธุรกิจที่ไม่ได้มี know-how ทางนี้มากมายได้เป็นอย่างดี

ทาง rgb72 ได้รับโจทย์มาจากทาง true ว่าต้องการให้เราพัฒนาเฉพาะ flash หน้าแรก ซึ่งฟังดูแล้วเหมือนจะง่าย แต่ใครจะรู้ว่า flash intro สำหรับ weloveshopping นั้น ไม่ได้เป็นแค่ flash intro ง่ายๆเหมือนที่อื่นๆเค้าทำกัน

Concept นั้นถูกกำหนดมาจากทีม weloveshopping ของทาง true เอง โดยทางทีมแจ้งมาว่าต้องการจะทำ flash ให้มีลักษณะเป็นรูปห้องหลายๆห้อง โดยแต่ละห้องจะนำเสนอเรื่องราวของแต่ละ section ภายในเว็บไซต์ ทั้งนี้ user ต้องสามารถเข้ามาหมุนห้อง เลือกห้อง เองได้

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

Flash ชิ้นนี้จึงมี PHP เป็นเบื้องหลังสำคัญ ประกอบกับ XML เพื่อทำการเชื่อมต่อระหว่างฐานข้อมูลและตัว Flash เอง

สำหรับด้าน graphic นั้น ทางทีม weloveshopping นั้นมีมือดีในการทำ 3D ดังนั้นจึงช่วยลดขั้นตอนและเวลาในการปั้น 3D ให้ถูกใจลูกค้าได้มากนัก เนื่องจากว่าไม่ต้องมีการส่งไฟล์ไปมาและ comment หลายๆรอบ อย่างไรก็ตามการนำ 3D หลายตัวมาประกอบกันนั้น ก็ไม่ใช่เรื่องง่าย

งานชิ้นนี้ต้องบอกว่า designer น๊อต และ ActionScript programmer อย่าง มี่ นั้นต้องใช้กำลังภายในไม่น้อย นอกจากนี้ยังต้องขอบคุณกำลังสำคัญอย่างคุณโบ๊ทที่มักจะเข้ามาช่วยยามขับขันได้อย่างรวดเร็วทันใจเสมอ

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

ai (คำที่เกี่ยวข้อง: Adobe, Illustrator)
– ประเภทของไฟล์ที่สร้างโดยโปรแกรม Adobe Illustrator โดยภาพที่ได้นั้นจะเป็นภาพประเภท vector หรือภาพ graphic ประเภทภาพวาด และลายเส้น
— WEB101 by rgb72

72's Friends

Useful Links

rgb72


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: นักธุรกิจต่างชาติ
+ ตอนที่20: ความฝันที่ 2 เที่ยวต่างประเทศ
+ ตอนที่21: Super AE
+ ตอนที่22: สินบน
+ ตอนที่23: ผู้หญิงที่ผมไม่รับ
+ ตอนที่24: งานที่คุณไม่ได้ดู
+ ตอนที่25: นักออกแบบ
+ ตอนที่26: คู่แข่งที่รัก
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 1/2
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 2/2
+ ตอนแทรก: หาาา?... อะไรนะ!!??
+ ตอนที่28: ยิ่งให้... ยิ่งได้
+ ตอนที่ 29: Wall of Frames
+ ตอนที่ 30: ผี 72
+ ตอนที่ 31: เพื่อนจากตะวันออกกลาง
+ ตอนที่ 32: Photography
+ ตอนที่ 33: Too Far from the Dream





Recent Comments

Powered by Disqus