En general, un libro que voy a escribir, una imagen que voy a dibujar, o una pagina web que voy a diseñar, todo surge de una idea.
Cuando enchufo la Wacom o empiezo a garabatear en una libreta, esa idea va tomando forma.
Por supuesto, siempre tengo en mente la finalidad, el objetivo, la razón gestó esa idea. Esos objetivos pueden ser, por ejemplo:
A partir de ellos, trabajo para transformar mi idea en algo útil, «usable», original, o que me sirva para aprender y mejorar. Y este es el método que sigo para ello:
1. Navego y analizo otros sitios web
Aunque la idea inicial es propia, a menudo planteo mis diseños a partir de cosas que veo por ahí: un efecto con CSS, un layout, una combinación de colores, un motivo que quizás no busqué, pero con el que me encontré de todas maneras…
Con la utilidad «Inspeccionar elemento» del navegador investigo cómo está hecho y en qué medida puedo aplicarlo en lo que yo estoy trabajando según mi gusto.
Para cuando la implemento en mi propia web, esa configuración, motivo o estructura, es ya algo muy diferente, pero haberme fijado en lo que hacen otras personas me ha ofrecido un punto de partida y me ha permitido aprender cosas nuevas.
2. Directo al CSS
He leído por ahí artículos de diseñadores que defienden la importancia de hacer bocetos de la arquitectura de la página antes de su ejecución. Creo que esto es útil sobre todo si tu trabajo parte de un encargo y debes esperar a que el cliente apruebe tus ideas antes de ponerte manos a la obra.
En este sentido, dependiendo del caso, puede que sean suficientes unos bocetos a lápiz o unos mockups (yo he usado Balsamiq cuando he tenido que hacerlo), o en cambio, puede que necesites trabajarte una reproducción lo más exacta posible con un programa de diseño gráfico como Photoshop.
Por otra parte, también he leído a gente que se salta este paso y va directa a la ejecución. En mi caso, como normalmente diseño para mí misma, me basta con un boceto cutre en un papel y algún comentario escrito que me ayuda a recordar mis ideas.
Como no veo el sentido en hacer el mismo trabajo dos veces y hay cosas que no sé si quedarán bien hasta que las he hecho, prefiero empezar a construir desde el principio, seguir adelante e ir buscando soluciones conforme encuentre los problemas.
3. Un ajuste aquí, otro por allí…
La idea es comenzar con el html y el CSS básico, e ir añadiendo capas de mayor detalle con el tiempo. Ajusto los márgenes y paddings, pruebo varias fuentes, varío el código del color hasta que doy con el más adecuado… Hasta el último momento no hay nada decidido.
Lo único que suelo tener claro desde el principio son las imágenes que usaré. Desde que las diseño para montar la estructura de la página hasta el final, permanecen casi intactas.
4. Probar y adaptar
Y así sigo hasta que la página está casi acabada, pero no del todo, porque tengo que contemplar la posibilidad de realizar algún cambio según cómo se vea en diferentes exploradores y en diferentes tamaños de pantalla.
Dependiendo del caso, puedo querer usar algún media query, aunque en general, si mientras he diseñado he ordenado los elementos y he aplicado los floats con maña, me habrá quedado un layout «líquido», y el resultado será aceptable en casi todos los dispositivos.
Conclusión
Este sistema flexible y orientado al aprendizaje lo puedo aplicar solo porque en ningún caso he tenido que hacer una página con una arquitectura compleja, y porque siempre he tenido libertad y margen para la improvisación.
En cualquier caso, espero que si tú también estás aprendiendo o tratando de mejorar tus habilidades, este artículo te haya dado ideas para aplicar tus conocimientos. Ver cómo tus esfuerzos se pueden encaminar a un resultado final es bueno para mejorar y para mantener la moral.
Deja un comentario