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

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 

Recently uploaded (20)

Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 

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.