Razones por las que NO hacer un mockup con photoshop para un trabajo web
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
También checa esto
33 comentarios en “Razones por las que NO hacer un mockup con photoshop para un trabajo web”
!Coméntale sin miedo!
Isopixel social
Reseñas
Fuji X100: Primeras impresiones
3 ene, 2012
Mio Classic 500 – GPS para autos
26 dic, 2011
Unboxing: Kindle Fire
22 nov, 2011
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
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.
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.
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.
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!
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.
[...] A colación con todo esto de los mockups, en isopixel publiqué un interesante artículo sobre el tema traducido del original publicado por 37signals. El asunto implica cierta controversia por lo que [...]
Apuntado queda Stan, en cuanto tengamos un ratín miramos para poner opción de poder imprimir los posts y que queden decentes :)
@Elias gracias por tu pronta respuesta!
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!
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!.
[...] Isopixel han traducido las 7 razones para no hacer Mockup en Photoshop para tu proyecto web que publicaron en 37signals. A pesar de esas razones yo me sigo quedando con [...]
y aqui algunas razones del por que no dejar photoshop >> http://jeffcroft.com/blog/2008/jun/04/why-we-dont-skip-photoshop/
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.
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?
Yo uso Fireworks y me va de perlas.
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..
[...] servidor abría un tema dentro del foro sobre el post “Razones por las que NO hacer un mockup con photoshop para un trabajo web” que se publicó en el blog y creó varios interrogantes. En el tema del foro varios [...]
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.
[...] Isopixel – Traducción libre del articulo original [...]
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 !
[...] A colación con todo esto de los mockups, en isopixel publiqué un interesante artículo sobre el tema traducido del original publicado por 37signals. El asunto implica cierta controversia por lo que [...]
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.
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.
Photoshop?… para interfaces está Fireworks. Photoshop está adaptado para edición fotográfica, no interfaces. Aquí comienza el problema.
GRACIAS A LA ASESORIA DE CORPORACION ESTUDIO UNO LTDA . ESTAMOS EN BUSCADORES Y LO MAS IMPORTENTE REFLEJA NUESTRA INVERSION EN MAS CLIENTES CADA DIA MAS … NO SOLO VISITAS ,,, DEBES EXIJIR A TU SEO Q TE REFLEJE EN VENTAS EL POSICIONAMIENTO WEB . ESTAMOS AGRADECIDOS CON http://WWW.ESTUDIOUNOLTDA.COM / http://WWW.WEBSTUDIO69.COM / http://WWW.GENIOSVIP.COM
¿Dónde puedo ver buenos tutoriales de Mocups para CSS? ya sea trabajado con PS o Fireworks…
No obstante, estaba haciendo un Mockup en Photoshop y exportaba las imágenes que cortaba (Crops)… pero el resultado final, los colores, eran diferentes al del proyecto o Mockup original… ¿Alguien sabe por qué pasa esto?
Interesante discusión.
Personalmente estoy de acuerdo en el punto que Photoshop está bien para lograr detalles bien acabados, lo que vale a la hora de encantar a un cliente.
Pero es cierto que en los detalles podemos gastarnos valiosas horas extra, y para eso viene mejor pasar directo del “mockup” o “boceto” al html/css.
Para esto último, encontré recientemente una herramienta que nos permite crear “mockups” en tiempo real, con una interfaz muy amigable.
Les recomiendo que la visiten: http://www.balsamiq.com/products/mockups
pd: a los 5 minutos de usar el demo verán una alerta de “game over”, pero le pueden meter fichas presionando el botón “dismiss” =)
NO estoy de acuerdo con el artículo, Saludos!
Pero, es muy básico de entender. EL PHOTOSHOP es un software para edición de imagenes pero no más allá.
Para armado de bocetos, maquetación vía imagenes, esta el Fireworks.
Creo la gente se mal educo tomando el photoshop para este tipo de trabajos.
Es simple. No entiendo porque no usan Fireworks, es muy completo, hace 8 años que lo uso y tiene todo lo que un diseñador web necesita.
[...] En mi busqueda por encontrar consejos y tácticas para entregar esto lo mejor posible llegué hasta una de las bibliotecas de cualquier diseñador Isopixel.net(merezco algo por esto) donde nos traducen muy a su manera y agregándole un poco de su cosecha las Razones por las que NO(debes) hacer un mockup con photoshop para un trabajo web. [...]
Sos un imbecil! Soy director creativo con mas de 20 años de experiencia y me vas a decir que photoshop no es bueno para hacer mockups? Esta muy mal. Seguramente no conoces bien la herrmienta nosotros hacemos mockups para clientes MUY importantes en photoshop.
No son muy buenas las razones, a nivel produccion, realmente el cliente, desea ver como quedará y apartir del PSD comenzas a recortar y trabajar en el maquetado. Sinceramente no es limitarte sino generar dinámica de trabajo.
Si haces un wirefame existen muchas herramientas para algo escueto, pero te aseguro tiene mas peso la imagen que unas lineas rápìdas.