Select Page

เว็บที่รวบรวมงานออกแบบ User Interface 2

มาเพิ่มเติมจากที่เคยโพสเกี่ยวกับเว็บรวบรวบงาน User Interface และ Guidelines ในการออกแบบ UI ของระบบมือถือต่างๆ วันนี้ก็เลยมาเพิ่มเติมอีก

Meer.li

User Interface Guidelines and Inspiration Bookmarks

 

 Loviv

User Interface Guidelines and Inspiration Bookmarks

 

Laudableapps

เว็บที่รวบรวมงานออกแบบ User Interface

iospirations

User Interface Guidelines and Inspiration Bookmarks

 

Creattica

User Interface Guidelines and Inspiration Bookmarks

Apple Inspires Me

User Interface Guidelines and Inspiration Bookmarks

Android pttrns

เว็บที่รวบรวมงานออกแบบ User Interface

UX Archive

มี filter ให้เราเลือกดูตัวอย่างแอพตาม task ที่เราต้องการเช่น การค้นหา, การสมัครสมาชิก

User Interface Guidelines and Inspiration Bookmarks

Ultral UI

เว็บที่รวบรวมงานออกแบบ User Interface

The FWA Mobile

เว็บที่รวบรวมงานออกแบบ User Interface

 TappGala

เว็บที่รวบรวมงานออกแบบ User Interface

Smashapp

เว็บที่รวบรวมงานออกแบบ User Interface

My Color Screen

เว็บที่รวบรวมงานออกแบบ User Interface

Mobile Tuxedo

เว็บที่รวบรวมงานออกแบบ User Interface

Mobile Awesomeness 

เว็บที่รวบรวมงานออกแบบ User Interface

 

ทำไมตัวเลขบนเครื่องคิดเลขถึงแตกต่างกับโทรศัพท์?

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

ทฤษฎีที่ 1

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

ทฤษฎีที่ 2

ได้มีการวิจัยออกมาเพื่อทดลองว่าปุ่มกดแบบใด การจัดวางแบบไหนที่ใช้งานได้ดีที่สุดโดยการจัดวางมีทั้งแบบ วางเป็นสี่เหลี่ยมด้านละ 3 ตัวเลขและมีเลขศุนย์อยู่ข้างล่าง, แบบสองแถวแถวละห้าตัวเลขทั้งวางแนวนอนและแนวตั้ง, หรือวางแบบเป็นวงกลมตาม/ ไม่ตามเข็มนาฬิกา โดยผลการวิจัยออกมาว่าแบบวางเป็นสี่เหลี่ยม แถวละ 3 ตัวเลขโดยมี 1-2-3 อยู่บนสุดเป็นแบบที่คนใช้งานได้ง่ายมากที่สุด

ทฤษฎีที่ 3

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

 

 

Information Visualization มันเป็นมากกว่าภาพ

ให้ลองทายดูเล่นๆ ว่าภาพต่อไปนี้เป็นภาพของอะไรนะคะ

สองรูปแรกเป็นภาพที่แปลงมาจากบทกวีค่ะ ส่วนอันสุดท้ายเป็นเพลง Like A Prayer ของ Madonna ค่ะ ปกติแล้วเวลาเราต้องการสรุปข้อมูลเรามักจะสรุปออกมาในรูปแบบของกราฟ แผนภูมิต่างๆ แต่ถ้าเป็นข้อความเป็นข้อมูลยาวๆ เราจะทำอย่างไร???

Information Visualization เป็นการแปลงข้อมูลเป็นภาพค่ะ อย่างตัวอย่างที่ให้ดูเป็นการรวบรวมข้อมูลที่เป็นคำหรือข้อมูลยาวๆ เยอะๆโดยที่ไม่จำเป็นต้องออกมาในรูปแบบของกราฟแบบที่เราเห็นอยู่ทั่วไป มาดูรูปแรกแบบเต็มๆ กัน

Information Visualization : โปสเตอร์งาน Poetry on the Road 2002

