diseño web PSD a html -> formas más directas?

Question

En el trabajo, veo a un colega diseñar un sitio en Photoshop/Fireworks, y veo a otro tomar estos datos, dividirlos y usar Dreamweaver para reconstruirlos desde cero.

Parece demasiado aburrido.

Sé que Photoshop puede generar un HTML basado en tablas, y Fireworks creará divs con un posicionamiento absoluto; ninguno parece ser muy útil.

Es cierto que no he probado mucho de (DW/FW) (CS4/CS3) desde que me convertí en programador, así que no sé si las nuevas versiones están abordando este flujo de trabajo, pero ¿aún tenemos un doble manejo? ¿cosas?

¿Se puede adjuntar algún tipo de metadatos diseño (esto es un botón de imagen cambiante, este será un SWF, éste será el texto, este logo se esconden "xyz" <h1> de texto, etc.) en las divisiones para ayudar en la generación de diseño? ¿Hay algunas herramientas secretas que ayudan en este proceso de conversión? ¿O aún estamos restringidos a haciendo cosas a mano?

La frustración continúa cuando dicha página construida a mano necesita ser rediseñada nuevamente para adaptarse a Smarty Templates/Wordpress/genérico CMS.

que reconocer que los diseñadores necesitan estar libres de los sistemas a ser capaz de hacer lo que sea, pero la mayoría de los sitios convencionales tienen:

• un encabezado con la navegación
• una barra lateral más conexiones
• el contenido principal
parte
• tal vez otro barra lateral
• un pie de página

Dada la similitud de muchos componentes, ¿no debería haber un enfoque más sistemático para pasar de los diseños en rebanadas al HTML funcional?

¿O estoy simplificando demasiado las cosas?

-edit- Mmmmm .... Supongo que aceptaré una respuesta, pero en realidad no eran lo que estaba buscando.

Parece que el diseño del DOM es un poco de santo grial ("¡Es solo un modelo!"), Y tal vez con todas las cosas "geniales" que puedes hacer con HTML y Javascript, sería un gran trabajo , pero con un conjunto de restricciones (que 960 cosas parecen interesantes), algunas hojas de estilo de reinicio bien diseñadas y un poco de ... polvo de hadas? deberíamos poder mejorar el flujo de trabajo.

Las tablas de Photoshop por sí solas son bastante inútiles, estoy de acuerdo, pero seguramente podemos tomar esta información, y luego seleccionar un grupo de celdas y decir "correcto, esto es un div de texto, desbordamiento: automático" o "estas celdas" son un bloque de imagen, ajústelo con el mismo alto/ancho que el área seleccionada ". Es cierto que aquí en el trabajo hay otros elefantes en la sala que necesitan hacer sus presentaciones formales a la gerencia, pero algunas partes del flujo de trabajo de diseño> página parecen ... sin educación en el mejor de los casos.

Answer 1

Para mí, hacerlo a mano es una ventaja. Solo tiene que hacerlo bien una vez, y si busca específicamente el atractivo visual, es probable que tenga mucho trabajo por delante para que sea compatible con varios navegadores ...

Me encantaría escuchar otras respuestas Este es solo mi punto de vista ya que hago más sitios basados ​​en datos que visualmente atractivos.

Answer 2

Omega se refirió a él, pero creo que el mayor problema es la compatibilidad entre navegadores. Si no existieran todos esos caprichos del navegador (coughInternetExplorercough), lo que sugirió sería mucho más simple. Sin embargo, a menudo se necesita una gran cantidad de codificación manual para que se vea perfecta como un pixel en cada navegador.

Otra cosa es el control fino. Claro, puedes mostrar tu plantilla de PSD en Dreamweaver o lo que sea y tener un sitio web en funcionamiento, pero va a usar hacks y cosas feas como tablas para que funcione. E incluso entonces, probablemente no funcionará del todo como usted quisiera. También debe recordar cosas como accesibilidad y SEO, y Dreamweaver simplemente no puede proporcionarle eso.

Answer 3

Es un bonito sueño sorta en el cielo, pero creo que siempre que los sitios web estén escritos en (X) HTML/CSS, al final del día, siempre tendrás que hacer algo, la mayoría o la totalidad del trabajo de forma manual.

Existe una brecha fundamental entre los píxeles estáticos en algunos 'software de compras y los sitios dinámicos, cambiantes, en expansión, centrados en el contenido y basados ​​en texto. La mejor herramienta para cerrar esa brecha sigue siendo ... el profesional humano.

Herramientas como iWeb (completamente WYSIWYG) o DW/Fireworks (en algún lugar en el medio) solo lo llevan tan lejos o tienen serias limitaciones. Solo obtiene plantillas prefabricadas en el caso de iWeb, a menudo un código subóptimo en el caso de DW/Fireworks. Deberá decidir con qué limitaciones puede vivir y cuándo es mejor hacerlo manualmente.

Answer 4

Un número de personas hoy en día están diseñando directamente en el navegador usando (X) HTML/CSS debido a ese problema exacto - todo el problema con Photoshop y luego ir al código después de lograr que el cliente firme en un diseño estático.

Una buena lectura es la presentación de Andy Clarke Walls Come Tumbling Down.

Answer 5

Existen varias herramientas como Sitegrinder que hacen precisamente eso.

Adobe sí tiene un proyecto en los laboratorios llama Catalyst que hace lo que describes y más para Flash:

