Design

[Tips] ความสามารถเด็ด ๆ ช่วยทำเว็บไซต์ของ Firefox !!

Mockup-less Web Design การทำเว็บแบบไม่ต้อง Mockup ใน Photoshop !!

[Study List] Web Developer กับ Web Designer ควรรู้อะไรบ้าง

Front End Developer (นักพัฒนาด้านหน้าเว็บไซต์) และ Web Designer (นักออกแบบเว็บไซต์) ควรจะเรียนรู้เรื่องอะไรบ้างสำหรับใช้ทำงาน หางาน

[Free Fonts Download] รวมแหล่งดาวน์โหลดฟอนต์ฟรี แห่งปี!

รวมแหล่งดาวน์โหลดฟอนต์ฟรีแห่งปี สำหรับใครที่ยังไม่รู้ว่าจะดาวน์โหลดฟอนต์ฟรีที่ไหน มาดูที่นี่เลยครับ พร้อมลิขสิทธิ์แบบละเอียด

[Inspiration] 45 เว็บขาย iPhone/iPad Apps สวยงามสุด ๆ !!

ทำไมเว็บดีไซเนอร์เกิน 1 ล้านคนถึงเกลียดฟ้อนต์ Comic Sans!?

[Color Theory] การเลือกสีของแบรนด์เว็บไซต์ดัง ๆ ทั่วโลก

Color theory แนะนำการเลือกสีจากแบรนด์เว็บไซต์ดัง ๆ ทั่วโลก แยกตามประเภทสีให้ดูเป็นตัวอย่างสำหรับการสร้างแบรนด์ ออกแบบโลโก้ ทำเว็บไซต์ กราฟฟิก และอื่นๆ

[Free Vector] รวม 5 แหล่งดาวน์โหลด กราฟฟิกเวกเตอร์ ฟรี ๆ !!

หลายคนอาจสงสัยว่า กราฟฟิกเวกเตอร์ มันต่างกับกราฟฟิกธรรมดา (กราฟฟิกแบบ Raster) ยังไง กราฟฟิกแบบ Vector เวลาเราย่อ-ขยายรูปภาพ จะไม่ทำให้ความละเอียดลดลง จึงเหมาะกับรูปที่จำเป็นต้องใช้ในสิ่งพิมพ์หลายขนาด เช่น โลโก้เว็บไซต์ คลิปอาร์ต ไอคอน โดยสิ่งพิมพ์ที่นิยมเอากราฟฟิกเวกเตอร์มาใช้ ก็เช่น งานโฆษณา โปสเตอร์ แบนเนอร์ แฟลชอนิเมชั่น เป็นต้นครับ ส่วนกราฟฟิกแบบ Raster เรา ๆ ที่ทำเว็บดีไซน์น่าจะคุ้นเคยกันอยู่แล้ว พวกนามสกุล .jpg, .gif, .png, .bmp นี่เอง ซึ่งพวกนี้เป็นกราฟฟิกที่เกิดจากเอาจุดสีมาวางติด ๆ กันทีละ 1 pixel ดังนั้นเวลาย่อ-ขยายรูปภาพจะทำให้เสียรายละเอียดไป (ถ้าย่อ-ขยายใน Photoshop จะเห็นว่ามีการทำให้ภาพเบลอนิดหน่อย ช่วยให้มุมที่ถูกยืดไม่ดูเป็นเหลี่ยมมากนัก) กราฟฟิกเวกเตอร์ที่แจกในวันนี้มีหลายรูปแบบครับ ทั้ง Background ลาย vintage สวย ๆ, โลโก้แบรนด์ดังเท่ ๆ, ไอคอน Social Networks<a href="https://www.designil.com/50-websites-download-free-vector-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c/">Continue reading <span class="sr-only">"[Free Vector] รวม 5 แหล่งดาวน์โหลด กราฟฟิกเวกเตอร์ ฟรี ๆ !!"</span></a>

[Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!

เว็บดีไซน์เนอร์แต่ละคนก็มีสไตล์การดีไซน์เว็บไซด์แตกต่างกันไปครับ แต่สุดท้ายแล้วเว็บไซด์ที่ออกมาก็มีเป้าหมายเดียวกัน นั่นคือ แสดงข้อมูลที่เราต้องการด้วยวิธีใดวิธีหนึ่ง (รูปภาพ ตัวหนังสือ การจัดวาง ฯลฯ) วันนี้ได้ไปเจอบทความของ ZURB ครับ ซึ่งบทความนี้แนะนำวิธีเด็ด ๆ ต่าง ๆ ที่เอาไว้เช็คคุณภาพเว็บดีไซน์ของเรา ว่าเว็บไซด์ของเรานำเสนอข้อมูลออกมาได้ตรงจุดมั้ย และสร้าง First Impression แค่ไหน ซึ่งผมได้เลือกวิธีทั้งจากในบทความ และจากคอมเม้นท์ต่าง ๆ ที่น่าสนใจมาเสนอครับ 1. ดูว่าตามองที่ไหนเป็นที่แรก? พิมพ์ URL แล้วปิดตาทันทีที่เว็บโหลดเสร็จ (ควรจะเน็ตเร็วหน่อยนึง ถ้าเน็ตช้ามากจะมีเวลาดูมากเกินไป) ให้ดูว่าจุดไหนในเว็บที่เรามองเห็นเป็นที่แรกทันทีที่เว็บโหลดเสร็จ ซึ่งจุดนั้นควรจะเป็นจุดที่สำคัญของเว็บ และให้ดูด้วยว่าแค่เราเห็นจุดนั้นแป๊ปเดียวเราได้ข้อมูลอะไรไหม หรือต้องดูสิ่งรอบข้างประกอบถึงจะรู้ความหมาย 2. อ่านเว็บไซด์จากซ้ายบน -> ขวาล่าง คนส่วนใหญ่เวลาดูเว็บไซด์มักจะมองจากมุมซ้ายบน ไปจนถึงมุมขวาล่าง (ซึ่งบางประเทศอาจจะตรงข้ามกัน) เนื่องจากสมองของมนุษย์เตรียมรับข้อมูลจากมุมบนซ้ายถึงมุมขวาล่างอยู่แล้ว การเรียงข้อมูลบนเว็บไซด์ก็ควรจะเป็นไปตามลำดับที่ถ้าอ่านในทิศทางนั้นแล้ว จะเข้าใจง่าย 3. ทริค “5 อย่าง” เปิดหน้าแรกของเว็บไซด์คุณขึ้นมา ดูหน้าเว็บไซด์ 5 วินาทีแล้วปิด จากนั้นลิสต์<a href="https://www.designil.com/quality-check-webdesign-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99/">Continue reading <span class="sr-only">"[Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!"</span></a>

[Graphic Design] กราฟฟิกดีไซน์กับจิตวิทยามนุษย์ (part I)

คราวนี้เราจะมาพูดถึงกราฟฟิกดีไซน์กับจิตวิทยาของมนุษย์กัน ซึ่งเป็นเรื่องสำคัญต่อนักกราฟฟิกดีไซน์เนอร์โดยตรง เช่น สี ขนาด ลักษณะ Texture etc.

[Inspiration] รวมเว็บดีไซน์สวย ๆ ฉลอง FIFA World Cup 2010

[Photoshop Tutorials] 44 บทความสอนเว็บดีไซน์ใน Photoshop ที่ห้ามพลาด !!

หลายคนอาจสงสัยว่าดีไซน์ใน Photoshop ก่อนเอาไปเขียนโค้ดมันดีจริงมั้ย? ผมมองว่าถ้าเลย์เอาท์ไม่ยาก หรือไม่อยากใช้รูปเยอะ ก็สามารถเขียนโค้ดไปเลยได้ครับ