This post is a mockup about the application i’m doing for the jetpack Design challenge.

The application is called iWorld – it lets the user adds (register) to their favorite social network, mail, blogs and even RSS feeds. It is a simple interactive application.  this picture  shows how it would look like simply.

A preview of iworld

since it is going to be jetpack application, which means everything in the browser.First the user registers in any of the offered feature ( right window) and enable it , it pops a box inside the iWorld window, where the user re-sizes it and puts it where he/she likes , which makes iWorld personalize to each user. The cool feature in iWorld is the notification feature , where is uses the notification built-in function from jetpack to notify the  user if any update occurs (represented in the yellow box up-left).

This mockup image was done by  Balsamiq, amazing flash tool.

I’ve taken an introductory course in Human-Computer Interaction, and as part of it, I need to create paper prototypes of an IPhone app. We folks considered actually doing it on paper, as our instructor suggested, and decided it’ll be way too much of a pain. We found these rather useful links which told us how to use Adobe Fireworks for creating iPhone mockups.

First on is the link to download a trial version of Adobe Fireworks, or buy it, if you so wish. Here.

Then this toolkit by folks at Blogspark, where every element you need has been redrawn as a vector so that you can edit it to your heart’s content, copy-paste, drag-drop… here.

And finally, this video explaining how to go about making iPhone mockups using the toolkit. Here.

It’s really really easy. Even a total noob like me, who has no idea of what looks good and has no experience of designing goodlooking things on the Net could come up with rather slick-looking iPhone screens. It’s great that there’s a framework like Fireworks which is designed explicitly for web prototyping. Fifteen minutes into the video, and you should be able to figure out most things on your own.

Damn awesome. I’m using Fireworks much more often now.

When you’re trying to pull together all of the elements for a website, having a tool that can help you to build a mockup or wireframe in a matter of minutes can make a world of difference. Mockingbird is such a tool: You can drag and drop user interface elements onto a page, rearranging and resizing as you go. You can even link together the various pages within your mockup so that anyone you share it with can immediately see how a user might navigate through the site.

The web-based application has been developed with simplicity in mind. Any task that could be made automatic or streamlined has been. Even sizing text has been automated — if you resize an object, any text associated with it will be adjusted to match. You can add as many pages to a mockup as you like, with as many elements as you need. Mockingbird offers a wide array of user interface elements based on the elements that are commonly used in building web sites. From embedded videos to different types of text, you can easily drop in anything you’d expect to see on a web site. It’s the little things that make Mockingbird a solid tool: you can snap elements to a grid, so that your mockup looks clean without requiring you to spend extra time getting it that way.

Unfortunately, there are no templates that you can base your designs on, but overall, Mockingbird has been designed with speeding up the process of creating a web site in mind. It’s easy to share a mockup with clients or other stakeholders in the design process. Mockingbird will provide you with a link that you can send out, or alternatively you can use an embed code to place it on a web site.

Being able to embed your mockups is a nice alternative to trying to share a mockup with a whole list of people via a email — instead, it’s just a matter of following a link over to whatever system you use to communicate with coworkers or clients as a matter of course. There’s also no need to install anything in order to view Mockingbird’s mockups — even Flash is unnecessary. The application is based on Cappuccino, a web app framework that doesn’t use plugins. It may not be the best choice for projects that require some privacy, however, as it looks like anyone with the link can check out your mockup.

Mockingbird is in beta and is currently free to use — you can actually demo the application without even registering. However, to save a mockup, you’ll need to provide an email address and a password in order to create an account. If you just need a tool to pull together a quick mockup, it’s ideal — you don’t even need to know much about web design, making it useful for a non-designer communicating ideas to a designer, and the ability to embed your wireframes is a nice touch that isn’t available in some of the other wireframing web apps like Balsamiq and FlairBuilder. However, if you’re doing a lot of web design work, you may need a more robust solution. If, for instance, your workflow requires you to be able to download your mockup to use in other apps, Mockingbird does not currently provide that option.

Which wireframing tools do you use?

