Calling all community members! We have a little project for you to take part in! We're compiling a wireframe kit for Adobe Illustrator, built by you, the Tuts+ community.
Wait, What? Wireframe Wa..?
Wireframes are a way of sorting through the noise, of clarifying the purpose and functionality of a product. For websites that means laying out simple page elements to establish visual and functional relationships between them. I recently wrote about it in 10 Tips for Building Wireframes With Illustrator.
Wireframe kits are a really easy way of grabbing page elements and laying them out on the canvas. These kits can be made for whichever app you prefer using; Omnigraffle, Sketch, but in this case we'll be building a kit for Adobe Illustrator.
Still not sure what I'm talking about? Search wireframe on Dribbble and you'll find loads of inspiration.
What Do I Need to Do?
This kit will be built from a collection of graphic symbols, so we're asking you to submit any generic page element graphics you can think of.
Normally, a wireframe kit will comprise elements which all share common visual styles. That won't be the case here! With any number of contributors, this collection of symbols will look anything but uniform, and that will also be its charm.
Here's a quick list of some of the things you might want to submit:
- Form elements
- Buttons
- Navigation
- Media elements (video, audio players etc.)
- Icons
- Maps
- Heading and other typography blocks
- Image placeholders
- Mobile device outlines
- ..and anything else you can come up with!
Some Guidelines
This isn't a complete free-for-all, there are one or two things to bear in mind to guarantee your submissions are accepted!
- Include your name and a link to your portfolio if you wish (this is for the credits list).
- No colour please, keep things nice and monochrome.
- Stick to system fonts if you use type.
- It's helpful if your graphics are packaged as symbols, though not a deal-breaker if you forget.
I've put together a very quick example of what we're looking for. Download the .ai file and take a look. Your symbols can be more detailed, or less so, it's entirely up to you.
Send Them Over!
Once you have your wireframe symbol (or symbols) is ready, send it all over in the form of an Adobe Illustrator file. Email me directly at webdesign@tutsplus.com. When I've collected enough pieces together, perhaps in a few weeks, I'll compile the whole thing together and release it under Creative Commons for the world to enjoy (a bit like the Any Old Icon community project).
I look forward to seeing what you come up with!
