SlideShare a Scribd company logo
Rapid Prototype
with Pencil Project
Pencil Project - http://pencil.evolus.vn
Design Process
1. Gather Information
2. Hypothesis about your users
a. Persona (optional) - Best, Good, Bad
3. Outline - user flow and site functionality
4. Prototype - mock functionality for testing
a. Lo-Fi - wire frames, basic user controls
b. Hi-Fi - color, typography, branding, etc.
5. Design Comp - Final representation of finished product
Prototype Guideline : Lo-Fi
No distractions
The goal is rapid iterations, let ideas flow and do not be
distracted by trivial details; Color, Typography, Graphics
Prototype Guideline : Lo-Fi
Stop, Test, Continue, Repeat
Don’t get hung up on a process or function. Make multiple
solutions and test it on your coworkers, friends, family.
Listen for reactions, feedback can be misleading. Example
“Hmm, what next” vs “I think this button should be bigger”.
Prototype Guideline : Hi-Fi
Graphics, Color, Typography… oh my!
Your basic layouts should be finished in lo-fi, move to hi-fi
for branding. Clients tend to get confused by lo-fi
prototypes and wireframes.
Pencil Project for Prototypes
The Good
● Free (Open bar dude!)
● Lots of templates
o Android, iOS, Desktop, Flowcharts
● Custom templates - make your own
● Multi Platform - Apple, Windows, Linux, Firefox
Extension
Pencil Project for Prototypes
The Bad
● Exporting templates
● Simple Features
● Best for lo-fi only
edward.meehan@wetumka.net
Edward Meehan

More Related Content

Similar to Rapid prototype demo

Building a SaaS App: From Paper to Prototype to Product.
Building a SaaS App: From Paper to Prototype to Product.Building a SaaS App: From Paper to Prototype to Product.
Building a SaaS App: From Paper to Prototype to Product.
Josh Rodriguez
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
Mark Billinghurst
 
Design & Presentation Workshop
Design & Presentation WorkshopDesign & Presentation Workshop
Design & Presentation Workshop
NUI Galway
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
Patrick McNeil
 
Prototyping Workshop
Prototyping WorkshopPrototyping Workshop
Prototyping Workshop
Tamara Pinos
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
Hitesh Mehta
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
 
Lecture 07 new1
Lecture 07 new1Lecture 07 new1
Lecture 07 new1
baraka170
 
UX design & redesign
UX design & redesignUX design & redesign
UX design & redesign
Shanshan Ma
 
Prototyping for tiny fingers
Prototyping for tiny fingersPrototyping for tiny fingers
Prototyping for tiny fingers
Julio Pari
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
Amir Khella
 
Prototype like a pro
Prototype like a proPrototype like a pro
Prototype like a pro
Alexander Anikin
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a pro
Amir Khella
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
Abdul Dibosh
 
Q7
Q7Q7
UX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus SofiaUX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus Sofia
Damjan Obal
 
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Joni Juup
 
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
Jason Hong
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
Think 360 Studio
 
Beyond Usability
Beyond UsabilityBeyond Usability
Beyond Usability
Christina Wodtke
 

Similar to Rapid prototype demo (20)

Building a SaaS App: From Paper to Prototype to Product.
Building a SaaS App: From Paper to Prototype to Product.Building a SaaS App: From Paper to Prototype to Product.
Building a SaaS App: From Paper to Prototype to Product.
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
 
Design & Presentation Workshop
Design & Presentation WorkshopDesign & Presentation Workshop
Design & Presentation Workshop
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
 
Prototyping Workshop
Prototyping WorkshopPrototyping Workshop
Prototyping Workshop
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Lecture 07 new1
Lecture 07 new1Lecture 07 new1
Lecture 07 new1
 
UX design & redesign
UX design & redesignUX design & redesign
UX design & redesign
 
Prototyping for tiny fingers
Prototyping for tiny fingersPrototyping for tiny fingers
Prototyping for tiny fingers
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
 
Prototype like a pro
Prototype like a proPrototype like a pro
Prototype like a pro
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a pro
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
 
Q7
Q7Q7
Q7
 
UX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus SofiaUX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus Sofia
 
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
 
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
Development and Evaluation of Emerging Design Patterns for Ubiquitous Computi...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Beyond Usability
Beyond UsabilityBeyond Usability
Beyond Usability
 

