ไปเจอรวม Scrollbar ของ Mac OS ตั้งแต่ปี 1981-2012 เรียกได้ว่าตั้งแต่อดีตเริ่มแรก(ต้นแบบ)จนถึงปัจจุบันเลยทีเดียว เห็นว่าน่าสนใจเลยเอามาฝากครับ แนวโน้มของมันจะเห็นได้ว่าดีไซด์จะไปแนวมีอะไรน้อยลงเรื่อยๆ อันล่าสุด OS X Lion กลายเป็นหายไปเลย จะโผล่มาเฉพาะตอนใช้งานเท่านั้น เรียบง่ายที่สุด ตามแนวของ สตีฟ จ๊อบส์ สไตล์
ที่มา: https://www.cultofmac.com
ชื่อหนังสือ Graphic Design Principle 2nd edition: หลักการและกระบวนการออกแบบงานกราฟิกดีไซน์
ผู้แต่ง ปาพจน์ หนุนภักดี
บรรณาธิการ ปิยะบุตร สุทธิดารา
352 หน้า พิมพ์ครั้งที่ 1 : มีนาคม 2555
สำนักพิมพ์ DIGI ART
ราคา 295 บาท
หนังสือเกี่ยวกับการออกแบบกราฟิกดีไซน์ มีหัวข้อที่หลากหลาย อ่านเพลิน ข้างในมีกรณีศึกษาแยกตามหัวข้อเยอะ หัวข้อเด่นที่ตัวเองชอบมากที่สุดก็คือ ตัวอักษรในงานกราฟิกดีไซน์ ทำให้รู้เรื่องเกี่ยวกับตัวอักษรเยอะขึ้น ทั้งประวัติ และแนวคิดของผู้ออกแบบ แม้จะไม่ละเอียดยิบแต่พอจับทางเรื่องของอักษรได้บ้าง และการออกแบบสัญลักษณ์ เป็นการยกตัวอย่างโลโก้ของบริษัทชื่อดังทั่วโลกที่เราคุ้นตาดี นำมาอธิบายแนวคิด บางอันมีพัฒนาการของโลโก้ของบริษัทที่มีการรีแบรนด์อยู่บ่อยครั้ง ส่วนใหญ่เอาข้อมูลมาจาก Goodlogo.com ซึ่งเราก็รู้จักเว็บไซต์นี้จากหนังสือเล่มนี้เอง นอกจากนี้ยังมีส่วนอื่นๆที่น่าสนใจ เช่น ความหมายประวัติความเป็นมาของกราฟิกดีไซน์ แนวความคิดในการออกแบบ การออกแบบสื่อสิ่งพิมพ์ เป็นต้น
ตัวอย่างเนื้อหา
จัดกลุ่มตามรูปแบบการนำเสนอที่คล้ายกัน (เหมือนจะเคยเห็นที่ไหน?)
ได้ความรู้เกี่ยวกับตัวอักษรมากขึ้น เพิ่งจะรู้ว่า Serif คือตัวอักษรที่มีติ่งเล็กๆ ส่วน Sans-serif คือตัวอักษรที่ไม่มีติ่งยื่นออกมา Time New Roman ที่เราใช้กันอยู่ทุกวันนี้ได้รับการออกแบบมาเพื่อใช้ในหนังสือพิมพ์ The Times ตั้งแต่ปี คศ. 1931 ออกแบบโดย Victor Lardent เป็นฟอนต์อีกอันที่ใช้กันทั่วโลก และใช้งานต่อเนื่องยาวนานมาจนถึงปัจจุบัน (คนออกแบบเนี้ย สุดยอดจริงๆ)
ตัวอย่างการออกแบบโลโก้รถยนต์ชื่อดังจากอิตาลี พร้อมประวัติความเป็นมาเป็นสั้นๆ น่าเสียดายหลายโลโก้กับระบุคนออกแบบเป็น นิรนาม ซึ่งในความคิดผมถ้าสืบค้นมากพอน่าจะหาเจอนะว่าใครเป็นคนออกแบบ หรือถ้าไม่รู้ ผมจะไม่ยกโลโก้นั้นมานำเสนอแม้จะเป็นกรณีศึกษาที่ดีก็ตาม
หัวข้อการออกแบบโลโก้ ทำให้รู้ว่าลุง Paul Rand มีงานออกแบบโลโก้ที่สุดยอดจริงๆ เช่น โลโก้ของ IBM, NeXT, Ford, YALE เป็นต้น
สรุปว่า เป็นหนังสืออีกเล่มที่อ่านสนุก เพลิดเพลิน ถ้าใครที่ทำงานเกี่ยวกับการออกแบบ หนังสือเล่มนี้น่าจะเป็นหนังสือที่รวม case study ไว้เยอะพอสมควรเลยครับ สามารถเข้ามาหาแนวคิด แรงบันดาลใจข้างในหนังสือเล่มนี้ได้ไม่มากก็น้อยอย่างแน่นอน ส่วนคนที่ชอบศิลปะทั่วไปก็อ่านสนุก และได้ความรู้เช่นกันครับ
ได้อ่านในหนังสือเล่มหนึ่งเกี่ยวกับการออกแบบ ในหัวข้อการออกแบบโลโก้ เขายกกรณีศึกษาแนวคิดและการออกแบบโลโก้ของแบรนด์ดังๆระดับโลกที่เราคุ้นตา และค่อนข้างโดดเด่น โดยอ้างอิงแหล่งข้อมูลจากชื่อเว็บไซต์ Goodlogo.com ลองคลิกเปิดเข้ามาดู จึงได้รู้ว่าเป็นเว็บไซต์รวบรวมโลโก้ที่ยอดเยี่ยมอีกเว็บไซต์หนึ่งเลย หัวข้อเด่นที่จัดไว้ อย่างน่าสนใจเช่น
นับเป็นแหล่งข้อมูลดีๆอีกเว็บหนึ่งที่น่า bookmark เก็บไว้ ใช้เป็นที่สร้างแรงบันดาลใจได้้ดียามคิดอะไรไม่ออก ตามไปชื่นชมที่ https://www.goodlogo.com ได้เลยครับ
เป็นโอกาสอันดีที่นักเรียน นักศึกษา จะได้ใช้โปรแกรมทางด้านการออกแบบอย่างถูกกฎหมาย(เสียที) เมื่อ Adobe ประกาศสนับสนุนวงการศึกษาไทยโดยออกเวอร์ชั่นเพื่อการศึกษาลดราคากว่า 80% อยู่ในระดับที่มือสมัครเล่น(มืออาชีพในอนาคต) อย่างนักเรียน นักศึกษา สามารถจ่ายได้ ดูรายละเอียดและเงือนไข กันเลยครับ
CS5.5 Design Premium ราคา 3,499 บาท
CS5.5 Design Standard ราคา 2,499 บาท
CS5.5 Web Premium ราคา 3,499 บาท
Acrobat X Pro ราคา 1,299 บาท
ราคาถูกลง 80% เลยทีเดียว แต่ละชุดประกอบด้วยซอร์ฟแวร์อะไรบ้าง ดูภาพประกอบ
ผมคัดมาจากเว็บไซต์ของคุณขจร ตามไปอ่านที่ต้นฉบับได้ที่ https://www.indesignthai.com
Asoft1 Company Limited Tel: +6622867794-5
S P V I Co., Ltd Tel: +66 2 559 2901
Website: https://www.spv.co.th/
Smashing Magazine เป็นบล็อกที่เขียนเกี่ยวกับการออกแบบ งานด้านกราฟิก เว็บไซต์ ฟอนต์ และอื่นๆอีกมากมาย เริ่มออนไลน์มาตั้งแต่ปี 2006 เนื้อหาแน่น มีคุณภาพมาก เขียนในแบบมืออาชีพ แต่ละโพสเข้าขั้นรวมเล่มทำเป็นหนังสือได้เลย หลายๆครั้งที่คิดอะไรไม่ออก หรือหา reference ไอคอน ธีมเว็บไซต์สวยๆ ที่แรกที่คิดถึงคือที่นี้ เมื่อสัปดาห์ที่ผ่านมา(8 Sep 2011) เป็นวันครบรอบ 5 ปี ของเว็บไซต์ ทีมงานได้ฉลองวันครบรอบด้วย แจกอีบุ๊คฟรี!
“Best of Smashing Magazine” To Five Smashing Years: An Anniversary eBook เป็นอีบุ๊คแจกฟรี โดยเนื้อหาภายในเป็นโพสที่ได้รับความนิยม น่าสนใจ สร้างแรงบันดาลใจได้ดีที่สุด ตลอด 5 ปีที่ผ่านมา คู่ควรเก็บไว้ในเครื่องอย่างยิ่ง ไฟล์อีบุ๊คมีหลายเวอร์ชั่น รองรับ e-book reader ตัวหลักๆหมด ได้แก่ ePub(iPad), PDF, Mobi(Kindle)
ดาวน์โหลดอีบุ๊คฟรีได้ที่
Free download on iTunes
Free download on Smashing Magazine (.zip, 55 Mb) 409 หน้า
เนื้อหา
ที่มา: https://www.smashingmagazine.com
มีศิลปินหลายคนคงไม่ค่อยพอใจกับหน้าตาของ Facebook หรือ อาจจะแค่อยากลองออกแบบเว็บไซต์ Social network ที่มีคนใช้งานเยอะที่สุดในโลก อยากแสดงความสามารถว่าทำออกมาได้ดีกว่าปัจจุบัน มีหลายๆครั้งที่คนโชว์ความสามารถแนวนี้แล้วได้งานทำจริงๆ มีตัวอย่างให้เห็นเยอะแล้ว
การออกแบบหน้าตา Facebook ของแต่ละคนดูดีแตกต่างกันไป หลายอันทำออกมาได้น่าดู น่าใช้ขึ้นไม่น้อย เว็บไซต์ Hongkiat รวบรวมไว้ ผมเห็นว่าน่าสนใจเลยเอาแชร์ นอกจาก Facebook แล้วยังมีเว็บไซต์อื่นๆด้วยที่ศิลปินได้ออกแบบหน้าตาใหม่ให้ เช่น Google, Myspace, Youtube, IMDb เป็นต้น เข้าไปดูได้ที่ลิงค์ที่มาด้านล่างครับ
1. Barton Smith
ผลงานแรกเป็นของ Barton Smith ในชื่อ The Facebook Facelift ปรับแต่งใหม่ทั้งหมด ทั้ง Home, Feed, Event, Photo ทำออกมาดูดีมาก เน้นโทนขาว เทา ฟ้า ใช้พื้นที่ได้เต็มจอ มีวีดีโอสาธิตการใช้งานด้วย เข้าไปดูผลงานของเขาแบบเต็มๆได้ที่ Barton Smith
2. Information Architects
ผลงานโดยบริษัททำงานออกแบบโดยตรง Facebook ในแบบของพวกเขาถูกออกแบบมาให้เหมือนกับอีเมลแอพลิเคชั่น แบ่งออกเป็น 3 คอลัมน์ คือ ส่วนของ filter แยกกลุ่มของเนื้อหาที่จะแสดงใน information-stream ที่อยู่ตรงกลาง และ reaction ที่จะใช้โต้ตอบคอมเม้นต์ในหัวข้อนั้นๆ ดูรายละเอียดได้ที่ https://www.informationarchitects.jp
3. Justin Dauer
Facebook หาตาแบบใหม่ของ Justin Dauer ดูเรียบมีสไตล์คล้ายบล็อกเหมือนกันนะ ดึงเอารายละเอียดของผู้ใช้มาอยู่ด้านขวา เมนูสำคัญพร้อมกับ notification แสดงดูด้านบน ดูดีมาก รายละเอียดดูที่ pseudoroom design
4. Peter Knoll
ตัวนี้เมนูด้านบนยังคงคล้ายๆกับหน้าตาของ Facebook ในปัจจุบัน และเน้นส่วนของ post ให้ใหญ่และเด่นมากขึ้น แต่ส่วน New Feed จะเหมือนกับ Google+ เลย ดูรายละเอียดเพิ่มเติมที่ Peter Knoll
5. AndasoloARTS
การออกแบบ Facebook ตัวนี้มีโทนสีคล้ายกับของ Peter Knoll ส่วนที่แตกต่างออกไปคือส่วนของ New Feed ที่ใหญ่ขึ้นและดูดีขึ้น รายละเอียดดูที่ AndasoloARTS
6. Jonaska
อันนี้ได้แรงบันดาลใจมาจาก AndasoloARTS โดยปรับปรุงส่วนของช่องโพส ช่องค้นหา และส่วนอื่นๆให้ดูดีขึ้น รายละเอียดที่ Jonaska
7. Czarny-Design
หน้าตาใหม่ของ Facebook ที่ออกแบบโดย Czarny Design จะเน้นไปที่การใช้เส้นโค้งในการออกแบบมากขึ้น เน้นช่องคอมเม้นต์ให้เด่นมากขึ้น ดูรายละเอียดเพิ่มเติมที่ Czarny-Design
การออกแบบหน้าตาใหม่ให้ Facebook ของแต่ละคนก็มีรูปแบบที่แตกต่างกัน หลายๆอันอยากให้เอาไปใช้จริงๆเลยนะ อย่างเช่นของ Justin Dauer ผมว่าเข้าขั้นน่าใช้เลยล่ะ แต่ทุกครั้งที่ Facebook มีการอัพเดตหน้าตาใหม่ช่วงแรกๆจะมีคนบ่นอยู่ซักพักจากนั้นก็จะชินและเลิกบ่นไปเอง ประมาณว่าเขาให้ใช้อะไรก็ต้องใช้ไป แต่ผมว่าเว็บไซต์ที่มีคนใช้งานเยอะขนาดนั้นเข้าต้องวิจัยและทดลองใช้มาก่อนอยู่แล้วจึงจะปล่อยให้คนทั่วไปใช้ และมันต้องเป็นมิตรกับคนใช้งาน ไม่ยุ่งยากเกินไป ซึ่งผมว่าปัจจุบัน Facebook ก็ทำได้ดีมากอยู่แล้ว
เห็นคนอื่นออกแบบ Facebook ในฉบับของเขา คุณอยากลองทำเองบ้างไหมครับ ใครทำแล้วแชร์มาให้ดูด้วยนะครับ
ที่มา: https://www.hongkiat.com/blog/concept-design-facelift-notable-websites
รวมภาพการออกแบบหน้าตา Facebook ของแต่ละคนทั้งหมด
Smashing Magazine รวมเครื่องมือทดสอบการแสดงผลเว็บไซต์ของแต่ละ browser ไว้อย่างครบถ้วน ละเอียดมาก เห็นว่าน่าสนใจและเคยเขียนถึงตัวหนึ่งไว้เหมือนกันลองดูได้ที่ Adobe BrowserLab เครื่องมือทดสอบการแสดงผลเว็บไซต์ ในลิสต์ที่เขารวบรวมไว้จะมีทั้งตัวที่สามารถใช้ได้เลยผ่านทางเว็บไซต์ และตัวที่ต้องติดตั้งลงเครื่อง ตัวไหนที่ดีมี suport รองรับก็ต้องจ่ายตังค์ บริษัททำเว็บใหญ่ๆอาจจะต้องใช้ สำหรับใช้ในงานไม่ใหญ่มากแบบฟรีก็คงเป็นอะไรที่เหมาะสมแล้ว
ผมดึงมาเฉพาะตัวที่มีเวอร์ชั่นฟรีให้ใช้ หากใครสนใจอยากดูรายละเอียดแบบเต็มตามไปดูบทความของ Cameron Chapman ได้ที่ Review Of Cross-Browser Testing Tools คิดว่าน่าจะมีประโยชน์กับคนทำเว็บ
| Tool | Number of browser versions supported | IE? | Interactive testing? | Side-by-side testing? | Pricing |
|---|---|---|---|---|---|
| Adobe BrowserLab | 13 | IE6+ | No | Yes | Free |
| Browsershots | 60+ | IE6+ | No | No | Free |
| SuperPreview | Varies | IE6+ | Yes | Yes | Free |
| Lunascape | 3 | IE6+ | Yes | Yes | Free |
| IETester | 6 versions of IE | IE5.5+ | Yes | Yes | Free |
| IE NetRenderer | 5 versions of IE | IE5.5+ | No | No | Free |
| Spoon | 16+ | no IE | Yes | No | Free |
| Browsera | 9 | IE6+ | No | Yes | Free – $99/month |
| Browserling | 9 | IE5.5+ | No | No | Free – $20/month |
TED Talks เป็นที่นำเสนอไอเดียของเหล่าผู้มีชื่อเสียงในสังคมโลก เขียนถึงไปหลายครั้งแล้วดูได้ที่ tag TED แนวคิดของ TED คือกระจายแนวคิดออกไปให้ได้มากที่สุด จึงมีส่วนของการแปลภาษาเข้าไปด้วยเพื่อให้เข้าถึงคนทั่วโลกได้มากขึ้น ล่าสุดวีดีโอ TED Talks ที่ได้รับการแปลเป็นภาษาไทยมีอยู่ 165 คลิป แต่ละคลิปมีประโยชน์และน่าสนใจทั้งนั้น อยากให้ลองไปเปิดดู รับรองว่าจะเปิดมุมมองของเราให้กว้างเพิ่มขึ้นแน่นอน หัวข้อใหญ่ๆแยกเป็นหมวดหมู่ให้เลือกติดตาม คือ Technology, Entertainment, Design, Business, Science, Global issues ส่วนตัวผมชอบหัวข้อ Design กับ Science เป็นพิเศษ ถ้าสนใจแล้วอยากลองเข้าไปดูบ้างแล้ว ก็คลิกเลย TED Talks ที่มีซับภาษาไทย
นอกจากจะเชิญชวนให้ไปดูแล้ว อยากจะเชิญชวนคนที่มีความสามารถทางด้านภาษาอังกฤษด้วยเช่นกัน TED เปิดรับอาสาสมัคร ให้ไปช่วยกันแปลการนำเสนอของเหล่า Speaker ระดับโลกที่ถูกบันทึกไว้ เพื่อให้สิ่งที่มีประโยชน์เหล่านั้นเข้าถึงคนในท้องถิ่นของตัวเองให้ได้มากขึ้นครับ (ผมฟังออกบางคำก็ดีแล้วครับ) คนที่เป็น TED Translator เท่าที่เห็นมี @fringer(คุณสฤณี อาชวานันทกุล)ครับ อยากจะให้คนก่งๆไปช่วยกันแปลเยอะๆครับ เข้าไปสมัครได้เลยที่ Become a translator
เมื่อวานเปิดดู WordCamp TV ของ Sara Cannon พูดเรื่อง CSS Trick ตอนแรกเห็นเธอน่ารักสดใสเลยขอดูนิดหนึ่ง แต่สุดท้ายดูจบก็ได้อะไรมาเหมือนกัน มีตัวอย่าง Showcase ของ CSS ที่เธอเอามาโชว์ประกอบการนำเสนอ พบว่ามันเจ๋งดี เลยคัดเอาส่วนที่น่าสนใจมาบันทึกเก็บไว้
อันแรกเป็นการออกแบบเกี่ยวกับ Scrolling ลิงค์เว็บไซต์ https://lostworldsfairs.com/atlantis ทดลองเลื่อนหน้าเว็บไซต์ลงไปข้างล่างเรื่อยๆ จะพบว่าคนในท่อจะวิ่งตามลงไปด้วย ระดับความลึกก็เปลี่ยนตาม
เว็บที่สองเป็นการโชว์ความสามารถการใส่พื้นหลังหลายภาพ (ซ้อนกัน) เว็บเหล่านี้จะพบว่าพื้นหลังของเว็บมันมีความน่าสนใจมากขึ้นเยอะเลย ตัวอย่าง https://silverbackapp.com มีพื้นหลังอยู่ถึง 4 ภาพ ย่อขยายหน้าเว็บจะเห็นว่ามีเลเยอร์ของ ด้านหลังซ้อนกันอยู่
และอีกตัวที่ผมเห็นแล้ว พบว่ามันเท่มากคือ เว็บ https://www.nikebetterworld.com ลอง Scrolling ลงไปข้างล่างจะเห็นการนำเสนอที่เจ๋งจริงๆ พื้นหลังจะเปลี่ยนไปเรื่อยๆ
และส่วนที่น่าสนใจที่สุดคือ เป็นความสามารถของการใช้ CSS Grids ควบคุมการแสดงผลแตกต่างกัน ตามขนาดของหน้าจอ เช่นหน้าจอของ PC, iPad, Mobile ขนาด ตำแหน่งของเมนู เปลี่ยนแปลงตามขนาดของหน้าจอที่เรียกใช้งาน ลองเปิดดูที่ https://hicksdesign.co.uk/ และ https://colly.com แล้วลองย่อขนาดของเว็บไซต์ดูครับ
ยังมี resource และเว็บไซต์ที่น่าสนใจอื่นๆอีก ตามดูการนำเสนอของ Sara Cannon ในหัวข้อ CSS Tricks ได้ที่ https://WordPress.tv ความยาวประมาณ 34 นาที ครับ
Compfight.com เป็นเว็บไซต์ค้นหาภาพจากเว็บไซต์ฝากรูปชื่อดัง Flickr ซึ่งเป็นที่รู้กันว่ามีภาพสวยๆมากมาย ผมรู้จักเว็บไซต์ compfight ครั้งแรกจากงาน WordPress Dev Night จากท่านร่วมงานท่านหนึ่งที่แชร์วิธีการค้นหารูปสวยๆมาใช้ในงานออกแบบธีม อันที่จริงเว็บ Flickr มีช่องค้นหาเช่นกัน แต่น่าแปลกว่า Compfight กลับให้ผลการค้นหาในคีย์เวิร์ดเดียวกัน สวยกว่ามาก ในงานลองค้นหาคำว่า thailand พบว่าภาพที่ได้แตกต่างกันอย่างชัดเจน ที่สำคัญกว่านั้นเราสามารถเลือกเฉพาะภาพที่สามารถนำมาใช้ในทางการค้าได้ด้วย โดยเลือกตรงหลังคำว่า Creative common ด้านบนให้เป็น commercial
วันนี้อยากได้ภาพหนึ่ง จึงลองค้นดูด้วยตัวเอง(อย่าเชื่อถ้าไม่ได้ลองด้วยตัวเอง) ค้นเทียบกันเลย ใช้คีย์เวิร์ดเดียวกันคือ “medical”
Flickr vs Compfight
เราจะเห็นความแตกต่างชัดเจนว่า Compfight.com ให้ผลลัพธ์ที่น่าประทับใจมากกว่า Flickr.com ตอนนี้จึงคิดว่าได้อาวุธประจำกายอีกตัว เอาไว้คนหาภาพสวยประกอบไสลด์พรีเซ็นต์ หรือเอาไว้ทำเว็บไซต์ ขอบคุณพี่คนนั้นที่แชร์เรื่องดีๆครับ(ใครทราบชื่อบอกด้วยนะครับ)