Penulis pernah merasakan kekesalan yang amat sangat ketika customer penulis meminta perubahan UI yang significant.Padahal coding sudah jalan setengah..sungguh melelahkan dan merupakan pekerjaan yang sangat sia-sia dengan merubah UI. Hal ini merupakan kecerobohan penulis sendiri yang tidak meminta signing dari design yang sebelumnya sudah penulis utarakan.
Ok cukup sharingnya . Sekarang penulis akan mengungkapkan salah satu tehnik untuk mocking UI and wireframing.
Pernah kebayang tidak requirement dari customer sudah diperoleh dengan bantuan sales saat meeting dengan pihak client mengenai design.
Kebayakan sales selalu melempar issue ini selepas jamuan/meeting dengan client. Kenapa tidak saat awal meeting kita dah mendapatkan gambaran realnya (walau tidak secara detail).
Ok harus ada tool yang membantu kinerja development disisi sales dan developer.

Saya listing beberapa tool yang specifik sangat elegan dan tentunya tidak open source hehe…
a. Balsamiq Mockup for desktop – http://www.balsamiq.com/products/mockups
Bisa digunakan untuk web design, desktop design, iPhone
b. iPlotz – http://iplotz.com/
Bisa digunakan sebagai SaaS or desktop version.
c. Napkee – http://www.napkee.com/
Bisa import file from Balsamiq to be generated its HTML,CSS and JavaScript.
d. IXEDIT – http://ixedit.com/
e. HotGloo – http://hello.hotgloo.com/
f. Axure – http://axure.com/

Go live UI designer for WEB .
Saat ini suka menggunakan Balsamiq untuk designin UI mockup.

See u on another story. Cheers

What a cool way to mock up web app.  Here is my first design that I am about to work on.

To, Balsamiq team: Keep up the good work, and probably need to give a catchy name.  Balsamiq is too hard to remember.  Really like the integration approach with Atlassian product like Jira and Confluence.  Thumbs UP!

Após uma grande pesquisa pelo vasto e misterioso mundo da internet, selecionamos para vocês os nove melhores mockups de iTablet, iPad, MacPad ou seja lá o que for, em ordem crescente de preferência..

Confira:

9°:

8°:

7°:

6°:

5°:

4°:

3°:

2°:

1°:

I missed a post last week so let me start off with what I accomplished last week. After tweaking my business card, I got to work on the portfolio mockups. I finished the first mockup, but I think bits of it are due for a revision. The final design will be completed on schedule by wednesday next week on Novv. 4th.

I decided on a single page design, with a nav at the top to find different work and the About me/Contact sections. I learned a while ago from an artist I admire that presentation is just as important as the work itself, so I wanted my work to stand out. I added a bit of interest with a description of each piece.

I felt it was important to put myself on display in the about me section, I want potential clients or employers to see that i’m a real person, and not afraid to put myself and my work on display. I got a friend to take some photos here at school, and I cut myself out from them and put myself infront of a background I photographed while in Vancouver this summer. I wanted the picture to appear real, and condusive to inviting trust. Here’s the pic.

On the agenda for the next week, I plan on adding ALL my work to the mockup I wish to display, as well as fixing the header. It doesn’t yet feel like a polished unit. Then after that, I’ll cut it up, and get it into html!

At work the web team are using a product called Balsamiq to create basic template designs for customers. It looks alright, the designs are a bit kiddy, but that’s the idea, it’s suppose to be quick designs, electronic sketches.

Seems alright, just not my cup of tea. It’s many designed for web designers, but it’ll do any time of form design, it’s good in the fact you don’t need to worry about programming language so you don’t have to worry about does Java have the same buttons (or whatever) as Visual Basic. One nice, feature, they have a iPhone support, ie, you can plan your iPhone apps.

The program was\is created by a former MacroMedia\Adobe employee, so, surprise surprise, it uses Adobe Air. So no worries about, does it work with Mac\Windows\Linux whatever the hell the kids play with nowadays, also allows an online version.

They do offer free versions for good causes, so might apply for a license… once I can get use to the darn thing.

Wireframes are a crucial part of the web design process, especially if you’re working with a team. A wireframe makes it possible to discuss the design before having to invest time and money into the creative aspects — time and money that might be wasted if a significant change is made to the design. Taking wireframes online is a logical next step: if you’re working with a team distributed around the world, having an online application just makes sense.

