Your SlideShare is downloading. ×
Wireframing /Prototyping with HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframing /Prototyping with HTML

29,507

Published on

Discover the tools you can use to wireframe and prototype with HTML

Discover the tools you can use to wireframe and prototype with HTML

Published in: Technology, Design
5 Comments
57 Likes
Statistics
Notes
No Downloads
Views
Total Views
29,507
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
182
Comments
5
Likes
57
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Wireframing /Prototyping with HTML @DeeSadler Adobe ACI, ACP, UGM and UX geek
  • 2. AGENDA Frameworks DemosWho i am? Wires Software @DeeSadler Types Adobe Usual Suspects Reflow, more 1. 2. 3. 4. 5.
  • 3. 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
  • 4. Clarity Clients Quick Adjustable Testing User Iterate Feedback 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.
  • 5. New Picture Paper Sketching Fidelity Low
  • 6. New Picture Can be low medium or high Fidelity Annotated
  • 7. New Picture Can use darker shades to designate importance Fidelity Medium
  • 8. New Picture Some color added Fidelity High
  • 9. Attachment Clients and team Testing Difficulty Factor Not Resposnive Flexibility Look Real But 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.
  • 10. Outline Simple Surprises Difficulty Factor Will it work Already know Testing Already clickable HTML Why 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.
  • 11. In Browser Adobe Muse Adobe Reflow Adobe Edge Code Where to start? Dreamweaver Frameworks Axure Sketch or Fireworks Divshot TONS MORE!
  • 12. HTML Wireframes/Prototypes
  • 13. - 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
  • 14. Responsive, base style sheet IE7 support and built on Normalizer.css http://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 libraries Test in device. Publish to HTML proto.io Options Tons-o-options
  • 15. Great templates for as easy start! http://www.bootstraptor.com/ and https://wrapbootstrap.com/ and http://bootswatch.com/ JS, CSS and Fonts Easily 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 Options Tons-o-options
  • 16. 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
  • 17. New Picture • Working in the browser • Simple to use Divshot Features
  • 18. Edge Reflow Responsive 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
  • 19. Adobe Fireworks CS6 Pages, Master Pages Export to Standards-based CSS InDesign DPS Export, XML, Styles mapped to HTML and HTML export More Adobe
  • 20. New Picture Mediaqueri.es Inspiration?
  • 21. New Picture Don’t forget Android XCode
  • 22. Lets take a closer look
  • 23. Demos ?
  • 24. QUESTIONS ?
  • 25. FACEBOOK Facebook.com/deesadler.com TWITTER Twitter.com/deesadler.com CONTACT dee@d2wc.com www.d2wc.com www.aboxofpixels.com SKYPE macwediva CONTACT US Get in touch
  • 26. THANKS

×