การออกแบบ User interface

จันทร์ 17 กุมภาพันธ์ 2557
Design in App New iPad
Final Project  ออกแบบ  App บน ipad ผ่าน  Adobe Photoshop 

User interface Jaomaeew เป็นการออกแบบขึ้นมาเพื่อให้ผู้สนใจรักและชื่นชอบแมว เพราะภายใน App นี้เราบอกสิ่งที่ควรรู้เกี่ยวกับตัวแมวเช่น บนร่างกายของแมวตรงไหนจับได้ ตรงไหนไม่ควรจับ และหางในลักษณะไหนสื่ออารมณ์อะไร เราสามารถรู้แล้วศึกษาได้โดยผ่าน app Jaomaew
ลักษณะการเลือกใช้สีออกแบบ : เลือกใช้โทนสีสดใสเพื่อเพิ่มความจุดสนใจให้กับ app jaomaew 

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

ภาพที่ 1 : Icon app Jaomaew size 512x512 pixel 72 ppi

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Icon :  การออกแบบต้องการให้เห็นสื่ออย่างชัดเจน โดยการนำแมวเป็นจุดเด่น

การเพิ่มชื่อ App ลงไปเพื่อให้เห็นชื่อ App ได้ชัดเจน 

ภาพที่ 2 :  Loading Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Loading :  การออกแบบหน้า Loading  สำหรับการดาวน์โหลดก่อนการเข้าไปสู่เมนู 

รูปแบบในการออกแบบ คือ ใช้รูปแมวกำลังกระโดด ใช้สีพื้นหลังเป็นเพลนสีชมพู เพื่อให้ดูสดใสมากขึ้น

ภาพที่ 3 : Menu Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Menu : ออกแบบเป็นภาพคนกำลังแบกแมวท่หนักมากแล้วก็มีตัวอักษรว่า Meawwwww....Ahh ประมาณว่าช่วยกดปุ่มนี้ทีฉันหนักมากกกก ! ออกแบบมาเพียงปุ่มเดียวเพื่อเข้าสู่หน้าถัดไปเลย ใช้สีสันสดใสอีกเช่นเคย

ภาพที่ 4 : Page 1 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 1: เริ่มต้นเข้าสู่ตัว app สามารถอ่านและทำความเข้าใจในส่วนต่างๆ บนตัวแมวว่าตรงไหน ควรจับหรือตรงไหนไม่ควรจับ พร้อมทั้งสามารถ Back กลับไปหน้า Meun ได้ที่ปุ่มซ้ายมือล่างรูปเท้าแมว และสามารถกดที่หางเพื่อไปสู่ยังหน้าต่อไปที่อธิบายเกี่ยวกับหางของแมวที่สื่อหรือให้อารมณ์อะไร เมื่อแตะที่บริเวณนั้นๆก็จะมีเสียงตามอารมณ์ของแมว

โทนสีที่ใช้ในหน้านี้: จะเน้น Bg ขาวเพื่อให้เห็นรูปภาพและข้อความ ข้อมูลชัดเจนมากขึ้น

ภาพที่ 5 : Page 2 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 2: เข้าสู่หน้าถัดมาหน้านี้จะอธิบายเกี่ยวกับหางสื่ออารมณ์ของแมว ปุ่มล่างสุดทั้ง 2 ปุ่มคือ ปุ่มซ้ายกดเพื่อกลับไปยังหน้าถัดมา ปุ่มขวากดเพื่อไปยังหน้าสุดท้ายของ App นี้

โทนสีที่ใช้ในหน้านี้: จะเน้น Bg ขาวเพื่อให้เห็นรูปภาพและข้อความ ข้อมูลชัดเจนมากขึ้น

ภาพที่ 6 : Page 3 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 3: หน้านี้เป็นหน้าสุดท้ายของ App เป็นภาพมือแมวโบกไปมา Bye เป็นภาพถ่ายสีออก pastel มีข้อความว่า Bye....

งานแปลสรุปข่าวเทคโนโลยีเพื่อการออกแบบ

WH Smith

Another great design from the folks at R Design: "Our brief was to create a compelling and inspirational solution. Because of copyright issues regarding artist’s work was a problem, our solution was to take inspiration from the though process behind how one paints and draws and to convey famous artists thoughts by choosing relevant quotes that captured the spirit of the product. We achieved this by commissioning different illustrators to recreate these quotes with the relevant use of materials."

Continue reading below to see more of this beautiful line!

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

http://www.thedieline.com/blog/2008/4/6/wh-smith.html

Technology for Visual Communication News

งานชิ้นที่ 2 การรายงานแปลสรุปข่าวสารด้านเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

                                

LUCETTA, Magnetic Bike Lights

Lucetta is an innovative set of two small magnetic bicycle lights which confirms the creative partnership between Pizzolorusso and the Italian company Palomar.

Easily attached to several different parts of a bicycle, the two small lights – white for the front, red for the rear - are switched on and off with just one click. Designed to stay securely in place on even the bumpiest of roads, the lights give the option of a steady, slow or fast flashing beam, also selected with a 'magic' interaction. 

Once a destination is reached, the lights are easily removed and may be linked together and slip in your pocket. The range of the beam is wide enough to reach vehicles, even if the light is tilted down. Lucetta embodies maximum utility and versatility. The object is simple; it doesn't have a technical look but a friendly feature, 'clean' and yet a bit mysterious. It is designed to take as little space as possible and to stay with other small personal things of everyday usage - keys, mobile phone, loose change - that 'inhabit' our pockets.

Designed by Pizzolorusso for Palomar,Italy

Designer: Emanuele Pizzolorusso

แปล

LUCETTA, ไฟจักรยานแม่เหล็ก

Lucetta ผลิตนวัตกรรมชิ้นใหม่คือ ชุดไฟแม่เหล็กขนาดเล็กติดจักรยาน ซึ่งเป็นความร่วมมือสร้างสรรค์ผลงานระหว่าง Pizzolorusso และบริษัท อิตาเลียนพาโล

ชุดไฟขนาดเล็ก 2 ชิ้นนี้ สามารถติดในส่วนต่างๆ ของจักรยานได้อย่างง่ายดาย สีขาวสำหรับด้านหน้า 

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

เมื่อถึงจุดหมาย ก็สามารถเก็บไฟ 2 ชิ้นนี้ไว้ในกระเป๋าได้ ง่ายต่อการพกพา Lucetta ส่งเสริมประโยชน์

ในเรื่องของความคล่องตัวสูงสุด มันถูกออกแบบมาเพื่อใช้พื้นที่น้อยที่สุดเท่าที่จะเป็นไปได้สามารถพกพาได้ เปรียบเสมือนกุญแจหรือโทรศัทพ์ที่อยู่ในกระเป๋าของเรา

มี 3 สี

ขนาดเล็กง่ายต่อการพกพา

 ไฟด้านหน้าจะเป็นสีขาว

ไฟด้านหลังจะเป็นสีแดง

ออกแบบโดย : Pizzolorusso for Palomar,Italy

นักออกแบบ : Emanuele Pizzolorusso
ปี : 2013

Credit : http://www.thedieline.com/blog/2013/11/26/lucetta-magnetic-bike-lights.html

Mind Map : เทคโนโลยีกับการออกแบบนิเทศศิลป์

Mind Map: เทคโนโลยีกับการออกแบบนิเทศศิลป์ กลุ่ม 102 ภาคเช้า

http://artd3305-kwankamol.blogspot.com/

นางสาวขวัญกมล จิตต์ประเสริฐ 5411312050

Mind Map Online

http://www.mindmeister.com/347638513