MockFlow is that application. With it, you can quickly drag and drop components into a mockup of what a web site might look like. You can also map out your site as a whole, easily adding pages. The built-in component set includes more than seventy pieces commonly used in web design, such as fields for data input, banners and dropdown menus. You can even drop in charts and graphs, which can mocking up something other than a website an option with MockFlow. Want to go a step beyond a bare bones wireframe? You can upload images of your own, as well as stickers for standard widgets and plugins. Adding a Facebook Connect button or a PayPal Donate button can be done just by dragging and dropping it wherever you want it.

On top of the ability to quickly pull pieces together into a mockup of what your web site will look like, you can bring collaborators on board for even the very beginnings of the design process, as long as you know their email address. You have the option of inviting your team members as editors, who can make changes to your mockup, or viewers, who are limited to reviewing and commenting. There’s no need to try to manage comments on a dozen different copies of one file that you’ve sent around to your team — a massive improvement over the usual process. MockFlow incorporates real-time chat, as well as annotated feedback, making it easier to work on a design from wherever you happen to be.

When you’re ready to move past a wireframe, MockFlow allows you to export your designs. You can export them as an image or as a PDF. You may also want to export your designs at various points through the process, but MockFlow does securely host and backup data using Amazon’s (s amzn) EC2 and S3 services, however, so exporting your designs in order to back them up isn’t really an issue.

You can try out a MockFlow account for free. The free account allows you to build one mockup with up to four pages and share it with two collaborators. This basic version does not allow you to use the chat feature or export designs easily (your images will have a MockFlow watermark). The premium version is priced at $49 per year. It allows for unlimited mockups, as well as unlimited collaborators, and allows you access to all of MockFlow’s features.

MockFlow was developed by Produle Systems, which started by creating a Flash widget builder (s adbe). The company is also responsible for JukeBuilder and iPixer, which allow you to build branded MP3 players for the web and annotate multimedia, respectively.

Have you tried MockFlow for web site wireframing?

Nota: Este post es parte de una serie titulada Consejos para Enfrentar un Proyecto Web y viene después de Consideraciones Generales.

Update: Hay una edición de este post en Cristalab: Cómo afrontar un proyecto web. Parte 1: Del Mockup al CSS.

En esta ocasión, trataremos tres partes del proceso que son fundamentales en el desarrollo de nuestro proyecto web. En este caso hablamos del diseño de un sitio web en XHTML, pero parte de las consideraciones escritas aquí valen también para otro tipo de proyectos/tecnologías.

1. Mockup: Piensa, Intenta, Borra, Piensa, Intenta de Nuevo.

   La ventaja de hacer mockups antes de comenzar a maquetar es que te permite experimentar diferentes estructuras para el sitio, buscar las fórmulas que funcionen mejor en cuanto a usabilidad, accesibilidad y legibilidad.
   Al contrario de lo que algunos piensan, el momento de la planificación inicial es uno de los más críticos en el proceso de realización puesto que mientras más tiempo inviertas en organizar tu sitio/aplicación, menos tiempo gastarás haciendo modificaciones de última hora o resolviendo imprevistos, como que de repente a tu cliente se le ocurra que quiere agregar un link a la cuenta de Twitter que su hijo le abrió el día anterior.
   Este es entonces el momento perfecto para hacer lo que se conoce como “análisis de software”. Pensar en cómo será el producto antes de comenzar a crearlo es avanzar el 50% del trabajo, sin haber escrito una línea.

2. Mientras Más Propuestas, Más Problemas.

   Aunque a primera vista te parezca que darle varias opciones a tu cliente te hará quedar como un genio y es -en sí- una gran idea, realmente no lo es, al contrario es una idea pésima. A excepción de unos muy pocos clientes, que debes atesorar el resto de tu vida, que tienen una cierta idea de lo que significa tener presencia en la web y cómo eso puede reportarles beneficios reales y -sobre todo- que tengan una idea más o menos clara de lo que realmente desean, la mayoría de los clientes son como niños que comienzan a entrar en el mar: No tienen real idea de lo que están haciendo y de cuánto puede influir el diseño en el éxito o fracaso de su sitio.
   Siempre recordaré a aquel cliente que una vez me dijo que quería tener muchas propuestas, como cuando compra un automóvil, que puede escojer entre una amplia gama. Tuve que explicarle que en su caso sería como pedir tener una amplia gama de automóviles hechos a mano para poder escoger: ninguna empresa hace eso porque la pérdida sería mayor a la ganancia.
   Lo que suele ocurrir la mayoría de las veces es que presentas una serie de diseños diferentes y la selección final es la combinación de partes de un diseño con partes de otro y así hasta el infinito. En otras palabras: más propuestas sólo aumentarían la indecisión del cliente y, por un lado atrasarían el proyecto (porque necesitaría más tiempo para decidirse), mientras por el otro hay más posibilidades de que la escogencia final sea un diseño completamente diferente, una especie de Frankenstein web hecho con piezas de tu propuesta.
   ¿Solución? Presenta dos -máximo tres- propuestas y prepárate.

