wireframing /prototyping with html
DESCRIPTION
Discover the tools you can use to wireframe and prototype with HTMLTRANSCRIPT
Wireframing /Prototyping with HTML
@DeeSadler Adobe ACI, ACP, UGM and UX geek
AGENDA
Frameworks DemosWho i am? Wires Software@DeeSadler Types Adobe Usual Suspects Reflow, more
1. 2. 3. 4. 5.
What are wireframes?
A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, function and more, that will go on your screen.
Button
ClarityClients
QuickAdjustable
TestingUser
IterateFeedback Loops
Why Wireframe?
With some levels of wireframes, clients
won’t get hung up on font choices or colors
and can concentrate on position and functionality.
Wireframes are meant to be throw away. If they
need to be altered, throw away or change quickly to make more
usable.
Testing can start with even cut out paper, but
different levels of wireframes are idea to
start testing with.
Wireframing allows you to make the changes needed before visual
design starts and make sure the developers are
ok with the flow and elements used.
New Picture
Paper Sketching
Fidelity
Low
New Picture
Can be lowmedium or high
Fidelity
Annotated
New Picture
Can use darker shades to designate
importance
Fidelity
Medium
New Picture
Some color added
Fidelity
High
AttachmentClients and team
TestingDifficulty Factor
Not Resposnive
Flexibility
Look RealBut aren’t
Downside of traditional Wireframes
While they are suppose to be throw away, at
times both designers and clients get attached and thus they lose the
intended purpose.
While you can test with paper wires, it quickly turns to the need for
interactivity.
Hard to test what a website would look like on mobile a tablet and the desktop with paper or a fixed-width static
image.
This one is the most dangerous for both
clients and the team. Once you move to a higher fidelity wire,
everyone starts to think of the wires as final.
OutlineSimple
SurprisesDifficulty Factor
Will it workAlready know
TestingAlready clickable
HTMLWhy
Like a web page without any CSS styling, this is
a great way to start working. Then you can style around the outline
with confidence.
If you can build it, you see interactions first hand, and it makes it easier to explain to devs, even if it isn’t
production code.
No guessing if it will work, or when testing, if something makes sense
or not.
In Browser Adobe Muse
AdobeReflow
Adobe EdgeCode
Where to start?
Dreamweaver Frameworks Axure Sketch orFireworks
Divshot TONSMORE!
HTML Wireframes/Prototypes
- template- start with outline- HTML < CSS- Typekit- Don’t try to make first comp responsive
In Browser
Tips- Not easy if you aren’t good at HTML- No clicking and dragging of elements- trying to do responsive can be super time consuming
Cons
Responsive, base style sheetIE7 support and built on
Normalizer.csshttp://matthewhartman.github.io/
base/
Responsive, Easy wireframing, Sharing, Mobile, Collaboration
http://www.justinmind.com/
Getwirefy.com
Grids, galleries, forms, media queries and the usual suspects
Pricy but easy to use, generates HTML and sharable files
Easy to put on mobile devices
CSS reset, solid grid system, form/print styles, plug-ins for buttons tabs
and sprites. Templates
http://www.blueprintcss.org
In Browser prototyping. UI librariesTest in device. Publish to HTML
proto.io
OptionsTons-o-options
Great templates for as easy start!http://www.bootstraptor.com/
and https://wrapbootstrap.com/and http://bootswatch.com/
JS, CSS and FontsEasily customizable
http://getbootstrap.com/
12 column flexible grid. Training for n00bs. SASS. JS Plug-ins already in
place. Customizable.
http://foundation.zurb.com/
Personal favorite
Bare bones, easy to use. Not bloated
http://susy.oddbird.net/
Responsive grids for Compas
Clickable prototypes. Mobile support. Export to HTML
https://www.easel.io
More OptionsTons-o-options
New Picture
Prototyping with
Bootstrap and beyond
We love our frameworks and tools just as much as you love yours. Divshot lets you build visually with most popular front-end frameworks including Bootstrap, Foundation, and Ratchet.
• Component libraries completely customized for each framework
• Output code that looks just like the framework documentation
• Work with the latest versions of your favorite frameworks
Divshot
Features
New Picture
• Working in the browser• Simple to use
Divshot
Features
Edge ReflowResponsive design
copy CSS or view in browser
Edge Animate
JS, CSS, HTML5
Edge Code/Brackets
Code Editor with extensions
Adobe Muse
For non-coders, but easy to wireframe with. HTML5
Edge Inspect
View your work on multiple devices
Adobe CC
Dreamweaver
Media Queries, Grids, templates
Adobe Fireworks CS6
Pages, Master Pages Export to Standards-based CSS
InDesign
DPS Export, XML, Styles mapped to HTML and HTML export
More Adobe
New Picture
Mediaqueri.esInspiration?
New Picture
Don’t forget
AndroidXCode
Lets take a closer look
Demos ?
QUESTIONS ?
FACEBOOKFacebook.com/deesadler.com
TWITTERTwitter.com/deesadler.com
www.d2wc.com
www.aboxofpixels.com
SKYPEmacwediva
CONTACT USGet in touch
THANKS