21
GUI Prototyping / Wireframing with Pencil Kukuh Syafaat [email protected]

GUI Prototyping / Wireframing with Pencil

Embed Size (px)

Citation preview

Page 1: GUI Prototyping / Wireframing with Pencil

GUI Prototyping / Wireframing with Pencil

Kukuh Syafaat [email protected]

Page 2: GUI Prototyping / Wireframing with Pencil

2

Hello ...

Kukuh Syafaat

FOSS enthusiast

Developer @ BlankOn

Supporter @ GNOME-ID

Supporter @ openSUSE-ID

… and so on ...

Page 3: GUI Prototyping / Wireframing with Pencil

Design

Draw

Mockup

Prototype

WireframeSketch

Page 4: GUI Prototyping / Wireframing with Pencil

4

Page 5: GUI Prototyping / Wireframing with Pencil

5

Page 6: GUI Prototyping / Wireframing with Pencil

6

Page 7: GUI Prototyping / Wireframing with Pencil

7

Page 8: GUI Prototyping / Wireframing with Pencil

8

GNOME mockups

https://github.com/gnome-design-team/gnome-mockups/blob/master/calculator/src/calculator-new-stuff.svg

Page 9: GUI Prototyping / Wireframing with Pencil

Pencil

Page 10: GUI Prototyping / Wireframing with Pencil

10

Pencil

http://pencil.evolus.vn/

https://github.com/evolus/pencil

https://software.opensuse.org/package/pencil

Stable : 2.0.5

Unstable : 2.0.18

Next release : 3.0.0 (RC1)

Page 11: GUI Prototyping / Wireframing with Pencil

11

Page 12: GUI Prototyping / Wireframing with Pencil

12

Page 13: GUI Prototyping / Wireframing with Pencil

13

Page 14: GUI Prototyping / Wireframing with Pencil

14

Pencil v3

Pencil V3 uses Electron instead of Mozilla XULRunner as the runtime.

A new, zip-based file format (.epz).

New UI approach.

… and so on

Page 15: GUI Prototyping / Wireframing with Pencil

15

Setting up (using NodeJS)

$ git clone https://github.com/evolus/pencil.git

$ npm install

$ npm start

Page 16: GUI Prototyping / Wireframing with Pencil

16

https://github.com/evolus/pencil/releases

Page 17: GUI Prototyping / Wireframing with Pencil

Demo

Page 18: GUI Prototyping / Wireframing with Pencil

Questions?

Page 19: GUI Prototyping / Wireframing with Pencil

Thank you.

Join the conversation,contribute & have a lot of fun!www.opensuse.org

Page 20: GUI Prototyping / Wireframing with Pencil

20

Have a lot of fun and join us at:www.opensuse.org

Page 21: GUI Prototyping / Wireframing with Pencil

General DisclaimerThis document is not to be construed as a promise by any participating organisation to develop, deliver, or market a product. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. openSUSE makes no representations or warranties with respect to the contents of this document, and specifically disclaims any express or implied warranties of merchantability or fitness for any particular purpose. The development, release, and timing of features or functionality described for openSUSE products remains at the sole discretion of openSUSE. Further, openSUSE reserves the right to revise this document and to make changes to its content, at any time, without obligation to notify any person or entity of such revisions or changes. All openSUSE marks referenced in this presentation are trademarks or registered trademarks of SUSE LLC, in the United States and other countries. All third-party trademarks are the property of their respective owners.

LicenseThis slide deck is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license. It can be shared and adapted for any purpose (even commercially) as long as Attribution is given and any derivative work is distributed under the same license.

Details can be found at https://creativecommons.org/licenses/by-sa/4.0/

Credits

TemplateRichard Brown [email protected]

Design & InspirationopenSUSE Design Teamhttp://opensuse.github.io/branding-guidelines/