ผู้ใช้ Android โดยเฉพาะสาย Nexus คงคุ้นเคยกับภาพพื้นหลังแนวทาง Material Design ที่ใช้รูปทรงเรขาคณิต ภาพเหล่านี้ดูเผินๆ เหมือนเป็นภาพที่สร้างด้วยคอมพิวเตอร์ (CG) แต่แท้จริงแล้วมันเป็น "ภาพถ่าย" ของกระดาษสีซ้อนกันหลายชั้น ซึ่งอิงจากแนวคิดของ Material Design นั่นเอง

กูเกิลจ้างศิลปินชาวสวีเดน Carl Kleiner มารับงานนี้ต่อเนื่องกันหลายปีแล้ว ในรอบของ Android 6.0 Marshmallow กูเกิลก็เผยกระบวนการทำงานของ Kleiner ให้เห็นว่าเบื้องหลังเกิดขึ้นได้อย่างไร โจทย์ของกูเกิลคือใช้สีตามโลโก้ของบริษัท บวกกับสีเทาอีกหนึ่งสี ส่วน Kleiner ยังใช้กระดาษตัดเป็นรูปเรขาคณิต ซ้อนกันหลายชั้น และเพิ่มวัสดุบางอย่างเพื่อสร้างลวดลาย (texture) ให้ดูมีมิติมากขึ้น

ไมโครซอฟท์ออก Office UI Fabric เฟรมเวิร์คพัฒนาเว็บแอพฝั่ง front-end (แบบเดียวกันกับ Bootstrap) ให้นักพัฒนาเว็บสามารถนำไปใช้สร้างเว็บแอพเพื่อให้ได้ดีไซน์แบบเดียวกันกับ Microsoft Office อย่างรวดเร็ว

เช่นเดียวกันกับเฟรมเวิร์คยอดนิยมตัวอื่น Office UI Fabric ถูกออกแบบมาให้ทำงานได้ดีกับอุปกรณ์พกพาและรองรับการปรับขนาดตามหน้าจอแบบ responsive โดยได้รวมชุดของ CSS ที่ช่วยกำหนดรูปแบบฟอนต์, สี,ไอคอน, อนิเมชัน ให้ได้สไตล์ที่ดูเหมือนกับ Office และใช้การวางเลย์เอาต์แบบ responsive grid อีกทั้งยังรวมคอมโพเนนต์สำเร็จรูปไว้ให้ใช้งานเรียบร้อย

สัปดาห์ที่แล้วไม่ได้มีแต่กูเกิลที่เปลี่ยนโลโก้ แต่ยังมี Verizon โอเปอเรเตอร์รายใหญ่ของสหรัฐที่เปลี่ยนโลโก้ใหม่ด้วยเช่นกัน

โลโก้เดิมของ Verizon ใช้มาตั้งแต่ปี 2000 โดยเป็นรูปเครื่องหมายถูกอันใหญ่บนคำว่า Verizon ที่ลากหางตัว Z ยาว ส่วนโลโก้ของใหม่เรียบง่ายกว่าเดิม แต่ยังคงเครื่องหมายถูกที่เป็นสัญลักษณ์ของบริษัทไปแล้วเอาไว้ ในภาพรวมแล้วยังใช้โทนสีดำ-แดงเหมือนของเดิม

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

คำตอบหนึ่งที่เป็นไปได้คือไฟล์โลโก้ของกูเกิลเป็นไฟล์ SVG ที่สร้างแบบเวกเตอร์ ซึ่งโลโก้แบบเก่าใช้ฟอนต์แบบ serif ที่มีเส้นโค้งเยอะ การวาดโลโก้ต้องใช้เส้นโค้ง bezier curve จำนวนมาก ส่งผลให้ไฟล์มีขนาดใหญ่ตามไปด้วย

