Herramientas rápidas de desarrollo web y elección de paletas de colores.

Para responder a su primera pregunta, el tipo de herramienta que está buscando se llama herramienta de creación de prototipos o de estructura alámbrica . Wireframing "principalmente le permite definir la jerarquía de información de su diseño, lo que le facilita planificar el diseño de acuerdo con cómo desea que su usuario procese la información" [ 1 ] , ^{mientras que la} creación de prototipos es crear "una primera, típica o preliminar modelo de algo, especialmente una máquina, a partir de la cual se desarrollan o copian otras formas" ^{[ 2 ]}

Parece que estás más interesado en la creación de prototipos. Hay toneladas de artículos sobre el tema, pero este de Smashing Magazine es bastante completo detrás del "por qué" y también está bien para el "cómo". En cuanto a elegir qué herramienta de creación de prototipos entre las numerosas opciones, HackDesign tiene una buena lista de herramientas de creación de prototipos . Debería darse una vuelta buscando uno que sea bueno para su proyecto.

Pero no siempre tiene que usar una herramienta de creación de prototipos, especialmente para sitios más pequeños. Para mí, lo más importante es reutilizar código antiguo , lo que puede significar usar código de un proyecto que ya hiciste o una plantilla que encuentres en línea. En ese sentido, puede usar HTML5Up para encontrar plantillas receptivas o encontrar plantillas específicas de Bootstrap . También hay muchos editores WYSIWYG (lo que ves es lo que obtienes) que permiten a las personas crear sitios web sin manipular directamente el código todo el tiempo. Todavía están en sus primeras etapas, pero apuesto a que en el futuro un híbrido será estándar. Los servicios como SquareSpace pueden ser excelentes para crear sitios web atractivos y rápidos.

El diseño perfecto de píxeles no es el objetivo del diseño web. En cambio, crear un sitio que se vea realmente bien en todos los dispositivos y plataformas sí lo es. En ese sentido, escribí una publicación sobre una introducción al diseño receptivo que creo que vale la pena ver si estás comenzando. Tengo algunos otros recursos relacionados con el aprendizaje del desarrollo web aquí que también podrían ser útiles.

En mi flujo de trabajo personal, primero trabajo en papel y luego hago prototipos con HTML y CSS porque es con lo que me siento más cómodo. También me ahorra algo de tiempo más adelante porque ya tengo una base con la que trabajar.

En cuanto a su segunda pregunta, hay muchas buenas herramientas para ayudarlo a elegir buenos colores y paletas de colores. Tiene generadores de paletas genéricas como Colors y Paletton , ColourLovers que le muestra las paletas que otros han creado usando un color que usted ingresa, otros sitios que muestran hermosas paletas de colores como TheDay's Color , Pictaculous , que genera una paleta a partir de una imagen y es sorprendentemente bueno, y otros más específicos, como los conocidos colores de la interfaz de usuario . Hay innumerables más por ahí, pero estos son algunos de mis favoritos actualmente.

En cuanto a cambiar los colores en sus páginas web, ahí es donde un preprocesador CSS resulta útil. Personalmente, prefiero SCSS, una forma de SASS , debido a algunas características adicionales que tiene, pero LESS también es bueno. Son fáciles de empezar porque CSS normal es válido en ellos, puedes usar más de sus funciones a medida que las aprendes. La ventaja clave en su caso serían las variables con el color en ellas, permitiéndole cambiarlo en una línea y afectar muchos elementos a la vez.

Esto es puramente basado en opiniones, pero le doy una oportunidad.

En cuanto a elegir una paleta de colores, voy a color.adobe.com. Aquí puede descubrir otras paletas de usuarios de todo el mundo. Pero la mayoría de mis clientes ya tienen una paleta de colores, así que uso esa.

Para diseñar el diseño actual utilizo photoshop. Sé que existen diferentes herramientas que están hechas para el diseño web, y sé que Photoshop es para editar fotos, pero es la herramienta adecuada para mí porque sé cómo funciona. Los programadores con los que trabajo obtendrán la apariencia y comenzarán a programar de inmediato.

