Episodio 152 | Diseño web: esquema funcional y wireframes.

El desarrollo de un sitio web comienza mucho antes de pensar en la tecnología, el software o el diseño que se utilizará. Una buena planificación requiere prestar atención al resultado que se busca y establecer de antemano todos los elementos que estarán presentes. El esquema funcional y los wireframes son dos herramientas indispensables lograr una web verdaderamente profesional.

Un sitio web profesional debe estar bien planificado.

Como digo en cada episodio una web debe lograr los objetivos para los cuales fue pensada como por ejemplo vender, conseguir suscriptores, contactos comerciales o dar fuerza a la imagen de una marca. Ese logro solo puede alcanzarse si se aplican ciertas buenas prácticas.

Es desde esa perspectiva que se hace necesario antes de sentarse a diseñar hacer las guías visuales necesarias para no olvidarnos nada en el camino.

Luego de finalizar el esquema funcional y los wireframes ya podés instalar WordPress elegir una plantilla o diseñar una a medida e instalar todos los plugins necesarios para el proyecto.

Si en cambio hacés lo contrario y subordinás tus necesidades a la plantilla elegida vas a cometer uno de los errores más frecuentes y costosos en el diseño con WordPress.

El esquema funcional.

Como su nombre lo indica es una representación gráfica que muestra todas las páginas web que tendrá tu sitio y señala además como se relacionan unas con otras y los distintos caminos que puede transitar quien visita tu web.

Esta herramienta te ayuda a no olvidar nada. También es muy útil para cuando trabajas para un cliente a fin de dejar bien en claro las páginas que tendrá la web presupuestada.

Si trabajás en equipo servirá de referencia y guía a todos los miembros del mismo.

Ejemplo de un esquema funcional.

Supongamos que tenés que diseñar el sitio web de un profesional. Una web sencilla con las siguientes páginas:

• Inicio
• Quien soy
• Servicios
• Contacto
• Blog

El esquema funcional de la web del ejemplo se vería de la siguiente manera:

¡ Estoy trabajando en las imágenes de estas notas. En breve las voy a publicar.

Las flechas que unen cada una de las cajas que representan una página del sitio muestran el flujo, el sentido de circulación de quienes la visitan.

Un posible cliente puede llegar desde la home leer los servicios interesarse en uno hacer clic para leer más información luego ir a «quien soy» para saber quien es el responsable de la web y finalmente llenar el formulario con su consulta o pedido de presupuesto.

Todo el recorrido del usuario del ejemplo dentro del sitio web es precisamente lo que se grafica utilizando el esquema funcional.

Beneficios del esquema funcional de una web.

• Aclarar tu idea con respecto a la web que tenes que hacer.
• Mostrar a tu cliente o colaboradores como funciona el sitio.
• Determinar el flujo de las visitas.
• Detectar elementos faltantes.
• Eliminar lo que está de más.
• Ir a lo concreto en busca del objetivo de la web.
• Tener una guía de referencia para quienes colaboran en el desarrollo.
• Limitar los alcances de lo presupuestado al cliente.

Un esquema funcional puede hacerse con lápiz y papel, con programas de diseño como Corel Draw, Illustrator, photoshop o presentaciones de Google y herramientas online de diagramas.

Los wireframes.

Son la representación visual de cada una de las páginas web que tiene un sitio con los elementos que cada una de ellas incluye.

Un ejemplo sería el wireframe de la página de producto de una tienda online con su ficha de producto, su foto, el precio, el botón de agregar al carrito, las descripciones, los elementos de prueba social, productos relacionados, etc.

Sirve para establecer la estructura básica que tendrá determinada página antes de volcar el diseño, la parte estética y el contenido definitivo.

Ejemplo con una página de «contacto»:

Vamos a suponer que tenemos que hacer la página de contacto de un sitio web. Esta página tendrá, al menos, estos elementos básicos.

• Titulo.
• Texto.
• Formulario propiamente dicho.

Gráficamente se vería así:

¡ Estoy trabajando en las imágenes de estas notas. En breve las voy a publicar.

En este caso es una página sencilla, incluso sin un wireframe podemos hacerla sin problemas pero cuando se trata de formatos, estructuras y contenidos más complejos como por ejemplo un portal de noticias o una tienda online es mejor hacerlo como corresponde para no equivocarnos.

Para hacer un wireframe podés utilizar lápiz y papel o cualquiera de las herramientas que te mencioné cuando hablé del esquema funcional.

En conclusión.

Para hacer una web profesional que logre los objetivos de conversión hay que hacer las cosas bien desde incluso antes de sentarse a diseñar la parte visual o de los contenidos.

El esquema funcional y los wireframes te aseguran que los cimientos de tus proyectos van a ser firmes.

Enlaces.

Episodio 140 | Tu web con WordPress: estructura y contenidos.

Episodio 115 | La maldición de las plantillas para WordPress.

Episodio 72 | Ciclo sobre páginas web: elementos básicos.

Episodio 57 | La estética y la usabilidad en tu página web.

Contacto.

Espero que este contenido haya sido de tu agrado. Te dejo el formulario de contacto para que me puedas hacer llegar tus comentarios, dudas, consultas o sugerencias. Al toque te voy a responder.