0
DESIGNING
UI MOCKUPS   IN

 INKSCAPE
                  PRESENTED BY

                  Máirín Duffy
                  Fedo...
You can do it.
Plus, we really need you to.
These are great general
    skills to have.
TODAY'S TOPICS:


#1   Take a drive around the Inkscape
     UI.
#2   The rectangle and text tools are
     your best frie...
#1
Take a drive around the
     Inkscape UI.
ROTATE & FLIP




                            ASPECT RATIO LOCK

SELECTOR

NODE EDIT



RECTANGLE


ELLIPSE




TEXT


GRA...
_   +




INKSCAPE SPECIALS:

    CTRL+D    duplicate
    CTRL+G    group
          1 100% zoom
          5   Center canva...
BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #1:


   Don't forget this lock.




IF YOUR DRAWINGS AND TEXT ARE GETTING STRETC...
BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #2:


Ctrl & Shift are magic!




              WHEN IN DOUBT, TRY THEM OUT!
SCAL...
BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #3:


           Don't get lost!




STUCK IN LALA LAND? HITTING '5' WILL BRING Y...
#2
The rectangle and text tools are
       your best friends.
No fancy tricks. Just text & rectangles.
Fill vs. Stroke


  SELECT OBJECT &
   CLICK COLOR TO
     COLOR FILL.


SELECT OBJECT, HOLD
SHIFT, & CLICK COLOR
 TO COLO...
Stroke width
               ENTER A VALUE HERE.
Round your rectangle.

                    CLICK & DRAG HERE
