Como nunca se sabe y es mejor prevenir que curar, los chicos de teehan+lax (que ya les tocó hacer trabajos con el iPhone como protagonista) ponen a nuestra disposición de forma totalmente gratuita un mockup en formato .psd listo para descargar de forma gratuita y que podremos editar a nuestro gusto. El .psd no solamente incluye la interfaz completa del dispositivo, también encontraremos otros elementos gráficos del software usado por el iPhone como botones, listas, cajón de búsqueda etc.

Enlace: iPhone GUI PSD

En prácticamente cualquier proceso creativo, especialmente para la web, el primer paso es crear un mockup, esquema o como lo quieras llamar. Un primer boceto con los puntos básicos y esenciales que luego serán desarrollados con más detalle en pasos siguientes. Confieso que yo soy de los que usaba el photoshop junto con el papel para hacerlo, hasta hoy que leo un interesante artículo de 37signals (que de esto de interfaces saben un rato) donde nos dan algunas claves de porque NO debemos usar photoshop para hacer nuestros mockups de interfaces web. Una adaptación totalmente libre al español de los 7 consejos que nos dan:

• 1.- Photoshop limita completamente el trabajo, no se pueden incluir enlaces, áreas “clicables” o menús. Con el papel pasa lo mismo. Lo ideal es [añadido por mi] primero hacer un planteamiento muy básico sobre el papel [/añadido por mi] y luego pasarlo a CSS/XHTML, donde representaremos lo que se hizo en papel más resto de funciones básicas como navegación, enlaces etc.
• 2.- Photoshop proporciona muchas herramientas para conseguir detalles y justamente buscamos lo contrario, no queremos dar detalles concretos, solamente lo esencial. El programa nos distraerá en cosas que ahora no tocan hacer.
• 3.- La fuente de un sitio forma parte imprescindible y es muy probable que necesites cambiarla varias veces. Photoshop hace más complicado este proceso: abrir el .psd, seleccionar la fuente del lugar concreto que queremos cambiar, cambiarla, exportar a .png .jpg para poder enseñar los cambios a, por ejemplo, un cliente etc. Además de que en photoshop las letras NUNCA se comportan igual que en la web, a pesar de darle la misma fuente con las mismas características en el programa se ve de una forma y en la web de otra [añadido por mi] (nunca entendí porque pasa esto) [/añadido por mi].
• 4.- Photoshop se enfoca en la producción y no en la productividad. En este primer paso se busca conseguir los puntos esenciales para crear un sitio accesible, claro etc. Luego nos preocuparemos de darle un aspecto “bonito”.
• 5.- Perderemos tiempo en pasar el mockup de photoshop a css/html.
• 6.- Con html/css podremos seguir un flujo de trabajo mucho más productivo: Hacemos el cambio, guardamos y refrescamos.
• 7.- Photoshop es poco práctico, aunque lo manejes desde hace mucho tiempo, es complicado hacer las cosas de forma simple.

Como digo esto es una adaptación muy libre del artículo original, para leerlo exactamente como es pasarse por el sitio. Al final del mismo comentan algo importante: con todo esto no se quiere decir que photoshop sea un mal software, solamente que no es el idóneo para crear mockups. El papel+lápiz+html+css es la combinación perfecta.

Enlace: Why we skip Photoshop