UI / UX

8 วิธีในการดีไซน์แอปพลิเคชั่นให้สวยงามและใช้งานง่าย จากผู้สร้าง Instagram

|

1. เข้าใจสิ่งที่กำลังทำ Krieger เตือนว่า อย่าเริ่มต้นสร้างแอปทั้งๆ ที่ยังไม่เคลียร์ว่าตัวเองกำลังทำอะไร ถ้ายังไม่ชัดเจนในคอนเซ็ปต์ ให้คุยกับผู้เชี่ยวชาญหรือศึกษาความเป็นไปได้ของสนามที่เราจะเข้าไปลงเล่น ก่อนที่จะเริ่มทำแอปหรือทุ่มเทกำลังความสามารถของเรา 2. ตัดสินใจว่าเราจะแตกต่างอย่างไร Krieger แนะนำให้ลองเติมคำในช่องว่างของ Product Mad Libs ประโยคนี้ เพื่อบ่งบอกเอกลักษณ์ของโปรดักต์เรา ซึ่งถ้าเติมคำในประโยคได้ครบก็จะบอกได้ว่าเราคือใคร เราต่างจากคนอื่นอย่างไร ___ is ____; it does ___. Unlike ___, we ___....

Design Inspiration

Grid Layout – Design Inspiration

|

ตัวอย่างเว็บไซต์ที่ใช้การจัดวาง แบบ Grid Layout เพื่อสร้างความน่าสนใจ…ให้กับรูป...

Wordpress

การตั้งค่า Plugin qTranslate ภาษาไทย

|

เว็บไซต์ที่มีเนื้อหาและกลุ่มผู้ชมเว็บไซต์หลายกลุ่มที่ใช้หลายภาษา การใช้ปลั๊กอินตัวนี้คงจะช่วยให้ชีวิตชาวเวิร์ดเพรสง่ายขึ้นมากเลยทีเดียว เพราะว่าปลั๊กอินตัวนี้ใช้งานง่าย และสะดวก เพียงแค่มีข้อมูลที่จะใส่ก็พอแล้วค่า ขั้นตอนการติดตั้งปลั๊กอิน qTranslate ไปโหลด Plugin มาก่อนที่ http://wordpress.org/extend/plugins/qtranslate/ เข้าระบบ Admin แล้วเลือก Plugins (ที่อยู่ทางด้านบนขวาของจอ) แล้วเลือก Add New จากนั้นเลือกที่แถบ Upload กด Browse เพื่อเลือกไฟล์ที่โหลดมา แล้วกด Install Now ทำการ Active   ซะ เสร็จสิ้นขั้นตอนการติดตั้ง...

UI / UX

Wireframe VS Prototyping แตกต่างกันยังไง

|

การทำ Wireframe เป็นสิ่งที่สำคัญมากในชีวิตการเป็นเว็บดีไซเนอร์ครับ หลายคนคิดว่างานออกแบบเว็บไซต์หมายถึง เปิดโปรแกรม Photoshop แล้่วเริ่มละเลงใส่รูป ใส่ตัวอักษร ใส่สี เสร็จแล้วส่งลูกค้า แต่จริง ๆ แล้วขั้นตอนในการทำเว็บไซต์กว่าจะมาถึงขั้น Design ใน Photoshop จะมีขั้นตอนที่เรียกว่า Wireframe เกิดขึ้นมาก่อน Wireframe ของเว็บไซต์คืออะไร ก่อนจะเริ่มดีไซน์เว็บไซต์ใน Photoshop โดยเฉพาะอย่างยิ่งโปรเจคเว็บไซต์ใหญ่ ๆ จะมีข้อมูลที่ซับซ้อน หลากหลายประเภท เราจะต้องบอกให้ได้ก่อนว่าแต่ละหน้าจะมีข้อมูลอะไรบ้าง และข้อมูลไหนแสดงอยู่ตรงไหน ซึ่งการทำ...

Mobile / Tablet

Free Andriod UI Kit / Fonts / Colors

|

Download Source Icon Set เมื่อเปิด Link จะได้ไฟล์ .svg ให้ทำการ save แล้วนำไฟล์ที่ได้ไปเปิด illustrator Android UI Design Kit PSD 4.2   Google Play asset dimensions Asset Type Required Image type Dimension Screenshot yes...

Wordpress

WordPress วิธีสร้างหน้า Cover Page ก่อนเข้าเว็บไซต์

|

Step 1 : สร้าง Template ขึ้นมาใหม่ เพื่อใช้กับหน้า Cover Page ที่เราต้องการ ใส่ css ลงในนี้เลยนะคะ ตั้งชื่อเป็น template-coverpage.php [crayon-59d2fbc175c72446164238/] Step 2 : นำไฟล์ template-coverpage.php ไปไว้ใน wp-content/themes/ทีมที่คุณใช้งาน Step 3 : ไปที่หน้า wp-admin เพื่อสร้าง page...

