วันเสาร์ที่ 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

วันพฤหัสบดีที่ 28 พฤศจิกายน พ.ศ. 2556

ดินสอไม้สำหรับ iPad

แปล-สรุปบทความเรื่อง : ดินสอปากกาไม้สำหรับ iPad
เขียนโดย : fiftythree 53  / nov 19,2013
จากเว็บไซต์  : www.designboom.com

 
ที่มา :  www.designboom.com

Fifty Three ผู้ที่พัฒนาความคิดสร้างสรรค์ Paper แอพวาดภาพการออกแบบงานต่างๆเพื่อให้การใช้งานง่ายเหมือนกับการได้ใช้ดินสอจริงๆโดยการออกแบบแพลตฟอร์มดิจิตอลในรูปแบบของ สไตลัส ดินสอสำหรับฮาร์ดแวร์ I Pad เป็นวัสดุที่ถูกสร้างขึ้นจากไม้อย่างยั่งยืนได้รับอิทธิพลจากดินสอช่างไม้แบบดั้งเดิม ทำหน้าที่เหมือนกับดินสอไม้ การใช้งานคือเชื่อมต่อกับ I Pad ผ่าน Bluetooth LE ด้วยการจิ้มตัว Pencil เข้ากับหน้าจอ

เมื่อใช้สไตลัสใน Pencil  อยู่ก็สามารถวางฝ่ามือบนหน้าระหว่างวาดโดยไม่รบกวนตัวภาพ และการใช้ท้ายสไตลัสแทนยางลบ พร้อมทั้งการเกลี่ยสีด้วยนิ้วมือ

สถิติหลักของเทคโนโลยี คือ สามารถใช้งานได้ยาวนานถึง 1 เดือนต่อการชาร์จ 1 ครั้ง ซึ่งทำได้ผ่านพอร์ต USB เพียงแค่ 90 นาที พร้อมทั้งหัวของสไตสิสทำจากทอง 14k มีความแม่นยำและรวดเร็วในการใช้งาน




ดินสอ / คิดด้วยมือของคุณ เอื้อเฟื้อวิดีโอจาก fiftythree

ที่มา : www.youtube.com
 

ดินสอในวอลนัท 
ที่มา : www.designboom.com

อุปกรณ์มาพร้อมกับยางลบที่ปลายสไตลัสและเคล็ดลับในการใช้
ที่มา : www.designboom.com

สไตลัสเป็นสแน็ปแม่เหล็กที่สามารถติดบน iPad ได้
ที่มา : www.designboom.com 

 สไตลัสเป็นอุปกรณ์ที่มีขนาดใกล้เคียงกับดินสอจริง
ที่มา : www.designboom.com

อลูมิเนียมที่ไร้รอยต่อแปรงของ 'ไฟท์' รุ่น
ที่มา : www.designboom.com

 fiftythree เป็นแอพพิเคชั่นในรูปแบบของ ' ดินสอกระดาษ '
ที่มา : www.designboom.com
ปลายดินสอคงทนได้รับแรงเสียดทานอย่างดีที่สุดบนหน้าจอ iPad
ที่มา : www.designboom.com
 การใช้ดินสอยางลบที่มีความสะดวกและง่ายต่อการใช้งาน
ที่มา : www.designboom.com

วันศุกร์ที่ 15 พฤศจิกายน พ.ศ. 2556

ความสัมพันธ์ระหว่างเทคโนโลยีกับการออกแบบนิเทศศิลป์


ทำโดยเว็บ :  http://www.mindmeister.com
ที่อยู่ลิ้ง : http://www.mindmeister.com

นางสาวศุทธินี แซ่ตั้ง กลุ่ม 101   
รหัสนักศึกษา  5411301590 
ศิลปกรรม (ออกแบบนิเทศศิลป์)