Introduction about wireframing and responsive webdesign

949 views
883 views

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
949
On SlideShare
0
From Embeds
0
Number of Embeds
233
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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?

    ×