Digital Innovative Thinking and Coding
-
Upload
mayuree-srikulwong -
Category
Education
-
view
789 -
download
2
Transcript of Digital Innovative Thinking and Coding
DIGITAL INNOVATIVE
THINKING & CODING
M. SrikulwongApple Accredited Personal Development Consultant
Lecturer in Computer Science, University of the Thai Chamber of Commerce
Big Idea Challenge App / WebSolution
DIGITAL INNOVATIVE
THINKING & CODING
why
DIGITAL INNOVATIVE THINKING & CODING
CREATIVITY & DIGITAL INNOVATION
why
DIGITAL INNOVATIVE
THINKING & CODING
what
What COMPUTATIONAL THINKING
DIGITAL INNOVATIVE THINKING & CODING
What
DIGITAL INNOVATIVE THINKING & CODING
USER EXPERIENCE (UX) - HOW A
PERSON FEELS WHEN THEY INTERACT WITH YOUR PRODUCTS / SYSTEMS
http://blog.rillusion.com/10-reasons-user-experience-ux-design-is-important/
What
DIGITAL INNOVATIVE THINKING & CODING
USER INTERFACE (UI) - THINGS THAT A PERSON
WILL ACTUALLY SEE AND INTERACT WITH YOUR PRODUCTS / SYSTEMS
http://bluehillresearch.com/four-tips-for-designing-a-user-interface/
https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer
THE DIFFERENCE BETWEEN UX AND UI
DIGITAL INNOVATIVE
THINKING & CODING
how
how
DIGITAL INNOVATIVE THINKING & CODING
Big Idea Challenge App / WebSolution
User Experience User Interface
Computational Thinking
why
What
how
CREATIVITY & DIGITAL INNOVATION
= COMPUTATIONAL THINKING + UX + UI
DIGITAL INNOVATIVE THINKING & CODING
Big Idea Challenge App / WebSolution
DIGITAL INNOVATIVE
THINKING & CODING
how exactly
UX
UI5.Wireframe 8.Mockup 9.Prototype
1.Persona 2.User Journey 3.User Story 4.Scenario 5.Wireframe
6.Site Flow 7.User Flow
ตัวละคร บรรยายลักษณะละเอียด
หนังสือ 1 เล่ม Post-it
จำแนกตามลักษณะงาน
บท 1 บท เขียนเป็นประโยคเน้นเป้าหมาย
ซีน 1 ซีน Sketch /
Storyboard
รายละเอียดในแต่ละฉาก วาดขาวดำ
ผังของทั้งระบบ เส้นทางของ แต่ละ Persona
ต้องทำ User Testing เพื่อทดสอบ เส้นทางทั้งหมดใน Site / User Flow
ตามจำนวน User Story
B&W Sketch UI Design with Visuals with Interaction
User
Testing
A/B
Testing
USER EXPERIENCE
USER INTERFACE
นำ Wireframe มาเรียงต่อกัน
1.1 สัมภาษณ์
Product
Testing
Big Idea Challenge App / WebSolution
UXUSER EXPERIENCE
Big Idea Challenge App / WebSolution
1.Persona ตัวละคร บรรยายลักษณะละเอียด
1.1 Interviewing Your Personas
1.1 Interviewing Your Personas
2.User Journeyhttps://madebymany.com/stories/we-re-building-the-next-stage-of-picle
หนังสือ 1 เล่ม Post-it จำแนกตามลักษณะงาน
3.User Story บท 1 บท เขียนเป็นประโยค เน้นเป้าหมาย
4.Scenario ซีน 1 ซีน Sketch / Storyboard
5.Wireframe
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
รายละเอียดในแต่ละฉาก (Information) วาดขาวดำ
6.Site Flow ผังของทั้งระบบนำ Wireframe มาเรียงต่อกัน
https://dribbble.com/shots/2136347-Site-Flow?1436223042
7.User Flowเส้นทางของแต่ละ Personaนำ Wireframe มาเรียงต่อกัน
https://newflux.fr/2016/12/13/flow-patterns-un-kit-pour-concevoir-des-user-flows-et-des-sitemaps /
UIUSER INTERFACE
Big Idea Challenge App / WebSolution
https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer
THE DIFFERENCE BETWEEN UX AND UI
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
5.Wireframe รายละเอียดในแต่ละฉาก (Information) วาดขาวดำ
5.Wireframe 8.Mockup
Visual design Branding Color Typography Graphics Layout Guidelines
{B&W Sketch UI Design with Visuals
User
Testing
8.Mockup UI Design with Visuals
https://images.freecreatives.com/wp-content/uploads/2016/07/Fancy-Mobile-App-p-UI-Mockup.png
8.Mockup
Usability design Interaction design UX Writing {
UI Design with Visuals
9.Prototype
with Interaction
A/B
Testing
9.PrototypeAll Functions
with Interaction
DIGITAL INNOVATIVE THINKING & CODING
Recap
Big Idea Challenge App / WebSolution
User Experience User Interface
Computational Thinking
UX
UI5.Wireframe 8.Mockup 9.Prototype
1.Persona 2.User Journey 3.User Story 4.Scenario 5.Wireframe
6.Site Flow 7.User Flow
ตัวละคร บรรยายลักษณะละเอียด
หนังสือ 1 เล่ม Post-it
จำแนกตามลักษณะงาน
บท 1 บท เขียนเป็นประโยคเน้นเป้าหมาย
ซีน 1 ซีน Sketch /
Storyboard
รายละเอียดในแต่ละฉาก วาดขาวดำ
ผังของทั้งระบบ เส้นทางของ แต่ละ Persona
ต้องทำ User Testing เพื่อทดสอบ เส้นทางทั้งหมดใน Site / User Flow
ตามจำนวน User Story
B&W Sketch UI Design with Visuals with Interaction
User
Testing
A/B
Testing
USER EXPERIENCE
USER INTERFACE
นำ Wireframe มาเรียงต่อกัน
1.1 สัมภาษณ์
Product
Testing
Big Idea Challenge App / WebSolution
Site Flow / User Flow Flow Patterns http://uxmovement.com/products/flow-patterns-make-site-flows-in-fine-visual-detail/ Sketchappsources https://www.sketchappsources.com 10 Pattern Sites https://www.caxy.com/blog/10-ux-pattern-sites-for-inspiration
Wireframe & Mockup Marvel https://marvelapp.com Wireframe.cc https://www.wireframe.cc UXPin http://www.uxpin.com 10 Free Wireframe Tools http://mashable.com/2010/07/15/wireframing-tools/#x5N_cHp1JZqz
Prototype Adobe XD http://www.adobe.com/products/experience-design.html Invision https://www.invisionapp.com
Tools
CourseReport (www.coursereport.com)Careerfoundry (www.careerfoundry.com)Dribble (www.dribble.com)Scale360 (https://www.scale360solutions.com)Pixabay https://pixabay.com/en/users/sasint-3639875/
References
www.slideshare.net/mayureesrikulwong
AcknowledgementsSpecial Thanks to Juthamas Vadhanapanich for a UX/UI Design Lecture