การออกแบบเว็บไซต์ อย่�างมี�ประสิ�ทธิ�ภาพ

Web Design

โดย่ สิาธิ�ต์ เอ��ย่มีจิ�ต์ต์ Assistant Web Design Manager

Email : demomaz@gmail.comTwitter : @monozone

ขอสิาว็สิว็ย่ หุ่"�นเหุ่มี$อนในภาพ ช่�ว็ย่ออกมีาเล่�นเกมีสิ หุ่น�อย่

1.เพื่��อให้�ผู้�เข้�ารั�บการัฝึ�กอบรัมม�ความเข้�าใจและสามารัถอธิ�บายถ งห้ล�กการัออกแบบเว"บไซต์&ได้�อย(างถกต์�อง

2.เพื่��อให้�ผู้�เข้�ารั�บการัฝึ�กอบรัมม�เทคนิ�คในิการัออกแบบเว"บไซต์&ให้�ก�าวท�นิโลกอ�นิเต์อรั&เนิ"ต์ในิปั-จจ.บ�นิ

ว�ต์ถ.ปัรัะสงค&

ท/า WEB เข้าต์�องใช้�ใครับ�าง

WEB Designer

Programmer

Network

ContentsMkt. & Promote

WEB Master

ม�ห้นิ�าท��

