All mockups are licensed under the CreativeCommons Zero license (except for things that aren’t mine to license, like the fonts used, the Gnome portions, or the Android Paste icon). You’re welcome to experiment with them and use them for your own UI proposals. They’re Inkscape SVGs, so it’s best to use Inkscape to open them.
A GNOME Shell-oriented mockup for the desktop version of LibreOffice. You’ll need to install Vegur, Cantarell, and Bitstream Vera for it to work properly.
Named after a carcinogenic dye put on oranges to make them look nicer, this is a very basic mock-up of a dark-themed Impress.
A mockup for an Android 4 tablet (landscape-only). You’ll need the Roboto font.
A mockup for an Impress remote for Android phones.
An older mockup for Android smartphones (portrait-only). You’ll need the fonts Bitstream Vera and Roboto.
Mockup for elementary. Download Droid Sans for this one.
Mockup of the current LibreOffice on Windows 7. Uses the Vegur font.
I may be forgetting some fonts: if you find I’m forgetting something, add a comment below and I’ll fix it.
—————————————————-
SVG mockup kits from other parts of the web.
This is a collection of mockups for Gnome. These contain various useful tidbits to add to your mockup (like Adwaita widgets, for example, which are found in “theming/widgets”).
A mockup kit for elementaryOS.
The official icon pack for Android 4.0 from the Android Design site.
Help me to understand. I don’t know anything about mockup.
It is just a picture drawn with Inkscape/GIMP? Or you dude, create it with midificating Libreoffice source code?
Thanks a looot!
A mockup is only a picture drawn to showcase the ideas in a proposal, in this case with Inkscape.
Pingback: for elementary « Click or Tap
Mmm, so how do you create them? Where is the tutorial show me how to create mockup? I interested in.
Download Inkscape. Play with it to get the hang of it.
Basically, it’s just work with shapes. Some useful shortcuts for Inkscape are “Ctrl+Shift+F” for fill/stroke options, “Ctrl+Shift+L” for layers, and “Ctrl+Shift+A” for align options.
All of the files above are Inkscape files, so download them and play with them.