Inkscape for web and UI mockups

  • 5,599 views
Uploaded 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 …

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,599
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
96
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INKSCAPE for web and UI mockups
  • 2. @kattekrabDonna Benjamin
  • 3. What isInkscape?
  • 4. GNUGeneralPublicLicense
  • 5. ScalableVectorGraphic
  • 6. OpenStandard
  • 7. Justlike
  • 8. &CSS3
  • 9. But whocares?
  • 10. I do.
  • 11. So... Mockups?
  • 12. and ...what aboutWireframes?
  • 13. https://github.com/ajashton/Inkscape-Mockup-Toolkit
  • 14. http://www.yay.se/resources/android-native-icons
  • 15. http://www.techdrivein.com/2011/01/impressive-libreoffice-ui-mockups-you.html
  • 16. Inkscape Basics
  • 17. Basic tools
  • 18. Basic techniques
  • 19. SVG UIWidgets
  • 20. drupal.org/sandbox/kattekrab/1263304
  • 21. Chapter Threehttp://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
  • 22. jQuery inspiredhttp://jqueryui.com/themeroller/
  • 23. TopNotch / Balsamiqhttp://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing-components-balsamiq-mockup
  • 24. Bartik inspiredhttp://drupal.org/documentation/themes/bartik
  • 25. DemoTime
  • 26. Questions?
  • 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. INKSCAPE for web and UI mockups @kattekrab Donna Benjamin