SlideShare uma empresa Scribd logo
1 de 53
Baixar para ler offline
การออกแบบเว็บไซต์   อย่างมีประสิทธิภาพ Web Design
โดย   สาธิต  เอี่ยมจิตต์ Assistant Web Design Manager Email :   [email_address] Twitter :  @ monozone
ขอสาวสวย หุ่นเหมือนในภาพ   ช่วยออกมาเล่นเกมส์หน่อย
[object Object],[object Object],วัตถุประสงค์
ทำ  WEB  เขาต้องใช้ใครบ้าง WEB Designer Programmer Network Contents Mkt.  &  Promote WEB Master
มีหน้าที่ ,[object Object],[object Object],[object Object],[object Object]
สร้างความได้เปรียบ
เริ่ม ต้นยังไงดี
Research   •  User & Usability •  Similar Sites •  Guide Line, Case Study •  Technology  > html5 > Mobile •  Trendy Design •  Inspiration 1
Target Group กลุ่มเป้าหมาย เพศ อายุ การศึกษา รายได้ ที่อยู่ ความชอบ / ไม่ชอบ ประสบการณ์
Usability พฤติกรรมและสภาพแวดล้อมการใช้งาน
Usability พฤติกรรมการใช้งาน
CASE Study เรียนรู้คู่แข่ง SWOT Analysis
" You either make dust or eat dust ."   ( via :  H .  Jackson Brown Jr .)
สร้างแรงบันดาลใจ ,[object Object],[object Object],[object Object],[object Object],[object Object],สังเกต  >   สงสัย ตั้งคำถาม  >   ค้นหาคำตอบ   “ ความเป็นไปได้ กับความเป็นไปไม่ได้ ถูกแบ่งด้วยเส้นบางๆ เพียงเส้นหนึ่ง ”
Guide Line ตัวอย่างเว็บ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Design   Trend 2011   ,[object Object]
Web Design   Trend 2011   ,[object Object],CSS3 example
Web Design   Trend 2011   ,[object Object],http :// www . duirwaigh . com /
Web Design   Trend 2011   ,[object Object],Jay Jays Dance/Off
Web Design   Trend 2011   ,[object Object]
Web Design   Trend 2011   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WEB 3.0 Web 1.0  =  Read Only Web 2.0  = Read/Write Read / Write / Relate   ,  data with structured metadata  +  managed identity
2 Planning Design
Brainstorm   &   Mind Map
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Structure ขนาดใหญ่ ห้องนั่งเล่น ห้องนอน ห้องครัว ขนาดกลาง ตู้เสื้อผ้า ชั้นหนังสือ ตู้เย็น ขนาดเล็ก พจนานุกรม นมสด ถุงเท้า ห้องครัว ตู้เย็น นมสด ห้องนั่งเล่น ชั้นหนังสือ พจนานุกรม ห้องนอน ตู้เสื้อผ้า ถุงเท้า
Site Map บ้าน ห้องครัว ห้องนั่งเล่น ห้องนอน ตู้เย็น นมสด ชั้นวางหนังสือ พจนานุกรม ตู้เสื้อผ้า ถุงเท้า
[object Object],[object Object],[object Object],[object Object]
Lay Out ,[object Object],[object Object],[object Object],[object Object]
Lay Out ,[object Object],[object Object],[object Object],[object Object]
Sketch Design
Virtual  Design 3
 
Grid Lay Out
Navigation Primary Secondary
Horizontal  Navigation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vertical   Navigation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ออกแบบให้ ตรงกับเป้าหมาย   และ ลักษณะของเว็บไซท์
ออกแบบสะท้อน ความเป็นเอกลักษณ์
การใช้ TEXT  และ ข้อความ ,[object Object],[object Object],[object Object],ขนาดและสี  Font   ใช้ให้เหมาะ Hyperlink >>  สีแตกต่างจากตัวปกติ TEXT >>  สีไม่ควรตัดกับสีพื้นหลังเกินไป T E X T  >>  ไม่ควรใช้สีเยอะเกินจำเป็น H1 >>  หัวข้อหลัก H2 >>  หัวข้อรอง H3 >>  หัวข้อย่อย ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
การใช้ Color  สีและอารมณ์ http://colorschemedesigner.com
การใช้ Color  สีและอารมณ์
การใช้กราฟิก Image JPG Gif JPG Gif
การใช้กราฟิก Image  PNG PNG Gif ไม่รองรับ  IE6
การใช้  Icon ๐   ข่าว  ๐   บันเทิง ๐   ดูดวง  ๐   เรื่องเด่น ๐   กิน เที่ยว  ๐   เทคโน ๐   ผู้หญิง  ๐   ผู้ชาย
ออกแบบเพื่อ  SEO ,[object Object],[object Object],[object Object],OK>>  Picture  ใส่  Alt  OK>>   ใช้   Dynamic Text Hyperlink OK>>  div, css OK>>   ใช้  H1,H2,H3  อย่างถูกต้อง
Sending to  Programmer 4
QC  &  Testing 5 FiveSecondTest     1 .  ดูว่าตามองที่ไหนเป็นที่แรก ? 2 .  อ่านเว็บไซด์จาก   ซ้ายบน  - >  ขวาล่าง 3 .  ทริค  “ 5   อย่าง ”   ดู  5  วินาทีแล้วจำอะไรได้บ้าง
[object Object],[object Object],[object Object],[object Object]
 
