glomgeek

filter : alpha(opacity) has to be define before background color to take effect on IE11. Not sure about other version or browser.

Attribute Transition ใน CSS3 สามารถทำ transition effect ของ attribute อื่นๆใน container เดียวกันได้ ตั้ง elapse time แยกกันแต่ละ attribute ก็ได้ ใช้คู่กับ pseudo class อย่าง hover ก็ได้

1. เข้าใจตัวเองก่อนว่าอยากจะทำอะไร มองหาอะไรอยู่ ให้ value อะไรได้บ้าง 2. สรุปสิ่งที่เราทำได้ดีเป็นข้อๆสักสี่ข้อ 3. เล่าเรื่องจากข้อแรกกับข้อสอง 4. อย่าใช้คำศัพท์เฉพาะทาง 5. เรื่องที่เล่า เว้นจินตนาการให้มีการคุย ถามต่อยอดด้วยนะ 6. จับเวลา สามสิบวินาทีในการเล่าเรื่อง 7. อัดวีดีโอแล้วดูตัวเอง 8. ฝึกกับเพื่อนที่น่าจะยินดีให้เราฝึกด้วย ถามหาความเห็น

1. Scroll ยาวๆ     เมื่อก่อนจะกลัวกันเพราะว่าจากงานวิจัยพบว่าคนไม่ค่อย scroll     แต่การมาของ mobile คนชินกันเรียบร้อย แถมกลายเป็นว่า เข้าใจง่ายกว่าการแยกหลาย     หน้าอีก     - ใส่ลูกเล่นตอน scroll เช่น parallax     - เมนูให้ค้างไว้ที่ขอบบน 2. Card design     อีกรูปแบบที่นิยม ย่อยเนื้อหาสั้นๆพร้อมรูปประกอบวางเรียยงเป็นการ์ด      - ควรคลิกได้ทั้งใบ     - ควรมี interactive กับผู้ใช้ระดับนึง เช่น hover / transition 3. Flat 2.0     ยังคงเป็นเทรนด์ แต่จะไม่แบนมากเหมือนเดิม จะมีการไล่สี เล่นแสงเงามากขึ้น แล้วก็     เล่นรายละเอียดจากงานออกแบบแบบลายเส้น layout มากขึ้น     - ghost button มีแต่ขอบ layout แต่พื้นหลังโปร่ง     - ลงตัวกับงานออกแบบสไตล์ minimal 4. Animation     - ใช้หลัก 12 ประการของดิสนี่ย์     - ถ้าใช้ long scroll ทำ animation ให้ smooth ขึ้น     - ใส่ animation ลง Bg / Load screen 5. ใช้รูปถ่ายเป็นส่วนประกอบ     - ใช้ overlay ช่วยคุมโทน 6. ใช้พื้นหลัง hd จากรูปถ่าย     - ใช้ svg     - ระวังอย่าให้เด่นเกินเนื้อหา     - ใส่ฟังก์ชันครอปรูป แต่ละอุปกรณ์ ratio ไม่เท่ากัน 7. วาง text ใช้สีและ font ที่ดึงความสนใจได้ดี     - สองฟ้อนท์กำลังพอดี 8. Interactive มากขึ้น เช่น swipe ได้ custom content ได้ เปลี่ยนตีม มี notification      แบบ fb quora g+ 9. สีโทนสว่างสดใส - สีเดียวหลายโทน หรือไม่เกินสามสี 10. Minimal - ลด ui เท่าที่จำเป็น เน้นใจความเนื้อหา เมนูใช้พับซ่อนนอกจอแต่ให้สังเกต ได้

เริ่มจาก Component ของ web browser 1) UI - UI ของเบราว์เซอร์ 2) Browser Engine - ทำงานระหว่าง UI + Rendering 3) Rendering Engine - Render จอตามประเภทของไฟล์ Chrome จะใช้ 1 instance : 1 tab. IE use Trident, FireFox use Gecko, Safari use WebKit, Chrome use Blink (modified WebKit) 4) Networking ตามชื่อ 5) JS Interpreter ตามชื่อ 6) UI Backend - Render แค่พวก Standard Web Control เช่น - Text Box, Dropdown list, Radio, Scroll Bar หัวใจสำคัญของการทำงานคือ Rendering Flow เริ่มจาก HTML Tag > Parsing DOM > สร้าง DOM Tree > คลอดเป็น Attachment ขณะเดียวกัน ฝั่ง CSS > Parsing ออกมาเป็น Style Rules > เอา Attachment จาก DOM Tree มารวมร่างกัน > ออกมาเป็น Render Tree เจ้านี่แหละสำคัญสุด Render Tree จะคำนวนจุด coordinate บนจอในการวาด แล้วค่อยวาดลงบนจอ กระบวนการนี้ Webkit เรียกว่า Layout ส่วน Gecko เรียกว่า Reflow ขั้นตอน Html & Css Parsing ไม่มีอะไรหวือหวา HTML / CSS จะทำการ parse พร้อมกันแล้วค่อยไปสร้าง DOM Tree / Style Rules parser จะมีความเท่ห์ตรง error tolerance ความยากและที่เกี่ยวข้องกับ front end จะเริ่มที่ Render tree ... หมดเวลา ต่อตอนสอง