3. Maqueta de Forma General y Flexible.

   Tu mejor arma es pensar fuera de la caja, ir más allá que cobrarle por hacer ese pequeño portal de lindos colores y grandes imágenes. Si tu cliente te resulta fiel, querrá que te encargues de cosas como el mantenimiento del sitio o de sus futuros rediseños. Si no quieres que estas futuras tareas se conviertan en un verdadero dolor de cabeza, lo mejor es buscar una forma de maquetar (y con maquetar me refiero a (X)HTML) de tal manera que los futuros cambios no impliquen ninguna o la menor cantidad posible de cambios en la estructura del sitio. No importa lo fácil o difícil que resulte cambiar o no una o dos etiquetas, si la estructura está bien hecha ¿por qué deberías cambiarla? Lo ideal siempre sería que un cambio en el diseño pueda realizarse con CSS y/o cambiando las imágenes correspondientes, sin necesidad de tener que repensar sobre la estructura o la legibilidad de tu sitio.
   Por otro lado, mantener una estructura general y flexible siempre te permitirá crear plantillas/snippets que funcionen en casi todos tus proyectos, haciendo más eficiente la reusabilidad.

4. Semántica, Estándares, Validaciones.

   Sí, quizá yo sea un purista (aunque espero por el FSM que no sea así), pero al menos en los dos primeros casos me parece que lo mejor es apegarse a la norma; en el tercero acepto cierta flexibilidad. Aún recuerdo a Freddie diciendo una gran verdad: Si un sitio cumple su objetivo (generar dinero) ¿Qué demonios importa si el sitio es válido?
   No puedo decir que Freddie no tenga razón, después de todo, es un negocio de lo que hablamos, pero también es cierto que un etiquetado y un css válido permiten una interpretación más fiel en los navegadores y ayudan a conservarlos en el tiempo. Personalmente me preocupo por la validación pero dando prioridad a la funcionalidad. Sé que hay gente que piensa que no sirve de nada, incluso he oído gente que cuestiona los estándares por ser impuestos por la W3C, pero en ese caso, lo dejo a criterio de cada quien. si te funciona, está bien por mí, pero, por amor a lo más sagrado, ¡deja de maquetar con tablas!
   Ahora, sobre la semántica y los estándares, creo que nisiquiera merece la pena la discusión. Creo que es más que obvio que estas dos herramientas juntas son prioridad sobre todo en orden al SEO y la accesibilidad.

   Personalmente, procuro maquetar siempre bajo XHTML Strict, lo que me ayuda a descubrir posibles errores (como que olvide cerrar una etiqueta o colocar un “alt” a una imagen) y  CSS2.1.

5. Inspírate en Quienes Quieras, No te Copies de Nadie

   Nadie quiere ser reconocido por robarse el trabajo de otros, aunque de un tiempo a esta parte parece estar de moda creer que es válido tomar cualquier cosa de internet y hacer creer que son propias, o peor aún, pedir a otros que “nos regalen” la solución a nuestros problemas, como si preguntar en un foro equivaliese a encontrar una manada de esclavos que hagan el trabajo por el que yo voy a cobrar. No, nadie quiere ser reconocido de esa forma.
   Sin embargo, es perfectamente válido mirar el trabajo de otros, ver cómo solucionan los retos que sus proyectos representan, decubrir nuevas paletas de colores o formas ingeniosas de lidiar con el proyecto. Nadie puede acusarte de inspirarte, pero copiarte sólo te dará mala fama en internet (de eso puedes estar seguro) y, en algunos casos, hasta acarrearte problemas legales.