[object Object],[object Object],[object Object],[object Object]
สรุป ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]

Mais conteúdo relacionado

Destaque

ฟีเจอร์ใหม่ในโปรแกรม Adobe Captivate 6
ฟีเจอร์ใหม่ในโปรแกรม  Adobe Captivate 6ฟีเจอร์ใหม่ในโปรแกรม  Adobe Captivate 6
ฟีเจอร์ใหม่ในโปรแกรม Adobe Captivate 6กิจ มาฟรี
 
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...Pitchayanida Khumwichai
 
Html5 overview
Html5 overviewHtml5 overview
Html5 overviewIrinApat
 
Yii framework 2 basic training
Yii framework 2 basic trainingYii framework 2 basic training
Yii framework 2 basic trainingManop Kongoon
 
Java script เบื้องต้น
Java script เบื้องต้นJava script เบื้องต้น
Java script เบื้องต้นSamart Phetdee
 
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่Manop Kongoon
 
Best practices in Moodle Course Design
Best practices in Moodle Course DesignBest practices in Moodle Course Design
Best practices in Moodle Course DesignMichelle Moore
 
การสร้าง Android Application จาก HTML5 ด้วย PhoneGap
การสร้าง Android Application จาก HTML5 ด้วย PhoneGapการสร้าง Android Application จาก HTML5 ด้วย PhoneGap
การสร้าง Android Application จาก HTML5 ด้วย PhoneGapDr.Kridsanapong Lertbumroongchai
 
สร้าง Style ด้วย css 3
สร้าง Style ด้วย css 3สร้าง Style ด้วย css 3
สร้าง Style ด้วย css 3Samart Phetdee
 
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.ioBootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.ioThapwaris Chinsirirathkul
 
เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5Samart Phetdee
 
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละWithoon Wangsa-Nguankit
 

Destaque (20)

HTML5_NAC
HTML5_NACHTML5_NAC
HTML5_NAC
 
Lab#2
Lab#2Lab#2
Lab#2
 
Ict promotes learning (1)
Ict promotes learning (1)Ict promotes learning (1)
Ict promotes learning (1)
 
ฟีเจอร์ใหม่ในโปรแกรม Adobe Captivate 6
ฟีเจอร์ใหม่ในโปรแกรม  Adobe Captivate 6ฟีเจอร์ใหม่ในโปรแกรม  Adobe Captivate 6
ฟีเจอร์ใหม่ในโปรแกรม Adobe Captivate 6
 
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...
คู่มือการติดตั้งโปรแกรมสำหรับสร้าง Mobile Application ด้วย HTML5 และ Ionic Fr...
 
Phonegap book
Phonegap bookPhonegap book
Phonegap book
 
Html5 overview
Html5 overviewHtml5 overview
Html5 overview
 
Yii framework 2 basic training
Yii framework 2 basic trainingYii framework 2 basic training
Yii framework 2 basic training
 
Java script เบื้องต้น
Java script เบื้องต้นJava script เบื้องต้น
Java script เบื้องต้น
 
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
HTML PHP MySQL สำหรับเว็บโปรแกรมเมอร์มือใหม่
 
Responsive Learning : Adobe Captivate 8
Responsive Learning : Adobe Captivate 8Responsive Learning : Adobe Captivate 8
Responsive Learning : Adobe Captivate 8
 
Php training
Php trainingPhp training
Php training
 
Best practices in Moodle Course Design
Best practices in Moodle Course DesignBest practices in Moodle Course Design
Best practices in Moodle Course Design
 
การสร้าง Android Application จาก HTML5 ด้วย PhoneGap
การสร้าง Android Application จาก HTML5 ด้วย PhoneGapการสร้าง Android Application จาก HTML5 ด้วย PhoneGap
การสร้าง Android Application จาก HTML5 ด้วย PhoneGap
 
