Wireframe Symbols

wireframes thumb

As a designer of interfaces I have to create wireframes in order to get a good idea of how all the elements of an app or website will fit into a defined pixel space. As I repetitively use the same elements like scroll bars, lists, buttons, tables, tabs, etc. it was natural that I would create Illustrator symbols to drag and drop into my wireframes. Over the past few projects I have tried my best to compile a decent library of elements that any designer, or user interface designer can use in their wireframes.

This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.

This file is compatible on both Mac and PC. If you know others that would benefit from this file by all means send it along to them. I hope you enjoy the file and happy designing!

Download the File Here

  • Jason G
    Very helpful. Many thanks!
  • Dude seriously! Thanks so much!
  • Johnny Nines, you rock seriously rock. Thanks.
  • Ian
    thanks a lot Johnny, a really useful addition to the library.
  • Good stufff - thanks oodles!
  • George
    cheers .. saving me heaps of time :)
  • iko
    thanks for this, it would be a great help. cheers!
  • Very cool stuff. Nice idea to create them as symbols.

    Cheers!
  • dan
    i was searching for that for month !
  • theresa spross
    Thanks. Hope to use them in my next class.
  • Illustrator isn't my first wireframe choice - but makes for easily shared projects. This is beautiful. Thank you.
  • This is so helpful! I was starting to assemble my own, but thought I'd see if anyone had already created one.
  • r
    thank you!!!
blog comments powered by Disqus