คนทำคือ Friederike Lambers, Boris Müller, Florian Pfeffer เขาทำกันเป็นทีมค่ะ เพราะต้องใช้การเขียนโปรแกรมมาช่วยแปลงข้อมูลเป็นภาพค่ะ กรอบสี่เหลี่ยมและสีของแต่ละกรอบจะแสดงถึงลักษณะของตัวอักษรแต่ละตัวค่ะ มุมที่เอียงจะแสดงถึงภาษาที่ใช้ค่ะ บทกวีที่นำมาใช้ก็เป็นบทกวีของผู้เข้าร่วมแสดงงานค่ะ ตอนแรกอ่านๆ ข้อมูลดูก็ไม่ค่อยเข้าใจเท่าไหร่ ต้องทดลองเองค่ะ เค้ามีโปรแกรมตัวที่เค้าเขียนให้เราทดลองพิมพ์เข้าไปด้วยค่ะ

ใครอยากเล่นบ้าง ที่นี่เลยค่ะ : http://www.esono.com/boris/projects/poetry02/visualpoetry02/poet_frame.html

ข้อมูลเพิ่มเติม  : http://www.esono.com/boris/projects/poetry02/

อันที่สอง ชอบอันนี้มากๆ สวยมากๆ


Information Visualization : โปสเตอร์งาน Poetry on the Road 2006

โปสเตอร์งาน Poetry on the Road 2006

แบบนี้จะดูซับซ้อนกว่าแบบแรก คือมีการแทนค่าตัวเลขแทนคำแต่ละคำ อย่างคำว่า “Poetry” ก็แทนค่าเป็น 99  แต่ว่าคำที่ต่างกันก็สามารถมีเลขเหมือนกันได้ อย่าง เลข 99 ก็อาจหมายถึง “thought” หรือ คำว่า “letters” ก็ได้ โดยเลขแต่ละตัวจะถูกแทนค่ามาเป็นวงแหวนสีแดงๆที่เห็นในภาพค่ะ ความหนาของวงแหวนจะขึ้นอยู่กับจำนวนของคำที่มีเลขเดียวกันค่ะ เส้นผ่าศูนย์กลางจะขึ้นอยู่กับความยาวของบทกลอน อย่างวงๆ สีแดงก็จะแสดงค่าตัวเลข และเส้นสีเทาๆ ที่เชื่อมคำแต่ละคำของบทกลอนตามลำดับของคำ

คงต้องลองเล่นดูได้ค่ะ : http://www.esono.com/boris/projects/poetry06/visualpoetry06/index.html

ข้อมูลเพิ่มเติม : http://www.esono.com/boris/projects/poetry06/

 

Information Visualization : โน๊ตเพลง

 

เพลง Like A Prayer ของ madonna

 

เพลง Mary Had a Little Lamb หรือหนูมาลี

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

ข้อมูลเพิ่มเติม : http://www.turbulence.org/Works/song/

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

 

Information Visualization : คัมภีร์ของแต่ละศาสนา

 

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

 

นอกจากนี้ยังมีการใช้หลักการเดียวกันกับSpeech (แปลเป็นไทยว่าอะไรอ่ะ – -” ) ของผู้ชิงตำแหน่งประธานาธิบดีของสหรัฐอีกด้วยค่ะ มันบอกได้ว่า แต่ละคนให้ความสำคัญกับสิ่งใดบ้างค่ะ ลองดูในนี้นะคะ

 

 

ศึกษาเพิ่มเติมได้ที่

 

Post นี้เป็นเนื้อหาจากบลอคเก่าที่ย้ายมาลงที่นี่นะคะ 🙂


เว็บที่รวบรวมงานออกแบบ User Interface และ UI Guidelines

ช่วงนี้ได้งานออกแบบ UI สำหรับ application บน platform อย่าง iOS และ Android ก็เลยต้องศึกษา User Interface ของทั้งสอง platform นี้ วันนี้ก็เลยรวบรวม Link ที่น่าสนใจมาให้ค่ะ

iOS Human Interface Guidelines

(HTML version) (PDF version)

iOS User Interface Guidelines

 

Android User Interface Guidelines

Android User Interface Guidelines

 

Android Design

Android Design Guidelines

 

LittleBigDetails.com

