inkscape for web and ui mockups
DESCRIPTION
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-mockupsTRANSCRIPT
INKSCAPE for web and UI mockups
@kattekrabDonna Benjamin
What is Inkscape?
GNU General Public License
ScalableVectorGraphic
Open Standard
Just like
&CSS3
But who
cares?
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 UI Widgets
drupal.org/sandbox/kattekrab/1263304
Chapter Threehttp://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
jQuery inspired
http://jqueryui.com/themeroller/
http://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing-components-balsamiq-mockup
TopNotch / Balsamiq
Bartik inspiredhttp://drupal.org/documentation/themes/bartik
DemoTime
Questions?
Resources
SVG: Use it Alreadyhttp://dbushell.com/2012/04/03/svg-use-it-already/
Book: Inkscape 0.48 Essentials for Web DesignersBy Bethany Hiitola
Creating websites with Inkscapehttp://tucson-labs.com/creating-websites-with-inkscape/
SVG icons for Android mockupshttp://files.yay.se/android/native-vector/android-native-final.svg
Magic Mockuphttps://github.com/garrett/magicmockup
Javascript interactionshttp://eclipsesource.com/blogs/2012/07/03/wireframing-inkscape-javascript/
INKSCAPE for web and UI mockups
@kattekrabDonna Benjamin