Cómo convertir tu diseño gráfico en un diseño web

Moverse de lo impreso a la web en el diseño puede resultar complejo y agobiante. Debes tener siempre presente que en los primeros intentos es inevitable tener algunos problemas y que la experiencia ayuda.

No te frustres y sigue intentando, que poco a poco verás cómo mejoras. Para ayudarte, en esta nota te traemos algunos útiles consejos sobre cómo llevar a cabo esta tarea de forma exitosa.

Aprendiendo a codificar

Aprender HTML y CSS es una completa obligación si deseas ser verdaderamente bueno en lo que haces. Esto no significa que tengas que volverte un gurú del tema, pero un conocimiento básico de cómo funcionan las cosas te resultará ventajoso.

A continuación hay una lista con algunas cosas a las que es necesario prestarles atención a la hora de diseñar para la web:

1. Proporciones

Al crear un diseño nuevo es necesario prestar atención al tamaño de los elementos y pensar cómo y dónde estarán en el sitio. Fíjate que los botones no sean demasiado grandes en comparación al resto de la página o qué sucedería si necesitas añadir nuevos ítems de navegación.

Esto se facilita si se diseña en base a píxeles, porque esa es la unidad de medida principal en la web. Presta atención de no estar diseñando un layout de más de 20cm, y si debes hacerlo, fíjate cómo eso se traducirá en la pantalla.

2. Organiza tu archivo

Si te estás manejando con Photoshop, Illustrator, o algún otro archivo tipo capas, asegúrate que las capas estén bien organizadas. Al menos separa en carpetas los grandes bloques que forman tu sitio y dale nombres a las capas claves.

Aquí hay un ejemplo de un archivo Photoshop bien organizado:

3. Demasiados efectos y detalles

No son necesarios aquellos detalles que no añaden ningún valor al diseño y sólo lo hacen más difícil de codificar. Como por ejemplo, un borde redondeado con un borde gradiente coloreado, un fondo complejo que requiere múltiples imágenes, etc.

Tus diseños no deben estar todos brillantes y cargados para ser buenos y elegantes.

4. Utiliza fuentes seguras en la web

En cuanto a las fuentes, es necesario tanto experimentar un poco, pero también jugarse a lo seguro.

Por eso, asegúrate que los grandes bloques de texto que necesitan ser flexibles utilicen fuentes que son seguras en la web.

Además, si bien se pueden añadir siempre distintas técnicas a las fuentes, algunas veces esto requiere demasiado tiempo de desarrollo y puede que no sea rentable en tu proyecto en particular.

5. No seguir algunas convenciones

La mayoría de las convenciones existen por una buena razón: facilitan nuestro trabajo para que no tengamos que analizar cada pequeña acción particular que realizamos.

Así que fíjate bien si estás por romper una convención: que sea porque es verdaderamente necesario en tu diseño y no porque estás buscando hacer una diferencia. Uno puede querer ser original, pero no tiene sentido reinventar la rueda.

6. No usar grids o elementos debidamente alineados

Utilizar grids es uno de los mejores consejos que alguien te puede dar. El sitio lucirá más balanceado y tú no te sentirás perdido con un montón de cosas sólo flotando ante tu vista alrededor de la pantalla, sin saber qué hacer con ellas o dónde colocarlas

Pero no te olvides que el grid está también ahí para ser roto.

7. Utiliza cuidadosamente el espaciado

Es necesario prestar atención al espaciado al diseñar un sitio web. Asegúrate de que todo tenga espacio suficiente para “respirar”, que el diseño no esté apretado, y que el espaciado sea consistente a lo largo de todo el layout (padding, márgenes, bordes, etc.).

8. Escribe notas

Puede resultar útil escribir en papel distintos datos, ideas, opiniones o dudas que te surgieron mientras trabajabas en tu proyecto. Y luego entregarlos en un archivo de texto junto con el diseño terminado.

Conclusión

Para resumir las cosas, si posees escasa o nula experiencia en lo que respecta al diseño web, lo mejor que puedes hacer es mirar cómo lo hacen otros diseñadores, prestar atención en aquellos sitios que te gustan y reflejar en tu proyecto lo que te gustó de estos. Siempre es útil tomar como referencia a otros para poder mejorar en nuestro trabajo cotidiano.

Fuente: Web Designer Notebook