Web Design เป็นสาขางานดีไซน์ที่ไม่เหมือนกับสาขาอื่นๆ เพราะสื่อของเว็บไม่ใช่กระดาษ แต่เป็นหน้าจอใดๆที่สามารถเชื่อมต่ออินเตอร์เน็ตได้ ทำให้การออกแบบเว็บไซต์ มีสิ่งที่ต้องคำนึงนอกเหนือไปจากความสวยงามอีก เช่น การใช้งาน และการรองรับการแสดงผลในหลายๆขนาดหน้าจอ และในทุกๆบราวเซอร์ จุดนี้เองที่ทำให้เราต้องหันมาสนใจ HTML & CSS กันอย่างจริงจังสักที
เวลาเราออกแบบเว็บ สิ่งที่ช่วยอำนวยความสะดวกให้กับการทำงานของเรามากๆคือ พวก Tools ต่างๆ ทั้งที่เป็น Extension ของบราวเซอร์ (ปกติเราใช้ Chrome เป็นบราวเซอร์หลักค่ะ ถ้าเป็น Firefox ก็ต้องเรียกว่า Add-ons) หรือ Plug-in ของ Photoshop และโปรแกรมต่างๆที่ช่วยเสริมการทำงานของเราให้เร็วขึ้น สะดวกขึ้นไปอีก วันนี้จะมาลิสให้ดูค่ะว่า ปกติปุ้มใช้อะไรบ้างเวลาทำงาน
วันนี้เราจะมาพูดถึงเทคนิคการออกแบบเว็บไซต์ที่มีหลายๆหน้า ปัญหาหลักๆที่พบคือ หาไฟล์หน้านั้นไม่เจอ หรือพอแก้ไฟล์ออกแบบหลัก ก็ทำให้ต้องแก้ส่วนที่เหลือ ไม่ต่างกับทำใหม่ วิธีหนึ่งที่พอจะช่วยลดปัญหาเล่านี้ได้ และยังช่วยให้เราขึ้นโครงหน้าเว็บได้ง่ายขึ้น ก็คือการแยกเฉพาะ Elements ต่างๆของหน้าเว็บออกมาอีกไฟล์หนึ่ง ที่ไม่เกี่ยวกับไฟล์ออกแบบหลัก
สวัสดีค่ะ วันนี้มาแบบสั้นๆ พร้อมคำถามที่ว่า ทำไมต้องตั้งชื่อ layer? ก่อนหน้านี้เวลาที่เราแต่งภาพในโปรแกรมรูปที่มี layer ให้ใช้ เช่น Photoshop เราก็ไม่เคยใส่ใจกับการตั้งชื่อ layer สักเท่าไหร่ค่ะ ตอนนั้นมองไม่เห็นปัญหา เพราะเราไม่ได้ทำงานที่มี layer เยอะๆ เวลาเลือก layer ก็อาศัยมั่วๆไป ก็ไม่ลำบากอะไร แต่พอมาถึงจุดหนึ่งที่ไฟล์งานของเรามี layer เยอะมาก จนไม่รู้ว่าเราจะหา layer ที่เราต้องการได้ยังไง ถึงแม้ว่า โปรแกรม Photoshop จะมีฟังก์ชั่น คลิ้กขวา เพื่อเลือก layer ที่ซ้อนกันอยู่ ณ จุดที่เรากดมาให้เราเลือกแบบง่ายขึ้นแล้ว หรือจะใช้ shortcut key : ctrl + alt คลิ้กขวา เพื่อเลือก layer บนสุดที่ตรงนั้นได้เลยก็แล้ว ในหลายๆครั้งที่เราต้องการ layer ที่ถูกซ้อนไว้ ก็ยังเจอความลำบาก และสับสนอยู่ดีค่ะ สุดท้าย ก็ต้องลองกดมั่วๆไปหลายครั้ง กว่าจะเจอ layer ที่ต้องการ ซึ่งเสียเวลาไม่น้อยเลย
สวัสดีค่ะ ห่างหายการเขียน blog ไปนาน พอดีวันนี้คันไม้คันมืออยากเขียนอะไรขึ้นมา ช่วงนี้ก็กำลังนั่งศึกษาเรื่อง Web Design Process อีกรอบแบบลึกซึ้งกว่าที่เคยรู้มาก่อนหน้านี้ และหนึ่งในกระบวนการที่น่าจะสำคัญที่สุดของการออกแบบเว็บก็คือ การเขียน Wireframe เพราะมันช่วยให้เราไม่หลงทาง หลังจากที่เราได้เริ่มทำโปรเจ็คไปแล้วระยะหนึ่ง ก่อนที่จะมานั่งเขียนบทความนี้ ก็ได้อ่าน blog ของฝรั่งหลายๆเว็บด้วยกัน แต่ละที่ต่างก็บอกว่าการเขียน Wireframe นั้นสำคัญกับการออกแบบมากๆ ด้วยเหตุผลที่บอกไปแล้ว แต่ละเว็บที่เค้าอธิบายวิธีการอาจต่างไปนิดหน่อย ขึ้นอยู่กับประสบการณ์และความถนัด ดังนั้นบทความนี้ก็จะเขียนสรุปรวบยอดสิ่งที่อ่านมา แล้วมาแปลงเป็นวิธีที่น่าทำตามมากที่สุดละกันค่ะ
Smashing Book ออกมาจะครบปีแล้ว แต่ก็ยังอ่านได้ไม่หมด แต่ตอนนี้คิดจะลองมาสรุปความรู้ที่ได้มาดูสักหน่อย เราจะขอเน้นแต่เฉพาะส่วนที่เป็น UI design เพราะอยู่ในฟิลด์ที่ทำงานอยู่ หนังสือเล่มนี้อ่านแล้วได้อะไรเยอะดี แต่เสียที่หนักไปหน่อย พกพาไปอ่านนอกสถานที่ไม่ค่อยสะดวกเท่าไหร่ Learning from The Smashing Book by Smashing Magazine 1: UI in Modern Web Application _______________________________________________________________________________ What is User Interface? ” The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” by Jef Raskin User Interface (UI) คือหน้าตาของโปรแกรมในส่วนที่ผู้ใช้ต้องเข้ามาสัมผัส และใช้งาน ซึ่งไม่ได้หมายความถึงปุ่ม หรือเมนูเท่านั้น แต่รวมไปถึงวิธีการใช้งานระหว่างผู้ใช้ กับ โปรแกรม เว็บ หรือเครื่องมือนั้นๆด้วย โปรแกรมที่มีประสิทธิภาพ แต่ใช้งานยาก ผู้ใช้ก็จะไม่เลือกที่จะกลับมาใช้อีก ดังนั้นหัวใจของ UI จึงไม่ใช่ความสวยงาม แต่เป็นการใช้งาน ซึ่งมีผลกับความพึงพอใจของผู้ใช้งานโดยตรง คำถามที่เกิดขึ้นคือ จะทำอย่างไรให้ผู้ใช้สามารถใช้งานได้ง่าย และมีประสิทธิภาพ? What Makes A Great User Interface? 1. Clarity หรือ ความชัดเจน ผ่านการใช้ภาษา…read more
