ออกแบบ Archives - Page 2 of 2

รวมผลงานออกแบบหน้าตา Facebook แบบใหม่

มีศิลปินหลายคนคงไม่ค่อยพอใจกับหน้าตาของ Facebook หรือ อาจจะแค่อยากลองออกแบบเว็บไซต์ Social network ที่มีคนใช้งานเยอะที่สุดในโลก อยากแสดงความสามารถว่าทำออกมาได้ดีกว่าปัจจุบัน มีหลายๆครั้งที่คนโชว์ความสามารถแนวนี้แล้วได้งานทำจริงๆ มีตัวอย่างให้เห็นเยอะแล้ว

การออกแบบหน้าตา Facebook ของแต่ละคนดูดีแตกต่างกันไป หลายอันทำออกมาได้น่าดู น่าใช้ขึ้นไม่น้อย เว็บไซต์ Hongkiat รวบรวมไว้ ผมเห็นว่าน่าสนใจเลยเอาแชร์ นอกจาก Facebook แล้วยังมีเว็บไซต์อื่นๆด้วยที่ศิลปินได้ออกแบบหน้าตาใหม่ให้ เช่น Google, Myspace, Youtube, IMDb เป็นต้น เข้าไปดูได้ที่ลิงค์ที่มาด้านล่างครับ

Facebook Concept Design

1. Barton Smith

ผลงานแรกเป็นของ Barton Smith ในชื่อ The Facebook Facelift ปรับแต่งใหม่ทั้งหมด ทั้ง Home, Feed, Event, Photo ทำออกมาดูดีมาก เน้นโทนขาว เทา ฟ้า ใช้พื้นที่ได้เต็มจอ มีวีดีโอสาธิตการใช้งานด้วย เข้าไปดูผลงานของเขาแบบเต็มๆได้ที่ Barton Smith

2. Information Architects

ผลงานโดยบริษัททำงานออกแบบโดยตรง Facebook ในแบบของพวกเขาถูกออกแบบมาให้เหมือนกับอีเมลแอพลิเคชั่น แบ่งออกเป็น 3 คอลัมน์ คือ ส่วนของ filter แยกกลุ่มของเนื้อหาที่จะแสดงใน information-stream ที่อยู่ตรงกลาง และ reaction ที่จะใช้โต้ตอบคอมเม้นต์ในหัวข้อนั้นๆ ดูรายละเอียดได้ที่ https://www.informationarchitects.jp

3. Justin Dauer

Facebook หาตาแบบใหม่ของ Justin Dauer ดูเรียบมีสไตล์คล้ายบล็อกเหมือนกันนะ ดึงเอารายละเอียดของผู้ใช้มาอยู่ด้านขวา เมนูสำคัญพร้อมกับ notification แสดงดูด้านบน ดูดีมาก รายละเอียดดูที่ pseudoroom design

4. Peter Knoll

ตัวนี้เมนูด้านบนยังคงคล้ายๆกับหน้าตาของ Facebook ในปัจจุบัน และเน้นส่วนของ post ให้ใหญ่และเด่นมากขึ้น แต่ส่วน New Feed จะเหมือนกับ Google+ เลย ดูรายละเอียดเพิ่มเติมที่ Peter Knoll

5. AndasoloARTS

การออกแบบ Facebook ตัวนี้มีโทนสีคล้ายกับของ Peter Knoll ส่วนที่แตกต่างออกไปคือส่วนของ New Feed ที่ใหญ่ขึ้นและดูดีขึ้น รายละเอียดดูที่ AndasoloARTS

6. Jonaska

อันนี้ได้แรงบันดาลใจมาจาก AndasoloARTS โดยปรับปรุงส่วนของช่องโพส ช่องค้นหา และส่วนอื่นๆให้ดูดีขึ้น รายละเอียดที่ Jonaska

7. Czarny-Design

หน้าตาใหม่ของ Facebook ที่ออกแบบโดย Czarny Design จะเน้นไปที่การใช้เส้นโค้งในการออกแบบมากขึ้น เน้นช่องคอมเม้นต์ให้เด่นมากขึ้น ดูรายละเอียดเพิ่มเติมที่ Czarny-Design

