Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl

  • Published on
    27-Jan-2015

  • View
    108

  • Download
    5

DESCRIPTION

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!

Transcript

  • 1. Wireframing via the Browser Bootstrap & all that Awesomeness! Wireframing via the Browser#JD14NL

2. Wireframing via the Browser Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com WHOWHO IS THIS GUY? 3. Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHOWHO IS THIS GUY? Wireframing via the Browser 4. WHATSO WHATS 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. 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 thats what matters! 6. THE DIFFERENCEI AM CONFUSED Wireframing via the Browser Wireframing vs HTML Prototyping 7. THE DIFFERENCEWIREFRAMES Wireframing via the Browser 8. THE DIFFERENCEWIREFRAMES Wireframing via the Browser 9. THE DIFFERENCEWIREFRAMES Wireframing via the Browser 10. THE DIFFERENCEWIREFRAMES Wireframing via the Browser ... cheap & ugly ... yes, it is ugly ... but no, it's not cheap ... why? 11. THE DIFFERENCEWIREFRAMES Wireframing via the Browser Multiple Iterations ... version 1 ... version 2 ... version 3 ... WTF !?!? version 25 12. THE DIFFERENCEPROTOTYPES Wireframing via the Browser Prototype Wireframes enters the building thank you Elvis! 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. THE DIFFERENCEPROTOTYPES Wireframing via the Browser If a wireframe is worth a 1000 words, a prototype is worth a MILLION! 15. THE DIFFERENCEPROTOTYPES Wireframing via the Browser Easier Iteration You Design You Build You Test You Evaluate You Win! 16. HELPFULWWW.LAYOUTIT.COM Wireframing via the Browser www.layoutit.com Useful HTML CSS But no Joomla markup 17. Wireframing via the Browser Lets look at a wireframe using a Joomla template MY APPROACHBUILDING IN THE BROWSER 18. Wireframing via the Browser and multiple pages MY APPROACHBUILDING IN THE BROWSER 19. CODESIMPLE BOOTSTRAP MARKUP Wireframing via the Browser

asdfasd

asdfasd a a asdf a a asaa asd asdf

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. WERE DONE!OUR COMPLETED PROJECT Wireframing via the Browser 22. HELPGIVING US A HELPING HAND Wireframing via the Browser 23. WIN WINWHAT I USE AWESOME COMBINATION Wireframing via the Browser 24. DOH!A SMALL CAVEAT Wireframing via the Browser 25. DOH!A SMALL CAVEATOMG Wireframing via the Browser 26. QUESTIONS & ANSWERS QA Wireframing via the BrowserQUESTIONS?OR SHALL WE JUST GO TO THE BAR! 27. Wireframing via the Browser Website: www.joostrap.com www.fastnetwebdesign.co.uk Email: phil@joostrap.com Twitter: @philiplocke @joostrap PHILIP LOCKECONTACT DETAILS