อับเดจ 22/11/55 [แชร์แบบบ้านๆ] Season 2 Reality Show Making MetroEdge

[arusgroup]

วันที่ 3 วิธี Layout และ Planning ลงกระดาษ @ 17/11/2555

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


อุปกรณ์
1 กระดาษ
2 ดินสอ
3 max หรือ กระดาษกาวนิโต้เทป
4 ความคิดแหล่มๆ

ขั้นตอน
1 นำกระดาษมาต่อกัน เพื่อ เพิ่มความยายครับ
2 เขียน layout header ลงไปก่อนครับ
3 นำกระดาษอีกแผ่นมาวางทับในแนวนอน
4 layout footer ด้านล่างกระดาษที่ทับครับ
5 แล้วจะได้ออกมาเป็นแบบนี้ครับ

หลังจากนั้นเรา lay ส่วนในเนื้อหาลงไป หน้าละแผ่น เรื่อยๆๆ จนครบทุกหน้า ที่เราต้องการครับ


ใครวาดเขียนสวยก็แรเงา เอาตามใจชอบเลยครับแต่ผมยอมแพ้ เขียได้ดีสุดๆ แค่นี้และ

เทคนิกนี้ผมคิดได้จากการเขียนแบบครับ
จริงๆอยากได้ lay กระดาษสวยๆ ก็ใช้กระดาษไข ก็ได้แต่ผมว่ามันแพงไปเลยแบบบ้านๆนี้และดีงายและประหยัด
เมื่อเราได้แบบนี้แล้วจะทำให้เรารู้เกี่ยวกับการ ทำ DIV ตอนตัด Css อีกด้วย เป็นการวางแผนแบบระยะยาวครับ

วันนี้ผมจะลุย Layout บนกระดาษให้จบ และไว้พรุ่งนี้เราจะมาลุยบน Photoshop กันจริงๆ ครับ

TIP:

เราควรลงรายระเอียดทั้งการใช้งานหน้าบ้านและหลังบ้านให้ครบในการเขียน layout นะครับ เพราะจะทำให้คุณไม่หลงทางเวลาเขียนจริงและ ไม่เพิ่มมั่วซั่ว เมื่อเราคิดแผนให้ทำตามแผนพอที่เหลือไว้เติมตอนเราทำตอนจะออก Version ต่อไปครับ

[ba5nanas]

ผม layout ใน photoshop ครับตอนนี้ เหลือขั้นตอน ประสาน options กับ template อยู่ครับ
ซึ่ง template ผมจะเน้นให้ใช้ง่ายที่สุดครับ เลือก slide ได้ตามใจชอบ สามารถ ดึงชุด layout แบบ sortable ได้เต็มที่

และที่สำคัญ unlimit font , color , แถม icon ให้ฟรี สองชุด สามารถ custom icon ได้โดยการ upload 

ถ้าผมขายได้ผมจะไปเขียน หนังสือขายจริงๆละ ผมรู้โครงสร้างทั้งหมด ของ word press โดยใช้เวลา อยู่ ครึ่งเดือน



นี่ตัวอย่างเว็บผม ทั้งหมดสามารถ ปรับแต่งได้ทั้งหมด แต่ layout จะทรงแนวตั้งทั้งหมด

แต่เรื่องการตลาดนี้ ของใครของมันครับ ผมรู้ว่า อะไรจะขายดี แต่ผมไม่บอกหรอก อิอิ




เทคนิคจริงๆ ของผมคือ ศึกษา LC หา Tool มาใช้ ทำตามหลักการ บางประการ แล้วใส่หัวคิดให้กระจุย
ปล ผมพึ่งมาขยับตัวที่บ้านกำลัง มีปัญหาด้านการเงิน ซึ่งติดหนี้สิน เยอะพอสมควร หลัก ล้าน + เลยจำเป็นต้องลดเวลาเล่นสนุกทุกอย่างไปวันๆ หันมาทำธุรกิจ ซึ่งผมเจอเมื่อ ต้นเดือนนี่เองและศึกษา ข้อมูล ประมาณ 1 เดือน ทั้ง การตลาดและ wordpress

ปล2 ยังไงเจ้าของกระทู้ก็สู้ๆ นะครับ สักวันเราอาจจะได้ร่วมงานกัน