Para otras herramientas que generan directamente en un sitio web, hay muchas alternativas. ¿Has probado Muse de Adobe? Eso es más o menos arrastrar y soltar.

Si desea tener más control sobre la codificación, pruebe Macaw o Google Web Designer, aunque tengo algunas malas experiencias con el diseñador web de Google, pruébelo. Podría ser el programa para ti (además es gratis, así que no tienes nada que perder).

Como mencionó JVS, esta es una pregunta muy basada en la opinión.

Hago ambas cosas, como tú: diseño y programación. Y también soy muy detallista (lo que otras personas llaman "perfeccionista" y mis clientes tienden a llamar "lento"). Prefiero Adobe Illustrator (o cualquier otro software de vectores) sobre Photoshop para la fase de diseño. Creo que me permite ser quisquilloso pero hacerlo de una manera eficiente. Estas son las razones por las que:

• Mi diseño estará basado en vectores, por lo que puedo estirar/reorganizar todo lo que quiera sin preocuparme por perder resolución.

• Puedo definir estilos gráficos y de texto en Adobe Illustrator para copiar y elementos gráficos. Por ejemplo, puedo definir un estilo para los botones y aplicarlo a todos los botones. Si cambio de opinión, cambiarlos todos es una tarea más fácil que si tuviera que volver atrás y dibujarlos todos desde cero. Lo mismo para el texto.

• También puedo cambiar los colores a granel. Puedo seleccionar todos los objetos con un borde específico o rellenar y cambiar su color.

• También puedo crear símbolos y usarlos varias veces en el diseño (un botón, por ejemplo). Luego, si cambio de opinión y quiero rediseñar el aspecto del símbolo, puedo editar el símbolo en sí y se modifican todas sus instancias.

• El hecho de que esté basado en vectores me recuerda que al final todo se codificará usando etiquetas, que son áreas rectangulares, así que no creo diseños que sean casi imposibles de ejecutar. Eso sí, con HTML5 y CSS3 este comentario es casi obsoleto.

• Tengo la opción de forzar que las formas se ajusten a los píxeles exactos, lo cual es excelente porque al final se codificarán con dimensiones de píxeles exactas, no con píxeles fraccionarios.

• También puedo configurar Illustrator en vista de píxeles. Esto es muy útil si tengo ilustraciones pequeñas, como iconos, porque puedo ver si el difuminado los hará lucir extraños. Sin embargo, este es un tema completamente diferente (imágenes perfectas en píxeles usando Illustrator). Eche un vistazo a mi respuesta obsesivo compulsiva aquí si está interesado en ese tema: ¿ Qué software debo usar para crear gráficos nítidos para juegos de iOS?

• Una vez que el diseño está terminado y empiezo a codificar, puedo simplemente hacer clic en cualquier forma (o grupo de formas) y ver sus dimensiones, lo que acelera el proceso de codificación.

• También puedo usar la funcionalidad "Generar CSS" de Illustrator para generar efectos complejos en CSS puro, como degradados.

• Puedo exportar elementos del diseño en formato SVG.

• Puedo tener varias mesas de trabajo. Esto es bastante útil cuando estoy diseñando un sitio web receptivo, porque puedo tener todos los diferentes tamaños de navegador, uno junto al otro, y compararlos. Puedo reorganizar las mesas de trabajo, duplicarlas o deshacerme de ellas con bastante facilidad.

• Además, dado que puedo tener varias mesas de trabajo, puedo tener mesas de trabajo pequeñas con elementos de diseño que quiero exportar, como íconos, y luego exportar esa mesa de trabajo individual.

• Siendo un perfeccionista, encuentro que usar Photoshop para hacer otra cosa, pero editar fotografías tiende a hacerme más lento porque paso interminables pequeños momentos "puliendo ese píxel borroso que dejé cuando moví ese rectángulo hacia la izquierda", lo cual sé que es irrelevante pero puedo evitarlo.

Nota: Sé que Photoshop también tiene funcionalidad vectorial, pero en mi opinión, los vectores de Illustrator son más fáciles de usar.