Online Tool

เว็บไซต์ตรวจสอบ Script Virus ที่ฝังใน บนหน้าเว็บ

|

Sucuri SiteCheck – Free Website Malware Scanner 1. ไปที่หน้าเว็บไซต์ผู้ให้บริการ sitecheck.sucuri.net 2. ขั้นตอนในการใช้งานเว็บไซต์ก็ง่ายๆ เพียงพิมพ์ url ของเว็บไซต์ที่ต้องการ scan virus ลงในช่อง Scan Website เช่น http://xxx.com > จากนั้นก็กดปุ่ม  SCAN WEBSITE    3. ระหว่างนั้นก็รอผลการ Scan สักครู่...

Online Tool

[ Android ] – Dp To Pixel Converter

|

Trick : สำหรับใครที่ออกแบบ App บน iPhone 5 แล้ว สามารถนำไฟล์ที่ออกแบบมาทำ Samsung Galaxy S3 , S4 ต่อได้เลยค่ะ (ไฟล์ต้องเป็น Vector นะจ๊ะไม่อย่างนั้นรูปจะแตก) หลักการก็ง่ายๆค่ะ แค่นำไฟล์ที่ออกแบบขนาด 640 มาขยาย Size เป็น – Samsung Galaxy S4 = Image Size...

Online Tool

วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ

|

วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ ขอแนะนำวิธีการทำเว็บไซต์ให้น่าสนใจและมีประโยชน์ต่อการนำทาง ด้วยการ ปักหมุดแผนที่บน Google Map ค่ะ ซึ่งท่านสมาชิกสามารถปักหมุดระบุตำแหน่งที่ตั้งขององค์กร บริษัท หรือร้านค้าของท่านลงในแผนที่ Google Map และสามารถนำโค้ด HTML มาติดในเว็บไซต์ เพื่อให้แผนที่แสดงผลในหน้าติดต่อเรา หรือแผนที่การเดินทาง ช่วยอำนวยความสะดวกแก่ผู้เข้าชมเว็บไซต์หรือผู้ที่จะเดินทางมายังองค์กรหรือร้านค้าของท่านได้ โดยมีขั้นตอนที่ไม่ยาก ดังนี้ค่ะ 1. เข้าไปที่ https://maps.google.co.th  และค้นหาสถานที่ ที่คุณต้องการ เช่นที่อยู่ หรือสถานที่ของคุณ ด้วยการซูมและลากไปเรื่อยๆ จนเจอสถานที่นั้นๆ...

UI / UX

ขนาดปุ่มบนหน้าจอมือถือ – นิ้วโป้งใหญ่กว่าเมาส์.. หัวใจสำคัญของ Fitts’ Law (ตอนที่2)

|

Fitts’ Law จริงๆ แล้วเป็นกฏธรรมชาติง่ายๆ ที่บอกว่า “ระยะเวลาที่ใช้ในการไปถึงเป้าหมายใดๆ นั้นแปรผันไปตามขนาดของเป้าหมาย และ ระยะห่างที่จะไปถึงเป้าหมายนั้น” พูดทฤษฏีแล้วดูยากเชียว พูดให้ดูง่ายๆ ก็คือ “ถ้าปุ่มมันเล็ก คุณก็จะกดยาก” และ “ถ้าปุ่มมันไกล คุณก็จะเสียเวลาขยับนิ้ว (เมาส์)” นั่นเอง ดังนั้นคุณควรจะออกแบบปุ่มให้ใหญ่พอที่จะกดได้สะดวก และอยู่ในตำแหน่งที่ไม่ไกลจากจุดเดิมที่นิ้ว (เมาส์) อยู่แค่นี้แหละครับ ไม่ใช่ทฤษฏีลึกลับซับซ้อนอะไรหรอก ตัวอย่างแรกๆ ของปัญหาที่เกิดในยุค Mobile ที่เกี่ยวข้องกับ Fitts’ Law...

UI / UX

กฏของ Fitts (Fitts’ Law) “ระยะห่างของอินเตอร์แอคชั่น” (ตอนที่1)

|