[arusgroup]

ผม layout ใน photoshop ครับตอนนี้ เหลือขั้นตอน ประสาน options กับ template อยู่ครับ
ซึ่ง template ผมจะเน้นให้ใช้ง่ายที่สุดครับ เลือก slide ได้ตามใจชอบ สามารถ ดึงชุด layout แบบ sortable ได้เต็มที่

และที่สำคัญ unlimit font , color , แถม icon ให้ฟรี สองชุด สามารถ custom icon ได้โดยการ upload 

ถ้าผมขายได้ผมจะไปเขียน หนังสือขายจริงๆละ ผมรู้โครงสร้างทั้งหมด ของ word press โดยใช้เวลา อยู่ ครึ่งเดือน



นี่ตัวอย่างเว็บผม ทั้งหมดสามารถ ปรับแต่งได้ทั้งหมด แต่ layout จะทรงแนวตั้งทั้งหมด

แต่เรื่องการตลาดนี้ ของใครของมันครับ ผมรู้ว่า อะไรจะขายดี แต่ผมไม่บอกหรอก อิอิ




เทคนิคจริงๆ ของผมคือ ศึกษา LC หา Tool มาใช้ ทำตามหลักการ บางประการ แล้วใส่หัวคิดให้กระจุย
ปล ผมพึ่งมาขยับตัวที่บ้านกำลัง มีปัญหาด้านการเงิน ซึ่งติดหนี้สิน เยอะพอสมควร หลัก ล้าน + เลยจำเป็นต้องลดเวลาเล่นสนุกทุกอย่างไปวันๆ หันมาทำธุรกิจ ซึ่งผมเจอเมื่อ ต้นเดือนนี่เองและศึกษา ข้อมูล ประมาณ 1 เดือน ทั้ง การตลาดและ wordpress

ปล2 ยังไงเจ้าของกระทู้ก็สู้ๆ นะครับ สักวันเราอาจจะได้ร่วมงานกัน

สวยเลยครับ ส่วนเรื่องร่วมงานว่างๆก็ลองคุยกันไดครับ

[arusgroup]

วันที่ 4-5 วิธี color , font , grid & baseline  @ 18-20/11/2555

หลังจากหายไป 4 วันเนื่องจากผมติดงานด่วนและต้องไปเครียงานจึงไม่มีเวลาว่างมาเขียนบทความ ตอนนี้ผม ว่างและ
หลังจากหายไป ผมใช้เวลานำสิ่งที่เขียนมาลงเป็น Photoshop ครับเรามาดูวิธีกันเลยดีกว่าว่าผมเริ่มเขียน อย่างไร ครับ


1 Color ชุดสีที่สวยที่สุดคือสีที่เหมาะกับงานนั้นๆ

สิ่งหนึ่งที่ web Designer หลายคนส่วนใหญ่ไม่มีในการทำงานคือ ชุดสีครับ
ถามว่า แล้วจะมีทำไม ไม่มีก็ทำได้นิ เว็บก็ออกมาสวยนะ
ใช่ครับ ไม่มีชุดสีก็สร้างเว็บได้ ครับแต่มันจะขาดความลงตัวครับ

ชุดสีมีประโยชน์อย่างไร

ชุดสีจะเป็นตัวกำหนดรูปแบบของงาน ทิศทางของงานและทำไห้งานมีอารมไปในทิศทางเดี่ยวกันครับ

แล้วการเลือกสีละทำอย่างไร

การเลือชุดสีมาใช้งานเราควรเลือชุดสีให้เหมาะสมกับงานครับมี หลายที่ที่มีชุดสีแจก และเว็บหลายแห่งให้ใช้ฟรีครับส่วนตัวผมชอบ
https://kuler.adobe.com/#create/fromacolor
เป็นเว็บแจกชุดสีของ ADOBE ครับ

อ้ออย่าลืมครับ ชุดสีที่สวยมักมีน้ำหนักครบทั้ง เข้ม กลาง อ่อน



ที่มาครับ

2 font ไม่ว่าจะสวยขนาดไหนแต่มันอยู่ที่ไม่ควรอยู่มันก็ไม่สวย!!!

