SlideShare a Scribd company logo

Inkscape for web and UI mockups

Donna Benjamin, profile picture
Donna Benjamin

The document discusses Inkscape, a free vector graphic editor, and its applications in creating web and UI mockups. It provides resources and tools for designers, including links to toolkits, wireframing components, and guides for integrating SVG. The content emphasizes leveraging Inkscape for effective design and interaction in web development.

Design
1 of 36
Downloaded 206 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
INKSCAPE for web and UI mockups
@kattekrab Donna Benjamin
What is Inkscape?
GNU General Public License
Scalable Vector Graphic
Open Standard
Just like
& CSS3
But who cares?
I do.
Inkscape for web and UI mockups
Inkscape for web and UI mockups
So... Mockups?
and ... what about Wireframes?
Inkscape for web and UI mockups
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 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 Basics
Basic tools
Basic techniques
SVG UI Widgets
drupal.org/sandbox/kattekrab/1263304
Chapter Three http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
jQuery inspired http://jqueryui.com/themeroller/
TopNotch / Balsamiq http://fusiondrupalthemes.com/support/theme-developers/designing-fusion/downloadable-drupal-wireframing-components-balsamiq-mockup
Bartik inspired http://drupal.org/documentation/themes/bartik
Demo Time
Questions?
SVG: Use it Already http://dbushell.com/2012/04/03/svg-use-it-already/ Book: Inkscape 0.48 Essentials for Web Designers By Bethany Hiitola Creating websites with Inkscape http://tucson-labs.com/creating-websites-with-inkscape/ SVG icons for Android mockups http://files.yay.se/android/native-vector/android-native-final.svg Magic Mockup https://github.com/garrett/magicmockup Javascript interactions http://eclipsesource.com/blogs/2012/07/03/wireframing-inkscape-javascript/ Resources
INKSCAPE for web and UI mockups @kattekrab Donna Benjamin

More Related Content

PDF
Types of software testing
Prachi Sasankar
 
TXT
Getweeklyhoursbyuser
hasheemm
 
PDF
Alphorm.com-Formation MongoDB Administration
Alphorm
 
PDF
Architecture microservices avec docker
gcatt
 
PPTX
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
SOAT
 
PPTX
Wazuh Pre.pptx
emnabenamor3
 
PDF
Microservices avec Spring Cloud
Florian Beaufumé
 
PDF
Alphorm.com Formation KVM
Alphorm
 
Types of software testing
Prachi Sasankar
 
Getweeklyhoursbyuser
hasheemm
 
Alphorm.com-Formation MongoDB Administration
Alphorm
 
Architecture microservices avec docker
gcatt
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
SOAT
 
Wazuh Pre.pptx
emnabenamor3
 
Microservices avec Spring Cloud
Florian Beaufumé
 
Alphorm.com Formation KVM
Alphorm
 

What's hot (20)

PPTX
Software project management
PAWAN KUMAR
 
PPT
Squid server
Rohit Phulsunge
 
PPTX
Penetration testing
PTC
 
PDF
La gouvernance IAM au service des stratégies métiers
Marc Rousselet
 
PPT
Admin linux utilisateurs_et_groupes cours 1
Mehdi Bouihi
 
PPTX
Sécurité informatique
oussama Hafid
 
PPTX
Staff training and certification
ashamarsha
 
PDF
Introduction à ASP.NET
Abdelouahed Abdou
 
DOCX
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Moez Hamzaoui
 
PPTX
Sécurité de l'IoT | Internet des objets - Formation d'une journée
Tactika inc.
 
PDF
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Digamber Singh
 
PPTX
Track code quality with SonarQube - short version
Dmytro Patserkovskyi
 
PDF
Data Versioning and Reproducible ML with DVC and MLflow
Databricks
 
PDF
Convolutional Neural Network
Junho Cho
 
PPTX
Software Configuration Management (SCM)
Er. Shiva K. Shrestha
 
PPTX
Introduction To Vulnerability Assessment & Penetration Testing
Raghav Bisht
 
