• Home

  • Technology

  • From PDFs to HTML Prototypes: Creating a System That Works
7
Copyright 2012. EightShapes LLC. Start Full Screen Organize, Communicate, and Annotate HTML Prototypes Wednesday, March 7, 2012 [email protected] @NathanACurtis Hash Tag: #8SBlocks Twitter @nathanAcurtis

From PDFs to HTML Prototypes: Creating a System That Works

Tags:

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

Start Full ScreenOrganize, Communicate, and Annotate HTML Prototypes

Wednesday, March 7, 2012

[email protected]@NathanACurtis

Hash Tag: #8SBlocks Twitter @nathanAcurtis

Page 2: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

From PDF Documents to HTML

2

“Classical” UX Documents

HTML Prototyping in Firefox

Firebug

Text Editor for HTML, CSS, & JS

Page 3: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

The Objective

Organize, Annotate, & Present

HTML Prototypes

Compete with established CSS & JS toolkits

(We also use 960gs, JQuery, JQuery Mobile, Bootstrap, etc)

Page 4: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

Break Design Into Modular Parts

ModularComponentFile Content

Loaded into Page Layouts

Page 5: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

Leave Full Screen and Explore

5

Page Grids(Yes, Actual HTML Pages, Not Screenshots)

Page 6: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

Annotate Your Design

6

Component Markers

Page Notes

Page 7: From PDFs to HTML Prototypes: Creating a System That Works

Copyright 2012. EightShapes LLC.

Start Full ScreenOrganize, Communicate, and Annotate HTML Prototypes

Wednesday, March 7, 2012

[email protected]@NathanACurtis

Hash Tag: #8SBlocks Twitter @nathanAcurtis


Creating Tables in HTML

Creating Tables in HTML

Documents
Creating Medical Prototypes from MRI data

Creating Medical Prototypes from MRI data

Documents
The S3D-UI Designer Creating User Interface Prototypes for 3D … · 2016-12-13 · The S3D-UI Designer Creating User Interface Prototypes for 3D Displays Nora Broy 1 ;2, Verena Lindner

The S3D-UI Designer Creating User Interface Prototypes for 3D … · 2016-12-13 · The S3D-UI Designer Creating User Interface Prototypes for 3D Displays Nora Broy 1 ;2, Verena Lindner

Documents
Creating a Web Page Using HTML, XHTML, and CSS: The … 6/Do NOT touch/html/htm… · Creating a Web Page Using HTML, XHTML, and CSS Module 6 ... Creating a Web Page Using HTML, XHTML,

Creating a Web Page Using HTML, XHTML, and CSS: The … 6/Do NOT touch/html/htm… · Creating a Web Page Using HTML, XHTML, and CSS Module 6 ... Creating a Web Page Using HTML, XHTML,

Documents
New Perspectives on Creating Web Pages with HTML

New Perspectives on Creating Web Pages with HTML

Documents
Creating Works-like Prototypes of Mechanical Objectsgeometry.cs.ucl.ac.uk/projects/2014/works-like/... · Creating Works-like Prototypes of Mechanical Objects Bongjin Koo1 Wilmot

Creating Works-like Prototypes of Mechanical Objectsgeometry.cs.ucl.ac.uk/projects/2014/works-like/... · Creating Works-like Prototypes of Mechanical Objects Bongjin Koo1 Wilmot

Documents
Creating Web Sites with HTML and CSS

Creating Web Sites with HTML and CSS

Spiritual
From PDFs to HTML Prototypes

From PDFs to HTML Prototypes

Technology
The S3D-UI Designer Creating User Interface Prototypes for ...€¦ · The S3D-UI Designer Creating User Interface Prototypes for 3D Displays Nora Broy 1 ;2, Verena Lindner 1, Florian

The S3D-UI Designer Creating User Interface Prototypes for ...€¦ · The S3D-UI Designer Creating User Interface Prototypes for 3D Displays Nora Broy 1 ;2, Verena Lindner 1, Florian

Documents
Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: – Standard

Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: – Standard

Documents
The S3D-UI Designer Creating User Interface Prototypes for ... · PDF fileThe S3D-UI Designer Creating User Interface Prototypes for 3D Displays ... Our contribution is threefold

The S3D-UI Designer Creating User Interface Prototypes for ... · PDF fileThe S3D-UI Designer Creating User Interface Prototypes for 3D Displays ... Our contribution is threefold

Documents
Creating Forms in HTML

Creating Forms in HTML

Documents
PowerShell Creating HTML Reports In

PowerShell Creating HTML Reports In

Documents
Creating a Website Using CSS€¦ · CREATING A WEBSITE USING CSS ... HTML –Hypertext Markup Language CSS –Cascading Style Sheet. HTML VS. CSS HTML is used to define the structure

Creating a Website Using CSS€¦ · CREATING A WEBSITE USING CSS ... HTML –Hypertext Markup Language CSS –Cascading Style Sheet. HTML VS. CSS HTML is used to define the structure

Documents
Creating html blocks on oracle

Creating html blocks on oracle

Education
Creating Effective HTML Email Campaigns - Listrakmedia.listrak.com/university/videos/HTML-Design/HTML-Email-Camp… · Creating Effective HTML Email Campaigns This event is being

Creating Effective HTML Email Campaigns - Listrakmedia.listrak.com/university/videos/HTML-Design/HTML-Email-Camp… · Creating Effective HTML Email Campaigns This event is being

Documents
Creating a Web Page HTML, FrontPage, Word, Composer

Creating a Web Page HTML, FrontPage, Word, Composer

Documents
03 Creating Low Medium Fidelity Prototypes

03 Creating Low Medium Fidelity Prototypes

Documents
CREATING AND PROCESSING HTML FORMS

CREATING AND PROCESSING HTML FORMS

Documents
Creating Lego Prototypes For K 5 Using Functional Modeling › creating-lego-prototypes-for-k-5-using... · construction. The tool is based o n the extensive research in the engineering

Creating Lego Prototypes For K 5 Using Functional Modeling › creating-lego-prototypes-for-k-5-using... · construction. The tool is based o n the extensive research in the engineering

Documents
HTML 5 Tutorial: Creating a Hangman Game

HTML 5 Tutorial: Creating a Hangman Game

Documents
Creating Web Forms in HTML

Creating Web Forms in HTML

Documents
Creating HTML Help with Microsoft's HTML Help Workshop · Creating HTML Help with Microsoft's HTML Help Workshop ... CREATING AN HTML HELP PROJECT WITH HHW ... Microsoft provides

Creating HTML Help with Microsoft's HTML Help Workshop · Creating HTML Help with Microsoft's HTML Help Workshop ... CREATING AN HTML HELP PROJECT WITH HHW ... Microsoft provides

Documents
Creating WebPages using HTML

Creating WebPages using HTML

Education
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page

HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page

Documents
A NEW TOOLBOX · vs. Prototypes. HTML Wireframes Twitter Bootstrap Hand-rolled HTML Twitter Bootstrap Custom RAILS framework Foundation Yay! Style Tiles, Element Collages Concept

A NEW TOOLBOX · vs. Prototypes. HTML Wireframes Twitter Bootstrap Hand-rolled HTML Twitter Bootstrap Custom RAILS framework Foundation Yay! Style Tiles, Element Collages Concept

Documents
Creating a page in HTML

Creating a page in HTML

Education
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit A Creating an HTML Document

HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit A Creating an HTML Document

Documents
Stereolithography Technology for Creating Solid Prototypes

Stereolithography Technology for Creating Solid Prototypes

Documents
Creating Forms With HTML

Creating Forms With HTML

Documents