เมื่อได้ชุดสีที่ลงตัวเล้วเราก็มาเลือ Font ครับ
ทำไมต้องเลือก Font เป็นสิ่งแรกๆเลยละ หลายคนคงมีคำถามนี้อยู่ในใจใช่ไหมครับ ผมสามารถตอบได้ในทันที่ครับว่า website ที่สวยนอกจาก Layout ที่ดี รูปที่สวยแล้วนั้น Font เป็นอีกหนึ่งหัวใจหลักของ web เลยก็ว่าได้
เพราะ Content Is King ครับ เว็บจะเป็นเว็บไม่ได้ถ้าไม่มีเนื้อหา และ ส่วนประกอบหลักของเว็บก็คือเนื้อหาด้วย
ดังนั้น Font ที่ดีก็จะทำให้ได้งานที่ดีด้วย

การเลือ font ก็ควรเลือ ตามงานที่เรา design ครับ เช่น งานคุณเป็น Modern Font ของคุณก็ควร เป็นฟอนต์สไตล์ Sans-Serif คือฟอนต์ที่ไม่มีเส้นปิดหัวปิดท้าย เป็นต้น



3 grid & baseline จากA4ขาวๆกลับสู่สมุดเรียนประถม

หลายคนไม่รู้จักเลยก็ว่าได้ว่า grid & baseline มันคืออะไรแล้วทำไมต้องทำ
คุณลองนึกถึงตอนเรียนประถม สมุดเรียนของคุณจะมีเส้นแบ่งบรรทัดและมีเส้นแดงๆแบ่งด้านซ้ายมือไว้ไห้เขียนวันที่ใช่ไหมครับ นั้นและครับมันคือ grid & baseline มันจะทำไห้คุณเขียนตรงและเป็นระเบียบครับ
เช่นกันบนงาน web มันก็จะทำให้คุณออกแบบได้เป็นระเบียบและเป็นมืออาชีพครับ



grid ตารางสมมติที่ใช้ช่วยกะระยะ และตำแหน่งในการทำงานกับรูปภาพ โดยมีลักษณะเป็นตารางสีเทาที่มีระยะห่างของแต่ละช่องเท่า ๆ กัน

grid ของเว็บนั้นมีหลากหลาย ซึ่งแล้วแต่เราจะออกแบบครับโดยส่วนใหญ่แล้ว grid บนงาน webdesign ของเมืองนอกจะ นิยม grid 960 เป็นหลักครับเพราะมีการวิจัยออกมาว่าความกว่างขนาด 960 จะแสดงผลออกมาได้ดีที่สุด
ผมไม่รู้ว่าจริงไม่จริงอย่างไร เพราะผมก็ใช้บ้างไม่ใช้บ้างเหมือนกันครับ


grid 960

baseline คือเส้นบันทัดครับ จะทำให้webของเรา มีระเบียบและสวยขึ้นครับเราควรกำหนด baseline ให้พอดีกับขนาด Font ครับเช่น เราใช้ font 14 baselineเราควรจะ อยู่ที่ 150% หรือ 21 ครับการใช้ baseline ไม่ค่อยตายตัวครับแต่ควรจะอยู่ระหว่า 130-160% เพื่อให้อ่านง่าย ครับ

จากภาพ ทางซ้าย ไม่ได้ตั่งค่า baseline  แต่ทางขวาจะใช่ครับ สังเกตุว่าทางซ้ายจะอ่านยากกว่าทางขวาครับ


คร่าวหน้าเราจะมาดูเรืองการสร้าง theme PSD กันครับ

[aeggarut]

ได้ความรู้ดีครับ

[asiasecondhand]

แหล่มเลย

[flash]

ขอบคุณครับ

[ba5nanas]

960 ผมไม่ใช้ grid ผมใช้ค่า reset เป็นพอ    

ส่วนจะให้ผ่านดีจริงๆ นั้นจะต้องทำ settings ให้ชาวบ้านใช้ง่ายๆครับ ถ้า fix เลยนี่ต้องสวยมากๆ ครับถึงจะขายได้

ส่วนเรื่อง สีนี่ ถ้าไม่ใช่ หน้าจอ IPS แนะนำใช้ jquery color picker ให้เลือกเองดีกว่าครับเพราะหน้าจอ LCD , LED บ้านๆ เราเนีย

