Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl

1,563 views
1,398 views

Published on

Using a Joostrap template, Philip will be explaining & demoing how you wire frame a website right in your browser and why it will save you load's of time.

There are no fancy plugins here! This is wire framing for your client, built directly in your browser & saving you untold hours messing around in other software.

It is so hard sometimes, trying to get across to a client with a few drawings how the functionality of something could work. Wire framing directly in the browser gives your client a working wireframe/prototype where they can interact with links, pages & concepts. Not only that, but after client approval, you just have to style your working wireframe/prototype or switch to the template that is using the same module positions... It's a win win situation!

Published in: Technology

Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl

  1. 1. Wireframing via the Browser Bootstrap & all that Awesomeness! Wireframing via the Browser#JD14NL
  2. 2. Wireframing via the Browser Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com WHOWHO IS THIS GUY?
  3. 3. Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHOWHO IS THIS GUY? Wireframing via the Browser
  4. 4. WHATSO WHAT’S THIS SESSION ABOUT? Wireframing via the Browser 1. Why We Wireframe 2. Why To Prototype 3. How To Prototype 4. Process & Implementation 5. The Modern Process
  5. 5. DISCLAIMERI DID IT MY WAY… Wireframing via the Browser May not work for you all or some of your clients… But hey, it works for me …and that’s what matters!
  6. 6. THE DIFFERENCEI AM CONFUSED Wireframing via the Browser Wireframing vs HTML Prototyping
  7. 7. THE DIFFERENCEWIREFRAMES Wireframing via the Browser
  8. 8. THE DIFFERENCEWIREFRAMES Wireframing via the Browser
  9. 9. THE DIFFERENCEWIREFRAMES Wireframing via the Browser
  10. 10. THE DIFFERENCEWIREFRAMES Wireframing via the Browser ... cheap & ugly ... yes, it is ugly ... but no, it's not cheap ... why?
  11. 11. THE DIFFERENCEWIREFRAMES Wireframing via the Browser Multiple Iterations ... version 1 ... version 2 ... version 3 ... WTF !?!? … version 25
  12. 12. THE DIFFERENCEPROTOTYPES Wireframing via the Browser Prototype Wireframes enter’s the building … thank you Elvis!
  13. 13. THE DIFFERENCEPROTOTYPES Wireframing via the Browser … Prototypes are interactive … Prototypes force you to discover & solve problems early on in the project … Prototypes are more representative of the final product … Forces you to deal with reality!
  14. 14. THE DIFFERENCEPROTOTYPES Wireframing via the Browser “If a wireframe is worth a 1000 words, a prototype is worth a MILLION!”
  15. 15. THE DIFFERENCEPROTOTYPES Wireframing via the Browser Easier Iteration … You Design … You Build … You Test … You Evaluate … You Win!
  16. 16. HELPFULWWW.LAYOUTIT.COM Wireframing via the Browser www.layoutit.com … Useful … HTML … CSS But no Joomla markup
  17. 17. Wireframing via the Browser Let’s look at a wireframe using a Joomla template MY APPROACHBUILDING IN THE BROWSER
  18. 18. Wireframing via the Browser …and multiple pages MY APPROACHBUILDING IN THE BROWSER
  19. 19. CODESIMPLE BOOTSTRAP MARKUP Wireframing via the Browser <div class=“row"> <div class="col-md-4 col-sm-4”> <div class="box1 height150 w-photo" data-description="Featured Image”></div> <p class=“black">asdfasd</p> <p class="gray">asdfasd a a asdf a a asaa asd asdf</p> </div> … … </div>
  20. 20. Wireframing via the Browser .box1 .box2 .box3 .gray .black .height50 .height75 .height100 .height150 .height200 .height300 .height400 .height500 .height600 .w-video .w-photo .w-slider data-description="Featured Image" CODESIMPLE CSS CLASSES
  21. 21. WE’RE DONE!OUR COMPLETED PROJECT Wireframing via the Browser
  22. 22. HELPGIVING US A HELPING HAND Wireframing via the Browser
  23. 23. WIN WINWHAT I USE AWESOME COMBINATION Wireframing via the Browser
  24. 24. DOH!A SMALL CAVEAT Wireframing via the Browser
  25. 25. DOH!A SMALL CAVEAT…OMG Wireframing via the Browser
  26. 26. QUESTIONS & ANSWERS Q…A Wireframing via the BrowserQUESTIONS?OR SHALL WE JUST GO TO THE BAR!
  27. 27. Wireframing via the Browser Website: www.joostrap.com www.fastnetwebdesign.co.uk Email: phil@joostrap.com Twitter: @philiplocke @joostrap PHILIP LOCKECONTACT DETAILS

×