{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

Using JavaScript Objects for storing data

Wednesday, September 14, 2011 { 2 Comments }

Few weeks ago I made "o - JS Library for Object Manipulation" and the next step was to build simple To Do app. The purpose this app was storing data into JavaScript object.

Why storing data into JS Objects?

Here are few motives:

- JavaScript objects have JSON like (key,value) structure that is perfect for storing data. You can store numbers, strings, arrays, other objects inside the Object value.

- Parsing the JavaScript Object is very fast in the new browsers.

- With JavaScript you can easily add, remove, extend and do other useful operation to the Object.

- The Object can be easily converted to JSON and vice versa.

- Via AJAX(AJAJ) you can send and receive JSON calls from the server.

- Native node.js support.

- Easy NoSql integration.

- Easy integration with the browser localStorage.

- We can change the browser application building logic by showing first the results to the user and then sending the data to the server(database). That will improve the User Experience and save some traffic because we will be sending/receiving just the JSON data of the actual change. Naturally this will bring new concerns like security, data synchronization and potential data loss.

I think we are not fully using the new browsers JavaScript engines. We can explore new ways and do the heavy lifting in the browser using the server just like permanent data storage.

Here is my simple To Do App that is using "o -library" for the object manipulation and jQuery for the DOM.The data are written only in the JS Object (for now). I used guid/uuid to generate random JavaScript object keys. I wrote a render function that will "render" all the values in the object. It is no so smart to render all the object values for any change made in the object but I'm doing it for purpose of this demo.

This technique is not new, with this post I don't want to reinventing the wheel just to simply point out the advantages of using Objects like data containers. I think many web application can use this approach that can save some serious web traffic.



To Do Link

The object will have this kind of structure:

var Obj = {
89fa0b75-ccc3-7491-df08-906088052575: "Buy milk",
3989d3db-40a5-5c58-4147-42a3cead4c94: "Make 30 Push Ups",
bc0e002e-09a7-d36b-ec6a-24462ea9486a: "Buy ice cream"
}

What do you think? I love to here your opinion.