เทียบ กับ apple สีเราเพี้ยนไป 20 - 30% เลยทีเดียว

ตัวที่นิยมจะเป็นตัวล่างสุด

http://www.eyecon.ro/colorpicker/

[tanin]

คุณ arusgroup ทำงานอะไรครับ เกี่ยวกับ ออกแบบ website หรือเปล่าครับ รู้สึกว่า คุณ ทำงานเป็นขั้นเป็นตอน เหมือนมี มีความเชี่ยวชาญ

[arusgroup]

960 ผมไม่ใช้ grid ผมใช้ค่า reset เป็นพอ    

ส่วนจะให้ผ่านดีจริงๆ นั้นจะต้องทำ settings ให้ชาวบ้านใช้ง่ายๆครับ ถ้า fix เลยนี่ต้องสวยมากๆ ครับถึงจะขายได้

ส่วนเรื่อง สีนี่ ถ้าไม่ใช่ หน้าจอ IPS แนะนำใช้ jquery color picker ให้เลือกเองดีกว่าครับเพราะหน้าจอ LCD , LED บ้านๆ เราเนีย

เทียบ กับ apple สีเราเพี้ยนไป 20 - 30% เลยทีเดียว

ตัวที่นิยมจะเป็นตัวล่างสุด

http://www.eyecon.ro/colorpicker/

ใชครับ สีจอเราจะเพี้ยนมากๆครับผนะนำให้ใช้ mac จะดีมาก ครับ

แต่ถ้าไม่มี ผมแนะนำ จอของ LG ตัวกลางๆ ขึ้นไป ครับ เพราะ  LG ผลิตจอให้ mac อยู่ตอนนี้คุณภาพ สี ไม่ต่างกันมากครับ

คุณ arusgroup ทำงานอะไรครับ เกี่ยวกับ ออกแบบ website หรือเปล่าครับ รู้สึกว่า คุณ ทำงานเป็นขั้นเป็นตอน เหมือนมี มีความเชี่ยวชาญ

ตอนนี้ เป็น web designer ครับ ส่วนใหญ่ก็มั่วๆๆเอากับอ่าน text นอกแล้วมาทำตามทั้งนั้นและครับ
ไม่เชี่ยวชาญมากหรอกครับ

[ba5nanas]

960 ผมไม่ใช้ grid ผมใช้ค่า reset เป็นพอ   

ส่วนจะให้ผ่านดีจริงๆ นั้นจะต้องทำ settings ให้ชาวบ้านใช้ง่ายๆครับ ถ้า fix เลยนี่ต้องสวยมากๆ ครับถึงจะขายได้

ส่วนเรื่อง สีนี่ ถ้าไม่ใช่ หน้าจอ IPS แนะนำใช้ jquery color picker ให้เลือกเองดีกว่าครับเพราะหน้าจอ LCD , LED บ้านๆ เราเนีย

เทียบ กับ apple สีเราเพี้ยนไป 20 - 30% เลยทีเดียว

ตัวที่นิยมจะเป็นตัวล่างสุด

http://www.eyecon.ro/colorpicker/

ใชครับ สีจอเราจะเพี้ยนมากๆครับผนะนำให้ใช้ mac จะดีมาก ครับ

แต่ถ้าไม่มี ผมแนะนำ จอของ LG ตัวกลางๆ ขึ้นไป ครับ เพราะ  LG ผลิตจอให้ mac อยู่ตอนนี้คุณภาพ สี ไม่ต่างกันมากครับ

คุณ arusgroup ทำงานอะไรครับ เกี่ยวกับ ออกแบบ website หรือเปล่าครับ รู้สึกว่า คุณ ทำงานเป็นขั้นเป็นตอน เหมือนมี มีความเชี่ยวชาญ

ตอนนี้ เป็น web designer ครับ ส่วนใหญ่ก็มั่วๆๆเอากับอ่าน text นอกแล้วมาทำตามทั้งนั้นและครับ
ไม่เชี่ยวชาญมากหรอกครับ

เดี๋ยวถ้า ทำแล้วเอาไปขายได้ก่อน แล้วเดี๋ยว เรามาแบ่งงานทำกันดีกว่า อาจจะได้เบาแรงไปบ้าง ช่วยกัน Design กับ coding ไปส่วนตัวผมเก่ง coding มากกว่า

