12 สิ่งที่บอกว่าการ Design ของเรา ดูดีหรือยัง?

12 สิ่งที่บอกว่าการ Design ของเรา ดูดีหรือยัง?

หลักการหรือคุณลักษณะบางสิ่งบางอย่างที่พอจะบอกได้ว่า ดีไซน์นี้ดีหรือไม่ดีอย่างไร เพราะถึงแม้คำว่าดีไซน์จะกินความหมายที่ค่อนข้างกว้าง แต่หากจำกัดลงมาให้อยู่ในแง่ของการดีไซน์เพื่อการสื่อสารแล้ว มันก็พอที่จะกำหนดออกมาเป็นเรื่องๆได้ บทความนี้จึงจะพาไปหาเหตุผลในความดูดีของดีไซน์ ว่ามันจะดูดีได้ด้วยองค์ประกอบแบบไหนบ้าง เผื่อใว้เป็นแนวทางในการอธิบายงานตัวเองของนักออกแบบ หรือแม้แต่ฝั่งคนที่วิจารณ์งานก็จะได้สามารถบอกกับนักออกแบบได้อย่างเห็นภาพตรงกันมากขึ้น1. มีจุดโฟกัส จุดโฟกัสคือส่วนที่เด่นชัดที่สุดในภ...

การใช้งาน Google chrome developer tools ในการพัฒนาเว็บแอพพลิเคชั่น

การใช้งาน Google chrome developer tools ในการพัฒนาเว็บแอพพลิเคชั่น

การพัฒนา และออกแบบเว็บแอพพลิเคนั้น ในขั้นตอนของการพัฒนาบางครั้งเราต้องการที่จะทดสอบการทำงาน และการแสดงผลของเว็บแอพพลิเคชั่นที่เราพัฒนาขึ้นมา ว่าเป็นไปตามความต้องการของเราหรือไม่ จะต้องแก้ไข หรือปรับปรุงในส่วนของ Element หรือ Tag ตัวไหน เพื่อให้ได้แอพพลิเคชั่นที่ตรงกับความต้องการของเรา ซึ่งเมื่อก่อนเราต้องไปไล่ Code ที่เราเขียนขึ้นมาทีละบรรทัด แล้วทำการแก้ไข จากนั้นก็ทำการทดสอบในบราว์เซอร์ เพื่อดูการทำงาน และการแสดงผล ซึ่งนับเป็นการยุ่งยากอย่างมากในการพัฒนาเว็บแอพพลิเคชั่น และทำให้เกิดความล่าช้า...

Material Design ภาษาใหม่สำหรับนักออกแบบ โดย Google

Material Design ภาษาใหม่สำหรับนักออกแบบ โดย Google

Material Design ทาง Google ซึ่งเป็นผู้พัฒนาได้นำเสนอว่าเป็นการสร้างภาษาสำหรับการออกแบบใหม่ (Design Language) โดยลักษณะการออกแบบจะอาศัยกระดาษเป็นแม่แบบ สำหรับคนที่อาจจะไม่ได้ติดตามข่าวงาน Google I/O และนึกภาพไม่ออกว่า Material Design หน้าตาเป็นอย่างไร แนะนำให้ดูวิดีโอนำเสนอของกูเกิลก่อนครับ จะได้เห็นภาพตรงกัน Material Design คืออะไร? Material Design ไม่ใช่เป็นแค่ธีม (Theme) แต่มันลงลึกไปถึงการวางโครงสร้างของวัตถุ วัตถุพื้นฐานของ Material Design คือ "กระ...

ระบบตัดเงินผ่านบัตรเครดิต ต้องทำหรือไม่?

ระบบตัดเงินผ่านบัตรเครดิต ต้องทำหรือไม่?

เมื่อลูกค้าต้องการทำเว็บไซต์ขายของ มักจะมีความต้องการ (Requirement) มาด้วยว่าอยากให้ตัดเงินเพื่อชำระค่าสินค้าผ่านบัตรเครดิตได้ ซึ่งในมุมมองของคนไม่รู้ มันก็ดูดีนะ ไหนๆ เสียเงินทำเว็บไซต์แล้วก็อยากให้มีช่องทางการจ่ายเงินที่ดี เวลาซื้อของผ่านอินเตอร์เน็ต ก็เลยจะนึกถึงการจ่ายเงิน และให้ชำระเงินผ่านทาง (บัตรเครดิต) ขั้นตอนการขอเปิดบริการจ่ายเงินผ่านบัตรเครดิต (Credit card payment gateway) จะว่าทำง่ายก็ง่าย จะว่ายากก็ยาก แต่ที่แน่ๆ มันวุ่นวายมาก โดยทั่วไปจะใช้ 2 วิธี1. เปิด Gateway กับทางธนาคารโดยตร...