6. Usa un CSS Reseter

   Todos los que hemos maquetado sitios sabemos el dolor de cabeza que significan los navegadores y sus interpretaciones particulares del CSS, por lo que un Reseter que nos permita partir de un punto en común resulta un gran aliado a la hora de solucionar problemas con esto. No siginifica que todos los problemas de modelo de caja quedarán resueltos (el trabajo no puede ser tan fácil), pero sí que ayuda mucho a resolver al menos los más comunes.
   Aquí veo venir la pregunta obvia: ¿Cuál reseter usar? Hay cientos en internet. Lo mejor que puedo hacer es hablar de mi experiencia: Comenzar usando uno relativamente general y luego irlo personalizando de modo que funcione de la mejor forma posible para tus proyectos. Algunos de los más populares (que conozco) son el Tripoli Reset (en este artículo de Daniblog se explica muy bien y en español), el CSS Reset de Eric Meyer y luego, frameworks CSS como 960, YUI o el muy popular Blueprint.

   ¿Por qué personalizarlo? No es que sea obligatorio, pero quizá haya cosas que no te gusten del Reseter que selecionaste (como que quite el “bold” a la etiqueta “strong” o que elimine las viñetas de las listas), si ese es el caso, bien puedes irlo ajustando a tus necesidades y forma de trabajar.

7. Ordena y Comenta tu CSS

   Hay pocas cosas tan molestas como encontrarse un código sin comentarios que te obliga a leerlo todo para entender por dónde van los tiros. El CSS (aunque no es código) no es la excepción. Escribir los estilos como se te vayan ocurriendo sólo te asegurará dolores de cabeza al tratar de arreglar algo después de haber cerrado el archivo o -peor aún- a la hora de hacer un rediseño.
   Es por eso que son tan importantes los comentarios como el orden en que se escriben los estilos (Recuerda que los estilos son en cascada, es decir, un estilo se sobreescribe con el siguiente en el orden en que aparecen en el CSS). No tienen que ser extensos comentarios explicativos, puede ser simplemente para separar el código. Yo suelo dividir mi CSS de esta manera:

   1. Reseter
   2. Etiquetas
   3. Layout (Estructura General del Sitio)
   4. Elementos (Los elementos internos del Header, el Contenido, el Footer…)
   5. Clases (Que no están necesariamente vinculadas con una parte específica del documento)

   En cada división coloco un comentario para localizarlas más fácilmente. Hay formas más elaboradas para hacer esto, pero yo prefiero cosas sencillas y efectivas. Lo realmente importante es que sea un documento legible y que evite tener que estudiar en el MIT para poder hacer cambios al CSS

8. ¿Progressive Enhancement (Mejora Progresiva) o Graceful Degradation (Degradación Agraciada?)?

   Otra de esas discusiones eternas con argumentos válidos de cada lado. Personalmente soy partidario del Progressive Enhancement, pero una vez más digo que no hay que cerrarse a diferentes perspectivas. Por lo tanto, mi consejo es evaluar qué es mejor para cada proyecto y utilizar la técnica que resulte más efectiva para cada caso. Esto sobre todo es cierto cuando se trata de rediseñar un sitio, puesto que te encuentras frente a algo que ya ha hecho otro (o tú mismo) desde una de las dos perspectivas. Si me permites el consejo, dale prioridad al Progressive Enhancement sobre todo si vas a construir el sitio desde cero.

Bien, creo que con esto tenemos bastante, como siempre, hay cosas que se quedan en el tintero y cosa que podrían profundizarse más, pero este artículo sería interminable y no es la intención. Sería de gran ayuda leer sus impresiones y críticas, además de nutrirnos todos con sus experiencias.

En nuestro próximo encuentro, charlaremos acerca de Javascript.

Etiquetas Technorati: diseño, arquitectura web, progressive enhancement, proyecto web, css, xhtml, mockup

Se você tem um iPhone ou iPod Touch com muitos Apps, certamente adorou o vídeo acima, que é um mockup de uma empresa de design da Suécia. Se você não tem, eu explico: embora bastante elogiada e bonita, a interface do iPhone OS tem o problema dos Apps, que é bem simples, só cabem 12 aplicativos por página. Se você tem um monte deles, fica cansativo passar da primeira para a última página (12 pinceladas com o dedo).

