Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Prototyping is the Future: The Decline of the Static Mockup, The Rise of In-Browser Wireframes

No description
by

Andrea Beithon

on 19 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Prototyping is the Future: The Decline of the Static Mockup, The Rise of In-Browser Wireframes

Prototyping is the Future
The Delcine of the Static Mockup, The Rise of
In-Browser Wireframes
Andrea Beithon
Why do we care?
Because it changes everything
for the better
Why do we care
Time, Money, Scope, Communication, Scalability...
right now?
Winning!
Definitions
Mockup
Graphic Design
Comp
Wireframe
Static
Dynamic
Prototype
Simple Linking
Things get interesting!
Paper
Whiteboards
PDF

Cacoo
Balsamiq
Mockingbird
Communication
Visual > Verbal
Earlier testing = more testing
Double win when coupled with graphic design
Time
Partials, partials, partials
Less need to document everything
Again, double win when coupled with graphic design
Lead Architect and Interface Designer
Dust your shoulders off, but don't get too overzealous!
Demo of Hadron
"What do I pay you for? I can do that!"
Validation
Drabacks and Issues
Confusion on what the prototype is
Giving feedback
Creativity
Demonstrate how to edit the prototype vs editing in Drupal
Remedy
Does not differ from static wireframe feedback. Same thing assessed.
Remedy
Remedy
Start on paper or whiteboard
Workflow
1. (Optional) Development of functional requirements list
2. Prioritization of functional requirements
3. User stories
4. Sitemap
5. Informal wireframe exercises with client participation
6. Prototype development and iterations based on client feedback
7. Development road map initiated by designer, with input from, revisions by and eventually ownership assumed by the principal developers on the project.
Obtaining signoff
Some written record of the stakeholder saying: "Yes, I agree we are going in the right direction and I understand the vision proposed thus far."
What about Drupal?
Drupal is a perfect candidate for prototyping exercises
Responsive themes: Zen, Omega, AdaptiveTheme
Making your own base theme to match markup
Existing Tools
Hadron
Protobots
Wirefy

What's Next?
Lowering barrier to entry
Style Tiles
Client feedback in visual format
Prototyping in Drupal?
Questions? Share Your Stories!
Articles:
http://www.eightshapes.com/blog/2012/08/16/wheres-my-new-prototype-8-tips-for-mitigating-html-prototyping-startup-costs/
* http://boxesandarrows.com/html-wireframes-and-prototypes-all-gain-and-no-pain/
* http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation
* http://uxmag.com/articles/ditch-traditional-wireframes
* http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
* http://www.uxforthemasses.com/rapid-prototyping/
* http://fuseinteractive.ca/blog/better-responsive-design-workflow-drupal
* http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/
References
Github Repos:
* http://github.com/jhedstrom/hadron
* https://github.com/Lullabot/protobots
Photo credits:
* Slide 9 by SharpX on DeviantArt http://sharpx.deviantart.com/art/Mobile-Web-Design-345440762
* Slide 11 by eclipsekiller on DeviantArt http://eclipsekiller.deviantart.com/art/Wireframe-Site-para-camara-87248269

Andrea Beithon
@andreathegiant
Scope
Dream big, beautiful, possible dreams
Scope wrangling made easier
Content first!
Full transcript