ทดสอบ feature JavaScript library, HTML, CSS รุ่นใหม่ ใน Browser ด้วย Modernizr Javascript Libary

ทดสอบ feature JavaScript library, HTML, CSS รุ่นใหม่ ใน Browser ด้วย Modernizr Javascript Libary

Modernizr คืออะไร Modernizr คือ JavaScript Library ขนาดกระทัดรัด ที่ใช้ตรวจสอบ Web Browser ที่ต้อง Render Web Application ที่เราพัฒนาขึ้นมาว่า รองรับ หรือสนับสนุน JavaScript, HTML, CSS รุ่นใหม่ที่เราพัฒนาหรือไม่ เพราะ JavaScript Libary หรือ Framework รุ่นใหม่ๆที่เราไปดาวน์โหลดมาใช้อาจจะต้องใช้ Feature หรือคุณลักษณะใหม่ใน HTML5 หรือ CSS3 ซึ่งจะไม่รองรับใน Web Browser รุ่นเก่าๆ ดังนั้น Modernizr จึงเกิดขึ้นมาช่วยเราทดสอบ Web Browser ว่าสนับสนุนคุณลักษณะใหม่ทั้ง JavaScript และ CSS ที่จะเพิ่มเข้าไปห...

meta viewport กับ fixed width

meta viewport กับ fixed width

ในยุคแรกเริ่มของเว็บ ขนาดหน้าจอยังมีไม่หลากหลายนัก ที่โดดเด่นใช้กันหลักๆก็แค่ 640*480 และ 800*600 ในยุคต่อมาก็เริ่มมี 1024*768 ดังนั้นในยุคเริ่มต้นนี้เราจึงใช้ Table และกำหนดความกว้างด้วย width="nn%" เป็นส่วนมาก โดย nn แทนตัวเลข เช่น width="100%" ต่อมา มอนิเตอร์อัตราส่วน 16:9 เริ่มแพร่หลายเข้ามา ทำให้ขนาดหน้าจอมีความหลากหลายมากขึ้น รวมทั้งมอนิเตอร์ขนาดใหญ่ขึ้นจนถึงยุคปัจจุบัน การออกแบบจึงไปลงตัวที่การกำหนดความกว้างแบบตายตัว โดยหลักๆก็จะใช้ div และกำหนด CSSเช่น margin: 0 auto; width:900px; เ...

Lorem Ipsum (ลอเร็มอิปซัม) คืออะไร?

Lorem Ipsum (ลอเร็มอิปซัม) คืออะไร?

สำหรับนักออกแบบเว็บไซต์ นักเขียนบทความ หรืองานด้านสื่อสิ่งพิมพ์ต่างๆ หรือแม้แต่กระทั่งบุคคลทั่วๆไป ต้องเคยผ่านหูผ่านตากันมาบ้างใช่ไหมครับ เรามักจะพบข้อความเหล่านี้บนเว็บไซต์ที่เป็นตัว Demo (ทดสอบ) หรือในแผ่นพับ โบรชัวร์สินค้า การ์ด ต่างๆ เพราะปกติจะมีตัวอย่างบทความเหล่านี้อยู่ เป็น Content หรือ Description คร่าวๆ เพื่อรอบทความจากลูกค้าอีกที เพื่อจะได้ให้เห็นตัวอย่างที่สมจริงประมาณว่า ถ้าหากลูกค้าให้บทความหรือเนื้อหาที่แท้จริงมาแล้วจะแสดงผลยังไง มีลักษณะยังไง ซึ่งจำเป็นต่อการเลือกใช้บริการ หรือรู...

ออกแบบเว็บไซต์ยังไงให้ทันสมัย

ออกแบบเว็บไซต์ยังไงให้ทันสมัย