UI inspiration from LittleBigDetails.com

 

Patterntap.com

เว็บนี้ส่วนใหญ่เป็น User Interface ของเว็บไซต์มากกว่า

UI inspiration from Patterntap.com

 

LovelyUI.com

มีตัวอย่าง UI จาก Apps ต่างๆ ทั้งของ Android และ iOs เลยค่ะ

UI inspiration from LovelyUI

 

MobileDesignPatternGallery.com

อันนี้ก็เหมือนกัน มีทั้ง Android และ iOs

UI inspiration from MobileDesignPatternGallery

 

Inspired-UI.com

เท่าที่ดูเห็นแต่ของ iOS นะคะ

UI inspiration from inspired-ui.com

 

Pttrns.com

อันนี้ก็เห็นแต่ iOS

UI inspiration from Pttrns.com

 

Mobile UI Patterns

เท่าที่ดูจะมีแต่ UI ของ iPhone นะคะ

User Interface Mobile Patterns

 

Android Patterns

รวบรวม interaction patterns ที่จะช่วยให้เราออกแบบ UI ของ android apps โดยมีทั้งข้อดี ข้อเสียของรูปแบบ interaction นั้น รวมไปถึงตัวอย่างที่มีการใช้จริงใน app ต่างๆ

Android Interaction Patterns

AndroidUIpatterns.com

บลอคนี้เขียนโดย Juhani Lehtimaki ผู้เขียนหนังสือ Smashing Android UI ซึ่งในบลอคได้รวบรวบความรู้มากมายในการออกแบบแอพ Android รวมถึง Resource และเครื่องมือต่างๆ ในการออกแบบแอพ

AndroidUX.com

เว็บนี้รวบรวม Android UX screenshots จากมือถือรุ่นต่างๆ

Holo Everywhere

Holo Everywhere ได้ยกตัวอย่าง Application ของ Android และอธิบายถึงการออกแบบในแต่ละแอพอย่างละเอียด

AndroidNiceties

รวบรวม Screenshots ของแอพ Android ที่สวยๆ

Android App Patterns

อันนี้ก็เป็นอีกเว็บที่รวบรวม Screenshots ของแอพ Android ทั้ง Tablet และมือถือ

UIparade.com

รวบรวม UI ที่แยกเป็นชิ้นๆ ไม่ได้ Capture มาจากแอพไหน รวมถึง Freebies UI Kits ที่สามารถเอาไปใช้ได้ด้วย

UI inspiration from www.uiparade.com

 

Google I/O 2010 – Android UI design patterns

วิดีโอที่ทีม Android User Experience พูดถึงประเภทของ patterns ที่สามารถใช้ในการออกแบบ Android application ค่ะ

 

สัญลักษณ์ปุ่มเปิด/ปิดไฟมีความหมายอย่างไรบ้าง

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

 

ใครเป็นกำหนดให้ใช้สัญลักษณ์พวกนี้?

ปุ่ม On/Off เป็นสัญลักษณ์ที่ถูกกำหนดขึ้นมาโดย The International Electrotechnical Commission (IEC) หรือ คณะกรรมมาธิการระหว่างประเทศว่าด้วยมาตรฐานสาขาอิเล็คทรอเทคนิค ซึ่ง IEC ได้ร่วมกำหนดมาตรฐานด้านไฟฟ้าและอิเล็คทรอนิคต่างๆ รวมถึงกำหนดมาตราฐานของสัญลักษณ์ที่นำมาใช้บนอุปกรณ์อิเล็กทรอนิคส์ต่างๆ ด้วย

 

ที่มาของสัญลักษณ์เปิดและปิด

สัญลักษณ์ปุ่มเปิด/ปิดไฟมีความหมายอย่างไรบ้าง
อย่างที่เห็นกันในรูปข้างบนนี้ว่า สัญลักษณ์ 0 วงกลมจะหมายถึง ปิด และสัญลักษณ์ | เส้นตรงขีดแนวตั้ง หมายถึง เปิด ทั้งสองนี้เป็นสัญลักษณ์ที่มาจากระบบเลขฐานสองหรือ Binary System ซึ่งจะมีเลขเพียง 2 ตัวเท่านั้นคือ 0 (ศูนย์) และ 1 (หนึ่ง) และความหมายของ 0 ในระบบเลขฐานสองคือ ไม่มีค่า หรือ “ปิด” ส่วนเลข 1 นั้นก็มีความหมายว่า มีค่า หรือ “เปิด” นั่นเอง

 