Esta é a proposta do vídeo, um Exposé para o iPhone OS, que certamente tornaria as coisas muito mais fáceis. Claro, há alguns empecilhos: e se o cidadão tiver, por exemplo, 10 páginas de apps? Uma nova página de Exposé perderia todo o sentido. Mas eu confio na Apple e sei que, se um dia eles trouxerem este recurso para o sistema, haverá uma solução muito criativa.

Afinal, você não sabe o que quer até tio Steve dizer.

Esses dias recebi o link para o site alemão Pundo3000. Ele faz comparações da foto da embalagem e da foto do produto real que vem dentro. As diferenças são impresssionantes, e no dia-a-dia a gente acaba se acostumando né?

Como boa publicitária, já aprendi que os produtos feitos para virarem fotos das embalagens são mock-ups (o leite é lactose, o sorvete de biscuit e bolachas de isopor!), mas a galera dá uma exagerada, até parece que não viram o produto de verdade!

Eu vivenciei isso essa semana, na compra do novo Suflair Senses:

Cade o creme?

E você? Já se sentiu enganado por alguma imagem de embalagem? É hora de desabafar e alertar as outras pessoas, deixe um comentário!

With abilities for even more apps

A few days ago, Boy Genius reported from their “Apple Insider”, that Apple may be designing a “touchscreen Apple TV remote”. Note that the image is a mockup and not the actual device. The device is said to have all capabilities for Apple TV features and make us think that, maybe… Apple is designing a new Apple TV. This remote may also be able to control other programs for Mac like Front Row and Safari. This remote will obviously be pricey if it indeed comes out, but that’s Apple for you! On the iPhone and iPod Touch, there a many applications like “Remote”, “Air Mouse” and “Rowmote” that control Mac, and PC programs for under $10. It will be an interesting device, so stay tuned for more.

Olhe para a imagem acima e em seguida para o post logo abaixo. Sim, segundo o 9to5 Mac, este mockup do novo Mighty Mouse tem chances de ser oficialmente o substituto do “sabonete” da Apple.

Sinceramente eu não acho que ele seja confortável: olhe para a parte do pulso, ela é pronunciada para cima. Isso significa que os braços teriam que ficar um tanto quanto inclinados para cima, o que é extremamente incômodo. É uma questão de design contra funcionalidade.

Ah, tem mais uma coisa. Segundo os americanos, o mouse terá no topo uma superfície multitouch! Eu sei, é muita imaginação e eu sinceramente não acredito que a Apple vá lançar um periférico assim – ainda mais com esta nova política de preços mais baixos. Mas como a empresa de Cupertino adora nos surpreender, eu não vou afirmar nada precipitadamente, xD.

]]> http://guestroom106.wordpress.com/2009/09/30/seattle/ Wed, 30 Sep 2009 21:35:00 +0000 jessicamars http://guestroom106.wordpress.com/2009/09/30/seattle/

Ah! nuevo layout, probablemente definitivo. Guest Room 106.

Oh! new and definitive layout for now. Guest Room 106.

Import your Pdf files to write notes, comments and even draw on it. You are able to change the thickness, colors and have various tools to add your thoughts to a Pdf document. Pdf, Ps and Svg are file formats that are currently supported. Whyteboard shows small Thumbnails on the side and thats really nice and additionaly Notes. The Tools bar and the Thumbnail bar can be minimized and switched to full screen for presentations. Additionaly your actions are recorded and there is a History Viever where you can watch a replay.

Here is a short video showing some features:

The application is hosted on g. code code.google.com/p/whyteboard/ and on launchpad.net/whyteboard

Now we come to a new part for kurious blog. Opinion!

Whyteboard is a good application works good and is fast but there are still few bugs and some really necessary features that are not present without which nobody would really use this application. The UI is simple and you don’t need a huge documentation on have to use it and thats good. All features are easily and clearly visible and accessible without going through thousands of menus and options.

If you have a bar with icons like new, open, save, etc. why is there no icon for full screen or a zoom. I tried to find how to zoom in the document but couldn’t find it. This feature is still missing like some other like if you want to use the Eraser you won’t erase the lines or the text you wrote but the whole document. The 3×3 color buttons aren’t really necessary a color picker would do a better job. The tabs are nice but they would be better if they would be smaller and you could see more than just two. Don’t open Pdf that has 1400 pages as it will kill your system with the memory load during the conversion process. Here is a UI Mockup:

I added the features I would like to see and changed some positioning. The left side wasn’t touched a lot as it would have taken time to do so especially in the graphics application I used. I did the mockup in Gimp so don’t expect a lot!

If there are a few things I don’t miss about the early days of my design career, it was that icky feeling of spray adhesive landing in the hairs of my arms and the dangers of Xacto blade cuts… but I do enjoy the “craft” of getting down and physical with my design work now and then. I hope I never get to the point in my career where I think building a comp is “beneath me”, though I do know how time consuming it can be…

For example, here’s a box I’m working on. It will hold salad dressing packets on grocery store shelves, should the stores choose to use the box rather than putting the dressing mix in their spring-loaded shelf doohickies. First, I had it printed out and spray mounted to card stock.

Then I cut the dieline out with my Xacto and straight-edge, and scored it with my “homemade scoring tool” I learned to build back at HL2 (it’s a paperclip wrapped with electrical tape on one end).

Once I could fold it and assemble it, I added in some mockups of the Dressing Mix envelopes. My client wanted to see how the design would look peeking out of the box.

Voila! Now for another trick I learned back at HL2 (back then it was Horton Lantz Marocco) – I took a few photos in the grocery store where the product would be displayed. (This is a LOT easier now that cell-phones have cameras build in!) I later took a head-on shot of the box with the packets in it, and photoshopped it into an area on the store shelf photo to give an idea of how the product will look in the actual retail environment… And here you have it! BACON RANCH STRAIGHT FROM THE FUTURE!

What do you think? (My lesson learned is that I need to pick a brighter PMS color for the red of the box – it’s just too dark on the shelf, though it does pop the illustration!)

Given the need of my “customers” to have something visual I started looking at wireframing and rapid prototyping tools. I wanted to be able to give them a rough sketch to spur discussion and ideas without the sketching method taking too much time and being more trouble than it was worth.

Back in the 1990s, when wireframing was a niche activity, you were pretty much limited to Visio or Illustrator. Nowadays there are a huge number of alternatives

via Help, we’re drowning in wireframing apps!- 90 Percent of Everything.

Turns out I didn’t know what I was getting into as there’s a ton of tools available! Fortunately, I found a few posts trying to make sense of what’s available.

http://ciohappyhour.com/wireframing-marathon-starts/
http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/
http://articles.sitepoint.com/article/tools-prototyping-wireframing
http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/

So far, one of the market leaders appears to be Balsamiq, notable for what they don’t include as much as what they do. It doesn’t hurt that they gave me a free license! I’ll be giving Balsamiq a try for the near future, though I’m hoping the web version is released soon as I think it would make collaboration much easier.

Preamble

(if you rate this I would like to read your comments about your rating)

Part 1 of this series is about Balsamiq,  Part 2 is about ForeUI, Part 3 is about iPlotz and this final review (of mockup tools), Part 4, is about a desktop prototyping program called Mockup Screens.

Mockup Screens is a Windows only program which enables you to quickly and efficiently develop prototypes in Windows, Web and Wireframe (Mockup Screens calls this Black and White) representations.

Download and installation is a snap (you only need your email address and it is never given away according to the author) and you are up and running in minutes – that’s a good deal.

So, on to the rest of the review.

Info on Product:

• Current Version: 4.21
• Platform: Windows
• Pricing: $99 Single Users, $199 Team, $399 Corporate, $249 Educational

Standard Disclaimer

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business for Mockup Screens.  Enough said.

Finally, here’s some links for Mockup Screens:

Home Page

Screenshots

General Info

Pricing

Downloads

Articles

Blog

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Quick look at Mockup Screens.  Here are a few screen shots and some info about various features of Mockup Screens.

General

This is a the default look of Mockup Screens after it has loaded (much smaller of course).  I really like the clean layout of Mockup Screens:  it’s nice and easy to find the features I need to work with without hunting around the UI for what I want to do.  Everything is very well identified with no mysteries about where the Widgets are or where the Basic properties, etc.

Widgets

The Widgets are what it’s all about of course and the Widgets panel is self-explanatory.  Just drag and drop the widget from the panel to the canvas and set the properties:  pretty simple.

Screens

This panel shows a list of named (either by Caption or Alternate Name) screens that are in your current project.  You just click on a screen representation to switch to that screen on the canvas.

Properties

There are 4 property panels including the Comments panel: Basic properties, Advanced properties and Geometry.

What I Did

Here are some screen shots of a sample prototype that I put together.  While it is rudimentary (on my part) it does show how easy it is to create a prototype UI with Mockup Screens:

This is my base screen with a general menu I added in about 2 minutes.  The watermark does not exist in the registered version.

I increased the size of the screen here to fit a couple of widgets into it.

Now you can see that I added a treeview with some items.  Treeviews are very easy to work with using a . (or multiple dot) notation for submenus.

Finally, I added a couple of button with an action to jump to the next screen (just a plain window I did not show here).

Off the Top

Things I liked

What I think really makes this Mockup Screens work for me.

• I really liked the ability to fine tune the placement of the widgets with the Shift-Arrow (fine tune) or Arrow (same as mouse movement) – it’s nice to have exact placement.
• I really liked how clean the Mockup Screens UI presentation is.
• The Jump to Screen option makes it easy to create a generalized workflow from screen to screen.
• The slideshow feature is a real bonus – the ability to navigate through the workflow of your prototype is extremely helpful.
• The ability to export into several different file formats is extremely useful to me – I especially like the .pdf export feature (in all of the tools I use!) as it saves me a lot of time doing my own pdf’s.
• Besides the ability to export your whole project (all scenarios) or selected scenarios is awesome!  It also is very helpful to be able to just take a single snapshot of the current screen I am working on.
• The Screens panel is a very cool feature which really made it nice to navigate back and forth between various screens I was working on.
• The Marks Widget is extremely handy for presentations.  It allows you to annotate certain UI points and when I am presenting a UI it is easier to say ‘look at item 4′ instead of ‘look at the tab widget below the divider bar’ – clarity makes it easier to communicate to the client.

Things I could like

Some things that would be cool (to me) if they existed (suggestions?) or, perhaps corrected, in Mockup Screens.

• I would like it if there was a more hand drawn skin type.  Windows and Web is nice and the Black and White skin is very neutral but I kind of like the hand drawn look of Balsamiq or ForeUI.  Probably just me but when I am working with a customer on a prototype it kind of looks like what it’s supposed to:  a rough drawn sketch.
• I would be good to see the tab key actually work for field navigation in the properties area.  I clicked on the Caption field for my Main Screen (see above) and the cursor did not move to the next field.  This worked the same for the Basic, Advanced and Geometry property tabs.
• It would be great if the Screens panel could be stacked (like a tab control) with the Widgets panel for maximized screen space.
• I would like it if the Comments ‘tab’ was located with the rest of the property tabs.  If that’s too much room for comments then perhaps the Geometry tab could be renamed to Other and then add the comments in its own group box.
• The Widgets needs an Object component that can be set as a circle, oval, rectangle with back colors and opacity.  Additionally, it would be nice to see a different cursor for the line widget other than a line – it’s kind of distracting.
• Adding the ability to choose some basic action for the Jump to Screen feature would be nice such as Click, Select, Change Text, etc…
• It would make more sense (to me) to limit the Jump to Screen feature to UI components that it makes sense to have it on.  ie.. it does not make sense to jump to a different screen to when I click on the Line widget or when I click on the Window background.  If it does I would like to know why…?
• I keep coming back to the properties panels.  The thing is that while they are clean they would be  more useful (just to me!) if they had the ability to undock from where they are and allow you to move them around.

Recommendation

I have to admit that I spent a long time with this review (I usually can get one done each week) but I was having  a hard time finding a lot of reasons why I would buy this product for $99.  Don’t get me wrong:  Mockup Screens has a lot of great potential and it seems to be a very solid base to build on but it kind of feels like that to me:  a solid base for building a top notch prototyping program.

I have communicated with the developer (Igor Jese) and he is a great spark of enthusiasm and productivity.  I have always had the sense that he will do whatever it takes to make Mockup Screens a truly stellar product (and it DOES have the potential for it).

Finally, personally, I would not be able to justify putting $99 into Mockup Screens as it stands (see: Things I could like) but that will most likely change in the future.  This is just my personal opinion and what I think does not detract from the quality of Mockup Screens as it stands.

Tab