Potancok prototyping-with-bootstrap-less-ver2
Upcoming SlideShare
Loading in...5
×
 

Potancok prototyping-with-bootstrap-less-ver2

on

  • 766 views

prototyping in bootstrap and less

prototyping in bootstrap and less

Statistics

Views

Total Views
766
Views on SlideShare
639
Embed Views
127

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 127

http://blog.vibration.sk 125
http://cloud.feedly.com 1
http://new.vibration.sk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Potancok prototyping-with-bootstrap-less-ver2 Potancok prototyping-with-bootstrap-less-ver2 Presentation Transcript

  • 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 &raquo;</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 …"