ดังนั้นในยุคนี้ใครจะทำ Modern Web แบบ full stack ต้องอ่านเยอะกว่าเดิมมากเลย HTML, CSS, JavaScript, jQuery แล้วก็ framework ฝั่ง client กับ server

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

บทความกี๊คๆวันนี้ Responsive VS Adaptive website ทั้งสองวิธีเป็นการเขียนเว็บให้แสดงผลบนหลายๆ device ได้แต่ว่า adaptive นั้นจะเขียนให้ปรับตามขนาดจอที่ระบุไว้แล้วเท่านั้น เช่นเจอจอไอโฟนแบบนึง ใหญ่ขึ้นเป็น galaxy note ก้แบบนึง เป็น ipad ก้แบบนึง เป็น desktop ก้อีกแบบ responsive ขยายยืดหดไม่สนขนาดจอ อาจมีเล็งแค่เพิ่ม grid ลด grid ตาม ขนาดจอที่เหมาะสมในการเพิ่มลด grid adaptive เขียนง่ายดีไซน์ง่ายกว่า แต่ถ้าเจอ device จอแปลกๆอาจเดี้ยงได้ responsive ต้องคิดเยอะกว่า เขียนยากกว่าแต่ครอบคลุมแน่นวล ความเหมาะแล้วแต่แผนงาน ตัวอย่างดูได้ในลิ้งค์

- เทคนิค advance ขึ้นอีกนิดคือใช้การ merge และ subtract สร้างรูปทรงต่างๆเช่น ครึ่งวงกลม

ทำยังไงให้การเลือกตัวเลือกง่ายสำหรับผู้ใช้งาน บทความนี้ชวนให้พวกเราเอากฎของ Hick มาใช้ในงานออกแบบ สมการของ Hick นั้นกล่าวแบบย่อโคตรๆได้ว่า ยิ่งตัวเลือกเยอะ คนยิ่งใช้เวลาตัดสินใจนาน ...ตรงตัวมากซะจนงงว่าของแบบนี้เขียนเป็นสมการได้ด้วยวุ้ย อย่างไรก็ตามวิธีการนำไปใช้โดยย่อคือให้งานออกแบบ Keep It Short and Simple หรือ KISS เจ้าเก่า ตัวอย่าง - ทำปุ่มให้เหลือน้อยๆในหน้าแรก หน้าแรกของเว็บหรือแอพนี่สำคัญมากๆ ถ้าเข้ามาแล้วไม่รู้ไปยังไงต่อนี่จบเลย - จัดหมวดเนื้อหาให้เป็นกลุ่มๆเวลาคนใช้ใสก็เลือกกลุ่ม หรือมองเป็นกลุ่ม - ถ้าขั้นตอนการใช้ฟังก์ชั่นยาวทำให้เหลือหน้าสั้นๆแต่ซอยหลายหน้าไล่ขั้นตอนแทน การวัดผล - ถ้าออกแบบมาตามหลักการนี้ time on page ก่อนไป page สุดท้ายต้องน้อยๆ เพราะไม่ต้องคิดนานกดผ่านได้รัวๆ - Time on site ต้องไม่มากเกินไป(แสดงว่าหลง) ไม่น้อยเกินไป(ไปต่อไม่ได้ปิดแม่ม) งานออกแบบไม่ต้องสวยนะ แต่ออกแบบให้คนใช้ผลิตภัณฑ์เราแก้ปัญหาเค้าได้

คหสต บางทีมันก็อิงกับคนทำฟ้อนต์ด้วยนะว่าเว้นมาแล้วรึเปล่า

จากสถิติปี 2014 - 2015 desktop และ mobile web มีสถิติการเข้าชมที่สูงกว่า mobile app มาก แต่ว่าในแง่ระยะเวลาที่อยู่บนหน้าจอแล้วนั้นกลับกัน mobile app ชนะเว็บขาดลอย ทั้งนี้เนื่องจากผู้ใช้งาน search บนเว็บเจอก่อน แล้วค่อยไปโหลด app ถ้าสนใจในสินค้าหรือบริการ ดังนั้นในยุคนี้ เว็บจึงเป็นหน้าร้าน และ app จึงเป็นสืงที่อยู่ในร้าน

จับเวลา ทำงาน 25 นาทีห้ามว่อกแว่ก แล้วได้เบรค 5 นาที จากนั้นก็เพิ่มไปเรื่อยๆ ที่เคยเจอบทความอื่นบอกให้ทำ 50 นาที พัก 10 นาที หรือมากสุด 90 นาที ต้องพักละ 15 นาที สมาธิและพลังงานสมองคนเราได้ประมาณนี้ ที่เหลือก็ตรงไปตรงมา ให้ทำรายการที่จะทำทั้งหมด แบ่งเป็นรายปีรายเดือนรายสัปดาห์รายวันแล้วก็ลง agenda

Richard St. John: Success is a continuous journey

แบ่งจอทั้งแนวนอนแนวตั้งเป็นสามส่วนแล้วลาก grid จุดตัดซ้ายบนวาง key content ลงไปเลย ปกติสายตาคนจะไล่จากจุดตัดซ้านบน มาซ้ายล่าง แล้วก็ไปขวาบน ขวาล่าง เป็นรูปตัว F