SlideShare a Scribd company logo
1 of 7
Download to read offline
Start Full Screen
Organize, Communicate, and
Annotate HTML Prototypes


Wednesday, March 7, 2012

Hash Tag: #8SBlocks        Twitter @nathanAcurtis




                                  nathan@eightshapes.com
                                         @NathanACurtis
                                    Copyright 2012. EightShapes LLC.
From PDF Documents to HTML
                                            HTML Prototyping in Firefox

“Classical” UX Documents




                                            Firebug




                                                      Text Editor for HTML, CSS, & JS
         Copyright 2012. EightShapes LLC.                                          2
The Objective

 Compete with established
    CSS & JS toolkits
(We also use 960gs, JQuery, JQuery Mobile, Bootstrap, etc)




    Organize, Annotate, & Present
              HTML Prototypes
   Copyright 2012. EightShapes LLC.
Break Design Into Modular Parts




Modular
Component                      Loaded into Page Layouts
File Content
          Copyright 2012. EightShapes LLC.
Leave Full Screen and Explore




                                   Page Grids
                                   (Yes, Actual HTML Pages, Not Screenshots)
Copyright 2012. EightShapes LLC.                                               5
Annotate Your Design




Component Markers


                                            Page Notes

    Copyright 2012. EightShapes LLC.                     6
Start Full Screen
Organize, Communicate, and
Annotate HTML Prototypes


Wednesday, March 7, 2012

Hash Tag: #8SBlocks        Twitter @nathanAcurtis




                                  nathan@eightshapes.com
                                         @NathanACurtis
                                    Copyright 2012. EightShapes LLC.

More Related Content

More from UIEpreviews

Designing across devices with progressive enhancement - PREVIEW
Designing across devices with progressive enhancement - PREVIEWDesigning across devices with progressive enhancement - PREVIEW
Designing across devices with progressive enhancement - PREVIEWUIEpreviews
 
Recruiting the Right Users to Get Real Results
Recruiting the Right Users to Get Real ResultsRecruiting the Right Users to Get Real Results
Recruiting the Right Users to Get Real ResultsUIEpreviews
 
Design as a Business Tool: From Research to Experience Roadmaps
Design as a Business Tool: From Research to Experience RoadmapsDesign as a Business Tool: From Research to Experience Roadmaps
Design as a Business Tool: From Research to Experience RoadmapsUIEpreviews
 
Designing with Remote Teams - www.uievs.com
Designing with Remote Teams - www.uievs.comDesigning with Remote Teams - www.uievs.com
Designing with Remote Teams - www.uievs.comUIEpreviews
 
Hiring the best ux designers preview
Hiring the best ux designers previewHiring the best ux designers preview
Hiring the best ux designers previewUIEpreviews
 
Research and Design for the UX Team of One
Research and Design for the UX Team of OneResearch and Design for the UX Team of One
Research and Design for the UX Team of OneUIEpreviews
 
Controlling the Pace of UX with Content Strategy
Controlling the Pace of UX with Content StrategyControlling the Pace of UX with Content Strategy
Controlling the Pace of UX with Content StrategyUIEpreviews
 
Voice and tone preview
Voice and tone previewVoice and tone preview
Voice and tone previewUIEpreviews
 
Building Trust with Your Users through Messaging & Copy
Building Trust with Your Users through Messaging & CopyBuilding Trust with Your Users through Messaging & Copy
Building Trust with Your Users through Messaging & CopyUIEpreviews
 
Sketching preview
Sketching previewSketching preview
Sketching previewUIEpreviews
 
Organizing mobile web experiences - preview
Organizing mobile web experiences - previewOrganizing mobile web experiences - preview
Organizing mobile web experiences - previewUIEpreviews
 
Solutions for a_world _of_countless_devices
Solutions for a_world _of_countless_devicesSolutions for a_world _of_countless_devices
Solutions for a_world _of_countless_devicesUIEpreviews
 
Microcopy with Des Traynor
Microcopy with Des TraynorMicrocopy with Des Traynor
Microcopy with Des TraynorUIEpreviews
 
The Kano Model with Jared Spool
The Kano Model with Jared SpoolThe Kano Model with Jared Spool
The Kano Model with Jared SpoolUIEpreviews
 
The Kano Model with Jared M. Spool
The Kano Model with Jared M. SpoolThe Kano Model with Jared M. Spool
The Kano Model with Jared M. SpoolUIEpreviews
 
Mobile First Responsive Web Design
Mobile First Responsive Web DesignMobile First Responsive Web Design
Mobile First Responsive Web DesignUIEpreviews
 
Mapping the Experience
Mapping the ExperienceMapping the Experience
Mapping the ExperienceUIEpreviews
 
SharePoint and the User Experience
SharePoint and the User ExperienceSharePoint and the User Experience
SharePoint and the User ExperienceUIEpreviews
 
Ratings & Reviews, UIE Virtual Seminar with Erin Malone
Ratings & Reviews, UIE Virtual Seminar with Erin MaloneRatings & Reviews, UIE Virtual Seminar with Erin Malone
Ratings & Reviews, UIE Virtual Seminar with Erin MaloneUIEpreviews
 
