mazterlize design

mazterlize design ชื่อนี้เชื่อได้ว่าคนทำงานด้านการออกแบบเวพไม่ว่าทางตรงและทางอ้อมคงเคยได้ยินมากันบ้างแล้วนะครับ หรือถ้าไม่เคยได้ยินคงเคยผ่านตามาบ้างแต่เราไม่รู้ว่ามันคืออะไร แต่สำหรับคนที่ยังไม่เคยได้ยิน ผมจะบอกใบ้คร่าวๆ ให้ฟังนะครับ Material Design มันคือแนวทางการออกแบบ UI ของกูเกิลในยุคต่อไป ซึ่งโดย Google จะออกกฎของการออกแบบมา ซึ่ง theme มันจะหน้าตาคล้ายๆ ตัวอย่างหน้าจอด้านล่างนี้แหละครับ
mazterlize design

mazterlize design2

materializecss

แต่ผมไม่ขอพูดถึงรายละเอียดนะครับ แต่ของยกตัวอย่างง่ายๆ คือเรื่องของเงาก็ครวที่จะมีแสดงเงาที่สมเหตุสมผล เช่น Layer ที่อยู่สูงครวแสดงเงาและระดับความลึกไม่ใช่แสดงมั่วๆ (เหมือนที่ผมทำ) ฟอนต์จะใช้ Roboto เพียงฟอนต์เดียวเพื่อความสม่ำเสมอ และ อีกมาก(เหมือนจะเป็นเผด็จการนิดๆ ) แต่สำหรับผมที่เป็น Dev อาจไม่ค่อยอินกับมันสักเท่าไหรแต่ก็ต้องรู้ไว้บ้างครับเพื่อที่ตอน User พูดถึงแบบนู้นแบบนี้เราจะได้สามารถเข้าใจได้ว่าเขากำลังผู้ถึงอะไร

ลองดูแล้วเป็นยังไงบ้างครับ ถ้างงก็ไม่เป็นไรครับเพราะเรามีทางลัด ทางลัดในที่นี้คือการใช้ FrameWork ซึ่งผมก็ได้ลองทดสอบมาแล้วหลายตัวแต่ชื่นชอบมากที่สุดอยู่เพียงตัวเดียว http://materializecss.com/

materializecss2

โดยตัวนี้มีให้ค่อนข้างครบครับทั้ง Control เฉดสี เงาและ component ต่างๆ ที่ครบตามแบบ Mazterlize design ยังได้คุณสมบัติ (Responsive Web เป็นของแถมอีกด้วยนะครับ) เพียงแค่ download แล้ว refer framework และก็สามารถ copy Code มาใช้งานได้เลยครับ (อารมณ์เดียวกับ Jquery ครับ)

1-29-2016 4-49-07 PM

Copy Code ด้านบนไปใช้ได้เลย

 

 

หวังว่าคงมีประโยชน์บ้างนะครับ

Leave a Reply