SlideShare a Scribd company logo

Introduction about wireframing and responsive webdesign

•
•
I
ipmindthegap

This document discusses wireframing and responsive web design. It introduces wireframing as a way to plan and test the structure, content, functionality, and user experience of a website. Wireframing helps with communication and reduces costs. The document recommends starting with sketches and low-fidelity wireframes before creating high-fidelity versions. It also suggests using CSS frameworks to create interactive wireframes and prototypes that are responsive across different screen sizes. Tools mentioned include paper, Axure, Balsamiq, Pencil, LucidChart, and CSS frameworks like Foundation and Bootstrap. The document stresses keeping wireframes simple while effectively demonstrating the responsive design.

1 of 62
Introduction about Wireframing and responsive design Davy De Winne davy.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 user want this?
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 • $$$  Money!
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 colors – Add comments – Use predefined components – Start with the bigger blocks – Keep an eye on white space
Which tools can you use • Paper! • Different software – Axure – Balsamiq – Pencil – LucidChart (online) – Fireworks – … – …
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 – Balsamiq – Pencil – LucidChart (online) – Fireworks • CSS frameworks!
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/
although… Keep it stupid simple
By the way…
Interactive wireframe or better: Prototype
What about mobile apps?
Prototyping mobile apps: phonegap.com
Questions?

More Related Content

Introduction about wireframing and responsive webdesign

Editor's Notes

  1. University college in Belgium–Flanders, a member of the Catholic University of Leuven (K.U.Leuven) association, Flanders’ largest and oldest university.
  2. TeacherWebtechnologyWebdesignProgrammingI feel not developer neither designer
  3. 2000! Different beers… yes really 2000
  4. 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
  5. 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
  6. Brazil, Russia, India, ChinaMexico Indonesia, South Korea, Turkey
  7. A lot of misconceptionsYou can give real feedbackPointing it instead of explaining
  8. Mobile first concept.Very very good to make your information architecture. Selecting the most important contentDesigning in this way is not easy.