Preparar diseños para programadores

Muy buenas Faiscas,

En primer lugar, lo más importante es que tengas una buena estructura en tu proyecto. Por ejemplo, está bien que tengas una carpeta de imágenes en tu website y dentro de ella tengas todo catalogado según el elemento; iconos, imágenes, ilustraciones, logos, etc. Solo con esto estarás ahorrando montón de tiempo tanto al programador como a ti mismo, puesto que si después de un mes quieres volver a retomarlo, sabrás donde tienes que ir.

En lo referente a las imágenes en los sitios web, nosotros aconsejamos utilizar SVG, ya que así nos aseguramos que nunca se pixelen sea la pantalla que sea, además de ahorrar un montón de recursos al servidor porque un SVG pesa muy poco. El problema del SVG es que hay navegadores antiguos que no lo soportan, por tanto esto ya entra en la elección de cada uno.

En lo referente a los tamaños de letras, existen dos versiones; una que dice que el estándar del tamaño de la fuente debe ser 16px y otro que dice que es 18px. Personalmente, yo me decanto por segundo. Recuerda también que esto te sirve sólo para versiones de escritorio, si hablamos de tablets o smartphones, te aconsejo que utilices 1em.

De las distancias... no entiendo muy bien a que te refieres, pero si es a los tamaños de las pantallas para una web responsive, te aconsejo que leas este artículo.

Por último, cuando hablamos de colores para una website entramos en un tema bastante abstracto, puesto que es una cosa que ya depende de los gustos de cada uno. Actualmente está muy de moda utilizar técnicas de Flat Design, que son colores planos. Esto tiene una gran ventaja respecto a otras técnicas, y es que al ser colores planos cargados directamente desde CSS y no son imágenes (aunque se las puedes poner también), la carga del sitio disminuye considerablemente. Además de ser una técnica que es preciosa. Te dejo el enlace al Flat Design Color Picker. Se trata de una paleta bastante completa de los colores más utilizados en Flat Design. Por supuesto que puedes idear tu tus propios colores. ;)

Gracias por tu respuesta.
Cuando hablas de tamaño estandar de fuente (16-18px) entiendo que te refieres al tamaño mínimo o al de la leyenda (párrafos con abundanre texto).
Lo que más me ocupa en estos momentos es diseñar y enviar al programador elementos y especificaciones de diseños de apps. Algún consejo para esto?
Un saludo

Efectivamente, me refiero al tamaño mínimo del párrafo. Lógicamente puedes usar tamaños menores, pero no es aconsejable, puesto que Google también penaliza los tamaños que dificultan la lectura.
En lo referente al programador y las dimensiones, esto ya depende la organización que tengáis. Aun así, te aconsejo que para diseñar sitios web utilices Sketch (no confundir con Sketch Up). Es un programa como el Illustrator, pero a mi parecer bastante más rápido y cómodo de diseñar. Para Sketch existe un plugin que se llama Zeplin. Lo que hace este plugin es que puedas diseñar un proyecto, dejar comentarios fácilmente y compartir el proyecto con otra persona. Esta persona verá todo el proyecto y todos los comentarios rápidamente y podrá añadir los suyos.

En caso de que utilices Illustrator, lo máximo que te puedo recomendar es que una vez acabado el diseño de tu proyecto crees una capa superior con todos los tamaños y le envías el .ai a tu programador. Una vez lo abra, con ir activando y desactivando la capa superior ira viendo todas las medidas. Aun así, insisto en que trabajes con Sketch, notarás la diferencia. ;)

Si estas trabajando en una app para android, la mejor guía es la que presta google:

https://www.google.com/design/spec/material-design/introduction.html

Y si es con ios o windosphone lo mismo, en las guías especifican que tamaño de fuente utilizar en cada caso, la paleta de colores adecuada, la métrica a seguir etc.

Pero creo que lo que está pidiendo @Faiscas es consejo sobre la forma de entregar los ficheros y directrices, no sobre cuestiones relacionadas con el diseño en sí.

Sobre este tema en concreto, hace poco me guardé un enlace sobre una discusión en Designers News que habla precisamente de este tema: https://www.designernews.co/stories/49849-how-do-you-share-assets-with-developers. Verás cómo hay información valiosa que creo que te podrá guiar :)

Lo mejor que puedes hacer es preguntar al desarrollador o equipo que corresponda, no muerden :) Algunos puede que te pidan las imágenes e iconos sueltos y otros se apañarán ellos sólos. Mi consejo es que lo que puedas dar tú mascadito lo des. Por ejemplo exportar los logos, imágenes, e iconos así como incorporar alguna pequeña documentación con anotaciones que puedan ser relevantes y que no se ven a simple vista.

Otras veces al trabajar en remoto, con una charla por Skype también se resuelven muchas dudas, una vez hayas enviado los archivos.

Con que separes los contenidos en diferentes carpetas y archivos , ejemplo :

- Textos: Pagina1.txt, Pagina2.txt
- Imágenes: Carpetas por páginas o por tipos de imágenes
- Fuentes: Carpeta a parte
- Archivos del diseño en PSD sin acoplar, que se puedan manejar las capas.
Mejor PSD que ilustrator o cualquier otro, ya que PSD es el más común.

Y si existen diferencias entre idiomas, separarlo también. Sólo con esto ya le haces un gran favor a cualquier programador.

Espero que te sirva.

96Levels
Programación a medida
www.96levels.com

Hola @faiscas ,

Lo primero que debes de preguntar a tu programador es si tiene alguna forma de trabajar en concreto. Muchos desarrollan un flujo de trabajo en función de sus habilidades, con lo que suministrarles un psd simplemente o carpetas puede equivocarles si usan otra metodología.

En función de las nociones del programador, nuestra recomendación es suministrar todas las imágenes ya optimizadas para web, con los archivos vectoriales en formato svg (el cual nos ahorrará problemas) en carpetas para ahorrar problemas al programador .

Si tenemos además nociones de diseño web, es recomendable organizar muy bien las capas de nuestro psd, indicando si esas capas son header, body, footer, col-md,etc... ya que agilizará aun más la navegación por el psd si el programador tiene que echar mano de él y se defiende poco en Photoshop.

Espero que te hayamos ayudado. Si tienes alguna duda pregúntanos!

Codigonexo
Expertos en Diseño web
www.codigonexo.com

Diseñadores 300pp programadores 72pp y bajando. ja ja

Gracias a todos por vuestra ayuda. @Skeku, el enlace que me envías da error y no lo puedo ver. Podrías enviarme esta información de alguna otra manera, por favor?
Lo cierto es que me van suegiendo dudas por momentos, pero es complicado consultarlas con los programadores ya que no sé quienes son jajaja.
Una duda concreta: A la hora de crear en photoshop el documento sobre el que diseñar una app (android o ios) ¿qué resolucion de pantalla (0x0px) y que dpi debe tener el documento?
Por ejemplo, en android se recomienda usar para diseñar la resolución de pantalla "normal de 470x320" dentro de las que distingue donde agrupa la multitud de tamaños de los dispositivos (pequeño, normal, grade y extragrande). Si hasta aquí está bien planteado ¿qué densidad, osea dpi (pixeles por pulgada) le pongo al documento de las que Android ofrece: baja 120dpi, media, 160 dpi, alta 240 dpi o extraalta 320? ¿Y si quiero diseñar sobre otro tamaño, pequeño, grade o extra grande? ¿Cómo prepararía el documento para iOs?
Gracias de nuevo ;-)