prototyping in bootstrap and less

1. Prototyping !
with Bootstrap & Less
Ivan Potančok"
CEO of vibration.sk

2. Prototyping with Bootstrap & Less
1. Design process
2. Framework
3. Less
4. Case studies

3. Voting
1. Designer
2. Web designer
3. UX designer

4. Design process in 2011

5. Design process in 2013

6. 3. Prototype - Bootstrap & Less
Conditions"
"
1. knowledge of HTML + CSS
2. learn framework markup
3. learn Less for faster styling

7. from sketch to interactive prototype

8. from sketch to interactive prototype
1. Not pretty, but works
2. Testable
3. Static with fake data
4. One codebase for all devices
5. Don’t reinveting the wheels - !
use patterns

9. Bootstrap & Less - Advantages
1. Clickable prototype
2. Early state
3. Open source
4. Reuse of code in next development
5. Client can imagine how it will works
6. Responsive, Bootstrap 3 - mobile first
7. Design patterns
8. Glyphicons

10. Why Less?
1. Bootstrap is compiled from Less
2. Less is faster than Sass
3. Variables
4. Mixins
5. Functions
6. Operations

11. Example of code – three columns
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Content</p>
<p><a class="btn btn-primary" href="#">View details
&raquo;</a></p>
</div>

12. Case study 1
Administration area for eshop system
No photoshop, no axure, just sketches

13. Case study 1

14. Case study 1

15. Case study 1

16. Case study 2
First page in Photoshop
Everything else in Bootstrap and Less
Web application for social driving

17. Case study 2

18. Case study 3
Just Bootstrap and Less
Web application for e-learning
YII bootstrap extension – generate CRUD in
Bootstrap

19. Case study 3
This
generate our
backend
programmer

20. Case study 4
Design in Photoshop
WordPress themes on Themeforest
Bootstrap & Less as core for templates

22. GUI for non coders
h"ps://jetstrap.com
h"p://www.layou5t.com/
h"p://www.divshot.com/

23. What we’ve learned
It is not for everyone "
designers without knowledge to code project
managers can’t change prototype
Better for client"
can open test URL on his own device
Faster
it looks like web
reuse prototype code in development
Not for mobile apps"

24. Thank you
www.vibration.sk
@ivusko
Let’s try it …"