PPSX
Les architectures client serveur
Ameni Ouertani
 
PDF
Alphorm.com Support de la formation Vmware Esxi 6.0
Alphorm
 
PPTX
Software development life cycle (SDLC)
Simran Kaur
 
PPTX
Room 2 - 2 - Giang Thiên Phú - Kinh nghiệm tối ưu mongodb với database hơn 10...
Vietnam Open Infrastructure User Group
 
Software project management
PAWAN KUMAR
 
Squid server
Rohit Phulsunge
 
Penetration testing
PTC
 
La gouvernance IAM au service des stratégies métiers
Marc Rousselet
 
Admin linux utilisateurs_et_groupes cours 1
Mehdi Bouihi
 
Sécurité informatique
oussama Hafid
 
Staff training and certification
ashamarsha
 
Introduction à ASP.NET
Abdelouahed Abdou
 
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Moez Hamzaoui
 
Sécurité de l'IoT | Internet des objets - Formation d'une journée
Tactika inc.
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Digamber Singh
 
Track code quality with SonarQube - short version
Dmytro Patserkovskyi
 
Data Versioning and Reproducible ML with DVC and MLflow
Databricks
 
Convolutional Neural Network
Junho Cho
 
Software Configuration Management (SCM)
Er. Shiva K. Shrestha
 
Introduction To Vulnerability Assessment & Penetration Testing
Raghav Bisht
 
Les architectures client serveur
Ameni Ouertani
 
Alphorm.com Support de la formation Vmware Esxi 6.0
Alphorm
 
Software development life cycle (SDLC)
Simran Kaur
 
Room 2 - 2 - Giang Thiên Phú - Kinh nghiệm tối ưu mongodb với database hơn 10...
Vietnam Open Infrastructure User Group
 
Ad

Similar to Inkscape for web and UI mockups (11)

PDF
Inkscape: Mockup that site
Donna Benjamin
 
PDF
Joy of Inkscape - at StixCamp
Donna Benjamin
 
PDF
Power Tools For Browser-Based Design
Stephen Hay
 
PDF
Tools for Modern Web Design
Commercial Progression
 
PDF
Tutorial Inkscape untuk membuat desain Infografik
Yudi Herdiana
 
PDF
Inkscape
Anas Emad Digital Marketing Specialist
 
PDF
An introduction to inkscape
Ange Albertini
 
PPTX
Balsamiq
Stephanie Alejo
 
PPTX
Balsamiq
Stephanie Alejo
 
PDF
Digital Art using Gimp & Inkscape
Máirín Duffy
 
PDF
Open graphics
Anas Emad Digital Marketing Specialist
 
Inkscape: Mockup that site
Donna Benjamin
 
Joy of Inkscape - at StixCamp
Donna Benjamin
 
Power Tools For Browser-Based Design
Stephen Hay
 
Tools for Modern Web Design
Commercial Progression
 
Tutorial Inkscape untuk membuat desain Infografik
Yudi Herdiana
 
Inkscape
Anas Emad Digital Marketing Specialist
 
An introduction to inkscape
Ange Albertini
 
Balsamiq
Stephanie Alejo
 
Balsamiq
Stephanie Alejo
 
Digital Art using Gimp & Inkscape
Máirín Duffy
 
Open graphics
Anas Emad Digital Marketing Specialist
 
Ad

More from Donna Benjamin (20)

PDF
From 2020 to 2121: How do we get there?
Donna Benjamin
 
PDF
Turning stories into websites #wds18
Donna Benjamin
 
PDF
Turning stories into software - Laracon Australia 2018
Donna Benjamin
 
PDF
Engaging learners from objective to activity - MoodleMootAU 2018
Donna Benjamin
 
PDF
Digitise the Dawn - 5 years on - LCA2018 OpenGLAM
Donna Benjamin
 
PDF
Communication skills for everyone - DrupalCon Vienna
Donna Benjamin
 
PDF
Tools for talking
Donna Benjamin
 