มีปุ่ม On/Off และปุ่ม Power ด้วยนะ

สัญลักษณ์ปุ่มเปิด/ปิดไฟมีความหมายอย่างไรบ้าง

ปุ่ม On/Off มีลักษณะเป็นเส้นตรงอยู่ในวงกลม ซึ่งปุ่มนี้จะถูกใช้บนอุปกรณ์ที่มีการปิดเครื่องแบบ Hard Off (Zero Power) คือการปิดเครื่องแบบปิดหมดไม่มีการใช้พลังงานเลย

ส่วนปุ่ม Shutdown (หรือบางที่จะเรียกว่า ปุ่ม Standby) ที่เราเห็นบ่อยๆ บนคอมพิวเตอร์นั้น เป็นปุ่มที่ใช้กับอุปกรณ์ที่ปิดแบบ Soft Off (Non-Zero Power) หรือการปิดเครื่องแบบยังมีการใช้พลังงานอยู่


แนะนำข้อมูลเพิ่มเติมได้นะคะ

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

 

 

Infographic ที่ช่วยให้คุณรู้จักตัวอักษรมากขึ้น

ในการออกแบบกราฟฟิค ตัวอักษรถือเป็นส่วนประกอบที่สำคัญแต่มักเป็นสิ่งที่ถูกละเลยอยู่เสมอในการออกแบบ

Noodler ได้ทำ Infographic ที่ครอบคลุมทุกอย่างเกี่ยวกับตัวอักษร ไม่ว่าจะเป็นเรื่อง typefaces, styles, โครงสร้างของตัวอักษร และการจัดวางที่จะช่วยให้คุณเข้าใจ Typography ได้อย่างง่ายยิ่งขึ้นค่ะ

Infographic ที่ช่วยให้คุณรู้จักตัวอักษรมากขึ้น

Infographic ที่ช่วยให้คุณรู้จักตัวอักษรมากขึ้น

Graphic Design คืออะไร?

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

LittleBigDetails.com

เว็บไซต์ LittleBigDetails.com

LittleBigDetails.com

วันนี้อยากจะแนะนำเว็บไซต์ LittleBigDetails.com ซึ่งเป็นเว็บไซต์รวบรวม UI (User Interface) ตั้งแต่ช่อง input, ลูกศรเล็กๆ, สี, font ซึ่งเป็นแค่รายละเอียดเล็กๆ น้อยๆ บนเว็บไซต์และแอพลิเคชั่นต่างๆ แต่เว็บไซต์ LittleBigDetails.com นี้จะทำให้เห็นว่าแค่เปลี่ยนสิ่งเล็กๆ น้อยๆ เหล่านี้ เว็บไซต์หรือแอพลิเคชั่นของเราก็สามารถที่จะช่วยให้ผู้ใช้งานสามารถใช้งานได้ง่ายขึ้น (more…)

บันทึกจากงาน WordPress Developer Night ครั้งที่ 2 เวอร์ชั่น Mind map

วันนี้ได้ไปงาน WordPress Developer Night ครั้งที่ 2 ที่จัดขึ้นที่ตึก Cyberworld เป็นงานสำหรับ Developer และ Designer ที่สนใจ WordPress โดยเฉพาะ คราวก่อนพลาดไม่ได้ไปเพราะมันไกลแถมดึกด้วย เสียดายมาก วันนี้เลยดีใจเป็นพิเศษที่จัดตอนกลางวันก็เลยได้ไป เตยกลับมาก็เลยนั่งสรุป note ที่จดมาเอง แล้วก็แอบไปอ่านของคนอื่นเล็กน้อยจาก hashtag #wpdevnight #wpdevnight2 (จริงๆ ก็ไม่น้อยเท่าไหร่ 555 ) แล้วมาสรุปเป็น mind map ซึ่งตอนนี้กำลังหัดทำ Mind map ให้ถูกต้องและได้ผลมากที่สุดอยู่ ไม่รู้ว่าจะมีประโยชน์สำหรับคนอื่นรึเปล่า เพราะทำเอง เข้าใจเอง

