Inkscape is fabulous free and open source software for creating vector graphics. But it's also a powerful too for creating web and user interface mockups. By creating a library of common design elements, and borrowing from elsewhere it's easy to bring ideas to life to share with colleagues and test with users. This session will introduce a series of SVG UI Widgets created to mockup Drupal sites, and demonstrate a basic workflow for pulling it all together. 2012.osdc.com.au/talks/inkscape-web-and-ui-mockups

1. INKSCAPE for web and UI mockups

2. @kattekrab
Donna Benjamin

3. What is
Inkscape?

4. GNU
General
Public
License

5. Scalable
Vector
Graphic

6. Open
Standard

7. Just
like

8. &
CSS3

9. But
who
cares?

10. I do.

13. So...
Mockups?

14. and ...
what about
Wireframes?

16. https://github.com/ajashton/Inkscape-Mockup-Toolkit

17. http://www.yay.se/resources/android-native-icons

18. http://www.techdrivein.com/2011/01/impressive-libreoffice-ui-mockups-you.html

24. Inkscape
Basics

25. Basic tools

26. Basic techniques

27. SVG UI
Widgets

28. drupal.org/sandbox/kattekrab/1263304

29. Chapter Three
http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach

30. jQuery inspired
http://jqueryui.com/themeroller/

31. TopNotch / Balsamiq
http://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing-components-balsamiq-mockup

32. Bartik inspired
http://drupal.org/documentation/themes/bartik

33. Demo
Time

34. Questions?

35. SVG: Use it Already
http://dbushell.com/2012/04/03/svg-use-it-already/
Book: Inkscape 0.48 Essentials for Web Designers
By Bethany Hiitola
Creating websites with Inkscape
http://tucson-labs.com/creating-websites-with-inkscape/
SVG icons for Android mockups
http://files.yay.se/android/native-vector/android-native-final.svg
Magic Mockup
https://github.com/garrett/magicmockup
Javascript interactions
http://eclipsesource.com/blogs/2012/07/03/wireframing-inkscape-javascript/
Resources

36. INKSCAPE for web and UI mockups
@kattekrab
Donna Benjamin