Razones por las que NO hacer un mockup con photoshop para un trabajo web
Por Elías | 4 de June, 2008.
ACTUALIZACIÓN:
Tema abierto en el foro para debatir sobre el asunto.
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
Popularity: 3% [?]
June 4th, 2008 at 9:02 am
Bueno, yo soy de las usa photoshop + papel pero ahora me has hecho dudar porque es verdad uno pierde el tiempo en detalles cuando precisamente lo que no quieres son tantos detalles pero entonces me surge la duda porque si quieres enseñar algo que propones ir directamente del papel al html y al css? que tal fireworks? o_o
June 4th, 2008 at 9:19 am
no manchen… o sea que hay que programar para mostrar un boceto?? claro que no. Si la creo que hay que usar papel y lápiz antes de agarrar la computadora, pero al pasar el boceto a computadora ir directamente a html y css???
No lo creo. Me quedo con photoshop.
June 4th, 2008 at 10:34 am
Esto son solamente 7 consejos que nos llegan desde unos profesionales reconocidos en el mundo del desarrollo web (para encima adaptados por mi xDD).
Cada uno puede seguir el método que le de la gana y usar lo que quiera, pero es interesante tener en cuenta lo que dicen profesionales tan importantes.
June 4th, 2008 at 10:37 am
No, Talina, simplemente estar conciente de las limitaciones que tiene Photoshop para estas cosas. Photoshop es una herramienta de edición fotográfica y es lo más ideal cuando quieres hacer cambios a una fotografía. Un sitio web no es una fotografía, así que Photoshop nunca será lo más ideal.
Si deseas hacer un prototipo rápido sin necesidad de meterte al html y css puedes usar Dreamweaver que por lo menos te permitirá usar la tipografía y capas de manera más fiel a como se comportarán en el producto terminado.
Otra cosa que hay que tener en cuenta es que un mock-up es simplemente eso, no es el producto terminado. En la transición de Photoshop al sitio terminado generalmente cambian muchas cosas.
June 4th, 2008 at 10:46 am
Según mi experiencia, el cliente quiere ver cómo sería su sitio final con la mayor cantidad posible de detalles, es decir, que se vea lo más parecido al producto final, la mayor parte de las veces con un jpg plano es suficiente, la funcionalidad es sólo un concepto en una primer etapa.
Creo que todo depende de uno, del tipo de clientes que uno tenga, así como también de muchos otros factores. Puede que la herramienta más adecuada es la que nos sirve en cuanto a productividad y calidad de producto final.
Saludos!
June 4th, 2008 at 11:50 am
Interesantes consejos, por lo regular comienzo la idea en papel, posteriormente la paso a Fireworks y de ahi le doy estructura y detalle con xhtml y css.
Por cierto Elias, les hace falta un CSS para impresion, pues quise imprimir este post y se ve fatal.
June 4th, 2008 at 11:57 am
Apuntado queda Stan, en cuanto tengamos un ratín miramos para poner opción de poder imprimir los posts y que queden decentes :)
June 4th, 2008 at 12:02 pm
@Elias gracias por tu pronta respuesta!
June 4th, 2008 at 2:50 pm
Alto ahi, si lo q se busca es un “mockup” osea q te aprueben el diseño si basta con photoshop, ya para testiar usabilidad, contenidos y otras vainas hay q usar otros desarrollos, si el diseño (formas, figuras, colores, fuentes, etc) fue aprobado se puede pasar a un prototipo donde se evaluen enlaces, usabilidad, velocidades y esas cosas, pero el primer paso siempre es el boceto y yo soy de los q primero usa el lapiz y luego paso a photoshop q es el lapiz al q no se le saca punta. en resumidas lo seguire usando sin desconocer q muchas de las cosas q dice ahi son ciertas.
saludos!
June 4th, 2008 at 3:12 pm
En realidad a los 37 signals (con todo el respeto que se les tiene) hay que poner lo que dicen en un filtro cual si lo dijera fabiruchis. Es decir, les gusta ser polémicos y exageran sus declaraciones precisamente con el fin de ser escuchados (incluso ellos lo aceptan en su libro). Necesitas estar bien metido en su filosofía para creer que todo lo que dicen aqui es cierto, partiendo del hecho de que fijarse en los detalles está mal (si eres más partidario de Cameron Moll o Jason Santa María seguro amas los detalles).
Ellos hacen aplicaciones web super simples y su filosofía es entregar un prototipo lo más rápido posible. En éste sentido, si eres desarrollador si aplica, pero si tu papel es de diseñador entonces diseña y clávate en los detalles que ese pixelito puede hacer la diferencia.
Y ser bueno en photoshop solo le toma 10 años a alguien que empezó a diseñar sin computadoras. Para uno que comenzó con un mouse en la mano, la computadora y el photoshop es una herramienta tan natural como el papel y la pluma. Si despues de 10 años photoshop aun guarda secretos para tí entiendo que lo odies… pero aun puedes hacer dibujitos!.
June 4th, 2008 at 9:18 pm
y aqui algunas razones del por que no dejar photoshop >> http://jeffcroft.com/blog/2008/jun/04/why-we-dont-skip-photoshop/
June 4th, 2008 at 9:20 pm
Siempre uso Fireworks para diseñar mis sitios. Empecé a usar Photoshop para web hace un tiempo y me gusta más lo que hago gracias a las herramientas de éste. Además, aunque no lo parezca, exportar html desde photoshop o illustrator, es muy bueno. Tiene más opciones de css y anidado de tablas, mucho más completo que Fireworks.
June 5th, 2008 at 3:11 am
Entendamos que 37Signals comparte la misma estética en todos sus productos y no necesita más exploración, su look & feel está pre establecido, no están mal ellos ni ustedes, ellos simplemente han encontrado una forma rápida y sencilla de entregar sus productos, eso es todo.
Probablemente lo que podría aventajar a 37Signals encima de la mayoría que no entendió, y algunos otros más, es que hacen como quieren sus aplicaciones, funcionan y venden, mientras por ahí asoma mucho diseñador que se pelea con el cliente porque no sabe como delimitar su producto… quién dijo yo?
June 5th, 2008 at 5:10 am
Yo uso Fireworks y me va de perlas.
June 5th, 2008 at 1:03 pm
No entiendo porque se tienen que clavarse en el Photoshop para diseñar un mockup?.. El Fireworks es la herramienta perfecta para este tipo de trabajos por ser más sencillo, rapido, adaptable..
Hay demasiados diseñadores que cometen el error de pensar que el photoshop es para todo.. pues no, puede hacer demasiadas cosas pero es limitado para otras como sitios web enteros..
June 6th, 2008 at 12:01 pm
para un mockup usar photoshop es un exito, siempre y cuando lo que necesites presentarle al cliente sea la parte grafica del sitio, o sea, que te aprueben colores, la distribución de los elementos, etc.
Ya cuando te lo aprueban, solo pasas a XHTML/CSS y listo, que sida más trabajao?? ya eso depende de cada diseñador y que tanto conozca las herramientas.
June 7th, 2008 at 7:26 am
CSS??? html ??? para un boceto????
va ser que no, el boceto a de ser algo rápido que de una imagen aproximada del diseño final (que es lo que quiere ver el cliente) y que, sea facilmente modificable, etc.
Fireworks (el que uso yo), photoshop… eso ya a gusto de cada uno, por supuesto Fireworks tiene mayor control sobre los elementos, pero es una locura montar un sitio en CSS y html antes de que el cliente valide un boceto, vista previa, o prototipo como le llaman en algunos sitios, a no ser que tu cliente tenga todo el tiempo y el dinero del mundo… que en larealidad no suele pasar, tal vez sea el caso de los “superprofesionales” que dan los consejos, pero hay una cosa que se llama la vida real :-)
Saludos !
June 9th, 2008 at 6:15 am
Yo soy de los que usa papel y después pego el salto a HTML + CSS
Creo que las pocas veces que he utilizado photoshop para hacer un diseño me desvío de lo que sería un simple boceto, es verdad que te vas a los detalles y el hecho de no poder hacer zonas “activas” es algo importante.
Además pienso que es mejor ponerle un portátil al cliente para que pruebe su web y navege en vez de pantallas sobre papel. El mismo te dirá lo que le gusta y lo que no probándolo el mismo.
June 13th, 2008 at 6:00 am
Uso el fireworks desde la versión 3, por lo que al photoshop lo utilizao para ciertas cosas puntuales (más porque soy un diseñador web)
Hoy me dedico al diseño de interacción y la verdad que el tener el fireworks mejorado y que ADOBE haya permitido una evolución de compatibilidades del mismo hacia otros programas (más alla que siemrpe pude abrir de todo) y quitando al image ready que no le llegaba a los tobillos…es una buena forma de realizar cualquier esquema de prototipados. El papel también me ha parecido una forma muy buena de presentación más calida hacia el cliente, pero lo pueden utilizar los que tengan buen pulso jeje
En sintesis, creo que los wireframes o prototipados se deben utilizar programas vectoriales o en papel. El phtoshop o cualquier programa válido para visualizar como queda el look & feel de un desarrollo debe ser un paso posterior.
June 14th, 2008 at 3:00 pm
Photoshop?… para interfaces está Fireworks. Photoshop está adaptado para edición fotográfica, no interfaces. Aquí comienza el problema.