งาน WordPress Developer Night นี้เป็นงานที่ไม่ผิดหวังเลย ได้ความรู้เต็มๆ กลับมาแล้วรู้เลยว่า บลอคนี้ผิดตรงไหน ต้องไปแก้อะไรต่ออีกบ้าง ต้องขอบคุณ @notzaa จริงๆ ค่ะ ฟังแล้วได้แรงบันดาลใจ และความโลภอยากได้เงินจาก Adsense และ Affliate 555 ช่วงที่ชอบมากคือ ช่วงที่สัมภาษณ์คุณ Cory Brown เจ้าของบริษัท Pronto Marketing ชอบ Business Model รวมถึงการจัดการระบบต่างๆ โดยใช้ Cloud Service ของบริษัท เคยได้ยินว่ามีบริษัทที่ใช้ Cloud Service เยอะแล้ว แต่เพิ่งได้เห็นตัวเป็นๆ ก็วันนี้ จริงๆ อยากให้สัมภาษณ์ลึกกว่านี้หน่อย แต่นั่งฟังอยู่ก็คิดไม่ออกว่าจะถามอะไรเหมือนกัน – -”

ส่วนเรื่อง Custom Post Type ที่คุณ @warong แนะนำนั้น เตยแอบมึนเล็กน้อย คงเพราะชื่อมันคล้ายๆ กับ Custom Field Template ด้วยก็เลยสับสน จากเดิมที่เคยลองใช้แบบมั่วๆ ไม่ได้เข้าใจฟังก์ชั่นการทำงานมันด้วย แค่อยากรู้ว่ามันเป็นยังไง สุดท้ายก็เอาออกไปเพราะเขียน php ไม่ได้ขนาดนั้น 555 ถ้าดูจาก Mind map จะรู้เลยว่ามึนๆ เพราะจดได้น้อย ตั้งใจฟังเอาแนวคิดของ plugin ทั้งสองตัวมากกว่า

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

และเรื่องสุดท้ายที่เป็นเรื่อง Social Media จากคุณ @buumoon ที่พูดถึงแนวคิดที่เน้นจากเชื่อมต่อของ Social Media มากกว่าการทำ SEO โครงสร้างนี้เป็นโครงสร้างที่เหมาะกับกลุ่มเป้าหมายของตัวเว็บไซต์ Faceblog ซึ่งใช้ facebook กันเป็นส่วนใหญ่ด้วย เพราะถ้าไปทำเว็บอื่นที่กลุ่มเป้าหมายอาจจะใช้ Search Engine มากกว่าก็อาจจะไม่เหมาะกับโครงสร้างนี้ก็ได้

ไม่น่าเชื่อว่าตอนไปไปแบบหัวโล่งๆ กับมาจากงานนี้ได้ความรู้แบบเต็มๆ อยากให้มีครั้งต่อๆ ไปด้วย จะพยายามไปให้ได้ทุกๆ ครั้ง ถ้ามี live ด้วยก็จะ work มาก ขอบคุณทีมงานทุกๆ คนนะคะ ^_^

* Update เพิ่มไฟล์ PDF ไว้ให้ Download เผื่อว่ามองไม่เห็นค่ะ
PDF ของ Mind Map เนื้อห้าที่รวบรวมได้จาก #WPDevNight2WPDevNight2

Color Collective ชุดสีสวยๆ สำหรับนักออกแบบ

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

*เพิ่มเติม เห็น @dominixz คุยกับ @KUpoom เรื่องของการใช้สีในงานออกแบบก็เลยนึกได้ว่า จริงๆ เว็บนี้สามารถใช้ฝึกเรื่องสีได้มากกว่าการจิ้มเอาชุดสีที่เขามีไปใช้

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

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ

Color Collective เลือกใช้ชุดสีจากภาพ