7 things to do with a persona
7 things to do with a persona7 things to do with a persona
7 things to do with a personaUIEpreviews
 

More from UIEpreviews (20)

Designing across devices with progressive enhancement - PREVIEW
Designing across devices with progressive enhancement - PREVIEWDesigning across devices with progressive enhancement - PREVIEW
Designing across devices with progressive enhancement - PREVIEW
 
Recruiting the Right Users to Get Real Results
Recruiting the Right Users to Get Real ResultsRecruiting the Right Users to Get Real Results
Recruiting the Right Users to Get Real Results
 
Design as a Business Tool: From Research to Experience Roadmaps
Design as a Business Tool: From Research to Experience RoadmapsDesign as a Business Tool: From Research to Experience Roadmaps
Design as a Business Tool: From Research to Experience Roadmaps
 
Designing with Remote Teams - www.uievs.com
Designing with Remote Teams - www.uievs.comDesigning with Remote Teams - www.uievs.com
Designing with Remote Teams - www.uievs.com
 
Hiring the best ux designers preview
Hiring the best ux designers previewHiring the best ux designers preview
Hiring the best ux designers preview
 
Research and Design for the UX Team of One
Research and Design for the UX Team of OneResearch and Design for the UX Team of One
Research and Design for the UX Team of One
 
Controlling the Pace of UX with Content Strategy
Controlling the Pace of UX with Content StrategyControlling the Pace of UX with Content Strategy
Controlling the Pace of UX with Content Strategy
 
Voice and tone preview
Voice and tone previewVoice and tone preview
Voice and tone preview
 
Building Trust with Your Users through Messaging & Copy
Building Trust with Your Users through Messaging & CopyBuilding Trust with Your Users through Messaging & Copy
Building Trust with Your Users through Messaging & Copy
 
Sketching preview
Sketching previewSketching preview
Sketching preview
 
Organizing mobile web experiences - preview
Organizing mobile web experiences - previewOrganizing mobile web experiences - preview
Organizing mobile web experiences - preview
 
Solutions for a_world _of_countless_devices
Solutions for a_world _of_countless_devicesSolutions for a_world _of_countless_devices
Solutions for a_world _of_countless_devices
 
Microcopy with Des Traynor
Microcopy with Des TraynorMicrocopy with Des Traynor
Microcopy with Des Traynor
 
The Kano Model with Jared Spool
The Kano Model with Jared SpoolThe Kano Model with Jared Spool
The Kano Model with Jared Spool
 
The Kano Model with Jared M. Spool
The Kano Model with Jared M. SpoolThe Kano Model with Jared M. Spool
The Kano Model with Jared M. Spool
 
Mobile First Responsive Web Design
Mobile First Responsive Web DesignMobile First Responsive Web Design
Mobile First Responsive Web Design
 
Mapping the Experience
Mapping the ExperienceMapping the Experience
Mapping the Experience
 
SharePoint and the User Experience
SharePoint and the User ExperienceSharePoint and the User Experience
SharePoint and the User Experience
 
Ratings & Reviews, UIE Virtual Seminar with Erin Malone
Ratings & Reviews, UIE Virtual Seminar with Erin MaloneRatings & Reviews, UIE Virtual Seminar with Erin Malone
Ratings & Reviews, UIE Virtual Seminar with Erin Malone
 
7 things to do with a persona
7 things to do with a persona7 things to do with a persona
7 things to do with a persona
 

Recently uploaded

Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 

Recently uploaded (20)

Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 

From PDFs to HTML Prototypes: Creating a System That Works

  • 1. Start Full Screen Organize, Communicate, and Annotate HTML Prototypes Wednesday, March 7, 2012 Hash Tag: #8SBlocks Twitter @nathanAcurtis nathan@eightshapes.com @NathanACurtis Copyright 2012. EightShapes LLC.
  • 2. From PDF Documents to HTML HTML Prototyping in Firefox “Classical” UX Documents Firebug Text Editor for HTML, CSS, & JS Copyright 2012. EightShapes LLC. 2
  • 3. The Objective Compete with established CSS & JS toolkits (We also use 960gs, JQuery, JQuery Mobile, Bootstrap, etc) Organize, Annotate, & Present HTML Prototypes Copyright 2012. EightShapes LLC.
  • 4. Break Design Into Modular Parts Modular Component Loaded into Page Layouts File Content Copyright 2012. EightShapes LLC.
  • 5. Leave Full Screen and Explore Page Grids (Yes, Actual HTML Pages, Not Screenshots) Copyright 2012. EightShapes LLC. 5
  • 6. Annotate Your Design Component Markers Page Notes Copyright 2012. EightShapes LLC. 6
  • 7. Start Full Screen Organize, Communicate, and Annotate HTML Prototypes Wednesday, March 7, 2012 Hash Tag: #8SBlocks Twitter @nathanAcurtis nathan@eightshapes.com @NathanACurtis Copyright 2012. EightShapes LLC.