วันเสาร์ที่ 15 กุมภาพันธ์ พ.ศ. 2557

Design in App iPhone4s

Final Project  ออกแบบ  App บน iPhone ผ่าน  Adobe Photoshop และ Adobe Illustrator

ออกแบบ The cake Maker เป็นการแต่งเค้กสำหรับในโอกาสต่างๆ เช่น วันเกิด  สามารถแต่งเค้กในรูปแบบสไลต์ของตัวเองได้ พร้อมทั้งสามารถแชร์ให้กับคนที่คุณต้องการส่งไปให้ได้อย่างง่ายดาย
ลักษณะการเลือกใช้สีออกแบบ : เลือกใช้โทนสีสดใส
เพื่อเพิ่มความจุดสนใจให้กับ The cake Maker
เน้นสีส้มเหลืองเป็นหลัง ส่วนตัวเค้ก ออกแบบในโทนสีชมพูให้ดูเข้ากับตัวเค้กเป็นหลัก
การจัดวางรูปแบบ App บน iPhone :  สัญลักษณ์เน้นไปอยู่ทางส่วนล่างของ iPhone ทั้งหมด
เพื่อไม่ให้ไปเลื่อนโดนระหว่างเล่น  The cake Maker
การจัดวางองค์ประกอบที่ใช้ง่ายเหมือนทั่วไป เพื่อให้ง่ายต่อการใช้สำหรับทุกคน

ภาพที่ 1 : Icon app The cake Maker size 512x512 pixel 72 ppi
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

Icon :  การออกแบบต้องการให้เห็นสื่ออย่างชัดเจน โดยการนำรูปเค้กเป็นจุดเด่น
การเพิ่มชื่อ App ลงไปเพื่อต้องการให้ตัว App มีรูปแบบเหมือนกับเกมส์มากขึ้น

ภาพที่ 2 :  Loading The cake Maker 
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

Loading :  การออกแบบหน้า Loading  สำหรับการดาวน์โหลดก่อนการเข้าไปสู่เมนู 
รูปแบบในการออกแบบ คือ การใช้เค้กเป็นตัวกระพริบไปมา เพื่อไม่ให้น่าเบื่อกับการรอการ Loading

ภาพที่ 3 : Menu The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

Menu : การออกแบบในลักษณะที่สามารถเลือกระดับในการเล่นก่อนการเริ่มเล่น 
เมื่อผ่านไปที่ละด่านก็สามารถเล่นในด่านถัดไปได้
เมื่อไม่พอใจต่อการเล่นก็สามารถกลับไปเล่นในด่านเดิมได้ 
How to play : สำหรับการบอกวิธีเล่น The cake Maker
setting :  สำหรับการตั้งค่าต่างๆของใน  The cake Maker 
Quit : สำหรับการออกจาก The cake Maker

ภาพที่ 4 : Page 1 The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

Page 1 : เริ่มต้นเข้าสู่การแต่งเค้ก สามารถเลือกรูปร่างของเค้กได้ตามสไตล์ 
เมื่อได้รูปร่างของเค้กที่ต้องการแล้ว ให้ next เพื่อไปสู่ขั้นตอนต่อไป 
พร้อมทั้งสามารถ Back กลับไปหน้า Meun สำหรับเลือกด่านหรือออกจาก The cake Maker 

ภาพที่ 5 : Page 2 The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

Page 2 :  สำหรับการเลือกครีมเค้กสามารถเลือกสีที่ต้องการได้ 
เมื่อได้ครีมเค้กที่ต้องการแล้วก็ให้ next เพื่อไปสู่ขั้นตอนต่อไป
และยัง Back กลับไปลือกรูปแบบเค้กใหม่ได้

ภาพที่ 6 : Page 3 The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

 Page 3 :  ขั้นตอนสุดท้ายคือ การตกแต่งบนหน้าเค้ก
มีลูกศรไปกลับสามารถเลือกของตกแต่งต่างๆ
สามารถ Back กลับไปเพื่อเลือกสีของครีมเค้กใหม่ได้
และ Make cards สำหรับการออกแบบการ์ดให้ในวันสำคัญ เช่น วันเกิด  เป็นต้น

ภาพที่ 7 : Page 4 The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

 Page 4 : เพื่อการออกแบบพื้นหลังและลวดลายต่างๆ