การออกแบบหน้าตาใหม่ให้ Facebook ของแต่ละคนก็มีรูปแบบที่แตกต่างกัน หลายๆอันอยากให้เอาไปใช้จริงๆเลยนะ อย่างเช่นของ Justin Dauer ผมว่าเข้าขั้นน่าใช้เลยล่ะ แต่ทุกครั้งที่ Facebook มีการอัพเดตหน้าตาใหม่ช่วงแรกๆจะมีคนบ่นอยู่ซักพักจากนั้นก็จะชินและเลิกบ่นไปเอง ประมาณว่าเขาให้ใช้อะไรก็ต้องใช้ไป แต่ผมว่าเว็บไซต์ที่มีคนใช้งานเยอะขนาดนั้นเข้าต้องวิจัยและทดลองใช้มาก่อนอยู่แล้วจึงจะปล่อยให้คนทั่วไปใช้ และมันต้องเป็นมิตรกับคนใช้งาน ไม่ยุ่งยากเกินไป ซึ่งผมว่าปัจจุบัน Facebook ก็ทำได้ดีมากอยู่แล้ว

เห็นคนอื่นออกแบบ Facebook ในฉบับของเขา คุณอยากลองทำเองบ้างไหมครับ ใครทำแล้วแชร์มาให้ดูด้วยนะครับ

ที่มา: https://www.hongkiat.com/blog/concept-design-facelift-notable-websites

รวมภาพการออกแบบหน้าตา Facebook ของแต่ละคนทั้งหมด

เริ่มต้นทำบล็อก และหารายได้จากบล็อก-The Smashing Cartoons

How To Start a Blog and Make Money by Fleaty

ภาพด้านบนเป็นผลงานของ Fleaty จาก The Smashing Cartoons อ่านแล้วมันทั้งโดน ทั้งฮา เรียกได้ว่า เสนอความจริงปนฮาได้น่ารักยิ่งนัก อันที่จริงดูที่การ์ตูนก็จะเข้าใจแล้ว แต่จะขออธิบายเสริมนิดหน่อย

ขั้นตอนการเริ่มต้นทำบล็อก และหารายได้จากบล็อก

Step 1: ออกแบบรูปร่างหน้าตาของบล็อกให้มันเจ๋งๆไปเลย

Step 2: อย่าลืมดึงมาตรฐานของเว็บอย่าง HTML5 และ CSS3 มาใช้

Step 3: เติมเอฟเฟ็ค วิ้งๆ ให้บล็อก ด้วย JQuery

Step 4: ชวนคนเจ๋งๆ มาช่วยเขียนเนื้อหาให้บล็อก

Step 5: ทำงานให้หนักเพื่อผลิตเนื้อหาที่ดี มีคุณภาพ

Step 6: (ขายโฆษณาบนบล็อก) ทำเงินไม่ได้ กลับไปหารายได้จากงานประจำอันเดิมของคุณซะ (ฮา)

ถ้าเราจะเอาฮาในการ์ตูนนี้มันก็ฮาดี แต่ขั้นตอนต่างๆที่เขาเขียนขึ้นนั้น คิดว่ามันใช้ได้จริง ขั้นตอนทำบล็อกมันก็มีเท่านี้เอง ขั้นตอนที่สำคัญที่สุด คือ 4, 5 นั้นคือ เนื้อหา เรื่องอื่นๆเป็นเรื่องรอง และตัวที่อยากเพิ่มเข้ามาคือ เวลา อาจจะต้องเริ่มจากทำงานประจำก่อน แล้วให้เวลากับการทำบล็อกบ้าง ผลิตเนื้อหาที่ดีมีคุณภาพ เมื่อถึงเวลามันจะตอบแทนกลับมาเอง ยิ่งถ้าคุณคิดจะทำให้เป็นรายได้หลัก อาจจะต้องลงแรงกาย แรงใจ แรงความคิด ให้มากยิ่งขึ้นอีก แม้บล็อกนี้เอง คนจะเข้าไม่ได้มากมายอะไร ส่วนตัวคิดว่ามัน ประสบความสำเร็จ ในตัวของมันแล้วล่ะ เพราะว่า มีคนอ่านสาส์นที่เราเขียน

The Smashing Cartoons เพิ่งจะเปิดตัวมาไม่นาน ประมาณปลายเดือนมกราคม ปีนี้เอง ล่าสุดก็ตอนที่ 42 ลองไปอ่านดู ถ้าคุณเป็นคนสนใจเทคโนโลยี อินเทอร์เน็ต งานออกแบบ จะฮาท้องแข็งกันเลยทีเดียว

CSS Trick ตัวอย่างเว็บไซต์ใช้ CSS สุดเจ๋ง

เมื่อวานเปิดดู WordCamp TV ของ Sara Cannon พูดเรื่อง CSS Trick ตอนแรกเห็นเธอน่ารักสดใสเลยขอดูนิดหนึ่ง แต่สุดท้ายดูจบก็ได้อะไรมาเหมือนกัน มีตัวอย่าง Showcase ของ CSS ที่เธอเอามาโชว์ประกอบการนำเสนอ พบว่ามันเจ๋งดี เลยคัดเอาส่วนที่น่าสนใจมาบันทึกเก็บไว้

