Inkscape for web and UI mockups

12,300 views
11,643 views

Published on

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

Published in: Design

Inkscape for web and UI mockups

  1. 1. INKSCAPE for web and UI mockups
  2. 2. @kattekrabDonna Benjamin
  3. 3. What isInkscape?
  4. 4. GNUGeneralPublicLicense
  5. 5. ScalableVectorGraphic
  6. 6. OpenStandard
  7. 7. Justlike
  8. 8. &CSS3
  9. 9. But whocares?
  10. 10. I do.
  11. 11. So... Mockups?
  12. 12. and ...what aboutWireframes?
  13. 13. https://github.com/ajashton/Inkscape-Mockup-Toolkit
  14. 14. http://www.yay.se/resources/android-native-icons
  15. 15. http://www.techdrivein.com/2011/01/impressive-libreoffice-ui-mockups-you.html
  16. 16. Inkscape Basics
  17. 17. Basic tools
  18. 18. Basic techniques
  19. 19. SVG UIWidgets
  20. 20. drupal.org/sandbox/kattekrab/1263304
  21. 21. Chapter Threehttp://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
  22. 22. jQuery inspiredhttp://jqueryui.com/themeroller/
  23. 23. TopNotch / Balsamiqhttp://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing-components-balsamiq-mockup
  24. 24. Bartik inspiredhttp://drupal.org/documentation/themes/bartik
  25. 25. DemoTime
  26. 26. Questions?
  27. 27. SVG: Use it Alreadyhttp://dbushell.com/2012/04/03/svg-use-it-already/Book: Inkscape 0.48 Essentials for Web DesignersBy Bethany HiitolaCreating websites with Inkscapehttp://tucson-labs.com/creating-websites-with-inkscape/SVG icons for Android mockupshttp://files.yay.se/android/native-vector/android-native-final.svgMagic Mockuphttps://github.com/garrett/magicmockupJavascript interactionshttp://eclipsesource.com/blogs/2012/07/03/wireframing-inkscape-javascript/Resources
  28. 28. INKSCAPE for web and UI mockups @kattekrab Donna Benjamin

×