¿Qué software utilizas para el diseño web y por qué?

nodejs, grunt, sass, sublime text y livereload.

La diferencia en la representación de un navegador a otro hace que las viejas reliquias (photoshop, dreamweaver) sean reliquias de una época pasada. Hoy la forma práctica de diseñar sitios es línea por línea. El único software que uso es para mejorar mi flujo de trabajo.

Sass es asombroso. Es CSS, simplemente más fácil. Permite el uso de variables como $project-main-color: #bada55; y reglas anidadas. Ver Sass: Conceptos básicos de Sass

Grunt es una herramienta de línea de comandos que se ejecuta en node.js y es un increíble administrador de tareas. Lo uso para el desarrollo y despliegue local. Tiene toneladas de módulos para acelerar su flujo de trabajo. Observa mi sass por cualquier cambio, luego se compila instantáneamente a CSS. Usando, livereload , mira mis archivos css y php para ver si necesita actualizar mi navegador por mí (diga adiós a ctrl + f5). Cuando estoy listo para enviar cambios a mi sitio, tengo una tarea que empujará a git y rsync con mi host remoto. Todo lo que tengo que hacer es trabajar con el código y guardar el archivo cuando esté listo para probarlo. lo que me lleva a la última (y única fuente cerrada) de software.

Sublime Text es un editor de texto increíble (y nuevamente extensible). Detección de sintaxis y resaltado incorporado. Utilicé las funciones de minify antes de descubrir Grunt. Diseños con pestañas y seccionados disponibles, modo sin distracciones, todo lo que siempre quiso que hiciera su editor de texto. (y también es bonito).

Esas herramientas y un puñado de navegadores de prueba deberían hacerte escupir hermosos diseños web, de manera muy eficiente.

Photoshop es una herramienta para muchos profesionales, sin embargo, con el avance constante de las técnicas HTML5 / CSS3, muchos profesionales saltan directamente a la etapa de tramado / ejecución a través de estas tecnologías.

Personalmente, solo uso Photoshop para cosas pequeñas, como la configuración / iconos de sugerencias de píxeles o incluso medir ciertas precisiones en un diseño. Al pasar por Photoshop primero, puedo estar perdiendo un tiempo precioso, mientras que podría probar varias ideas directamente en el navegador.

Hagas lo que hagas en Photoshop o cualquier otra herramienta, nunca se verá exactamente igual en muchas ofertas de navegador, también podrías trabajarlo en su último lugar de descanso.

Como desarrollador de WordPress, uso esta herramienta de diseño web “TemplateToaster”. Con esto puedo crear fácilmente temas y plantillas fácilmente.

Echa un vistazo a http://www.webflow.com . Impresionante herramienta. Hicimos todo el http://Brightpod.com en Webflow.