designing ui mockups in inkscape -...
TRANSCRIPT
![Page 1: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/1.jpg)
DESIGNING UI MOCKUPS IN
INKSCAPE PRESENTED BY
Fedora Design Team Lead &Sr. Interaction Designer, Red Hat, Inc.
Máirín Duffy
![Page 2: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/2.jpg)
You can do it.
![Page 3: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/3.jpg)
Plus, we really need you to.
![Page 4: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/4.jpg)
These are great general skills to have.
![Page 5: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/5.jpg)
#1 Take a drive around the Inkscape UI.
#2 The rectangle and text tools are your best friends.
#3 Ctrl+D & movin' it.
TODAY'S TOPICS:
#4 Get 'em together and group!
#5 Save & share.
![Page 6: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/6.jpg)
#1
Take a drive around theInkscape UI.
![Page 7: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/7.jpg)
RECTANGLE
ELLIPSE
TEXT
GRADIENT
DROPPER
NODE EDIT
SELECTOR
ASPECT RATIO LOCK
ROTATE & FLIP
PALETTE
![Page 8: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/8.jpg)
+_
CTRL+G
INKSCAPE SPECIALS:
15
+ & -5
PgUp & PgDnHome & End
group100% zoomCenter canvas, fill screenZoom in & zoom outMove up & down stack 1 stepMove to top and bottom of stack
CTRL+D duplicate
![Page 9: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/9.jpg)
Don't forget this lock.BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #1:
IF YOUR DRAWINGS AND TEXT ARE GETTING STRETCHED, TRY CLICKING IT!
![Page 10: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/10.jpg)
Ctrl & Shift are magic!BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #2:
WHEN IN DOUBT, TRY THEM OUT!SCALING, ANGLES, ROTATION, MOVING, UNDO, STROKE v. FILL ...
![Page 11: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/11.jpg)
Don't get lost!BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #3:
STUCK IN LALA LAND? HITTING '5' WILL BRING YOU BACK TO CENTER.
![Page 12: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/12.jpg)
#2 The rectangle and text tools are
your best friends.
![Page 13: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/13.jpg)
No fancy tricks. Just text & rectangles.
![Page 14: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/14.jpg)
Fill vs. Stroke
SELECT OBJECT, HOLD SHIFT, & CLICK COLOR
TO COLOR STROKE.
SELECT OBJECT & CLICK COLOR TO
COLOR FILL.
IF YOU NEED A SPECIFIC COLOR HEX
VALUE, ENTER IT HERE.
![Page 15: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/15.jpg)
Stroke width
ENTER A VALUE HERE.
![Page 16: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/16.jpg)
Round your rectangle.
CLICK & DRAG HERE
![Page 17: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/17.jpg)
Scale your rectangle.CLICK & DRAG HERE
SCALE FROM THELOWER LEFT
(CLICK & DRAG)
SHIFT + CLICK & DRAG HERE
SCALE FROM THECENTER
(SHIFT + CLICK & DRAG)
![Page 18: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/18.jpg)
Scale text, too!CLICK & DRAG HERE
![Page 19: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/19.jpg)
#3 Ctrl+D and movin' it.
![Page 20: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/20.jpg)
Ctrl+D saves you time.
SELECT OBJECT &HIT CTRL+D
HOLD DOWN SHIFTAND KEEP PRESSING
ARROW DOWN
A PERFECT COPY.MODIFY AS NEEDED.
![Page 21: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/21.jpg)
Ctrl+D really saves you time.
16 OBJECTS FROM 4, ALIGNED AND SPACED PERFECTLY.
![Page 22: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/22.jpg)
Ctrl+D works with text, too.
A NICELY-ALIGNED AND CONSISTENT COLUMN OF TEXT, MADE QUICKLY
![Page 23: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/23.jpg)
Keep going.
You can use Ctrl+D to duplicate entire screens!
![Page 24: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/24.jpg)
You've gotta move it.
IN ALL CASES, THE RIGHT ARROW KEY WAS PRESSED 40 TIMES.
TORTOISEPLAIN ARROW KEYS
HARESHIFT+ ARROW KEYS
SNAILALT + ARROW KEYS
![Page 25: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/25.jpg)
#4 Get 'em together and group!
![Page 26: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/26.jpg)
Grouping makes many into one.
THREE SEPARATE OBJECTS: Price, Square, and 'Item' label.
CLICK & MOVE: You only move one. You can select them all by lassoing, or...
![Page 27: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/27.jpg)
Grouping makes many into one.
SELECT THEM ALL, HIT CTRL+G.
CLICK & MOVE – THEY MOVE TOGETHER.
![Page 28: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/28.jpg)
You can ungroup, too.
HIT CTRL+SHIFT+G TO UNGROUP. THEY ARE SEPARATE OBJECTS NOW.
![Page 29: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/29.jpg)
Let's give it a try!
![Page 30: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/30.jpg)
#5 Save & share.
![Page 31: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/31.jpg)
One source file.
![Page 32: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/32.jpg)
SVGZ IS COMPRESSED. THIS WILL SAVE YOU SPACE!
![Page 33: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/33.jpg)
![Page 34: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/34.jpg)
Export each screen as a PNG.
CHOOSE A FILENAME ANDHIT EXPORT.
MAKE SUREYOU AREON THE
SELECTIONTAB.
CLICK THE
OUTLINE OF
THE SCREEN
TO EXPORT.
![Page 35: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/35.jpg)
SOURCE SVGFOR THE TWO
MOCKUPS
MOCKUP #1 MOCKUP #2
![Page 36: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/36.jpg)
Create a wiki mockup sheet.
![Page 37: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/37.jpg)
Create a wiki mockup sheet.
CLICK LINKTO GO TO
UPLOAD FORM
![Page 38: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/38.jpg)
Create a wiki mockup sheet.
![Page 39: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/39.jpg)
Completedsheet.
Send it out in IRC, blog it,share it with friends, get feedback!
![Page 40: Designing UI Mockups in Inkscape - Fedorafedoraproject.org/w/uploads/5/5f/...DesigningUIMockupsinInkscape.pdf · DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Fedora Design Team Lead](https://reader034.vdocuments.mx/reader034/viewer/2022042708/5acbfe167f8b9a6a678bce84/html5/thumbnails/40.jpg)
Questions?
Thanks to my Fedora Design Team pal María 'Tatica' Leando for designing the cute characters throughout these slides. :)