More from Edward Meehan

Remote working
Remote workingRemote working
Remote working
Edward Meehan
 
Comps into pages 102
Comps into pages 102Comps into pages 102
Comps into pages 102
Edward Meehan
 
CSS Animations & Transitions
CSS Animations & TransitionsCSS Animations & Transitions
CSS Animations & Transitions
Edward Meehan
 
Sketch - Refresh Hilo
Sketch - Refresh HiloSketch - Refresh Hilo
Sketch - Refresh Hilo
Edward Meehan
 
Comps into pages 101
Comps into pages 101Comps into pages 101
Comps into pages 101
Edward Meehan
 
Capistrano demo
Capistrano demoCapistrano demo
Capistrano demo
Edward Meehan
 
Refresh hilo 09/09/2014
Refresh hilo 09/09/2014Refresh hilo 09/09/2014
Refresh hilo 09/09/2014
Edward Meehan
 
Drupal - Content Types, Views = No Query Headaches
Drupal - Content Types, Views = No Query HeadachesDrupal - Content Types, Views = No Query Headaches
Drupal - Content Types, Views = No Query Headaches
Edward Meehan
 
Refresh hilo-08122014
Refresh hilo-08122014Refresh hilo-08122014
Refresh hilo-08122014
Edward Meehan
 
Jekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloJekyll demo - Refresh Hilo
Jekyll demo - Refresh Hilo
Edward Meehan
 

More from Edward Meehan (10)

Remote working
Remote workingRemote working
Remote working
 
Comps into pages 102
Comps into pages 102Comps into pages 102
Comps into pages 102
 
CSS Animations & Transitions
CSS Animations & TransitionsCSS Animations & Transitions
CSS Animations & Transitions
 
Sketch - Refresh Hilo
Sketch - Refresh HiloSketch - Refresh Hilo
Sketch - Refresh Hilo
 
Comps into pages 101
Comps into pages 101Comps into pages 101
Comps into pages 101
 
Capistrano demo
Capistrano demoCapistrano demo
Capistrano demo
 
Refresh hilo 09/09/2014
Refresh hilo 09/09/2014Refresh hilo 09/09/2014
Refresh hilo 09/09/2014
 
Drupal - Content Types, Views = No Query Headaches
Drupal - Content Types, Views = No Query HeadachesDrupal - Content Types, Views = No Query Headaches
Drupal - Content Types, Views = No Query Headaches
 
Refresh hilo-08122014
Refresh hilo-08122014Refresh hilo-08122014
Refresh hilo-08122014
 
Jekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloJekyll demo - Refresh Hilo
Jekyll demo - Refresh Hilo
 

Recently uploaded

GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 

Recently uploaded (20)

GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 

Rapid prototype demo

  • 1. Rapid Prototype with Pencil Project Pencil Project - http://pencil.evolus.vn
  • 2. Design Process 1. Gather Information 2. Hypothesis about your users a. Persona (optional) - Best, Good, Bad 3. Outline - user flow and site functionality 4. Prototype - mock functionality for testing a. Lo-Fi - wire frames, basic user controls b. Hi-Fi - color, typography, branding, etc. 5. Design Comp - Final representation of finished product
  • 3. Prototype Guideline : Lo-Fi No distractions The goal is rapid iterations, let ideas flow and do not be distracted by trivial details; Color, Typography, Graphics
  • 4. Prototype Guideline : Lo-Fi Stop, Test, Continue, Repeat Don’t get hung up on a process or function. Make multiple solutions and test it on your coworkers, friends, family. Listen for reactions, feedback can be misleading. Example “Hmm, what next” vs “I think this button should be bigger”.
  • 5. Prototype Guideline : Hi-Fi Graphics, Color, Typography… oh my! Your basic layouts should be finished in lo-fi, move to hi-fi for branding. Clients tend to get confused by lo-fi prototypes and wireframes.
  • 6. Pencil Project for Prototypes The Good ● Free (Open bar dude!) ● Lots of templates o Android, iOS, Desktop, Flowcharts ● Custom templates - make your own ● Multi Platform - Apple, Windows, Linux, Firefox Extension
  • 7. Pencil Project for Prototypes The Bad ● Exporting templates ● Simple Features ● Best for lo-fi only