├── image ├── preview-1.png ├── preview-2.png ├── preview-3.png └── preview.png ├── demo_news_feed_1.1.sketch ├── wz_wireframe_kit_1.1.sketch ├── version 1.0 ├── demo_news_feed.sketch └── wz_wireframe_kit_1.0.sketch └── README.md /image/preview-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/image/preview-1.png -------------------------------------------------------------------------------- /image/preview-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/image/preview-2.png -------------------------------------------------------------------------------- /image/preview-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/image/preview-3.png -------------------------------------------------------------------------------- /image/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/image/preview.png -------------------------------------------------------------------------------- /demo_news_feed_1.1.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/demo_news_feed_1.1.sketch -------------------------------------------------------------------------------- /wz_wireframe_kit_1.1.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/wz_wireframe_kit_1.1.sketch -------------------------------------------------------------------------------- /version 1.0/demo_news_feed.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/version 1.0/demo_news_feed.sketch -------------------------------------------------------------------------------- /version 1.0/wz_wireframe_kit_1.0.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wzhudev/wz-wireframe-kit/HEAD/version 1.0/wz_wireframe_kit_1.0.sketch -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wz_wireframe_kit.sketch 2 | 3 | A kit to draw wireframes and note interaction details. 4 | 5 | ![](image/preview.png) 6 | 7 | ![](image/preview-1.png) 8 | 9 | 10 | ## What's this? 11 | 12 | `wz_wireframe_kit.sketch` contains lots of elements you can use in your wireframes files. 13 | 14 | I have seen and used lots of wireframe kits. Though they are all beautiful enough, they are not friendly to others. They have no explanations telling how the app works. So I designed `wz_wireframe_kit.sketch` and hope it could be friendly to designers, product managers and engineers, making wireframe a useful tool for communication. 15 | 16 | ![](image/preview-3.png) 17 | 18 | It has: 19 | 20 | **iPhone 6 Mockup**. Four kinds of iPhone 6 mockups. Important, Blank, With Navigation, With Tab Bar. To bring convenience to your work. 21 | 22 | **Placeholders**. Image Placeholders, Avatar Placeholders - Circle and Rounded Rectangle. 23 | 24 | **Buttons**. Primary Buttons, Tiny Button, Circle Buttons. 25 | 26 | **Links**. Arrow, Link, Click and Link, Action, Link With Action, etc. 27 | 28 | **Tag**. Minimum and Maximum, Different Status, Interaction Explanations, If and Then, etc. 29 | 30 | ## How to use? 31 | 32 | Download `wz_wireframe_kit_1.1.sketch`, open it. Then copy, paste and edit! That's easy! 33 | 34 | Use `iPhone Mockups` and `Interface Elements` to sketch interfaces . Use `Links` to demonstrate relations among the screens. And use `Tags` to write interaction guidelines for engineers. 35 | 36 | Here is an example for your reference, a news feed app wireframe. It's not finished but enough to show how to use the wireframe kit. 37 | 38 | ![](image/preview-2.png) 39 | 40 | ## Update Records 41 | 42 | ### Version 1.1 February 19th, 2016 43 | 44 | I used `wz_wireframekit.sketch` in my app *Today* and found something inconvenient. So I update it. It's now a little more beautiful-looking. :) 45 | 46 | ### Version 1.0 December 10th, 2016 47 | 48 | 49 | ## Appreciantion 50 | 51 | The work is inspired by [Wireframe Kit for iPhone 6 Sketch Resource](http://www.sketchappsources.com/free-source/1091-wireframe-kit-iphone-6-sketch-freebie-resource.html). Many thanks to the designer [Barbara Giardelli](http://www.sketchappsources.com/contributor/bgiardelli). 52 | --------------------------------------------------------------------------------