Toma las rebanadas de Photoshop, le permite cambiar sus propiedades y exportarlo a un archivo Flash de trabajo. (Haga clic con el botón derecho en el cuadro, agregue texto, se convierte en un campo de texto ...)

Si ve su video (que debería, es increíble), verá que se engañan al pensar que los sitios web pronto serán construido de esta manera.

Antes de que Yahoo comprara Zimbra, parecía que se dirigían a una herramienta de este tipo que generara HTML multiplataforma similar a lo que hace el catalizador para flash. No más. Pero con las sacudidas en Yahoo, ese software aún puede surgir de las cenizas de Zimbra.

Answer 6

En mi opinión, un sitio debe ser burlado en Photoshop si es necesario, con partes cortadas para su uso en el sitio real, pero para diseñar el sitio completamente en Photoshop, entonces quiero hacer que funcione en la web es simplemente yendo hacia atrás. Realmente los dos deberían hacerse en paralelo.

En diseñadores cortos, gráfico diseño el aspecto de un sitio web, pero se necesita un programador para programa ella.

Answer 7

Salta Photoshop por completo y haz que tus diseñadores se burlen de la vista en HTML. No solo eliminará el proceso complicado e incómodo que está sintiendo, sino que obtendrá diseños mejores y más resistentes, ya que el 100% se basará en lo que sea posible en HTML/CSS, no en lo que sea posible en Photoshop.

Más lectura:

• Why We Skip Photoshop (37signals)
• Walls Come Tumbling Down (Andy Clarke) (a través de Jason Berry's answer)
• Web Designers Should Do Their Own HTML/CSS (37signals) (a través de Paul Souders' answer)

Answer 8

Mi opinión es que el HTML/CSS es lo suficientemente simple que una red competente el diseñador debe ser moderadamente fluido en eso. Photoshop tiene su lugar para realizar experimentos de apariencia rápida, pero creo que se pierde un paso importante: el diseño de la experiencia del usuario.

Personalmente, he estado diseñando y creando prototipos directamente en HTML desde hace un tiempo. Aquí es donde la separación limpia del contenido y el diseño proporcionado por CSS realmente brilla. Organizo páginas en regiones usando divs sin estilo, lo que me permite organizar la página conceptualmente (es decir, mantener elementos relacionados cercanos entre sí en el código) y posponer el pensamiento sobre la apariencia. Esto tiene el efecto secundario de hacer un inventario del sitio bastante completo.

A continuación voy a utilizar CSS para definir el divs, que felizmente también produce wireframes

El último paso es la aplicación de elementos visuales (útil para las revisiones y prototipos de papel.): Color, estilos de texto, gráficos. Usaré cualquier programa gráfico que necesite para cocinar lo bonito.

Tenga en cuenta la ortogonalidad inherente a este método: desarrolle conceptos, luego diseño, luego mire y sienta. Esto pone el pensamiento duro (modelos conceptuales) al frente, y el pensamiento más volátil (colores/estilos) al final. Entonces, cuando el director artístico cambia la paleta de colores, solo tiene que editar un archivo CSS. Y si necesita cambiar su modelo conceptual, gran parte del diseño y la apariencia pueden ser reutilizables.

Si necesita tracción en este método, puede usar una cuadrícula css estándar como 960 (http://960.gs/). Maneja una gran cantidad de negocios aritméticos y flotantes que hacen que el diseño sea una tarea difícil.

Además de enlace de Rahul anterior también recomiendo: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss

Answer 9

Lo que probablemente debe ir para es entrenar a los diseñadores a trabajar dentro de un sistema de red bien establecida por sus diseños de sitios. Si pueden entender el diseño como un sistema de cuadrícula/bloque, se puede lograr un gran diseño interesante dentro de esas restricciones. Pero no va a ser una conversión directa de PSD a HTML porque son dos formas completamente diferentes de representar datos visuales.

Hay muchos marcos que facilitan el trabajo de CSS.Una de ellas es Blueprint CSS

http://www.blueprintcss.org/

Hay un montón de plantillas por ahí para representar el sistema de red dentro de Photoshop.

http://konigi.com/tools/photoshop-template-blueprint-css-comps

Piense en la red como una capa limitaciones visuales, entonces el diseño se puede asignar entre un borrador photoshop y aplicación específica de HTML/CSS. Los elementos visuales deben estar delimitados dentro de cuadros de cuadrícula limpios. Los elementos o unidades SOme dentro de la cuadrícula se pueden mapear a imágenes de fondo. Otros colores sólidos o espacios en blanco con contenedores div que contienen contenido.

Con un marco de grilla bien entendido, puede obtener diseños casi perfectos para píxel.

Además, los buenos diseñadores entenderán cómo usar el espacio en blanco de manera efectiva en una maqueta de diseño. Si hay muchas líneas de intersección extrañas y elementos de cruce en el diseño visual, eso representa un verdadero desafío para la implementación. El hecho de que pueda imaginarse visualmente no significa que sea fácil de implementar en un navegador sin realizar ciertos tipos de compensaciones por la forma en que funcionan HTML y CSS. Piense en el sistema de grillas como las limitaciones y una forma efectiva de juzgar los requisitos de diseño.

Answer 10

Personalmente, lo diseño en html/css primero usando bordes y colores de fondo. Luego tomo el PSD e inserto las imágenes como imágenes de fondo o html. Es bastante rápido, el código es tuyo, así que sabes qué significa cada regla css, lo que acelera el proceso de desarrollo (a diferencia de los nombres de imagen incriminados de PS y los nombres de los selectores css)