พร้อมทั้งสามารถเขียนข้อความเพื่อสื่อถึงผู้รับได้ 
Back สำหรับการกลับแก้ไขการแต่งหน้าเค้กได้ 
และการ Share ไปถึงผู้รับ

ภาพที่ 8 : Page 5 The cake Maker
size 640 x 960 pixel  resolution 300
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

 Page 5 :  สำหรับการตรวจรูปแบบและข้อความที่ได้ออกแบบทั้งหมด 
เมื่ออยากแก้ไขหรือมีข้อผิดพลาดสามารถ Back เพื่อแก้ไขใหม่ได้
เมื่อตรวจสอบความถูกต้องแล้ว ก็สามารถเลือกการแชร์
facebook หรือ twitter ได้ตามความต้องการและความสะดวกของผู้ใช้และผู้รับ
เช่น เมื่อคลิกที่ facebook และพิมพ์ชื่อผุ้รับ 
ก็จะสามารถเห็นรูปของผู้รับและไอคอน f  เพื่อให้รับรู้ว่าได้แชร์จากที่ไหนไปที่ไหน 

ภาพที่ 9 : ตัวอย่างเมื่อแชร์ไปถึงผู้รับทาง facebook
ที่มา : นางสาว ศุทธินี แซ่ตั้ง,2557

วันศุกร์ที่ 14 กุมภาพันธ์ พ.ศ. 2557

การออกแบบ Graphical User interface

ออกแบบเพื่อผู้ใช้ทุกระดับ

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

กำหนดกลุ่มผู้ใช้ - เป้าหมาย
-  กำหนดกลุ่มเป้าหมายอย่างเฉพาะเจาะจง
-  นึกถึงผู้ใช้เป้าหมายหลายกลุ่ม
-  เรียนรู้ผู้ใช้
-  เข้าใจประสบการณ์ของผู้ใช้
-  จำลองสถานการณ์
( What / Where / When / Who / How)

สร้างตัวอย่างจากผู้ใช้
-  ผู้ใช้คนแรก
-  ผู้ใช้คนที่สอง
-  สร้างสถานการณ์

สิ่งที่ผู้ใช้ต้องการจาก Application
-  ข้อมูลและการใช้งานที่เป็นประโยชน์
-  ข่าว
-  การตอบสนองต่อผู้ใช้
-  ความบันเทิง
-  ของฟรี

ข้อมูลหลักที่มีอยู่ใน Application
1. ข้อมูบเกี่ยวกับบริษัท ( About Us )
2. รายละเอียดของผลิตภัณฑ์ ( Contents, Information)
3. ข่าวความคืบหน้าและข่าวจากสื่อมวลชน ( News, Update...)
4. คำถามยอดนิยม ( FQA)
5. ข้อมูลในการติดต่อ (Contact Us)

โปรแกรมที่ใช้ในการออกแบบ
-  Adobe Photoshop
-  Adobe Illustrator

หน้าแรกของ Appllication
-  ไอคอน Application บนหน้าจอ Home screen
-   หน้า Loading - Splash

ภาพประกอบ
-  ความเหมาะสมของภาพกับเนื่้อหา
-  ขนาดของไฟล์
-  ลิขสิทธิ์ภาพ

ไฟล์ที่ใช้บน Application
-  .JPG    ปรับจำนวนสีได้หลายขนาด ไม่มีพื้นที่เจาะทะลุพื้นหลัง
-  .PNG   ขอบภาพโปร่งใส เจาะทะลุพื้นหลังได้ คมชัด
-  .SVG   สามารถย่อ ขยายภาพบน application ได้
ภาพไม่แตกเจาะทะลุพื้นหลังได้ คมชัด ความละเอียดเป็นแบบ  vector แก้ไขภาพได้

Sketch
-  สิ่งที่สำคัญที่สุดในการเริ่มต้นการออกแบบ
-  "ร่าง" (sketch) แบบของงาน ก่อนทำ "โครงร่าง" (wireframe)

Sketch - wireframe
-  ยึดหลักการออกแบบจากข้อมูลภายใน Application

Final Project
-  Icon app : size 512x512 pixl 72 ppi
-  Splash page - หน้า Loading
-  Page 1
-  Page 2
-  Page 3
-  Page 4
-  iPhone 4s: 960 x 640 resolution 300 dpi