A kit to draw wireframes and note interaction details.
wz_wireframe_kit.sketch
contains lots of elements you can use in your wireframes files.
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.
It has:
iPhone 6 Mockup. Four kinds of iPhone 6 mockups. Important, Blank, With Navigation, With Tab Bar. To bring convenience to your work.
Placeholders. Image Placeholders, Avatar Placeholders - Circle and Rounded Rectangle.
Buttons. Primary Buttons, Tiny Button, Circle Buttons.
Links. Arrow, Link, Click and Link, Action, Link With Action, etc.
Tag. Minimum and Maximum, Different Status, Interaction Explanations, If and Then, etc.
Download wz_wireframe_kit_1.1.sketch
, open it. Then copy, paste and edit! That's easy!
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.
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.
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. :)
The work is inspired by Wireframe Kit for iPhone 6 Sketch Resource. Many thanks to the designer Barbara Giardelli.