ธุรกิจที่มีการใช้งานอินเทอร์เน็ตจะมีการปรับปรุงเนื้อหาในเว็บไซต์ของตนอย่างสม่ำเสมอ รวมทั้งมีการออกแบบเว็บไซต์ใหม่ทุกปี เหตุผลคือ พนักงานขายในบางบริษัทจะไม่สนับสนุนให้ลูกค้าที่คาดหวังเข้าไปยังเว็บไซต์ของบริษัทที่มีข้อมูลที่ไม่ทันสมัย หรือใช้งานได้ยาก Llise Benun ผู้เขียนหนังสือ "Designing Web Sites for Every Audience" กล่าว  ผู้เยี่ยมชมจะมองหาข้อมูลเกี่ยวกับวันที่เพียงเล็กน้อย แล้วสรุปว่าพวกเขามาถึงทางตัน หรือจุดสิ้นสุดของเว็บไซต์แล้ว และเมื่อลูกค้ารายใหญ่ของคุณคลิกเข้ามาเพื่อเข้าร่วมการสัม...

การออกแบบโลโก้

การออกแบบโลโก้

หลักการออกแบบโลโก้ให้เป็นที่จดจำนั้นไม่ยากหรอกครับ วิธีง่ายสุดในการสร้าง ไอเดีย คือพยายามเข้าไปดูไอเดียตามเว็บต่างๆ ว่าโลโก้แบบไหนที่คุณมองแล้วคิดว่า มันสะดุดตาจำง่ายนั่นแหละ หลังจากที่มีแบบคร่าวๆอยู่ในใจแล้ว ก็ลองร่างบนกระดาษก่อนก็ได้ แล้วพยายามทำตาม ส่วนมากถ้าไม่รู้จะทำยังไง ก็เริ่มจากตัวอักษรก่อนก็ได้ คำแนะนำ ถ้าอยากได้โลโก้สวยๆ พยายามหา fonts สวยๆมาเก็บไว้ในเครื่องบ้าง จะช่วยให้โลโก้ที่เราออกแบบนั้นน่าประทับใจยิ่งขึ้นหลักการออกแบบ  ออกแบบให้มีเอกลักษณ์ มีข้อความที่ทำให้คนมองแล้วรู้ว่าน...

ขนาดมาตรฐานของแบนเนอร์ (Standard Banner Size)

ขนาดมาตรฐานของแบนเนอร์ (Standard Banner Size)

แบนเนอร์ถือเป็นเครื่องมือโฆษณาที่สำคัญ ปัจจุบันเวปไซต์ต่างๆก็มักจะมีพื้นที่ในการติดป้ายโฆษณา บ้างก็เพื่อสร้างคอมมูนิตี้ (Communities) ระหว่างเว็บไซต์ด้วยกันเเอง บ้างก็เพื่อการสร้างรายได้ ด้วยการให้เช่าพื้นที่ในการประชาสัมพันธ์ให้แก่เว็บไซต์อื่นๆ ในเว็บไซต์เหล่านั้นจะมีแบนเนอร์มากมาย หลากหลายสีสัน หลากหลายรูปแบบ มีทั้งแบบที่เป็น ภาพนิ่ง (statics banner) ภาพกระพริบ(gif animation) และภาพเคลื่อนไหว (Flash animation) แต่ละเวปไซด์ก็มีขนาดที่แตกต่างกันไป แต่จริงๆแบนเนอร์นั้นมี...

การออกแบบแบนเนอร์ โฆษณา

การออกแบบแบนเนอร์ โฆษณา

การออกแบบแบนเนอร์ ให้น่าสนใจ ใครเห็นเป็นต้องสะดุดตามอง ได้อ่านแบนเนอร์ของเรานั้น เราต้องใช้หลักการออกแบบจัดวาง และลงสีให้เหมาะสม จะทำให้แบนเนอร์ของเรานั้นสะดุดตาครับ มีภาพ โลโก้ เพื่อให้ดึงดูดความสนใจ ใช้สีสันสดใสเพื่อสร้างอารมณ์สนุกให้แก่คนที่เข้ามาชม แต่พื้นหลังของงานก็ไม่ได้ฉูดฉาดมากเกินไป ทำให้จุดเด่นของภาพ เป็น ภาพ โลโก้ ตัวอักษรโฆษณา ตามลำดับออกแบบอย่างไรให้ตรงกลุ่มเป้าหมาย เรื่องตายน้ำตื้นสำหรับ คนที่เป็น Graphic Designer ส่วนมากแล้วเท่าที่เคยเห็นมา ออกแบบงานได้สวยนะ แต่ทำไมไม่...

