prototyping toolsdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · prototyping on...

PROTOTYPING TOOLS DIGICOMP PUBLISHING DAY 2016 | PD1623 | 16:15–17:00

Upload: others

Post on 01-Aug-2020

4 views

Category:

Documents

0 download

Report

Download

Embed Size (px):

TRANSCRIPT

PROTOTYPING TOOLS

D I G I C O M P P U B L I S H I N G D AY 2 0 1 6 | P D 1 6 2 3 | 1 6 : 1 5 – 1 7 : 0 0

JOELY TAFANALODipl. Gestalter HF Kommunikationsdesign, Interaction Design

FBL Publishing, Kursleiter Digicomp Academy Geschäftsführer Toughmedia

Solutions Consultant Adobe Systems Autor, Blogger Publisher Magazin

Dozent FHNW, SFGB-B, SGD & SGV

@TOUGHMEDIA

Page 3: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

ENTWICKLUNG

WIREFRAME

PROTOTYPE

DE SIGN TOOL S

Adobe Photoshop

Bohemian Coding Sketch

Device Preview

Sketch Mirror

PROTOT YPING TOOL S

proto.io Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required.

invisionapp.com The world's leading prototyping, collaboration & workflow platform

marvelapp.com Simple design, prototyping and collaboration

popapp.in Prototyping on Paper

axure.com Create Prototypes of Websites & Apps Without Coding

balsamiq.com Rapid wireframing tool

https://proto.io/

http://www.invisionapp.com

https://marvelapp.com/

https://popapp.in/

http://www.axure.com/

https://balsamiq.com/

Page 6: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Page 7: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

WA S BRAUCHEN W IR?

• Spezifisch entwickeltes Tool, mit Performance und Stabilität

• Weniger Aufwand als bisher (mehrere Tools für Designen & Prototypen)

• Flexibilität im Umgang mit Flut an Geräten & Screens

• Schnell und iterativ Designen & Prototypen

• Verlässliche und realistische Design Vorschau auf Geräten

Page 8: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

ADOBE MAX 2015

Page 9: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Project Comet

Page 10: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Experience Design CC (Preview)

Page 11: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Page 12: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Erweitertes Sharing Pathfinder

Page 13: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Wiederholungs-Raster

Page 14: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

Page 15: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

WA S KOMMT NOCH?

• Verbesserte Designfunktionen (Verläufe, Formatierung, Effekte, Füllmethoden)

• Verbesserter Farbwähler

• Unterstützung für Arbeit mit Ebenen

• Mehr Kontrolle für das Teilen von Prototype-Links

• Bearbeitung von scrollbarem Inhalt

• Micro-Interaktionen für Prototyping

• Echtzeit Design-Vorschau und -Testing auf Mobile Devices (iOS und Android)

• Wiederverwendung von Design Assets, Styles durch CC Libraries

• Schnittstelle (API) für Plug-Ins

• Verfügbarkeit auf Microsoft Windows 10 (Vorschau erwartet für Ende 2016)

Page 16: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

adobe.ly/1nIEnE1 #AdobeXD

Experience Design CC (Preview)

http://adobe.ly/1nIEnE1

Page 17: PROTOTYPING TOOLSdigiblog.s3-eu-central-1.amazonaws.com/app/... · 2016-03-17 · Prototyping on Paper axure.com Create Prototypes of Websites & Apps Without Coding balsamiq.com Rapid

DANKE!

D I G I C O M P P U B L I S H I N G D AY 2 0 1 6

Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support

Paper Prototyping & App Design - Women Powering Technology€¦ · Paper Prototyping & App Design ... Make some paper prototypes of your app - much like those in the Usability Testing

Prototypes and Human Machine Coupling. Two Parts Part One Prototyping Part Two The Politics of HCI

PROTOTYPING. Why bother with prototypes? Approaches to prototyping Dimensions of fidelity Prototyping in practice AGENDA

Hi-fi-prototyping · 2013-09-26 · –Balsamiq Mockups. Powerpoint We use PowerPoint as kind of a better version of paper prototypes. This technique has several advantages: prototypes

CLASSIFYING PHYSICAL MODELS AND PROTOTYPES IN THE DESIGN … · of the design process. KEYWORDS: models, model making, prototyping, prototypes, design process 1. INTRODUCTION designers