Scale your rectangle.
                           CLICK & DRAG HERE


      SCALE FROM THE
          LOWER LEFT
       (CLI...
Scale text, too!
     CLICK & DRAG HERE
#3
Ctrl+D and movin' it.
Ctrl+D saves you time.




SELECT OBJECT &    HOLD DOWN SHIFT     A PERFECT COPY.
  HIT CTRL+D      AND KEEP PRESSING   MO...
Ctrl+D really saves you time.




   16 OBJECTS FROM 4, ALIGNED AND SPACED PERFECTLY.
Ctrl+D works with text, too.




A NICELY-ALIGNED AND CONSISTENT COLUMN OF TEXT, MADE QUICKLY
Keep going.

You can use Ctrl+D to
duplicate entire screens!
You've gotta move it.

SNAIL
ALT + ARROW KEYS




TORTOISE
PLAIN ARROW KEYS




HARE
SHIFT+ ARROW KEYS




        IN ALL ...
#4
Get 'em together and group!
Grouping makes many into
              one.



THREE SEPARATE OBJECTS: Price, Square, and 'Item' label.




       CLICK &...
Grouping makes many into
          one.



         SELECT THEM ALL, HIT CTRL+G.




       CLICK & MOVE – THEY MOVE TOGET...
You can ungroup, too.




HIT CTRL+SHIFT+G TO UNGROUP.   THEY ARE SEPARATE OBJECTS NOW.
Let's give it a try!
#5
Save & share.
One source file.
SVGZ IS COMPRESSED. THIS WILL
SAVE YOU SPACE!
Export each screen as a PNG.
                                      MAKE SURE
 CLICK                                 YOU AR...
MOCKUP #1    MOCKUP #2




 SOURCE SVG
FOR THE TWO
  MOCKUPS
Create a wiki mockup sheet.
Create a wiki mockup sheet.


 CLICK LINK
 TO GO TO
UPLOAD FORM
Create a wiki mockup sheet.
Completed
      sheet.

Send it out in IRC,
blog it,
share it with friends,
get feedback!
Questions?




Thanks to my Fedora Design Team pal María 'Tatica' Leando for designing
            the cute characters thr...
Designing UI Mockups in Inkscape
Upcoming SlideShare
Loading in...5
×

Designing UI Mockups in Inkscape

4,651

Published on

Published in: Self Improvement
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,651
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Designing UI Mockups in Inkscape"

  1. 1. DESIGNING UI MOCKUPS IN INKSCAPE PRESENTED BY Máirín Duffy Fedora Design Team Lead & Sr. Interaction Designer, Red Hat, Inc.
  2. 2. You can do it.
  3. 3. Plus, we really need you to.
  4. 4. These are great general skills to have.
  5. 5. TODAY'S TOPICS: #1 Take a drive around the Inkscape UI. #2 The rectangle and text tools are your best friends. #3 Ctrl+D & movin' it. #4 Get 'em together and group! #5 Save & share.
  6. 6. #1 Take a drive around the Inkscape UI.
  7. 7. ROTATE & FLIP ASPECT RATIO LOCK SELECTOR NODE EDIT RECTANGLE ELLIPSE TEXT GRADIENT DROPPER PALETTE
  8. 8. _ + INKSCAPE SPECIALS: CTRL+D duplicate CTRL+G group 1 100% zoom 5 Center canvas, fill screen +&- Zoom in & zoom out PgUp & PgDn Move up & down stack 1 step Home & End Move to top and bottom of stack
  9. 9. BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #1: Don't forget this lock. IF YOUR DRAWINGS AND TEXT ARE GETTING STRETCHED, TRY CLICKING IT!
  10. 10. BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #2: Ctrl & Shift are magic! WHEN IN DOUBT, TRY THEM OUT! SCALING, ANGLES, ROTATION, MOVING, UNDO, STROKE v. FILL ...
  11. 11. BRIEF INKSCAPE UI PUBLIC SERVICE MESSAGE #3: Don't get lost! STUCK IN LALA LAND? HITTING '5' WILL BRING YOU BACK TO CENTER.
  12. 12. #2 The rectangle and text tools are your best friends.
  13. 13. No fancy tricks. Just text & rectangles.
  14. 14. Fill vs. Stroke SELECT OBJECT & CLICK COLOR TO COLOR FILL. SELECT OBJECT, HOLD SHIFT, & CLICK COLOR TO COLOR STROKE. IF YOU NEED A SPECIFIC COLOR HEX VALUE, ENTER IT HERE.
  15. 15. Stroke width ENTER A VALUE HERE.
  16. 16. Round your rectangle. CLICK & DRAG HERE
  17. 17. Scale your rectangle. CLICK & DRAG HERE SCALE FROM THE LOWER LEFT (CLICK & DRAG) SHIFT + CLICK & DRAG HERE SCALE FROM THE CENTER (SHIFT + CLICK & DRAG)
  18. 18. Scale text, too! CLICK & DRAG HERE
  19. 19. #3 Ctrl+D and movin' it.
  20. 20. Ctrl+D saves you time. SELECT OBJECT & HOLD DOWN SHIFT A PERFECT COPY. HIT CTRL+D AND KEEP PRESSING MODIFY AS NEEDED. ARROW DOWN
  21. 21. Ctrl+D really saves you time. 16 OBJECTS FROM 4, ALIGNED AND SPACED PERFECTLY.
  22. 22. Ctrl+D works with text, too. A NICELY-ALIGNED AND CONSISTENT COLUMN OF TEXT, MADE QUICKLY
  23. 23. Keep going. You can use Ctrl+D to duplicate entire screens!
  24. 24. You've gotta move it. SNAIL ALT + ARROW KEYS TORTOISE PLAIN ARROW KEYS HARE SHIFT+ ARROW KEYS IN ALL CASES, THE RIGHT ARROW KEY WAS PRESSED 40 TIMES.
  25. 25. #4 Get 'em together and group!
  26. 26. 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...
  27. 27. Grouping makes many into one. SELECT THEM ALL, HIT CTRL+G. CLICK & MOVE – THEY MOVE TOGETHER.
  28. 28. You can ungroup, too. HIT CTRL+SHIFT+G TO UNGROUP. THEY ARE SEPARATE OBJECTS NOW.
  29. 29. Let's give it a try!
  30. 30. #5 Save & share.
  31. 31. One source file.
  32. 32. SVGZ IS COMPRESSED. THIS WILL SAVE YOU SPACE!
  33. 33. Export each screen as a PNG. MAKE SURE CLICK YOU ARE THE ON THE OUTLINE SELECTION OF TAB. THE SCREEN TO EXPORT. CHOOSE A FILENAME AND HIT EXPORT.
  34. 34. MOCKUP #1 MOCKUP #2 SOURCE SVG FOR THE TWO MOCKUPS
  35. 35. Create a wiki mockup sheet.
  36. 36. Create a wiki mockup sheet. CLICK LINK TO GO TO UPLOAD FORM
  37. 37. Create a wiki mockup sheet.
  38. 38. Completed sheet. Send it out in IRC, blog it, share it with friends, get feedback!
  39. 39. Questions? Thanks to my Fedora Design Team pal María 'Tatica' Leando for designing the cute characters throughout these slides. :)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×