Si eres diseñador, es probable que sepas lo básico sobre diseño web y conozcas la estructura de los lenguajes HTML y CSS. Si es así, es probable que te puedas hacer cargo del diseño y el desarrollo de un sitio web sencillo sin mayores dificultades. Pero si el proyecto es un poco más complejo y es necesario que se empleen otros lenguajes como PHP, entonces sólo te harás cargo del diseño. De ser el caso, deberás saber cómo preparar tus diseños para que un desarrollador pueda trasladarlo de manera más rápida. En este artículo te damos algunos consejos al respecto, de modo que si alguna vez debes diseñar un sitio web y entregarlo a un desarrollador para que se haga cargo del resto, puedas colaborar adecuadamente.
Hazlo en base a medidas exactas
Para un sitio web, particularmente aquel que va a implementar el diseño responsive, es esencial que hayas especificado las medidas exactas en los wireframes. Tanto del logo, barra de menú, barra de búsqueda, footer y otros elementos esenciales, como el espacio que existe, por ejemplo, entre el logo y la barra de menú. Esto permite que el desarrollador pueda colocar cada elemento en el espacio que le corresponde y el diseño se mantiene tal y como lo has establecido.
Otro punto a tener en cuenta en los wireframes es colocar el nombre de cada elemento. En estos archivos usualmente se suele dibujar recuadros para cada elemento, para que el desarrollador sepa a qué elemento se refiere cada recuadro, deberás nombrar cada uno de ellos.
Ordena las capas de tu archivo en Photoshop
Si bien el wireframe es de utilidad para el desarrollador pues puede ver más fácilmente las medidas de cada elemento, contar con el diseño final en formato PSD también es necesario. De esta manera, el desarrollador puede comparar la versión en HTML con el diseño que has proporcionado. Además, le permite verificar que imágenes se colocan en cada espacio, así como copiar el código de los colores que se emplean en el fondo y en las fuentes.
Sin embargo, para que el desarrollador pueda entender tu archivo PSD, deberás organizarlo. Es recomendable mantener cada sección en una carpeta, por ejemplo, colocar las capas que conforman el footer en una sola carpeta y denominarla respectivamente. Asegúrate también que los colores sean los correctos. El desarrollador a cargo copiará los colores de cada elemento desde el archivo Photoshop, así que debes asegurarte que cada elemento sea del color que has definido previamente.
Entrega todos los archivos necesarios
Aparte de mantener un archivo PSD organizado, deberás entregar las imágenes y fuentes que has utilizado para el diseño. Esta carpeta con todos los recursos necesarios debe estar también organizada y cada archivo correctamente nombrado. Deberás asegurarte que los nombres de cada imagen se correspondan con el nombre de su capa respectiva en el archivo PSD para que el desarrollador pueda encontrar las imágenes más rápidamente. Esto es especialmente importante si se trata de un sitio con una gran cantidad de imágenes.
Asimismo, tendrás que asegurarte que el tamaño de cada imagen sea el adecuado, según lo que se especifica en el archivo PSD que has entregado al desarrollador.
Entender lo básico sobre la estructura HTML
Si bien tú no vas armar el sitio en HTML, es importante que tengas una noción sobre HTML y el uso de sus principales etiquetas. Esto te permitirá colocar un nombre adecuado a cada capa, carpeta y elemento de tu archivo PSD, respetando las etiquetas y estructura propia del lenguaje HTML. Esta será una gran ayuda para cualquier desarrollador pues podrán identificar qué capa pertenece a cada contenedor y elemento en HTML. Es decir, podrán descifrar rápidamente el diseño a nivel de HTML, lo que agilizará el proceso de desarrollo.
Aprender sobre HTML también te ayuda a entender hasta qué grado puedes implementar ciertas características de diseño. De esta manera, sabrás con exactitud si alguna idea que tienes para tu diseño se puede implementar o no.
Tener en cuenta las interacciones de cada elemento
Ya que un sitio web posee interacciones, deberás considerar éstas en tu diseño. Por ejemplo, si el menú es desplegable, deberás realizar también el diseño del menú y cómo lucirá en el sitio. Por supuesto, esto sólo se da en el caso de sitios que poseen un gran volumen de contenido y por lo tanto necesitan un menú de varios niveles. Lo que si deberás considerar en tu sitio sin importar el volumen de contenido del mismo son los botones. Un botón es un elemento con el que los usuarios pueden interactuar y por lo tanto posee diversos estados que sirven para informar al usuario. Por ejemplo, es usual que si el cursor se posa sobre algún botón, éste cambie de color.
Mantente disponible para consultas
La mejor forma de lograr un gran proyecto es la comunicación. Así que asegúrate que no hayas dudas por parte del desarrollador y en caso las haya, mantente disponible para cualquier consulta. Toma el primer paso y ponte en contacto con el desarrollador. Puede que tenga alguna duda, pero decida no contactarse contigo por una u otra razón. Asegúrate que el desarrollador sepa que puede consultar contigo sobre cualquier tema referente al diseño de la página web.
En conclusión…
Aunque no puedas trabajar en conjunto con el desarrollador desde el inicio del proyecto web, puedes facilitar parte de su trabajo siguiendo un proceso de diseño web y organizando adecuadamente tu archivo PSD. Parte de la responsabilidad de que el proyecto se complete a tiempo depende de ti, si entregas todos los archivos adecuados para la pagina, estos poseen un nombre que corresponde a la función que desempeñan y si tu archivo PSD se encuentra correctamente organizado capa por capa, el desarrollador podrá empezar a trasladar tu diseño a HTML sin mayor dificultad.
