SWU Slide day 2

Transcript

1. Information & Communication Technology Education VAE222 B01/2012 Monday, February 4, 13
2. ทบทวนความจำ • ยุคที่ 1: Programmer • ยุคที่ 2: Designer > Programmer • ยุคที่ 3: Designer > Front-end Developer > Programmer หรือ Designer > Front-end Developer > Wordpress (org) DESIGNER Monday, February 4, 13
3. คนหาแรงบันดาลใจ • Awwwards.com [รวมสุดยอดไอเดียทุกวัน] • Dribbble.com [แหลงรวม Designer] • 365psd.com [แหลงรวมงานออกแบบใหหยิบนำไปใชฟรี] • Themeforest.net [คนหายาก ราคาถูก] • Templatemonster.com [คนหางาย ราคาแพง] Monday, February 4, 13
4. เครื่องมือที่ใชออกแบบเว็บไซต Adobe Photoshop (PC & Mac) Adobe illustrator (PC & Mac) GIMP [Free] (PC & Mac) Pixelmator (Mac) Monday, February 4, 13
5. ตั้งคามาตราฐานกอนเริ่มออกแบบ • Performance : Scratch Disks • Units & Ruler : Pixels • Color Settings: RGB = sRGB Monday, February 4, 13
6. เริ่มตนออกแบบ • Screen Resolution / Web Safe Area [ กวาง x สูง ] (Ref. Jan 2012) ★ หนาจอกวาง 1280 pixels (29.2%) / 1105 x 699 ★ หนาจอกวาง 1024 pixels (14%) / 849 x 507 ★ หนาจอกวาง Tablet แนวตั้ง 768 pixels / 768x850 (@2x) ★ หนาจอกวาง Smartphone 320 pixels/ 320x480 (@2x) Monday, February 4, 13
7. คาสีที่ใชในการออกแบบเว็บ • RGB = Red Green Blue • HEX Color ตัวอยางเชน #000000 = สีดำ • RGB(a) เชน rgb(0,0,0) หรือ rgba(0,0,0,0.5) Monday, February 4, 13
8. สิ่งที่ตองระวังในการออกแบบเว็บไซต • สีตัวหนังสือไมควรใชสีดำ 100% (#000000) • สีพื้นหลังไมควรสีขาว 100% (#ffffff) • การเลือก Theme โทนสีมืดเหมาะกับเว็บที่เนนรูปภาพมากกวาตัวหนังสือ • เนื้อหาที่เนนขอความควรอยูบนพื้นหลังโทนสีสวาง Monday, February 4, 13