การเลือกใช้ Font ในการออกแบบเว็บไซต์

การเลือกใช้ Font ในการออกแบบเว็บไซต์

ในการออกแบบให้สวยงามนั้น สิ่งที่สำคัญอย่างหนึ่งที่เราไม่ควรจะมองข้ามเลย ก็คือ ตัวอักษร หรือ Font ครับ เอาล่ะวันนี้จะพามาดูเรื่องของการเลือกใช้ font ให้เหมาะกับงานของเราครับ อาร์ตก็สรุปคร่าวๆ อาจจะไม่ถูกหลักตามที่เค้าสอนกันทั่วไปก็ได้ แต่ใช้ได้จริงๆครับหลักการเลือก fontสำหรับงานทั่วไป พยายามเลือก font ที่เข้าใจได้ง่าย อ่านง่าย ดูแล้วอ่านออกทันที จะทำให้เราสามารถสื่อใจความสำคัญของงานออกมาสู่ผู้ชมได้เร็วครับการออกแบบแนวศิลป์ อาจใช้ font ที่ดูมีความหมาย อ่านแล้วต้องคิดตามนิดนึงถึงจะเข้าใจความหมายได...

สีกับงานออกแบบเว็บไซต์

สีกับงานออกแบบเว็บไซต์

สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัด กระตุ้นการรับรู้ทางด้านจิตใจมนุษย์สีแต่ละสีให้ความรู้สึก อารมณ์ที่ไม่เหมือนกัน สีบางสีให้ความรู้สึกสงบ บางสีให้ความรู้สึกตื่นเต้นรุนแรง สีจึงเป็นปัจจัยสำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้นการเลือกใช้โทนสีภายในเว็บไซต์เป็นการแสดงถึงความแตกต่างของสีที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็นสามารถแบ่งออกเป็น 3กลุ่ม คือ1.สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่...

ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์

ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์

ขั้นตอนการพัฒนาเว็บไซต์  การออกแบบเว็บไซต์ให้มีข้อมูลและรายละเอียดที่ครบถ้วน และครอบคลุมกับความต้องการ เว็บไซต์มีความสวยงาม อีกทั้งง่ายต่อการดูและปรับเปลี่ยนข้อมูลในภายหลังนั้น ควรมีการวางแผนในการพัฒนาเว็บไซต์ที่ดี ซึ่งพอสรุปขั้นตอนได้ดังนี้คือ1. กำหนดวัตถุประสงค์ของเว็บไซต์ การพัฒนาเว็บไซต์ ควรเริ่มจากการกำหนดวัตถุประสงค์ให้เห็นภาพชัดเจนว่าต้องการนำเสนอหรือต้องการให้เกิดผลอะไร เมื่อทราบวัตถุประสงค์แล้วก็จะสามารถกำหนดรายละเอียดอื่น ๆ ที่เกี่ยวข้องได้ เช่นลักษณะหน้าตาและสีสันของเว็บเพจ2...

ทำไมต้อง Responsive Web Design?

ทำไมต้อง Responsive Web Design?

คาดว่าหลายๆ คน คงเคยอ่านบทความเกี่ยวกับ Responsive Web Design มาบ้างแล้วใช่มั้ยครับ แต่ถ้ายังรู้สึกว่ายากอยู่ หรือยังไม่รู้ว่าจะเริ่มต้นยังไง บทความนี้ ผมจะสรุปขั้นตอนสำคัญๆ มาให้อ่านง่ายๆ ครับ เรียกได้ว่า ถ้าอ่านให้เข้าใจ แล้วลงมือทำตามขั้นตอนต่อไปนี้ รับรองว่าทำได้แน่นอนครับ เคยมั้ยครับ? ที่เวลาเข้าเว็บไซต์นึงใน PC แล้วแสดงผลออกมาหน้าตาสวยงาม ใช้งานง่าย แต่พอไปเปิดเว็บไซต์นั้น บนมือถือกลับพบว่าใช้งานค่อนข้างลำบาก เนื่องจากตัวหนังสือรวมไปถึงรูปภาพมีขนาดเล็กลง ปุ่มต่างๆ ก็เล็กจนกดยาก แถมยังมีโ...

responsive-web-design คืออะไร?

responsive-web-design คืออะไร?

ความหมาย และ ความสำคัญ ของ Responsive Web Design ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS) ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค...