Keeping aspect ratio when scaling an image

WireframeWhen designing desktop apps, websites, and mobile applications, more than once I have tried using an application like mockingbird or Pencil Project. On one hand, mockingbird, is a web application that can be accessed from any browser and allows you to design multiple pages with different elements. On the other hand, Pencil Project, initially born as a Firefox extension, now has a multiplatform desktop application that allows you to mockup easily.

The drawback I see on these two applications is that for some reason, I always end up making simple mockups with a simple pen and paper. This way I can organize my ideas faster than using these applications. I guess the main reason for this is that I’m not a designer, so to me it is the same doing a shitty design in paper, than a shitty design with an application. Moreover, usually using a computer app for this task I end up spending more time to do the same…

Anyway, the other day I discovered Wireframe.cc, and the truth is that I was quite impressed by the UI. It is super-easy and fast to use. You just drag the mouse while clicking and voila, you have an item of the size of your selection. You click on the type of item you want and you are done with the item. Even if you want to change attributes, you just have to double click on it, and select the attributes you want to change.

Actually, it is the first time I feel that I do not waste my time doing mockups with an application of this kind. From what I’ve seen, this application is starting, and it still lacks of some functionalities and needs some polishment, but I suppose that those will be added in the future. Even I think this lack of complexity and lack of tons of box types is what makes you go faster.

I think choosing the right tool for a job is a matter of personal preferences and personal needs, but I would recommend trying wireframe.cc and taking a look at the other apps I pointed out at the beginning of the post.

Feel free to share any other tool you find useful in the comments 😉

Trackback URL

, , , , ,

  1. Ivan
    27/03/2009 at 3:02 pm Permalink

    Joer Pau, ¿tu me lees la mente? (o deberia decir el mantis)

    Justo esa era una de las tareas que tenia marcadas para la proxima semana. Fijate en la foto de moda2012 que aparece debajo de la sección “ropa” (la de la chica en ropa interior). Aparece deformada justo por eso. El theme es una muy bueno en cuanto a diseño pero tiene errores garrafales en cuanto a programacion (el panel de la derecha “galeria de moda” tambien deformaba las imagenes y lo tuve que corregir de una forma muy parecida a la que explicas en el articulo pero en PHP).

    De todas formas lo mas jodido (o lento) suele ser obtener las dimensiones de una imagen arbitraria.

  2. Pau Sanchez
    28/03/2009 at 2:01 am Permalink

    Se ve que es muy común xD

    Si quieres te pongo el comando de imagemagick que te deja las fotos niqueladas. De hecho tengo una funcioncita mágica en PHP + ImageMagick que coge una imagen, la rota usando EXIF, le pone watermark (si se quiere y en la posicion que se quiera), la escala manteniendo el aspect ratio, y un par de cosas más 🙂

  3. Ivan
    29/03/2009 at 1:21 pm Permalink

    ImageMagick es demasiado pesado 🙂
    No, como yo lo uso es igual que tu pero pongo en el tag IMG el tamaño calculado y dejo que sea el browser quien haga el “trabajo sucio”. Ya sabes que DH es muy suyo con eso de usar demasiada CPU…

  4. Pau Sanchez
    29/03/2009 at 1:41 pm Permalink

    Hombre, todo depende del número de imágenes que haya que resizear al dia. Una vez una imagen queda redimensionada ya no hay que tocarla, gastará menos ancho de banda.

    De todos modos comprendo el tema de DreamHost, y si crees que vale la pena que se haga desde el cliente, no creo que te equivoques.