เพื่อ UX/UI ที่ดี พี่ยุ้ยนี่แทบจะสิงจออยู่แล้วคับ นั่งทำเส้น guides ตาลาย วิ๊ง…มากตอนเน้ ตอนแรกก็ download free – Bootstrap Grid System ที่เขาแจกกันมาใช้แหละ แต่ยังไม่ค่อยถูกใจเท่าไหร่ ก็เลยทำเองใช้เอง แล้วเอามาแจกดีกว่า ทีนี้เลยเข้าใจแล้วว่าตัวแจกฟรี กับตัวที่ต้องเสียเงินซื้อ มันแตกต่างกันอย่างไร อิอิ พี่ยุ้ยใจป๋า ทำมาให้ทั้ง 2 แบบเลย PSD และ Vector (CS5) ฟรี 100% หรือใครอยากจะจ่ายเงินให้ก็ได้นะ ฮ่าๆๆ …เดินมากอดพี่ยุ้ยแน่นๆ 1 ทีพอละคับ สำหรับกำลังใจ
Download – 2016 Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
Free Download - PSD Free Download - AI
พรีวิวกันดีกว่าแมะว่าในไฟล์มีอะไร ใช้ยังไง (สำหรับมือใหม่)
- เปิดไฟล์ขึ้นมาแล้วเลือก เปิด/ปิด Layer ได้ค่ะ …ปิดเครดิตได้นะ ไม่ว่า อิอิ :}
- สำหรับไฟล์ AI พี่ยุ้ย Lock Layer ไว้บางตัว กันไปจิ้มโดนแล้วมันเลื่อน
- ตัว Desktop นี้ทำมาที่หน้าจอ 1366px จะได้เห็นภาพรวมของจริงเวลาวาง Layout ที่ 1170px
- พี่ยุ้ยทำเส้น guides ให้เรียบร้อยแล้ว กด Ctrl + ; เพื่อโชว์หรือซ่อนเส้น guides ได้
- ทำ Column บวกลบเลข มาให้ด้วย จะได้เห็นชัดๆ ไม่ต้องกดเครื่องคิดเลขบ่อยๆ (อันนี้ inner ตัวเอง)
- เปลี่ยนสีเองได้ตามใจชอบ
- วิธีใช้: New Layer ขึ้นมาให้อยู่ใต้ Layer ของ Grid
แล้วลด opacity ที่ Layer Grid หรือปิดไปเลย ใช้แต่เส้น guides ก็ได้จ่ะ
ตัว Column สีฟ้าๆ เพิ่มความสูงให้มันด้วยการจับทีเดียวทั้งแผง แล้วลากยาวๆ ลงมา
PSD – Bootstrap Fluid Grid
Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)
AI – Bootstrap Fluid Grid
Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)
ตัวอย่าง Mockup – Webmonster Lab
ใช้ WordPress Theme ที่ออกแบบด้วย Bootstrap Grid System 1170px
Bootstrap Grid มีมานานแล้วแต่พี่เพิ่งเอาจริง ฮ่าๆๆๆ
Resource/บทความ/รูปภาพ : Webmonster Lab | Yui K Artist