Current Trends in Prototyping Tools

Transcription

1 Current Trends in Prototyping Tools

2 Good Day! I am Beth Cataldo I teach user experience, web production and social media in the Visual Media Design Department at City College of San Francisco. You can find me at: bcataldo@ccsf.edu bethcataldo.com

3 Today s goals Provide an overview of trends and industry standards in web/mobile mockup and prototyping tools. Look at specific tools being used. Discuss how to best integrate new and constantly changing tools into our classes. See if anyone would like to collaborate on a YouTube channel or other way of sharing information. Try out the software if there s time (Balsamiq and Invision are both online).

4 Design PRocess and Tools The first generation was about computing for techies often using a waterfall approach in design and production Now we are designing for everyone and products must be tested using a more agile, user-centered approach

5 Rapid growth of use of tablets in a short period of time

6 Rapid growth of mobile devices to access the web across a broad spectrum of users

7 Android project Many companies are starting with mobile first

8 Place your screenshot here iphone project More users are accessing the internet with mobile devices

9 Place your screenshot here Tablet project Though tablets and other screens sizes are also popular

10 Place your screenshot here Desktop project But we can t forget about desktop and laptop computers

11 Designing for Many Devices

12 Typical Design PRocess research and discovery creative brief low-fidelity wireframes high-fidelity wireframes This includes rapid prototyping, testing, iterating with multiple feedback streams. Example of research and wireframes for Hiking App Example of interactive mockup for Hiking App. interactive mockups

13 What has changed? Multiple platforms Rapid prototyping Agile development User-centered design Design patterns Responsive design Cloud-based Inexpensive Other aspects you see?

14 Common Tool Features Easy to learn and format Easy to share and comment Fast iterations You can design for a variety of devices Simulates flow and interactions Simulates animations Easy to test on multiple devices

15 What to use

16 Which tools stand out Wireframes and Mockups Balsamiq 3 (Cloud-based, $89) Omnigraffle (desktop, $99) Sketch3 by Bohemian (desktop, $99) Prototyping Interaction InVision (Cloud-based, 1 free) Pixate (Cloud-based, $22/month) Flinto (Cloud-based, $20/month) Proto.io (Cloud-based, $24/month) Axure (software, free for teachers/students)

17 Balsamiq Mockups 3 (beta) Cloud-based software for fast wireframing that you can share with your team and get comments

18 Sketch 3 Vector-based programs with multiple artboards, colors, layers that you can export as individual graphics to import into a prototyping program. Can export with low- and highres graphics for multiple displays.

19 Invision An easy-to-use prototyping tool that allows you to put hotspots on graphics to replicate an app. You can share with individuals on your project team, who can then test, comment and edit.

20 PIXATE Pixate is another easy-to-use prototyping tool that allows designers to create complex animations and interactions and view them directly on the device. You can also share with individuals on your project team, who can then test and comment.

21 Conclusions The tools used in modern design and production for interactive devices are changing rapidly. They are flexible, easy-to-use and can simulate interactions and allow team members to easily test and comment on iterations. There are many products competing for market share. Many of them are free for 30-day trial or free for educators and students.

22 Questions for You How do you teach trending processes and tools? (Hint: YouTube tutorials and the software s own help tutorials are very useful.) How do you find out about emerging software tools? How do you integrate them into your curriculum? What is the correct amount of teaching old vs. new practices? Foundational vs cutting-edge software? Would you be interested in sharing a YouTube Channel that has tutorials about these programs? If so, provide your address and manner of communication.

23 Thanks! Any questions for me? You can find me

24 Sources and Inspiration Designer s Toolkit: Prototyping Tools Prototyping Tools and Process Design Tools List of Current Tools UX Meetups AIGA panels Discussions with alumni and instructors

25 Sources and Inspiration Hiking App examples by students in the VMD User Experience Spring 2015 class: Arthur Koch, Zaire Paterson, Patty Phisutdamrong, Flor Rivas and Jennifer Tucker Balsamiq mockups: mybalsamiq.com/projects/hikingapp/grid Sketch 3 screens: screenshot of screens Invision interactive: invisionapp.com/share/wh32q39e3#/screens

26 Credits Special thanks to all the people who made and released these awesome resources for free: Presentation template by SlidesCarnival Photographs by Unsplash

27 Sketch 3 Screens