Rapid Prototyping of Outdoor Games for Children in an ... design. Proponents of paper prototyping, e.g., [19] argued that software prototypes are less suitable for iterative design

Design, prototyping and construction Chapter 11. Overview Prototyping and construction Conceptual design Physical design Generating prototypes Support

Exploring Low-fidelity Prototyping Methods for Augmented ......In the current study, we explored two low-fidelity prototyping methods (physical and digital prototypes) which are commonly

Prototyping - University of Victoria · • Explain why prototyping is an important phase of design. • Create and test paper prototypes. • Explain how to create a high-fidelity

RAPID PROTOTYPING - Montana State University … · Rapid Prototyping (RP) A family of unique fabrication processes developed to make engineering prototypes in minimum lead time based

Prototyping - Stanford University€¦ · Prototyping as Communication Prototyping is the pivotal activity that structures innovation, collaboration, and creativity in design. Prototypes

Prototyping. Outline Risk Management Prototyping Kinds of Prototypes Example Activity 1

Prototyping Workshop - Wireframes, Mockups, Prototypes

Rapid Prototyping of Adaptable User Interfaces · 2013-03-06 · RAPID PROTOTYPING OF ADAPTABLE USER INTERFACES 215 Ofﬂine prototypes (also called paper prototypes) include paper

Conceptualising Prototypes in Service Designliu.diva-portal.org/smash/get/diva2:412916/FULLTEXT01.pdfStudy 1 conceptualises prototypes and prototyping in a framework while study 2

Prototypes and Prototyping - The Future of 3D Printers

Prototyping Corporate User Interfacespresent ways of agile high-fidelity prototyping for corporate user interface design. Without harming agile principles and practice, detailed prototypes

Improving Seal Quality at Package Prototypes...Improving Seal Quality at Package Prototypes Abstract Package Prototyping is a group within Tetra Pak R & D in Lund. Package Prototyping

Design and prototyping II - Virginia Techcourses.cs.vt.edu/~cs4784/pdf/wk6 design prototyping contd.pdf · Low-ﬁdelity prototypes • A.k.a. “wireframes” • Goals – Connect

Prototyping ● What prototyping is ● The benefits of prototyping ● Low-fidelity prototypes ● High-fidelity prototypes, – And the advantages of each ● How

Prototyping. Objectives By the end of class, you will be able to… Explain why prototyping is an important phase of design. Create and test paper prototypes

Prototyping & Building a Systemegolub/HDCC106/HDCC106-3(2001)-Notes04(Prototyping).pdfLow Fidelity Prototypes Paper-based prototypes • a paper mock-up of the interface look, feel,

Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks

The Art of Rapid Prototyping - Specific Techniques for How to Design Faster with Interactive Prototypes

Virtual System Prototyping - Ozen Engineering · Virtual System Prototyping ... ANSYS Simplorer A Comprehensive platform for modeling, simulating, and analyzing virtual system prototypes

PACKAGING PROTOTYPES Package Prototype.pdf · Introducing the Roland Packaging Prototyping System, an eﬃcient in-house solution for the production of professional packaging prototypes

New PACKAGING PROTOTYPES prototype.pdf · 2010. 6. 28. · PRINT CUT WEED MILL FORM PACKAGING PROTOTYPES Introducing the Roland Packaging Prototyping System, an eﬃcient in-house

On The Teachers Role in Interactive Prototyping · 2017-10-06 · Hummels has explored prototyping through design concepts and prototypes at various levels (Hummels, 2000). There

Mixed-Fidelity Prototyping of User Interfaces...software development. Prototyping involves creating mock-ups representing the user interface of the ﬁnal software system. Prototypes

User-Centered Website Development: A Human - Computer ...aguercio/CS27101Slides/Chap07-08.pdf · What prototyping is The benefits of prototyping Low-fidelity and high- fidelity prototypes,

„fingies“- More than a Rapid Prototyping Tool for ... · - rapid prototyping for Internet of Things applications ! - developing Embedded or Hybrid System Prototypes ! - and many

Rapid Prototyping by Layered Manufacturing Product Realization Cycle Mock-Up’s, Engg prototypes Why speed up prototyping? Quick product entry into market

Comparison of Different Rapid Prototyping Methods...Rapid prototyping describes the technology of generative Rapid prototyping technologies for easy production of prototypes, parts

Low-Fidelity Prototyping · Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? – Prototypes look like the final product Low fidelity? – Artists renditions