ตอนนี้ หลัง website ผมใกล้จะเสร็จละครับ เหลือ Gallery ผมดึงตัว Aqua builder มาใช้งานร่วมกับ jquery ตัวอื่นๆ ตอนนี้ 80% แล้วครับ ฮ่าๆๆ พูดง่ายๆ สามารถ เปลี่ยน

โครงสร้างเว็บได้ตามใจชอบ เน้นง่าย เดี๋ยวทำอีกนิดถ้าเวลาเหลือ จะลอง เล่น patter ใส่เข้าไปให้เลือกด้วย 

หน้าตา หลังบ้าน wordpress ที่ผมเขียนอยู่ก็จะออกมาแนวๆ นี้ หน้าตา classic จาก Aqua builder



แต่ผมเพิ่ม ปุ่ม ไปประมาณ 5 ปุ่ม ครับ

ไม่ผิดหวังเลยที่ผมไปเขียน Unrealscript Javascript Java C++ C อะไรพวกนี้มากก่อน มาถึงใช้งานพวกนี้ ง่ายอยู่พอสมควร

ถ้าก่อนหน้านี้ ไม่ได้มีความรู้พื้นฐานพวกนี้ จ่องหน้าจอ อยู่เป็นเดือน แน่นอน

เท่าที่ผมคิด นะ ฝรั่งไม่ชอบเรื่องเยอะ แบบ ปรับโน้น 4 ขั้นตอน คนละหน้าแถมพิมพ์ code ยาวๆที่ไม่ใช่ shortcode อีก แถมแสดงออกมา 1 อย่างแบบนี้ มัน งง

ของผมเน้นแยกไปเลย style คือ style และ layout คือ layout , post คือ post แต่ลูกเล่น ผมเล่น layout ผสม post ไปในตัว สามารถดึง โพส แบบ fix ได้ last post ได้ random ได้

แต่ถ้าใครกลัวได้เล่น GUI โครงสร้างที่ยุ่งยากวุ่นวายไม่รู้จัก ดูไม่เป็น มันคืออะไรว้า

ให้ไปเล่น

http://codex.wordpress.org/Shortcode_API

Sortcode แทนเล่นง่าย ฝลั่งก็ยอมรับกันอยู่นะ

[tanin]

ขอฟากเนื้อฟากตัว กับคุณ arusgroup และคุณ ba5nanas ด้วยครับ ผมเพิ่งเริ่มต้น เหมือนเด็กหัดคลาน ครับ สักวันคงทำได้   แต่ตอนนี้ยังงง อยู่เลย 

[PGP]

เข้ามาเก็บความรู้บ้างครับ อยากทำแบบนี้ได้บ้างจริงๆ ทุกวันนี้เจอ template บางตัวก็งงๆแก้ไขไม่เป็น

[ba5nanas]

ฮ่าๆๆ สู้ๆ ครับ  ผมกำลังไล่หา widget มาลงเสริม อิอิ 

[jakkrit13]

ผ่านมาเจอพอดีครับ อ่านแล้วงง ไม่เคยทำ

[ANALOGY]

แวะเข้ามาเก็บความรู้ครับ

[ba5nanas]

ส่งไปละ ฮืออออ ไม่รู้จะผ่านรึเปล่า ใจเต้นตึกตักๆ  ใกล้จะคิวผมละ 70% ละ 

[วัยรุ่นเมกา]

น่ารู้จริงๆ

[ba5nanas]

ฮ่าๆๆ ไม่ผ่านครับ แต่เดี๋ยวจะลงไปอีกรอบครับ  เอามาแก้ หลายจุดครับ ที่สำคัญ short code นั่นแหล่ะตัวเด่นและลูกเล่น jquery 

อย่าลืม โหลดอะไรมาพ่วงหรือมาใช้ดู License ก่อนทุกครั้งก่อนนำมาใช้งาน บางที เขาไม่แจกเราไป Decode จาก website มา Themeforest ก็ไม่ให้ผ่านนะจ๊ะ

[munich]

น่าสนใจ แต่ขอไปไล่อ่านกระทู้เก่าๆก่อนนะครับ