อันแรกเป็นการออกแบบเกี่ยวกับ Scrolling ลิงค์เว็บไซต์ https://lostworldsfairs.com/atlantis ทดลองเลื่อนหน้าเว็บไซต์ลงไปข้างล่างเรื่อยๆ จะพบว่าคนในท่อจะวิ่งตามลงไปด้วย ระดับความลึกก็เปลี่ยนตาม

เว็บที่สองเป็นการโชว์ความสามารถการใส่พื้นหลังหลายภาพ (ซ้อนกัน) เว็บเหล่านี้จะพบว่าพื้นหลังของเว็บมันมีความน่าสนใจมากขึ้นเยอะเลย ตัวอย่าง https://silverbackapp.com มีพื้นหลังอยู่ถึง 4 ภาพ ย่อขยายหน้าเว็บจะเห็นว่ามีเลเยอร์ของ ด้านหลังซ้อนกันอยู่

และอีกตัวที่ผมเห็นแล้ว พบว่ามันเท่มากคือ เว็บ https://www.nikebetterworld.com ลอง Scrolling ลงไปข้างล่างจะเห็นการนำเสนอที่เจ๋งจริงๆ พื้นหลังจะเปลี่ยนไปเรื่อยๆ

และส่วนที่น่าสนใจที่สุดคือ เป็นความสามารถของการใช้ CSS Grids ควบคุมการแสดงผลแตกต่างกัน ตามขนาดของหน้าจอ เช่นหน้าจอของ PC, iPad, Mobile ขนาด ตำแหน่งของเมนู เปลี่ยนแปลงตามขนาดของหน้าจอที่เรียกใช้งาน ลองเปิดดูที่ https://hicksdesign.co.uk/ และ https://colly.com แล้วลองย่อขนาดของเว็บไซต์ดูครับ

ยังมี resource และเว็บไซต์ที่น่าสนใจอื่นๆอีก ตามดูการนำเสนอของ Sara Cannon ในหัวข้อ CSS Tricks ได้ที่ https://WordPress.tv ความยาวประมาณ 34 นาที ครับ

CG+ vs Computer Atrs Thailand นิตยสารกราฟิกพันธุ์ไทย

Computer Graphics Plus Versus Computer Arts Thailand

นิตยสารเกี่ยวกับคอมพิวเตอร์กราฟิกของไทยนับว่ามีน้อยมากในแผงหนังสือ ผมเป็นคนหนึ่งที่ชอบหนังสือประเภท ออกแบบ ศิลปะ คอมพิวเตอร์ หนังสือที่ต้องซื้อทุกเดือนคือ ต้นเดือนคือ Bioscope นิตยสารเกี่ยวกับหนัง และกลางเดือนจะมีอีกเล่มคือ CG+(Computer Graphic Plus) ซึ่งเป็นนิตยาสารที่ผมได้ติดตามอ่านมาได้กว่าสองปีแล้วครับ เริ่มอ่านครั้งแรกตอนตีพิมพ์เล่ม 3 และจนถึงปัจจุบันเล่ม ที่ 23 ครับ สองเล่มแรกซื้อทุกเดือนและ iDesign บางฉบับ แต่วันนี้แวะไปที่ร้านหนังสือประจำ ก็เดินไปที่วางหนังสือ CG+ ตามปกติ พบว่ามีนิตยสารใหม่ ออกเล่มแรก ฉบับที่ 01 ชื่อ Computer arts thailand ด้านบนเขียนว่า “การรวมตัวครั้งแรกของนิตยสาร Computer Arts และ 3D World” ผมเลยหยิบมาสองเล่มและทำการเปรียบเทียบกันดูเลยจะใครสนใจจะได้ตัดสินใจเลือกได้ถูก แต่สำหรับผมคงจะสนับสนุนทั้งสองเล่มครับ

