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!
Citation preview
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: [email protected] Twitter:
@philiplocke @joostrap PHILIP LOCKECONTACT DETAILS
