เอกพล ตรีเนตรวรคุณ

📸 How to Capture screen website แบบเก๋ๆ

by
Capturing website with screenshotr.app

         🙏สวัสดีครับ การเขียน Blog หรือการทำคู่มือที่เกี่ยวข้องกับระบบสารสนเทศ เพื่อให้ง่ายต่อการอ่านหรือใช้งานระบบ ปกติแล้วเราก็จะใช้ปุ่ม print screen เพื่อ capture หน้าจอแล้วก็ save as image ออกมาเลย หรือเอารูปที่ capture มา ไปใช้กับโปรแกรมอื่นก็ได้ เช่น Photoshop, Illustrator หรือ Mockup Generator เพื่อที่จะได้รูปประกอบที่สวยงามและเหมาะแก่การนำเสนอให้น่าสนใจมากขึ้น            เอาหละ จากที่เกริ่นมา เรามีเครื่องมือมานำเสนอทุกคน เครื่องมือที่จะไปช่วยเรา Capture หน้าจอออกมาแล้วนำมาใส่ในกรอบ Browser เก๋ๆให้เราเลย เราก็แค่ใส่ URL และกด Download ออกมาใช้งานได้เลย เครื่องมือที่ว่ามีชื่อว่า 🎊 “Screenshotr” 🎊 (คำว่า Screenshot + … Read more

✏️ More than noting “Notion”

by

ทุกวันนี้เวลาเราใช้ชีวิตประจำวัน ถ้าเราไม่จดโน๊ต ทุกอย่างเราก็จะต้องจดจำทุกอย่างอยู่ในหัวสมองเราเอง แน่นอนการจดจำในหัวสมองเรานั้นมันก็ไม่ได้มีความถูกต้อง แม่นยำ 100% การจดโน๊ตก็เป็นอีกหนึ่งวิธีการที่จะช่วยเตือนความจำ ระหว่างการจดก็จะเป็นส่วนช่วยในการจดจำได้ดียิ่งขึ้น จะดีไหมถ้ามีเครื่องสักตัวหนึ่งที่ เราสามารถจดโน๊ตของเราได้อย่างมีประสิทธิภาพแล้ว มันสามารถนำข้อมูลที่เราจดไป มาใช้งานต่อได้อีก เช่นการจดรายงานการประชุมโดยมีการแปะลิ้งค์ รูป ข้อความได้ลงในหน้ากระดาษ แล้วใช้การ mentions ผู้เข้าร่วมประชุมให้มา revise และ approve ได้ จุดไหนผิดถูกสามารถ comment ได้ เมื่อแก้ไขเสร็จแล้วก็สามารถ Lock ไฟล์นั้นๆได้และ Export ออกไปเป็น PDF สำหรับการส่งรายงานก็ทำได้เช่นกัน 🤔 What is Notion? Website: Notion – One workspace. Every team. Notion เป็นเครื่องมือการจดโน๊ตที่เป็นได้มากกว่าการจด จดแล้วก็สามารถนำไปประยุกต์ใช้ได้ ในระหว่างการจดก็มีเครื่องมือที่อำนวยความสะดวกเช่น การใส่ Heading1,2,3 List ประเภทต่างๆ Checkbox และอื่นๆอีกมากมาย และที่สำคัญ เราสามารถเก็บข้อมูลในรูปแบบของ … Read more

UX Design Processes

by

สวัสดีครับ วันนี้เราจะมาว่ากันด้วยเรื่องของ การออกแบบสินค้าและบริการที่ตอบโจทย์และดีต่อผู้ใช้ การสร้างสินค้าและบริการจะต้องประกอบไปด้วยการออกแบบทางด้านประสบการณ์ของผู้ใช้ หรือ UX เพราะทุกสิ่งที่ถูกคิดค้นหรือสร้างขึ้นล้วนต้องผ่านการคิด วิเคราะห์ สร้างเพื่ออะไร ทำไปทำไม ตอบโจทย์อะไรกับผู้ใช้ ซึ่งการออกแบบมีด้วยกัน 6 ขั้นตอนหลักๆดังนี้ Step 1 : Understanding Environment (Discovery phase) เป็น phase แห่งการทำความเข้าใจ การทำความเข้าใจในที่นี้หมายถึง การที่เราเข้าใจผู้ใช้, เข้าใจ brand, เข้าใจในเงื่อนไขต่างๆ เพื่อที่จะเอามาเป็นแนวทางในการทำ research ให้ phase ถัดไป User การทำความเข้าใจผู้ใช้งานระบบ -> Pain Point discovery การค้นหา Pain point ของผู้ใช้ เราต้องเข้าใจว่าปัญหาของผู้ใช้คืออะไรบ้าง เราคิดว่าจะแก้ไขปัญหาให้กับผู้ใช้ได้อย่างไรบ้าง Brand เป้าหมาย/จุดประสงค์ขององค์กร เราต้องรู้โปรเจคนี้มีความเกี่ยวข้องกับภารกิจหรือเป้าหมายขององค์กรเราอย่างไร ต้องพยายามยึดติดอยู่กับเป้าหมายขององค์กรเพราะมันจะเป็นสิ่งที่ทำให้องค์กรประสบความสำเร็จได้ Clear Needs & Conditions ความต้องการและเงื่อนไขที่ชัดเจน … Read more

UX, everything related!

by

เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง UI :: User Interface User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย “UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“ UX :: User Experience User Experience คือ Experience หรือประสบการณ์ของผู้ใช้ที่เราได้ส่งมอบให้ มากกว่า Interface ที่ผู้ใช้งานได้ตอบสนอง เราจะไป focus ที่ผู้ใช้ใช้สินค้าเราแล้วมีความรู้สึกอย่างไร ผู้ใช้ใช้สินค้าเราแล้วได้บรรลุวัตถุประสงค์ของเราหรือไม่ “UX … Read more

สร้างเงาให้กับวัตถุด้วย SmoothShadow

by

Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้ Final blur strength … Read more