{Carrer web log} ←

Photoshop Wireframing Kit

Monday, September 26, 2011 { 5 Comments }

Photoshop Wireframing Kit is a vector tool for wireframing and prototyping in photoshop. It is using the Photoshop Custom shapes to produce vector shapes for web site wireframing.

Why I build this tool?

Many web designers use Photoshop like their primary tool for designing web sites. So why not use the same tool(Photoshop) for wireframing?

I think that this tool can be very handy for many web designers that are using Photoshop like preferred graphical program. They can avoid using third party tools for wireframing and do everything in photoshop.

This tool can easily extendible with the native photoshop features. For now there are around 100 shapes, but I'm planing to extend the Kit in the future.


The road to from the the idea to launch.

In the past I made several free tools for wireframing and prototyping like: Sketchbook for web designers, Fireworks Mini Web Wireframing Kit, iPhone Wireframe Kit - Google Docs, iPhone Grid System but I still wasn't happy and I needed complete wireframing tool, that can be easily to learn and preferably be a part of Photoshop (my preferred graphical tool).

The problem with Photoshop that is not meant to be vector tool, the main purpose of photoshop is photo editing not vector manipulation.
There are probably better programs that can be used for Wireframing, like Illustrator and Fireworks but I'm used to do everything in Photoshop so I decided to decided to extend photoshop using its Custom Shapes.

Here are some initial shapes on paper:


Then some photoshop custom shape icons:



And some examples:



Some slides about the concept:.


The surprise for me was it seems so simple thing to build when I started, but there are so many details to be done before the finish. I was super enthusiastic in the beginning, realistic in the middle and I hatted the project when 90% was done. When I finally published the project I felt relieved. I hope that someone will find this project useful and that will help you to do better wireframes and web site prototypes.

I'm happy to present:

www.photoshopwireframingkit.com/

Let me know what do you think about this project? I will appreciate your feedback. Thanks

5 Responses to “Photoshop Wireframing Kit”

1. //  Ravi // 9/27/2011

   This is quite impressive. I thought it was a grid layout thing for webdesigners, but if I've read this rightly is this icons to use a placeholders in a wireframe design on photoshop?  

2. //  Vladimir // 9/27/2011

   @Ravi: Thanks! No it is not grid layout thing. You are right that are vector shapes to be used like placeholders in a wireframe design on photoshop.
   
   Here are some demos that I build: http://www.photoshopwireframingkit.com/PhotoshopWireframingKitDemos.html
   
   You can notice that every demo is different you can easily personalize your wireframes. Other cool thing is you can mix them with the photoshop native functions.
   
   In my opinion you can make very original and creative wireframes.  

3. //  Community Wordpress Theme // 9/28/2011

   Cool stuff! as a graphic designer this kit gonna useful :) thanks  

4. //  Web Design // 10/03/2011

   Cool photoshop kit! great job, thanks :)  

5. //  Corporate Letterheads // 10/03/2011

   Great stuff :) this would be useful :) thanks!  

Post a Comment

<< Home