Etapas de un diseño 10/02/09

Aunque últimamente estoy bastante callado aquí, sigo publicando en Soybits sobre temas de la industria editorial y trabajo en proyectos de los que espero hablar próximamente.

Uno de ellos incluye la realización de un website trilingüe para Altervideo del que publico aquí unos pantallazos que documentan la evolución de la interfaz.

En cuanto al proceso de trabajo, tras una fase previa de conceptualización siguiendo los principios explicados en este artículo, empiezo el diseño directamente en XHTML y CSS y lo voy construyendo en Notepad2, con la firme intención de que el HTML sea lo más semántico posible y valide según el W3C. (He dicho “intención”, ojo.)

Visualizo los resultados sobre la marcha con la última versión de Firefox provista del indispensable Firebug, y una vez satisfecho compruebo que funcione con todos los navegadores actuales.

De esta manera, después de un tiempo, aparece algo así (Nota: todas las fotos utilizadas en la página de inicio se tomaron con un teléfono móvil Nokia N70 y sin duda en la versión de producción serán otras):

La imagen anterior es del primer boceto, que no tuvo continuidad. Podría ser un punto de partida válido para otro tipo de web, pero en este caso no es adecuado.

Decidimos no seguir por aquí y fuimos a buscar otra cosa. Pero el efecto de jQuery con las fotos nos pareció bien a todos, así que lo conservamos. Y probamos una segunda versión:

Me gusta el espacio en blanco. (Mmm… tema para otro artículo de resonancias taoístas: la utilidad del vacío.)

Pero entonces pensé que últimamente lo hago todo blanco, y que por qué no probar un cambio, de modo que… ¡Tatachán! ¡Ahora en vez de blanco es negro! Revolucionario, ¿eh?

Sólo que en realidad no es negro, el fondo es gris oscuro y tiene una trama fina que en estas imágenes no se aprecia. Algo como esto:

En cualquier caso, viendo el fondo blanco y el fondo negro, me dije “vamos a juntarlos”. Y entonces quedó así:

Llegados a este punto, empezó a quedar claro que la cosa iría por este camino. O sea que podíamos entrar en detalles, no sé si menores.

Resueltos (provisionalmente) los detalles, los trasladamos a las plantillas de las páginas interiores que íbamos montando en paralelo.

Y hasta aquí hemos llegado.

En este momento deberíamos tener un juego completo de plantillas sin funcionalidad; el paso siguiente es añadir la lógica, que en este caso es en forma de PHP y MySQL y se basará en un motor de Textpattern. Ya miraré de comentar el proceso en otro artículo.

Cuando esté el sitio visible en la red aparecerá en la sección de Proyectos. En cuanto a los diseños descartados por el camino, no descarto que acaben sirviendo para otra cosa.

Aún no hay comentarios

Enviar comentario

Nombre

Correo @ (no será visible)

Website

Recordar