•สิร(างคว็ามีสิะดว็กในการใช่(งาน•สิร(างการสิ$�อสิารอย่�างมี�ประสิ�ทธิ�ภาพ

•สิร(างคว็ามีประท*บใจิ •สิร(างคว็ามีได(เปร�ย่บจิากค+�แข�ง

สรั�างความได้�เปัรั�ยบ

เรั��มต์�นิย�งไงด้�

Research

• User & Usability• Similar Sites• Guide Line, Case Study

• Technology > html5 > Mobile• Trendy Design• Inspiration

1

Target Groupกล่"�มีเป,าหุ่มีาย่

เพื่ศอาย.การศึ.กษา

ราย่ได(

ท��อย่+�

คว็ามีช่อบ/ไมี�ช่อบ ประสิบการณ์

Usabilityพฤต์�กรรมีแล่ะสิภาพแว็ดล่(อมีการใช่(งาน

Usabilityพฤต์�กรรมีการใช่(งาน

CASE Studyเร�ย่นร+ (ค+�แข�ง

SWOTAnalysis

"You either make dust or eat dust." (via: H. Jackson Brown Jr.)

สรั�างแรังบ�นิด้าลใจศ กษาต์�วอย(าง ค�ด้ต์รังข้�าม ค�ด้ต์(าง ลองท/าให้�ม�นิเก�นิจรั�ง เข้�ยนิ 101 ไอเด้�ย  เปัล��ยนิสถานิท�� มองห้าส��งรัอบต์�ว

ส�งเกต์ > สงส�ย ต์�4งค/าถาม > ค�นิห้าค/าต์อบ

“ความเปั5นิไปัได้� ก�บความเปั5นิไปัไม(ได้�

ถกแบ(งด้�วยเส�นิบางๆ เพื่�ยงเส�นิห้นิ �ง”

Guide Lineต์*ว็อย่�างเว็บ

• CSS Mania • SmashingMagazine • Pattern Tap  • deviantART• Dark-i.

• 100 Great Resources for Design Inspiration

Web Design Trend 2011

• Grid Intensive Layouts

Web Design Trend 2011

• HTML5, CSS3, jQuery Sliders

CSS3 example

Web Design Trend 2011

•Texture & Big Background

http://www.duirwaigh.com/

Web Design Trend 2011

• Video WEB

Jay Jays Dance/Off

Web Design Trend 2011 • MOBILE Site

Web Design Trend 2011

• A Typographic Explosion• Desktop Application UI Influence• Grid Intensive Layouts• Massive Images• Texture & Big Background• Infographic Driven Designs• Single Page Sites• Mobile Sites• HTML5, CSS3, jQuery Sliders

• 3D Environments• Video WEB• WEB 3.0

WEB 3.0

Web 1.0 = Read Only 2 .0 = Read/Write

Read/Write/Relate , data with structured metadata + managed identity

2Planning Design

Brainstorm & Mind Map

ต์�เย"นิถ.งเท�าต์�เส�4อผู้�าห้�องนิ��งเล(นิพื่จนิานิ.กรัมห้�องครั�วนิมสด้ช้�4นิห้นิ�งส�อห้�องนิอนิ

ข้นิาด้ให้ญ่(ห้�องนิ��งเล(นิห้�องนิอนิห้�องครั�วข้นิาด้กลางต์�เส�4อผู้�าช้�4นิห้นิ�งส�อต์�เย"นิข้นิาด้เล"กพื่จนิานิ.กรัมนิมสด้ถ.งเท�า

ห้�องครั�วต์�เย"นินิมสด้

ห้�องนิ��งเล(นิช้�4นิห้นิ�งส�อพื่จนิานิ.กรัม

ห้�องนิอนิต์�เส�4อผู้�าถ.งเท�า

Structure

Site Map

บ�านิ

หุ่(องคร*ว็ หุ่(องน*�งเล่�น หุ่(องนอน

ต์+(เย่น

นมีสิด

ช่*3นว็างหุ่น*งสิ$อ

พจินาน"กรมี

ต์+(เสิ$3อผ้(า

ถุ"งเท(า

เล(นิเกม มองต์/าแห้นิ(งไห้นิก(อนิ

จากไห้นิ ไปัไห้นิรั�บข้องรัางว�ลจาก MThai

Lay Out

ใช้�เม��อ• ต์(องการสิ$�อสิารข(อคว็ามีหุ่ล่*ก

• ใช่(ภาพก*บหุ่*ว็ข(อข�าว็เพ$�อด.งด+ดคว็ามีสินใจิ

• เพ$�อเน(น SEO

Lay Out

ช้(วยให้�• สิร(าง Branding

• แสิดงล่6าด*บข*3น

• สิ�งเสิร�มีการด6าเน�นการ

Sketch Design

Virtual Design

3

Grid Lay Out

NavigationPrimary

Secondary

Horizontal Navigation

ข้�อด้�• เด�น เหุ่นได(ช่*ดเจิน• ใช่(พ$3นท��น(อย่• ง�าย่ต์�อการใช่(งาน• สิ�ว็นใหุ่ญ่�น�ย่มีใช่(ก*น

ข้�อจ/าก�ด้• พ$3นท��จิ6าก*ด ถุ(ามี�หุ่ล่าย่หุ่น(าย่�อย่• จิ6านว็นเมีน+ได(ไมี�เย่อะ

Vertical Navigation

ข้�อด้�• ช่�ว็ย่ในการจิ*ดกล่"�มีเมีน+ได(ด�• ง�าย่ท��จิะล่ดหุ่ร$อเพ��มี จิ6านว็นเมีน+

ข้�อจ/าก�ด้• เสิ�ย่พ$3นท��ด(านซ(าย่• ช่$�อเมีน+ จิ6าก*ดด(ว็ย่คว็ามีกว็(าง• ต์(องเล่$�อนล่ง ถุ(าจิ6านว็นเมีน+มีาก• เด�8ย่ว็น�3 ไมี�ค�อย่น�ย่มีใช่(ก*น

ออกแบบให้�ต์รังก�บเปั8าห้มาย และล�กษณะข้องเว"บไซท&

ออกแบบสะท�อนิความเปั5นิเอกล�กษณ&

การัใช้�TEXT และข้�อความใช้�งานิ Font ท��ได้�มาต์รัฐานิ Dynamic>> Tahoma, MS-Sand serifGraphic >> อ�านง�าย่

ข้นิาด้และส� Font ใช้�ให้�เห้มาะHyperlink >> สิ�แต์กต์�างจิากต์*ว็ปกต์�TEXT >> สิ�ไมี�คว็รต์*ดก*บสิ�พ$3นหุ่ล่*งเก�นไปTEXT >> ไมี�คว็รใช่(สิ�เย่อะเก�นจิ6าเป9นH1 >> หุ่*ว็ข(อหุ่ล่*กH2 >> หุ่*ว็ข(อรองH3 >> หุ่*ว็ข(อย่�อย่

การัใช้�ข้�อความ เพื่��อส��อสารั•กระจิ�าง ช่*ดเจิน •สิ*3น กระช่*บ เข(าใจิง�าย่ •จิ*ดล่6าด*บคว็ามีสิ6าค*ญ่•เล่$อกใช่(ภาษาใหุ่(เหุ่มีาะก*บ User

•ใช่(คว็ามีเสิมี$อนมี�คนพ+ดอย่+�หุ่ล่*งเว็บ

การัใช้�Color ส�และอารัมณ&

http://colorschemedesigner.com

การัใช้�Color ส�และอารัมณ&

การัใช้�กรัาฟิ<กImage

JPG

Gif

JPG Gif

การัใช้�กรัาฟิ<กImage PNG

PNGGifไมี�รองร*บ IE6

การัใช้� Icon

๐ ข�าว็ ๐ บ*นเท�ง

๐ ด+ดว็ง ๐ เร$�องเด�น

๐ ก�น เท��ย่ว็ ๐ เทคโน

๐ ผ้+(หุ่ญ่�ง ๐ ผ้+(ช่าย่

ออกแบบเพื่��อ SEO

NOT>> Splash PageNOT>> Flash-Picture

menuNOT>> table style

OK>> Picture ใสิ� Alt OK>> ใช่( Dynamic Text HyperlinkOK>> div, cssOK>> ใช่( H1,H2,H3 อย่�างถุ+กต์(อง

Sending to Programmer

4

QC & Testing 5

FiveSecondTest 

1 . ด+ว็�าต์ามีองท��ไหุ่นเป9นท��แรก?

2 . อ�านเว็บไซด จิาก ซ(าย่บน -> ขว็าล่�าง

3 . ทร�ค “5 อย่�าง” ด+ 5 ว็�นาท�แล่(ว็จิ6าอะไรได(บ(าง

เล(นิเกม

จ/าส��งท��เห้"นิบนิห้นิ�าเว"บ ให้�เวลา 10 ว�นิาท�

จ/าให้�ได้� 5 อย(าง

เห้"นิและจ/าอะไรัได้�บ�าง

ใครัจ/าได้� 5 อย(างรั�บข้องรัางว�ลจาก MThai

สรั.ปั• ค�ดว็างแผ้นก�อนท6างาน• ศึ.กษาต์*ว็อย่�าง,ค+�แข�ง อย่+�เสิมีอ• สิร(างแรงบ*นดาล่ใจิ• การใช่(งานสิะดว็ก เข(าใจิง�าย่• เล่$อกใช่( Technology ใหุ่(เหุ่มีาะสิมี

ข้อบค.ณครั�บ