8 เว็บไซต์ และ เครื่องมือออกแบบแนะนำ ตัวช่วยสำหรับ non-designer!
เครื่องมือที่ดีเป็นเหมือนตัวช่วยทุ่นแรงในการทำงานของเรา โปรแกรมอย่าง Illustrator, Photoshop คือเครื่องมือประจำกายของดีไซน์เนอร์แทบจะทุกคน แต่ถ้าคุณไม่ใช่ดีไซน์เนอร์ละ การวางอาจไม่ใช้เรื่องง่ายๆ เลยก็เป็นได้
ก่อนอื่นมารู้จัก กฎของการออกแบบให้สวยงาม กันก่อนค่ะ
- แสงต้องมาจากบนฟ้า เมื่อไหร่ที่มีแสงสาดลงมา ก็ต้องเกิด “เงา” อยู่ด้านล่าง เพราะฉะนั้นด้านบนของสิ่งที่โดนแสงจะสว่าง และด้านล่างจะมืดกว่าเสมอ
- เริ่มด้วย ขาว-ดำ เสมอ ควรออกแบบเป็นสี ขาว-ดำ ก่อน แล้วค่อยใส่สีเข้าไปทีละนิด จะช่วยให้การจัดช่องวาง และวาง Layout สิ่งต่าง ๆ ที่อาจซับซ้อนออกมาได้ง่ายยิ่งขึ้น
- เพิ่ม Whitespace (ช่องว่าง) เป็นสองเท่า เทรนด์ดีไซน์เว็บสมัยใหม่ เน้นความง่าย สบายตามากกว่า เว็บในสมัยแรกๆ จึงเน้นเรื่อง Whitespace ที่เพิ่มมากขึ้นกว่าแต่ก่อน
- เทคนิคการวางตัวหนังสือบนรูป ไม่ให้จม ไม่ว่ารูปจะสว่างเกินไป หรือมีจุดที่สีตัดกันเยอะมากจนวาง Text ขาวแล้วมันจม เราก็เอาสีกึ่งโปร่งใสมาทับรูปซะ ควรเป็นสีเข้มเท่านั้นเพราะจะทำให้ Text ขาวดูชัดขึ้น ซึ่งสีที่ฮิตๆ กันก็คือ สีดำกึ่งโปร่งใส
- เพิ่ม — ลด ความเด่นของตัวหนังสือ หน้าเว็บไซต์ที่ดีต้องมีการบาลานซ์ทั้งส่วนที่เราต้องการให้ “เด่นขึ้น” และ “เด่นน้อยลง” อย่างพอเหมาะ
- เลือกใช้ฟ้อนต์ให้เหมาะสม ฟ้อนต์เป็นตัวกำหนด Mood & Tone ของงานดีไซน์ที่สำคัญมาก แต่ละแบบให้ความรู้สึกแตกต่างกันไป
- ขโมยอย่างศิลปิน การลองทำดีไซน์ตามคนอื่นเพื่อศึกษาก็เป็นวิธีที่ดีที่สุดวิธีหนึ่ง
Group 1 : เครื่องมือการออกแบบ
1. Pixlr
Pixlr เป็นเว็บแต่งรูปภาพออนไลน์ ใช้งานง่าย ไม่จำเป็นต้องลงโปรแกรมลงในเครื่อง แต่สามารถแต่งภาพในแบบที่ใกล้เคียงกับการใช้ Photoshop โดยที่หน้าตาการใช้งาน เครื่องมือก็จะคล้ายคลึงกับเครื่องมือของ Photoshop แทบจะเอามาใช้ทดแทนกันในยามจำเป็นได้เลย ซึ่งจะช่วยเพิ่มความสะดวกเป็นอย่างมากกับผู้ที่จำเป็นต้องใช้โปรแกรมแต่งรูปภาพต่างๆ สามารถที่จะเลือกใช้เมนูภาษาไทยได้และ พิมพ์ไทยได้ ที่สำคัญสามารถใช้งานกันอย่างฟรีๆ ได้อีกด้วย
คู่มือการใช้งาน
http:// watchbatteryandtools.com/วิธีใช้งาน-pixlr-editor-ปรับแต่ง/
2. Canva
Canva เป็นแอปพลิเคชันสำหรับสร้างสื่อการนำเสนอหลากหลายรูปแบบ เช่น Presentation, Poster, Card, Resume, Certificate, Infographic เป็นต้น ซึ่ง Canva นั้นจะมีขนาดมาตรฐานให้เลือกหรือผู้ใช้สามารถกำหนดขนาดเองได้ Canva ใช้งาน ง่าย สวยงาม
คู่มือการใช้งาน
http://modps62.lib.kmutt.ac.th/files/Manual_canva.pdf
Group 2 : เครื่องมือเกี่ยวกับ สี, ไอคอน, ฟ้อนท์, รูป
3. Coolors
เว็บนี้มีโทนสี ให้เลือกใช้กันอย่างเยอะแยะมากมายและ ยังสามารถปรับแต่งจากชุดสีที่มีอยู่แล้วก็ได้ เพราะ การเลือกสีให้สวยและ ตอบโจทย์สื่อสารนั้นไม่ใช่เรื่องง่าย มือใหม่ก็มักจะตกม้าตายกันเป็นแถว แต่ไม่ต้องกลัว เพราะ Coolors เว็บไซต์ที่รวมเซ็ทสีสวยๆ มาให้เราได้เลือกใช้กันได้ง่ายๆ โดยไม่ต้องมีความรู้พื้นฐานมากนัก
ทำความเข้าใจ COLOUR SCHEMES ตัวช่วยให้เรื่องสีเป็นเรื่องง่าย
https://www.grappik.com/colour-schemes/
4. Flaticon
icon คือกราฟิกชนิดหนึ่งที่สามารถใช้เพื่อแทนคำพูดหรือประโยค ช่วยสื่อสารข้อความที่คุณต้องการไปยังผู้ใช้งานได้ดีมากกว่าข้อความปกติด้วยซ้ำ เพราะสามารถเข้าใจได้กับทุกชาติทุกภาษา นอกจากประโยชน์ทางด้านการสื่อสารแล้วยังเพิ่มความสวยงามให้กับงานออกแบบของเราได้ด้วย
จุดเด่นของ Flaticon ก็คือ คุณสามารถค้นหาไอคอนที่ต้องการได้จาก keyword เช่น คุณต้องการจะหาไอคอนเอาไปแทนการ shopping คุณก็แค่ search คำว่า shopping หรือ shopping cart เว็บไซต์ก็จะแสดงไอคอนที่เกี่ยวข้องออกมาให้คุณเลือกใช้ แถมยังสามารถเลือกขนาด, สี และ format ของไอคอนได้อีก เรียนกว่าตอบโจทย์มากๆ
โดยคุณสามารถเลือกดาวน์โหลดได้ทั้งแบบ
PNG, SVG, ESP, PSD
มีทั้งแบบฟรี และ เสียเงิน โดยมีวิธีสังเกต ว่าอันไหนฟรี หรือ เสียเงิน โดยดูที่สัญลักษณ์ หากเป็นรูปมงกุฏ (Premium) แสดงว่า เสียเงิน และ ถ้าเป็นรูป S (Sponsored) แสดงว่าฟรี!
วิธีเลือกใช้งานไอคอน
https://www.grappik.com/how-to-use-icon/
5. Pexels
Pexels คือ stock photo ที่ให้เราสามารถดาว์นโหลดรูปภาพมาใช้งานได้ฟรี แบ่งรูปภาพออกเป็นหมวดหมู่ ให้ค้นหาได้โดยง่าย สามารถนำภาพไปใช้ในการทำ presentation, artwork ,เว็บไซต์ หรือจะบล็อกส่วนตัวหรือในเชิงพานิชย์ก็ได้ ไม่จำเป็นต้องระบุแหล่งที่มา แต่การให้เครดิตแก่ช่างภาพหรือ Pexels ก็ถือเป็นเรื่องที่ดี และห้ามนำไปขายต่อโดยเด็ดขาด
6. Google Font
Google Fonts คือ บริการของ Google ที่มีฟ้อนต์หรือตัวหนังสือแบบต่างๆ ให้เราสามารถที่จะเลือกใช้ได้ฟรี! แต่ส่วนใหญ่ก็จะเป็นฟ้อนต์ที่สนับสนุนภาษาอังกฤษซะส่วนใหญ่
สำหรับฟ้อนท์ไทย Google ได้จับมือกับ บริษัท คัดสรร ดีมาก ได้ทำโปรเจกต์ทำฟอนต์ไทยทั้ง 12 ชุด ลงบน Google Fonts เพื่อที่จะให้เว็บไซต์ทุกเว็บบนโลกมีฟ้อนต์ที่สวยงามและ สามารถโหลดได้เร็วโดยสามารถเอาไปใช้งานได้แบบฟรีๆ กันเลยค่ะ
วิธีการดาวน์โหลดฟ้อนต์ จาก GOOGLE FONTS
https://www.grappik.com/how-to-download-google-fonts/
Group 3 : เครื่องมือสำหรับทำงาน Design
7. Tailor Brands
Tailor Brands เป็นเครื่องมือออนไลน์แพลตฟอร์มที่ช่วยให้คุณสามารถออกแบบโลโก้ได้ง่ายและ รวดเร็วในเวลาเพียงไม่กี่นาที เราสามารถนำไปพิมพ์บนสินค้า, เอกสาร, นามบัตร, และเว็บไซด์ หรือทุกที่ที่คุณต้องการแสดงโลโก้ของแบรนด์โดยไม่จำเป็นต้องมีทักษะการออกแบบโลโก้มาก่อน
วิธีใช้งานก็ไม่ยาก เพียงแค่คุณพิมพ์ชื่อแบรนด์ เลือก references ระบบจะ generate โลโก้ไอเดียออกมาให้คุณเลือก ซึ่งถ้าถูกใจก็จ่ายเงินเพื่อนำไฟล์ไปใช้งานต่อ แต่ถ้าไม่ถูกใจก็ไม่มีการผูกมัด ส่วนตัวเวลานึกอะไรไม่ออกก็อาจจะเข้าเว็บนี้ก็ช่วยทำให้ได้ไอเดียใหม่ๆ สำหรับทำงานได้บ้าง
วิธีสร้างโลโก้ด้วย Tailor Brands
https://vsharecontent.com/2017/11/25/how-to-create-logo-with-tailor-brands/
8. Piktochart
Piktochart คือเว็บไซต์ที่ช่วยในการสร้างสรรค์งาน Infographic ที่ได้รับความนิยม เพื่อให้คนที่ไม่ใช่ดีไซน์เนอร์สามารถออกแบบและทำ infographic ออกมาได้สวยและ ดูดี โดยไม่ต้องมีความรู้ ภายในเว็บไซต์จะประกอบด้วยเครื่องมือที่ช่วยใน การออกแบบชิ้นงานและ สามารถเลือกจาก template ซึ่งง่ายและสะดวกต่อการใช้งาน ภายหลังจากที่ได้ทำการออกแบบเสร็จแล้วยังสามารถบันทึกเพื่อ นำมาใช้งานได้ในรูปแบบของไฟล์ PNG, JPEG และ PDF ได้
วิธีสร้างงาน Infographic โดย Piktochart
https://www.pharmacy.cmu.ac.th/admin/files_hotnews_new/infographic.pdf
หวังว่าบทความนี้ จะสร้างประโยชน์ให้แก่ผู้อ่านบ้าง ไม่มากก็น้อยนะคะ
ขอบคุณค่ะ
