potancok prototyping-with-bootstrap-less-ver2
DESCRIPTION
prototyping in bootstrap and lessTRANSCRIPT
Prototyping !with Bootstrap & Less
Ivan Potančok"CEO of vibration.sk
Prototyping with Bootstrap & Less
1. Design process 2. Framework 3. Less 4. Case studies
Voting
1. Designer 2. Web designer 3. UX designer
Design process in 2011
Design process in 2013
3. Prototype - Bootstrap & Less
Conditions""1. knowledge of HTML + CSS 2. learn framework markup 3. learn Less for faster styling
from sketch to interactive prototype
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
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
Why Less?
1. Bootstrap is compiled from Less 2. Less is faster than Sass
3. Variables 4. Mixins 5. Functions 6. Operations
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 »</a></p> </div>
Case study 1
Administration area for eshop system No photoshop, no axure, just sketches
Case study 1
Case study 1
Case study 1
Case study 2
First page in Photoshop
Everything else in Bootstrap and Less
Web application for social driving
Case study 2
Case study 3
Just Bootstrap and Less Web application for e-learning
YII bootstrap extension – generate CRUD in Bootstrap
Case study 3 This generate our backend programmer
Case study 4
Design in Photoshop WordPress themes on Themeforest
Bootstrap & Less as core for templates
GUI for non coders
h"ps://jetstrap.com
h"p://www.layou5t.com/
h"p://www.divshot.com/
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"
Thank you
www.vibration.sk @ivusko
Let’s try it …"