Alters

Diesño web: máxima compatibilidad - Diseñando el esqueleto a papel

Buenas!

Seguimos con el tema del diseño web...

Ahora que ya sabemos cómo hacer la web algo más estándar, es la hora de empezar con el diseño en sí.

Pero, para poder diseñar bien algo, primero es necesario hacer bocetos, para ver cómo quedaría todo.

Así, se coge un papel en blanco y se empiezan a plasmar ideas, y cuando tenemos una buena la desarrollamos. Recomiendo usar escala para ver mejor los resultados finales.

Cuando tengamos un diseño que nos agrada, podemos (si queremos) pasarlo a PC. Yo lo hago con Corel y mucha paciencia...

Os dejo el último diseño que hice (img):

img1
El tamaño original es 800x600, y lo hice a escala 3:100 (es decir, en el papel era un cuadro de 24x18, y 3 cm equivalen a 100px).

Como veis es un diseño sencillo: se distinguen tres partes principales (lateral - 5 secciones, central - cuadro grande, superior - barra con 2 secciones).

Al tener la escala, fue fácil llevarlo a tamaño real, y fue también fácil llevarlo a web con CSS.

Obviamente, este diseño va un poco en la línea del producto que promociona; es decir, cada tipo de página puede tener un diseño "más acorde" a ello, de manera que no pondría, por ejemplo, colores apagados (grises, negros) en un diseño de una juguetería infantil.

No solo los colores influyen, sino las formas. Formas redondeadas pueden dar un poco de dinamismo en un diseño, pero también son más difíciles de llevar a cabo.

Veamos un poco en profundidad qué cosas se pueden tener en cuenta a la hora de diseñar:
  • Público al que va dirigido
  • Tipo de producto (por ejemplo, las redes sociales tiran hacia el azul)
  • Contraste fondo/contenido
  • Efectos adicionales (sombras, bordes redondeados...)
  • Tamaño óptimo (para webs pequeñas, pienso que 800x600 es un buen tamaño)
  • Accesibilidad
Hasta aquí, tenemos ya todo preparado para llevar nuestra web de la cabeza a internet.

En la próxima entrada (será bastante corta...), veremos cómo analiza, a grosso modo, el estilo nuestro navegador.

Así que,

¡Hasta la próxima!