หัวข้อ	CG+	Computer Arts Thailand
ราคา	100 บาท	150 บาท
จำนวนหน้า (ดูตามหมายเลขหน้าสุดท้าย)	114 หน้า	138 หน้า
เนื้อหา	1. News และแนะนำเว็บไซต์ 2. Hot Stuff การรีวิว Gedget ใหม่ๆ 3.Mactivity มุมสำหรับคนชอบ mac 4.เนื้อแล้วแต่ละเดือน เกี่ยวกับ cg 5.สัมภาษณ์คนในวงการ computer graphic ทั้งคนไทย คนต่างประเทศ 6. มีริวิวโปรแกรมเกี่ยวกับ computer graphic บ้าง เกี่ยวไอทีทั้วไปบ้าง 7. student portfolio ผลงานของน้องใหม่ 8.web ,book, hardware รีวิว 9.Tutorial – ขั้นตอนการทำปก จะเป็นคนที่ถูกสัมภาษณ์นั้นเองที่ต้องทำภาพขึ้นปก – 3Ds Max – Photoshop – Flash – Illustrator -Maya แล้วแต่ละเดือน เดือนละ 4 tutorial	เนื่องจากเป็นนิตยสาร import จากต่างประเทศมาเนื้อหาค่อนข้างที่จะเป็นสากล 1. ผลงานของนัก computer graphic พร้อมสัมภาษณ์ 2. Studio of the Month ทำความรู้จัก ดูผลงาน สัมภาษณ์ studio นั้นๆ 3.In depth เนื้อหาเกี่ยวกับ โปรแกรม การออกแบบ เทคนิคใหม่ ฯลฯ 4.Technique Tutorial โปรแกรม เช่น photoshop Flash , maya ,zbrush , blend มีทั้งหมด 8 Tutorial ในเล่ม 5.Pre-viz ข่าวงานศิลปะ แอนนิเมชั่น 6.special Feature งานแอนิเมชั่นของหนังเรื่อง Monsters vs Aliens 7.Need to Know มี plug in Photoshop ,คำถาม คำตอบ 8.โชว์ผลงาน ,ฉบับหน้ามีอะไร
ของแถม	มีบ้าง ,ไม่มีบ้าง	DVD Resources & Tutorial

ถ้าดูแล้วเนื้อหาภายในของ Computer Arts Thailand ค่อนข้างจะดีกว่าหน่อย แต่ CG+ ก็ดีไม่น้อย และก็ติดตามมานานเข้าปีที่ 3 แล้ว ยังไงก็คงติดตามผลงานของ CG+ ต่อไป แต่ในแต่ละเดือนคงต้องเสียตังค์เพิ่มอีก 150 บาท เพื่อติดตามผลงานของ Computer Arts Thailands

อ้างอิง : CG+ ฉบับที่ 23 ,Computer Arts Thailand ฉบับที่ 1

เว็บไซต์ช่วยชาติ พัฒนาจาก WordPress

ช่วยชาติ.com หรือ chuaichart.com

ได้ดูข่าวจาก blognone เรื่องเว็บไซต์การชี้แจ้งการทำงานของรัฐบาล และรับข้อคิดเห็นของประชาชน ใช้ WordPress ทำซะด้วยและอีกอย่าง คือใช้สัญญาอนุญาตแบบ Creative Commons แสดงที่มา 3.0 ใครจะนำข้อมูลไปใช้ได้โดยไม่ต้องขออนุญาติแค่แสดงที่มาของข้อมูล และไม่ใช้ในทางพาณิชย์ ดูเทคนิคการทำงานการพัฒนาเว็บไซต์ได้ที่ เว็บไซต์ของคุณ พัชร และ กลุ่มไทเกอร์ไอเดีย ตามลิงค์

เนื้อหาภายในลองคลิกๆดูแล้ว เนื้อหาค่อนข้างละเอียดครับว่ารัฐบาลมีโครงการอะไรบ้าง แม้กระทั้งเอกสาร โครงการต่างๆก็จะสามารถดูได้ตัวอย่างโครงการ ต้นกล้าอาชีพ เป็นต้นเรื่องการดีไซด์สวยงามมากครับได้เต็มสิบไปเลยครับ รายละเอียดของ proposal ของเว็บไซต์นี้ก็มีการเปิดเผยว่ามีขั้นตอนการทำยังไงบ้าง
งบประมาณเท่าไหร่

แต่ที่ติดใจนิดหนึ่งน่าจะเป็นเรื่องความปลอดภัยของเว็บไซต์ ที่ใช้ WordPress ที่เป็น open source ที่ใครๆก็รู้ code โอกาสที่จะถูกโจมตีอาจทำได้ง่าย แต่ถ้ามองอีกทางคือเว็บไซต์ไม่ได้เป็นเว็บไซต์ ที่มีเนื้อหาที่สำคัญถึงขั้นเป็นอันตรายต่อความมั่นคง หรือกระทบต่อความปลอดภัยมากหนัก หากถูกโจมตีก็คงแค่แบคอับกลับมาแต่แนวคิดการทำงานแบบโปร่งใสของรัฐบาลที่จะให้ประชาชนสามารถติดตามการทำงานของรัฐบาลได้อย่างต่อเนื่องและเขาถึงได้ง่าย ถือว่าแนวคิดนี้ ดีเยี่ยมเลยครับ ขอสนับสนุนโครงการนี้ครับ