Cuando un diseñador tiene la tarea de hacer un buen diseño en Photoshop con extensión .psd tiene en sus manos la creación, pero también la responsabilidad de ser el paso previo a la maquetación.
Para los maquetadores es muy importante un buen diseño, que les permita abstraerse de imaginar cómo quedaría una aplicación y dedicarse solo a maquetar.

Les dejo algunos consejos para poder hacer un buen diseño:

1. Mantener una resolución de pantalla como objetivo.

Debes tener en cuenta que tu diseño se vea correctamente en todas las resoluciones posibles. Si dejas de tener en cuenta resoluciones puedes estar perdiendo la visita a tu página web de un porcentaje de usuarios apreciable.
Cuando envíes el PSD al maquetador, deben tener una resolución de 72dpi.

2. Utilizar todo el espacio disponible con flexibilidad.

Ten en cuenta el uso de un tamaño relativo en determinadas secciones propensas a crecer, como la zona principal del contenido. Tu diseño no puede perder su esencia por el aumento de este y es muy importante que lo tengas en cuenta. Una buena práctica en este sentido son los paginados o algunas maneras de expandir y contraer el contenido.
El uso de los scrolls es cuestionable, pero si incluyes en tu diseño que la caja de texto tendrá un tamaño fijo, debes darle al maquetador un diseño para el scroll.

3. Usar el color para definir los espacios.

Puedes usar un color de fondo y centrar el contenido del diseño. Esto facilitará que con grandes resoluciones (por encima de 1024×768) se muestre una parte de la ventana de navegación con el color de fondo que hayas elegido, mientras que los navegadores con resoluciones más pequeñas mostrarán menos o ningún color de fondo.

4. Alinear las imágenes.

Uno de los errores de diseño más comunes en diseñadores novatos es insertar las imágenes en una página de cualquier manera sin pensar en la estructura, las imágenes deben estar alineadas en un mismo sentido en su mayoría.

5. Proporción de los gráficos y texto en una página.

Es fácil dejarse llevar por la gran cantidad de imágenes y animaciones disponibles, pero si te pasas añadiendo imágenes a tu web, puedes hacer que resulte muy difícil de leer o incluso molesto. Además de eso, cargan mucho la página.

6. Escoger correctamente la fuente.

Es importante que el tamaño, ancho y separación de la fuente sea la correcta para que el usuario se sienta cómodo al leer. En cuanto a alineación lo más usual es que el texto esté alineado a la izquierda.
Es una buena práctica usar una fuente de tipo: web safe fonts, pues el rendimiento de la página es notablemente mayor que si usamos una fuente no-safe y estamos garantizando que se vea correctamente la fuente elegida en todos los navegadores.
Si un visitante de un sitio web no tiene la fuente especificada, el navegador tratará de seleccionar una alternativa similar, basado en las fuentes de reserva especificados por el autor y las familias genéricas o va a utilizar la sustitución de fuentes definidas en el sistema operativo del visitante. Para evitar, en el caso de usar una fuente non-safe, que se vea una fuente alternativa se puede usar el Cufón, Vea el artículo: El uso de Cufón para usar cualquier tipografía en tu web. En este caso el diseñador debe enviar la fuente al maquetador para que la use mediante el esta herramienta.

7. Separación de las capas (layout).

Este punto por ser el último que les presento no es el menos importante, todo lo contrario. Si seguimos todas las pautas anteriores y le entregamos al maquetador un diseño que no tenga separadas todas las capas funcionales, no se pueden definir las medidas de cada una, su disposición correcta, ni el tipo de fuente. En este caso no estaríamos cumpliendo con ser el paso previo a la maquetación sino que sería nuestro diseño el peor tormento de un maquetador.
Por lo tanto cada capa funcional debe estar separada en un mismo psd. Así como también debe corresponder cada página de la web a un .psd diferente.
En esta imagen se muestra cómo debe ser la organización de las capas:

Espero que les sean útiles estos consejos. ¡A por un excelente diseño!
Si eres diseñador y estás interesado trabajar con nosotros, no dudes en Contactarnos.

Tweet

suscríbete gratuitamente a nuestro boletín electrónico

E-mail:

Recibe en tu correo Contenido de Gran Valor sobre
Cómo Ganar Dinero en Internet que NO se publican en el Blog.