กูเกิลเคยเปิดคอร์สสอนพัฒนาแอพ Android ฟรีบนเว็บไซต์ Udacity มาแล้ว คราวนี้กูเกิลขยับจากการสอนเขียนโค้ด มาเป็นสอนนักพัฒนาว่าควรดีไซน์แอพ Android อย่างไร โดยอิงอยู่บนแนวทาง Material Design เป็นหลัก

คอร์สนี้มีชื่อว่า Android Design for Developers ใช้เวลาเรียนประมาณ 6 ชั่วโมงต่อสัปดาห์ เป็นเวลานาน 4 สัปดาห์ ผู้เรียนควรมีประสบการณ์เขียนแอพ Android มาก่อน และมีพื้นฐานการใช้ Git สำหรับเรียกดูซอร์สโค้ดตัวอย่างด้วย คอร์สเรียนฟรีไม่เสียเงิน แต่ถ้าอยากได้ใบรับรองจาก Udacity ก็เสียเงินเพิ่มอีก 200 ดอลลาร์

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

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

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

การเปลี่ยนโลโก้ครั้งนี้เป็นการเปลี่ยนโลโก้ของกูเกิลครั้งที่ 6 แต่เปลี่ยนรูปโลโก้อย่างเห็นได้ชัดเป็นครั้งที่ 3

ดูโลโก้ใหม่ได้ท้ายเบรก

ที่มา - The Verge

โครงการ Xenlism สำหรับลินุกซ์เป็นโครงการที่เกิดจากแนวคิดง่ายๆ คือ "อยากได้ต้องทำเอง"
เริ่มต้นโครงการนี้มาจากการที่ผมทำการติดตั้ง Elementary OS Pantheon บนลินุกซ์ Arch การติดตั้งเป็นไปได้ด้วยดีแต่การใช้งานจริงไม่ราบรื่นนัก เนื่องด้วยผมชอบการออกแบบของ Elementary OS มากจึงได้ทำการแก้ไขดัดแปลงธีมของ Zukitwo เพื่อให้ใช้งานกับ Gnome Shell พร้อมด้วยพัฒนาส่วนขยายของ Gnome Shell ขึ้นมาด้วย เมื่อใช้งานได้เป็นที่น่าพอใจ(ของผมเอง) จึงทำการแจกจ่ายตามชุมชน Open Source ผลตอบรับดีพอสมควรจึงกลายเป็นจุดเริ่มต้นของโครงการ Xenlism สำหรับลินุกซ์

เชื่อว่าหลายคนยังจำกันได้กับมหากาพย์คดีสิทธิบัตรระหว่าง Apple และ Samsung ที่จะกลายเป็นหน้าหนึ่งของประวัติศาสตร์วงการไอทีกับคำตัดสินมูลค่าเงินชดเชยที่ Apple ผู้ชนะคดีจะได้รับจากการที่ Samsung ละเมิดสิทธิบัตรเป็นมูลค่าสูงกว่า 1 พันล้านดอลลาร์ ตอนนี้ตัวเลขเงินชดเชยอาจหายไปวูบเดียวกว่า 500 ล้านดอลลาร์ หลังสิทธิบัตรสำคัญฉบับหนึ่งของ Apple ที่เกี่ยวพันคดีนี้เพิ่งถูกพิจารณาใหม่ว่าเป็นโมฆะ

แอปเปิลปรับโฉมหน้าเว็บ Apple.com ครั้งใหญ่ในรอบหลายปี การเปลี่ยนแปลงที่สำคัญคือเปลี่ยนมาใช้ไอคอนผลิตภัณฑ์แบบ monochrome แทนรูปผลิตภัณฑ์แบบของเดิม และยกเลิกโดเมนเนม store.apple.com ที่เดิมแยกจาก www.apple.com โดยรวมเอาหน้าซื้อสินค้ามาเป็นส่วนหนึ่งของเว็บหลัก

