Introduction about Wireframingand responsive designDavy De Winnedavy.dewinne@kahosl.be
Hi! I’m Davy
KAHO’s Technology campus
Ghent
Belgian Chocolates
Belgian beer, beer and beer
KAHO’s brewery
The problem
What is responsive webdesign?
May 25, 2010
Example responsive webdesign
Example responsive webdesign
Example responsive webdesign
Example responsive webdesign
Same content & website
Different layout & user experience
User experience
Why responsive webdesign?
Some things change our behaviour & environment
Some things change our behaviour & environment
Some things change our behaviour & environment
Some things change our behaviour & environment
Phonecount.com
Example: Reading newspaper in the train
Example: Reading newspaper in the train
Bookshop, will this still exist in 20 years
Who is connected?
Emerging markets
He loves responsive webdesign
Other possibilities
Don’t bother your visitors
Other problems• Development costs• Compatibility devices•   Application?•   Same content?•   How to access?•   Does the us...
It needs to work on every device, also future devices
It’s doesn’t need to look exactly the same
What about wireframing?
What about wireframing?
Why wireframing•   Communication•   Strategy / structure / content•   Functionality testing•   Behaviour testing• $$$  Mo...
Communication with client and team
Low-fidelity wireframe
High-fidelity wireframe
Ok… but how to start?
Responsive is fluid
Responsive is fluid
Responsive works with % (em)
Break it with Media queries (CSS3)
How to start wireframing
How to start wireframing• Sketches• next > Low-fidelity• (next > High-fidelity)• Hints:   – Use a grid   – “Don’t” use col...
Which tools can you use• Paper!• Different software   –   Axure   –   Balsamiq   –   Pencil   –   LucidChart (online)   – ...
Remember the problem?
Wireframes are static
How to make it responsive?
Not my way, I keep my 1024px
Not my way, I keep my 1024px
We need interactive “wireframes”!
How to make an interactive “wireframe”       • Paper…       • Most of previous software          –   Axure          –   Ba...
CSS frameworks• Great for rapid wireframing    –   UI elements    –   Navigatione    –   Basic typography    –   Responsiv...
although… Keep it stupid simple
By the way…
Interactive wireframe or better: Prototype
What about mobile apps?
Prototyping mobile apps: phonegap.com
Questions?
Upcoming SlideShare
Loading in...5
×

Introduction about wireframing and responsive webdesign

663

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
663
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • University college in Belgium–Flanders, a member of the Catholic University of Leuven (K.U.Leuven) association, Flanders’ largest and oldest university.
  • TeacherWebtechnologyWebdesignProgrammingI feel not developer neither designer
  • 2000! Different beers… yes really 2000
  • What techniques can I use to wireframe sites with responsive/fluid layout… You can’t really make a wireframe for something like that2 point in this sentence… : ResponsiveWireframesI will go deeper on these
  • why what who where will the user visit your siteOr use your application.All these has influence on the behaviour of the user. How will he visit your website
  • Brazil, Russia, India, ChinaMexico Indonesia, South Korea, Turkey
  • A lot of misconceptionsYou can give real feedbackPointing it instead of explaining
  • Mobile first concept.Very very good to make your information architecture. Selecting the most important contentDesigning in this way is not easy.
  • Introduction about wireframing and responsive webdesign

    1. 1. Introduction about Wireframingand responsive designDavy De Winnedavy.dewinne@kahosl.be
    2. 2. Hi! I’m Davy
    3. 3. KAHO’s Technology campus
    4. 4. Ghent
    5. 5. Belgian Chocolates
    6. 6. Belgian beer, beer and beer
    7. 7. KAHO’s brewery
    8. 8. The problem
    9. 9. What is responsive webdesign?
    10. 10. May 25, 2010
    11. 11. Example responsive webdesign
    12. 12. Example responsive webdesign
    13. 13. Example responsive webdesign
    14. 14. Example responsive webdesign
    15. 15. Same content & website
    16. 16. Different layout & user experience
    17. 17. User experience
    18. 18. Why responsive webdesign?
    19. 19. Some things change our behaviour & environment
    20. 20. Some things change our behaviour & environment
    21. 21. Some things change our behaviour & environment
    22. 22. Some things change our behaviour & environment
    23. 23. Phonecount.com
    24. 24. Example: Reading newspaper in the train
    25. 25. Example: Reading newspaper in the train
    26. 26. Bookshop, will this still exist in 20 years
    27. 27. Who is connected?
    28. 28. Emerging markets
    29. 29. He loves responsive webdesign
    30. 30. Other possibilities
    31. 31. Don’t bother your visitors
    32. 32. Other problems• Development costs• Compatibility devices• Application?• Same content?• How to access?• Does the user want this?
    33. 33. It needs to work on every device, also future devices
    34. 34. It’s doesn’t need to look exactly the same
    35. 35. What about wireframing?
    36. 36. What about wireframing?
    37. 37. Why wireframing• Communication• Strategy / structure / content• Functionality testing• Behaviour testing• $$$  Money!
    38. 38. Communication with client and team
    39. 39. Low-fidelity wireframe
    40. 40. High-fidelity wireframe
    41. 41. Ok… but how to start?
    42. 42. Responsive is fluid
    43. 43. Responsive is fluid
    44. 44. Responsive works with % (em)
    45. 45. Break it with Media queries (CSS3)
    46. 46. How to start wireframing
    47. 47. How to start wireframing• Sketches• next > Low-fidelity• (next > High-fidelity)• Hints: – Use a grid – “Don’t” use colors – Add comments – Use predefined components – Start with the bigger blocks – Keep an eye on white space
    48. 48. Which tools can you use• Paper!• Different software – Axure – Balsamiq – Pencil – LucidChart (online) – Fireworks – … – …
    49. 49. Remember the problem?
    50. 50. Wireframes are static
    51. 51. How to make it responsive?
    52. 52. Not my way, I keep my 1024px
    53. 53. Not my way, I keep my 1024px
    54. 54. We need interactive “wireframes”!
    55. 55. How to make an interactive “wireframe” • Paper… • Most of previous software – Axure – Balsamiq – Pencil – LucidChart (online) – Fireworks • CSS frameworks!
    56. 56. CSS frameworks• Great for rapid wireframing – UI elements – Navigatione – Basic typography – Responsive! – …• My favorites: – Foundation (http://foundation.zurb.com/) – Bootstrap (http://twitter.github.com/bootstrap/)• Useful http://placehold.it/
    57. 57. although… Keep it stupid simple
    58. 58. By the way…
    59. 59. Interactive wireframe or better: Prototype
    60. 60. What about mobile apps?
    61. 61. Prototyping mobile apps: phonegap.com
    62. 62. Questions?

    ×