Empieza las webs con buen pie. Haz un buen esquema
Lo primero que hago cuando empiezo un proyecto, antes siquiera de pensar en el diseño, es hacerme un esquema de la web. No hace falta un esquema muy detallado, pero si lo suficientemente claro para visualizar el proyecto al completo y tener definidos todos los bloques que va a tener la web.
Aunque he probado muchas soluciones( a mano, con freehand, con plantillas wireframe en html )… al final las dos herramientas que encuentro más prácticas son estas dos:
- Freemind
- Balsmik Mockups
Freemind. es una herramienta de mind maping ( Mapas mentales en castellano) Opensource en Java. No es tan bonita como Mind mapper o Mindmeister (servicio online), pero chico, Freemind es gratis y hace lo que necesito. Si quereis ver más aplicaciones de mind maping, en la wikipedia hay un listado muy completo.
En este ejemplo he creado dos árboles, uno para la web anterior y otro para la nueva. En los rediseños me gusta hacerlo asi para ver las secciones enfrentadas y tener claro cuales son nuevas, cual se elmina, etc…
Estructurando contenidos con Freemind
Cuando ya tengo claro el esquema, paso a Balsamiq Mockups. Esta aplicación en AIR me la recomendó Andres Karp y desde que la usé me enamoró. Tiene muchos elementos de interfaz web ya definidos para que en un momento puedas montar un esquema decente (video de la aplicación). La ventaja de trabajar primero con un diseño en wireframe con el cliente es que se puede centrar en los elmentos y bloques de información, eliminando la variable “diseño” en el primer acercamiento.
Esquema web hecho con Balsamiq Mockup
El mundo no es de algodón y azucar por lo que al final esta estructura inicial evolucionará y crecerá. Este paso sirve para ahorrarte horas y horas de modificaciones sobre diseños ya avanzados.
Cuando ya tengas clara la estructura y el esquema, empieza a diseñar. Verás que es mucho más fácil a partir de un esquema que con una hoja en blanco de photoshop.
En webdesignerdepot han publicado un post muy bueno sobre las ventajas de empezar por diseño en wireframes: Using Wireframes to Streamline Your Development Process
Enlaces:
- Freemind
- Balsamic Mockup
- Mind Maping y mapas mentales (es)
- webdesignerdeopot: Using Wireframes to Streamline Your Development Process
- Mapas menales. Una forma de organizar y estimular ideas
ArtÃculos relacionados:
- Haz tus dibujos y bocetos directamente en el iphone con el programa Brushes
- Empieza el año con Fotoencuentros en Murcia
- Lenovoblogs. Un buen ejemplo de blogs corporativos que no suenan a lata
- No tires el dinero hombre, haz una versión móvil de tu anuncio en prensa
- Haz un poco de trampas y resuelve el cubo de Rubick con CubeCheater para el iPhone
-
Pablo
-
http://www.infonomada.com infonomada
Soy Pablo Angeletti y estoy especializado en el diseño web y desarrollo de webapps para móviles. En mi blog hablo de todo lo que me interesa: internet, diseño, usabilidad, programación, gadgets, tecnologÃa móvil, redes sociales...
SÃgueme en twitter: @angeletti