PDF
Making views - DrupalGov Canberra 2017
Donna Benjamin
 
PDF
I am your user, why do you hate me linux.conf.au 2017
Donna Benjamin
 
PDF
Digitise the Dawn - Sydney Mechanics School of Arts
Donna Benjamin
 
PDF
2121: How do we get there?
Donna Benjamin
 
PDF
Turning stories into websites - PyConAU
Donna Benjamin
 
PDF
Django & Drupal: A Tale of Two Cities
Donna Benjamin
 
PDF
Turning stories into websites - The PHP conference Australia edition
Donna Benjamin
 
PDF
Turning stories into websites
Donna Benjamin
 
PDF
Constructive Conflict Resolution
Donna Benjamin
 
PDF
Drupal distros - Tweaks at eotw
Donna Benjamin
 
PDF
Constructive Conflict Resolution slides
Donna Benjamin
 
ODP
ODF: Our Document Future - Open Document Format & Digital Preservation.
Donna Benjamin
 
PDF
Panopoly: Magical Mystery Tour
Donna Benjamin
 
From 2020 to 2121: How do we get there?
Donna Benjamin
 
Turning stories into websites #wds18
Donna Benjamin
 
Turning stories into software - Laracon Australia 2018
Donna Benjamin
 
Engaging learners from objective to activity - MoodleMootAU 2018
Donna Benjamin
 
Digitise the Dawn - 5 years on - LCA2018 OpenGLAM
Donna Benjamin
 
Communication skills for everyone - DrupalCon Vienna
Donna Benjamin
 
Tools for talking
Donna Benjamin
 
Making views - DrupalGov Canberra 2017
Donna Benjamin
 
I am your user, why do you hate me linux.conf.au 2017
Donna Benjamin
 
Digitise the Dawn - Sydney Mechanics School of Arts
Donna Benjamin
 
2121: How do we get there?
Donna Benjamin
 
Turning stories into websites - PyConAU
Donna Benjamin
 
Django & Drupal: A Tale of Two Cities
Donna Benjamin
 
Turning stories into websites - The PHP conference Australia edition
Donna Benjamin
 
Turning stories into websites
Donna Benjamin
 
Constructive Conflict Resolution
Donna Benjamin
 
Drupal distros - Tweaks at eotw
Donna Benjamin
 
Constructive Conflict Resolution slides
Donna Benjamin
 
ODF: Our Document Future - Open Document Format & Digital Preservation.
Donna Benjamin
 
Panopoly: Magical Mystery Tour
Donna Benjamin
 

Recently uploaded (20)

PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
PDF
Urban Design Final Project-Site Analysis
nicolebrog1
 
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PrathikT1
 
PPTX
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
sportsenerlix
 
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
PDF
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
banikishika701
 
PPT
Machine printing techniques and plangi dyeing
SANGEETHA PRIYA B
 
PDF
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
PPTX
Media And Information Literacy for Grade 12
CaloyMasion
 
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
ShaluPriya26
 
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PrathikT1
 
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PRITTHAKKAR7
 
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Mina Anis
 
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
B3AITS - Bow & 3 Arrows IT Solutions
 
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
PPTX
An introduction to AI in research and reference management
drmariaalrafi
 
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
Urban Design Final Project-Site Analysis
nicolebrog1
 
YOW2022-BNE-MinimalViableArchitecture.pdf
PrathikT1
 
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
Wisp Textiles: Where Comfort Meets Everyday Style
sportsenerlix
 
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
banikishika701
 
Machine printing techniques and plangi dyeing
SANGEETHA PRIYA B
 
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
Media And Information Literacy for Grade 12
CaloyMasion
 
YV PROFILE PROJECTS PROFILE PRES. DESIGN
ShaluPriya26
 
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PrathikT1
 
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PRITTHAKKAR7
 
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Mina Anis
 
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
B3AITS - Bow & 3 Arrows IT Solutions
 
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
An introduction to AI in research and reference management
drmariaalrafi
 

Inkscape for web and UI mockups