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!

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 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. 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. 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
enter’s 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
Let’s 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
<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. 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. WE’RE 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 CAVEAT…OMG
Wireframing via
the Browser

26. QUESTIONS & ANSWERS
Q…A
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