ดูตัวอย่างเว็บไซต์ iBanking ของธนาคารกรุงเทพ ผมเข้าไปเพื่อทำการโอนเงิน ปรากฏว่าเมื่อผมสั่ง “ยืนยัน” การโอนแล้ว ผมมองไม่เห็นสถานะของระบบ ว่ากำลังทำงานอยู่หรือไม่เนื่องจาก progress ที่แสดงสัญลักษณ์ว่าระบบกำลังโอนเงินให้นั้นมันอยู่ห่างจากปุ่ม “ยืนยัน” มาก และมันค้างอยู่นานมากพอสมควรจนผมหลงคิดไปว่าระบบมันค้าง เกือบจะปิด browser (ซึ่งเป็นเรื่องที่ทำให้ผู้ใช้กังวลมากๆ เพราะมันคือการโอนเงิน..!! เมื่อปิด browser แล้วตกลงเงินมันโอนแล้วหรือยัง เงินจะหายระหว่างทางมั้ย เป็นเรื่องซีเรียสที่ทำให้คนพาลจะไม่อยากโอนเงินทางอินเทอร์เนตเลยครับ) ที่แย่ยิ่งไปกว่านั้นคือระยะห่าง (distance) ของ progress กับปุ่ม “ยืนยัน” มันห่างกันมากเสียจนตกขอบจอ คือหลังจากคลิก “ยืนยัน”...

UI / UX

ประยุกต์ใช้กฎ 80:20 ในงาน UX

|

“ยิ่งรู้จักผู้ใช้ งานพัฒนาจะยิ่งน้อยลง” ประโยคนี้หลายคนไม่เห็นด้วย เพราะคิดว่า “ยิ่งรู้จักผู้ใช้มาก ก็จะถูกผู้ใช้จะเรียกร้องฟังก์ชั่นใหม่ๆ มากขึ้นเรื่อยๆ” นั่นเพราะว่ายังไม่รู้จักกับกฎ 80:20 กฎ 80:20 เป็นกฎที่ Vitfredo Pareto ชาวอิตาลี่ได้ค้นพบโดยบังเอิญว่าในประเทศของเขานั้นประชากร 20% ของประเทศเป็นเจ้าของความร่ำรวยถึง 80% ของทรัพย์สินทั้งหมด นอกจาก Pareto แล้ว ผู้เชี่ยวชาญท่านอื่นๆ ก็ค้นพบสิ่งที่คล้ายๆ กันจนทำให้สัดส่วนนี้ได้รับความเชื่อถือมากขึ้น และกลายเป็นข้อสรุปในเรื่องว่า สัดส่วน 20% นั้นมักจะสร้างผลกระทบถึง 80% หรือจะบอกว่าสิ่งที่สำคัญถึงมีจำนวนน้อยก็จะสร้างผลกระทบได้เป็นวงกว้าง...

Online Tool

Resolution Test Browser Tools

|

แนะนำเครื่องมือที่ช่วยให้ Developer ทั้งหลายสามารถ Test Resolution หน้าจอขนาดต่างๆได้ง่ายๆบน Browser ที่ใช้งานอยู่ แถมยังสามารถเพิ่ม ขนาดหน้าจอ เพื่อใช้ test ได้เองอีกด้วย วันนี้มีมาแนะนำ 2 ตัวคะ   Chrome Extensions : Resolution Test Firefox Extensions : Firesizer...

Mobile / Tablet

Free iOS7 UI Kit / Fonts / Colors

|

รวม Graphical user interface elements ของ iOS7 ให้ Download ไปใช้งาน   iPhone 5 Basic Screen Component Dimensions I almost didn’t post this, since there’s really only one dimension that’s different...

Social Media

Create Instagram App – Get Client ID , Client Secret

|

Get Instagram User ID http://jelled.com/instagram/lookup-user-id Instagram access token generator http://jelled.com/instagram/access-token Get Instagram Widget http://web.stagram.com/tools/   How do I get my client id? Go to instagram.com/developer and click on “Manage Clients”...

Social Media

CreateTwitter App – Get Consumer key , Consumer secret, Access token , Access token secret

|

การเชื่อมต่อ Twitter กับหน้าเว็บของเรา จำเป็นจะต้องใช้  API Key จาก Twitter เพื่อเป็นกุญแจในการเชื่อมต่อระหว่างเว็บ กับ account twitter เราจะสามารถหา API Key ของ Twitter ได้จากการสร้าง App Twitter ขึ้นมา ช้อมูลที่จะได้จาก Twitter App คือ Consumer key , Consumer secret,...

Wordpress

Custom by WordPress Function

|

เกี่ยวกับ woo commerce Insert Function เมื่อ เข้าเงื่อนไขของ free shipping ให้โชว์ค่าจัดส่งแค่ free shipping อย่างเดียว เพิ่มใน wp-content/themes/###your-theme###/functions.php [crayon-59d2fbc176048538560796/] เกี่ยวกับการแสดง Notification Update /* จะเห็น WordPress update message เมื่อ login ด้วย username : admin เท่านั้น...