INKSCAPE for web and UI mockups
@kattekrabDonna Benjamin
What isInkscape?
GNUGeneralPublicLicense
ScalableVectorGraphic
OpenStandard
Justlike
&CSS3
But whocares?
I do.
So...        Mockups?
and ...what aboutWireframes?
https://github.com/ajashton/Inkscape-Mockup-Toolkit
http://www.yay.se/resources/android-native-icons
http://www.techdrivein.com/2011/01/impressive-libreoffice-ui-mockups-you.html
Inkscape  Basics
Basic tools
Basic techniques
SVG UIWidgets
drupal.org/sandbox/kattekrab/1263304
Chapter Threehttp://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
jQuery inspiredhttp://jqueryui.com/themeroller/
TopNotch / Balsamiqhttp://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing...
Bartik inspiredhttp://drupal.org/documentation/themes/bartik
DemoTime
Questions?
SVG: Use it Alreadyhttp://dbushell.com/2012/04/03/svg-use-it-already/Book: Inkscape 0.48 Essentials for Web DesignersBy Be...
INKSCAPE for web and UI mockups          @kattekrab          Donna Benjamin
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Inkscape for web and UI mockups
Upcoming SlideShare
Loading in...5
×

Inkscape for web and UI mockups

7,994

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×