หน้าเพจของผลิตภัณฑ์แต่ละตัวจะมีปุ่ม Buy เพิ่มเข้ามา กดแล้วจะเข้าหน้าซื้อสินค้าทันที (โดเมนจะเป็น http://www.apple.com/shop แทน store.apple.com) เมื่อเลือกสีและสเปกที่ต้องการแล้ว จะมีแถบยืนยันการสั่งซื้อขึ้นมาที่ขอบล่างของหน้าจอ

ใครที่คุ้นเคยกับเว็บแอปเปิลแบบเก่าที่แยกหน้า Apple Store ออกจากหน้าเว็บปกติ คงต้องปรับความคุ้นเคยกันใหม่ครับ

ผู้อ่าน Blognone น่าจะพอรู้จักกับ Dyson แบรนด์เครื่องใช้ไฟฟ้าชั้นนำจากอังกฤษ ล่าสุดทางทีม Blognone ได้รับเชิญไปฟังแนวคิดและการออกแบบผลิตภัณฑ์จากวิศวกรของ Dyson ในงาน Dyson Design Talk จึงนำมาเล่าสู่กันฟังครับ

เครื่องดูดฝุ่นรุ่นแรกของ Dyson รุ่น DC01 ถูกคิดค้นและพัฒนาโดย James Dyson จากสาเหตุที่เครื่องดูดฝุ่นรุ่นที่ดีที่สุดในท้องตลาดที่เขาซื้อมา มีประสิทธิภาพแย่ลงเมื่อฝุ่นในถุงเก็บใกล้เต็ม ชื่อรุ่น DC ย่อมาจาก Dual Cyclone ที่ได้รับแรงบันดาลใจจากกรวยดักฝุ่นของโรงงานอุตสาหกรรม สามารถอ่านประวัติแบรนด์เพิ่มเติมจากรีวิวพัดลมไร้พัด Dyson Cool AM08

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

ในส่วนไอคอนของกรุ๊ปนั้นก็มีการปรับเปลี่ยนให้ผู้หญิงออกมาอยู่ข้างหน้า แล้วผู้ชายยืนข้างหลังสองไอคอน (ไอคอนมีขนาดเท่ากัน)

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

กูเกิลออก Material Design Lite (MDL) ชุดไลบรารีสำหรับสร้างเว็บแบบ Material Design ได้อย่างง่ายดาย

MDL สร้างขึ้นด้วยเทคโนโลยี Web Components โดยพัฒนาต่อจาก Polymer ของกูเกิลเอง สามารถใช้งานกับเบราว์เซอร์ยุคใหม่ได้ทุกตัว ทำงานแบบ responsive ได้บนทุกขนาดหน้าจอ มันถูกออกแบบมาให้เรียกใช้แบบดาวน์โหลดผ่าน CDN ด้วยขนาดที่เล็กเพียง 27KB เมื่อบีบอัดแล้ว (แต่ใครจะเอาไฟล์มาโฮสต์เองก็ได้เช่นกัน)

ไมโครซอฟท์เผยวิดีโอเบื้องหลังการถ่ายทำภาพพื้นหลัง (Desktop Background) แบบดีฟอลต์ของ Windows 10 โดยเป็นไอคอนหน้าต่าง Windows ที่มีแสงส่องออกมาจากด้านหลัง

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

แน่นอนว่าภาพนี้จะกลายเป็นภาพที่พบได้บ่อยมากที่สุดอีกภาพหนึ่งของวงการไอที (อารมณ์เดียวกับภาพเนินเขาของ Windows XP หรือภาพโลโก้ของ Windows 7) และไมโครซอฟท์ก็มีวิสัยทัศน์ว่าจะมีอุปกรณ์ที่ใช้ Windows 10 มากถึง 1 พันล้านชิ้นในอีกไม่กี่ปีข้างหน้า

ที่มา - The Verge

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

แอปเปิลไม่ได้ให้ความสนใจกับการเปลี่ยนแปลงของอุตสาหกรรมมากเท่าที่ควรตลอดหลายปีที่ผ่านมา แม้ว่าการออกแบบอุตสาหกรรม (Industrial Design; Product Design; Experience/Service Design) ของแอปเปิลยังดีที่สุด แต่เมื่อกูเกิลเปลี่ยนการออกแบบเป็น Material Design กูเกิลก็สามารถทำ UI ออกมาได้สูสีหรืออาจจะดีกว่าแอปเปิลแล้ว

ปีที่แล้ว กูเกิลเปิดตัว Material Design พร้อม Android 5.0 และในรอบปีที่ผ่านมา เราก็เห็นแอพ Android จำนวนไม่น้อยปรับโฉมตัวเองเป็น Material Design มากขึ้น

อย่างไรก็ตาม ระบบปฏิบัติการ Android ที่รองรับ Material Design เต็มรูปแบบต้องเป็น Android 5.0 ขึ้นไปเท่านั้น ถ้านักพัฒนาแอพอยากรันบนระบบปฏิบัติการรุ่นเก่าให้ราบรื่น ก็ต้องลงแรงแก้ปัญหากันเอง ซึ่งเป็นงานยากพอสมควร ในงาน I/O ปีนี้ กูเกิลจึงออกตัวช่วยเพื่อให้ Android รุ่นเก่าสามารถมี UI แบบ Material โดยนักพัฒนาไม่ต้องทำอะไรเพิ่ม กูเกิลเตรียมมาให้หมดแล้ว

กูเกิลเปิดตัวเว็บ google.com/design ใหม่เป็นศูนย์รวมสำหรับนักออกแบบ ที่จะรวมเอาบทความแนวคิดการออกแบบ และทรัพยากรสำหรับการออกแบบต่างๆ มาไว้ที่เดียวกัน

ก่อนหน้างาน Google I/O กูเกิลก็ปรับปรุง Material Design สำหรับหน้าจอขนาดใหญ่ หลังงานกูเกิลประกาศชุดไอคอนใหม่เปิดให้ใช้งานได้ฟรีโดยใช้สัญญาอนุญาตเป็น CC-BY และหน้าเว็บ Device Metrics ฐานข้อมูลหน้าจออุปกรณ์สำคัญจำนวนมากว่ามีความละเอียดเท่าใดตามหน่วย dp, px, และนิ้ว

ที่มา - +Google Design

Jonathan Ive ได้รับการเลื่อนตำแหน่งจากเดิม Senior Vice President of Design มาเป็น Chief Design Officer (ซึ่งเป็นตำแหน่งใหม่ที่เพิ่งตั้งขึ้นด้วย) ดูแลงานออกแบบทุกอย่างทั้งฮาร์ดแวร์และซอฟต์แวร์

Ive จะมีลูกมือสองคนคือ Richard Howarth (VP of Industrial Design) ดูแลงานออกแบบฮาร์ดแวร์ กับ Alan Dye (VP of User Interface Design) ดูแลงานออกแบบซอฟต์แวร์

ผลงานของ Howarth คือเขาร่วมออกแบบ iPhone มาตั้งแต่รุ่นแรกสุด ส่วน Dye ก็รับบทบาทสำคัญในการออกแบบ iOS 7 และ Apple Watch

การเลื่อนตำแหน่งครั้งนี้ทำให้ Ive ขึ้นมาดูงานภาพรวมมากขึ้น นอกจากงานออกแบบผลิตภัณฑ์แล้ว เขายังต้องดูแลเรื่องการออกแบบร้านค้าปลีกของแอปเปิล รวมถึงสำนักงานใหญ่แห่งใหม่ด้วย ตำแหน่งใหม่จะมีผลวันที่ 1 กรกฎาคมนี้

Michael Kaplan นักออกแบบเครื่องแต่งกาย (costume designer) ของภาพยนตร์ Star Wars: The Force Awakens ให้สัมภาษณ์กับนิตยสาร Vanity Fair ถึงเบื้องหลังการออกแบบชุดต่างๆ ในภาพยนตร์ตอนล่าสุดนี้

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

Michael Kaplan เป็นนักออกแบบเครื่องแต่งกายที่มีผลงานกับภาพยนตร์ดังมาแล้วหลายเรื่อง เช่น Blade Runner, Se7en, Fight Club, Armageddon

มีอดีตทีมงานออกแบบ UI ของ Office for Windows Phone คนหนึ่งชื่อ jragon (ปัจจุบันลาออกจากไมโครซอฟท์แล้ว) ไปตั้งกระทู้ใน Reddit และแสดงความเห็นเกี่ยวกับแนวทางการออกแบบแอพ Metro ว่ามันไม่เวิร์คอย่างที่คิด จนไมโครซอฟท์ต้องปรับเปลี่ยนแนวทางการออกแบบแอพบน Windows 10 for mobile ให้คล้ายกับ Android/iOS มากขึ้น

ประเด็นที่น่าสนใจมีดังนี้ เริ่มจากปัญหาของ Metro

Facebook เปิดใช้อาคารสำนักงานหลังใหม่ "MPK20" ที่ออกแบบโดยสถาปนิกระดับโลก Frank Gehry (เคยมาเมืองไทย พูดให้งานของ TCDC) อาคารหลังนี้มีพื้นที่ใช้สอย 430,000 ตารางฟุต และมี "ห้องสำนักงาน" ที่ใหญ่ที่สุดในโลก เนื่องจาก Facebook ต้องการให้ทีมวิศวกรสื่อสารกันเป็นทีมมากที่สุด ทีมงานทุกคนจึงนั่งในห้องเดียวกัน (แต่ก็ยังมีห้องประชุมย่อยแทรกตัวอยู่เป็นจำนวนมาก)

พื้นที่ดาดฟ้าอาคารยังเป็นสวนสำหรับเดินเล่น ตัวอาคารเรียบง่ายไม่มีอะไรหวือหวา โดย Mark Zuckerberg บอกว่าอยากให้อาคารนี้ดู "ไม่เสร็จ" (a work in progress) เพื่อให้พนักงานรู้สึกว่าภารกิจเชื่อมต่อคนทั้งโลกเข้าด้วยกันยังต้องเดินหน้าต่อไป

อาคารผ่านมาตรฐานสิ่งแวดล้อมและพลังงาน LEED ตอนนี้ยังไม่ค่อยมีรูปแบบเต็มๆ มากนัก แต่ทาง Facebook เปิดให้คนดังในโลก Instagram บางคนเข้าไปถ่ายภาพได้แล้ว ใครอยากดูลองติดตามที่แท็ก #mpk20firstlook

ที่มา - Mark Zuckberberg, Fast Company

ซัมซุงปรับเปลี่ยน UI มือถือตัวเองครั้งใหญ่ในปี 2012 เมื่อครั้ง Galaxy S III ที่มาพร้อมกับ Nature UX ที่มีเอฟเฟคต์จิ้มจอแล้วเป็นหยดน้ำกระเพื่อม (ripple) และเสียงแจ้งเตือนเป็นเสียงผิวปาก (whistle) ที่บางคนฟังไปนานๆ อาจรู้สึกรำคาญอยู่บ้าง

ตลอด 3 ปีที่ผ่านมา ซัมซุงยังคงเอฟเฟคต์ทั้งสองมาโดยตลอด แต่พอมาถึงยุคของ Galaxy S6 ที่คิดใหม่ทำใหม่ครั้งใหญ่ ทั้งเจ้า ripple และ whistle ถูกถอดออกไปเรียบร้อยแล้วครับ (แถมไม่สามารถเปลี่ยนคืนได้ด้วย เรียกว่าถอนออกไปเลย)

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

หลังเปิดตัว Galaxy S6 เป็นที่เรียบร้อย ซัมซุงก็เผยรายละเอียดของการออกแบบผ่านบล็อก Samsung Tomorrow ดังนี้

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

กติกาเล็กน้อย

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