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. Which tools can you use
• Paper!
• Different software
– Axure
– Balsamiq
– Pencil
– LucidChart (online)
– Fireworks
– …
– …
55. How to make an interactive “wireframe”
• Paper…
• Most of previous software
– Axure
– Balsamiq
– Pencil
– LucidChart (online)
– Fireworks
• CSS frameworks!
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/
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.
