Inkscape for web and UI mockups
Upcoming SlideShare
Loading in...5
×
 

Inkscape for web and UI mockups

on

  • 5,629 views

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

Statistics

Views

Total Views
5,629
Views on SlideShare
5,612
Embed Views
17

Actions

Likes
4
Downloads
81
Comments
0

3 Embeds 17

http://eventifier.co 9
https://twitter.com 7
http://eventifier.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Inkscape for web and UI mockups Inkscape for web and UI mockups Presentation Transcript

  • 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-components-balsamiq-mockup
  • 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 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
  • INKSCAPE for web and UI mockups @kattekrab Donna Benjamin