สร้าง Style ด้วย css 3
สร้าง Style ด้วย css 3สร้าง Style ด้วย css 3
สร้าง Style ด้วย css 3
 
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.ioBootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
 
เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5
 
การสร้างเว็บด้วย Bootstrap framework
การสร้างเว็บด้วย Bootstrap frameworkการสร้างเว็บด้วย Bootstrap framework
การสร้างเว็บด้วย Bootstrap framework
 
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 

Semelhante a Web design talk 2011

Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointkeeree samerpark
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์sommat
 
lec03_webdesign.pdf
lec03_webdesign.pdflec03_webdesign.pdf
lec03_webdesign.pdfMAiMAi339516
 
Web Design, Running A Website And Hosting
Web Design, Running A Website And HostingWeb Design, Running A Website And Hosting
Web Design, Running A Website And HostingFord AntiTrust
 
Clear And Effective Communication In Web Design
Clear And Effective Communication In Web DesignClear And Effective Communication In Web Design
Clear And Effective Communication In Web Designmonozone
 
Gootum seo-start-edit-2010
Gootum seo-start-edit-2010Gootum seo-start-edit-2010
Gootum seo-start-edit-2010Gootum SEO
 
กลยุทธ์การนำ SEO ไปใช้งานจริง
กลยุทธ์การนำ SEO ไปใช้งานจริงกลยุทธ์การนำ SEO ไปใช้งานจริง
กลยุทธ์การนำ SEO ไปใช้งานจริงGootum SEO
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointNooCake Prommali
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dreamsommat
 
แนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learningแนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-LearningBoonlert Aroonpiboon
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Educationkhon Kaen University
 

Semelhante a Web design talk 2011 (20)

กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บกระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
 
คู่มือ Word
คู่มือ Wordคู่มือ Word
คู่มือ Word
 
lec03_webdesign.pdf
lec03_webdesign.pdflec03_webdesign.pdf
lec03_webdesign.pdf
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
Web Design, Running A Website And Hosting
Web Design, Running A Website And HostingWeb Design, Running A Website And Hosting
Web Design, Running A Website And Hosting
 
Clear And Effective Communication In Web Design
Clear And Effective Communication In Web DesignClear And Effective Communication In Web Design
Clear And Effective Communication In Web Design
 
Gootum seo-start-edit-2010
Gootum seo-start-edit-2010Gootum seo-start-edit-2010
Gootum seo-start-edit-2010
 
กลยุทธ์การนำ SEO ไปใช้งานจริง
กลยุทธ์การนำ SEO ไปใช้งานจริงกลยุทธ์การนำ SEO ไปใช้งานจริง
กลยุทธ์การนำ SEO ไปใช้งานจริง
 
Chapter4
Chapter4Chapter4
Chapter4
 
Unit2
Unit2Unit2
Unit2
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
E-Marketing by TARAD
E-Marketing by TARADE-Marketing by TARAD
E-Marketing by TARAD
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
 
แนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learningแนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learning
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
 
ICT with Web site
ICT with Web siteICT with Web site
ICT with Web site
 

Mais de monozone

เที่ยว Norway
เที่ยว Norway เที่ยว Norway
เที่ยว Norway monozone
 
Transform Media And Advertising Business In AEC
Transform Media And Advertising Business In AECTransform Media And Advertising Business In AEC
Transform Media And Advertising Business In AECmonozone
 
Social media trend 2012
Social media trend 2012Social media trend 2012
Social media trend 2012monozone
 
Web design Procress
Web design ProcressWeb design Procress
Web design Procressmonozone
 
Flash Animate
Flash AnimateFlash Animate
Flash Animatemonozone
 
Logo Trend 2007
Logo Trend 2007Logo Trend 2007
Logo Trend 2007monozone
 

Mais de monozone (7)

เที่ยว Norway
เที่ยว Norway เที่ยว Norway
เที่ยว Norway
 
Transform Media And Advertising Business In AEC
Transform Media And Advertising Business In AECTransform Media And Advertising Business In AEC
Transform Media And Advertising Business In AEC
 
Social media trend 2012
Social media trend 2012Social media trend 2012
Social media trend 2012
 
iCommerce
iCommerceiCommerce
iCommerce
 
Web design Procress
Web design ProcressWeb design Procress
Web design Procress
 
Flash Animate
Flash AnimateFlash Animate
Flash Animate
 
Logo Trend 2007
Logo Trend 2007Logo Trend 2007
Logo Trend 2007
 

Web design talk 2011