Web corporativa para clínica de fisioterapia

Proyecto:

Recientemente he publicado una nueva página web producto de un encargo por parte de un cliente propietario de una clínica de fisioterapia. Esta era la primera vez que abordaba una web para este tipo de negocio, así que la propuesta me ha resultado desde el principio sumamente atractiva.

La clínica contaba con una página web bastante antigua que no respetaba ya los estándares de los actuales navegadores y no resultaba lo suficientemente intuitiva para el usuario moderno. De cara a estrenar esta nueva presencia cuanto antes, planteamos el lanzamiento en dos fases y este de aquí es el resultado de esta primera etapa. 

Veamos el proceso que hemos seguido con mayor detenimiento, ya que seguro que puede resultar interesante para más de un lector. 🤟✨

Diseñando la estructura básica de la interfaz

La primera aproximación siempre es determinar lo que se quiere contar, el objetivo principal del proyecto y lo que la interfaz debería permitir hacer para lograrlo. 

Tras la sesión inicial de descubrimiento en la que recabo toda la información que necesito—, lo siguiente es crear unos primeros bocetos que respondan a todos estos requerimientos de la forma más eficiente posible, de cara al usuario y también a los costes de desarrollo del proyecto. Este paso es muy importante, ya que, al fin y al cabo, la eficacia del proyecto comienza desde esta misma base.

A continuación, algunos de estos primeros bocetos para esta landing page:

Aunque muchas veces el primer paso para elaborar los bocetos iniciales es con lápiz y papel, desde hace un tiempo vengo desarrollando un sistema a través del cual puedo generar una versión digital de los mismos de cara a hacerlos mucho más manejables desde el primer momento.

Concretando la identidad visual

Conforme el proyecto avanza y se van solucionando aspectos logísticos relacionados con el servidor, contratación de servicios y otros aspectos ajenos al diseño de la interfaz propiamente dicha, se debe ir dando forma a la manera en que se va a reflejar la identidad visual de la marca en los bocetos planteados

Aunque lo ideal es realizar este paso una vez se tiene clara la estructura principal del proyecto, lo cierto es que en casos como este donde existe una relación directa entre freelance y cliente puede ser bastante óptimo abordarlo en paralelo. 

Por ejemplo, en esta ocasión fue necesario una pequeña puesta al día del logo, su conveniente digitalización, y planificar de cero una propuesta tipográfica y de paleta corporativa para la nueva interfaz. En este caso, el principal valor del proyecto era el de transmitir confianza y, con esto en mente, propuse estas soluciones:

 

Para dotar de seriedad a la propuesta y poder transmitir confianza, opté en esta ocasión por una solución bastante sencilla. Un tono de azul predominante junto a otros tonos auxiliares y una sola tipografía de tipo sans serif y con muchos pesos para asegurar su versatilidad en distintos escenarios.
Para dotar de seriedad a la propuesta y poder transmitir confianza, opté en esta ocasión por una solución bastante sencilla. Un tono de azul predominante junto a otros tonos auxiliares y una sola tipografía de tipo sans serif y con muchos pesos para asegurar su versatilidad en distintos escenarios.

Por otra parte, voy planificando también el resto de elementos visuales que compondrán los elementos de la interfaz: aspectos como los pesos concretos de la tipografía, la apariencia de los botones en todos sus estados, el color de los hipervínculos… Trato de crear un sistema sencillo y cohesionado que sea fácil de plasmar en una hoja de estilos posteriormente en la fase de desarrollo.

Ya he comentado en alguna ocasión lo fascinante que me parece la forma tridimensional de entender el espacio que tiene el sistema de Google Material Design... En la imagen: uno de los conjuntos de iconos resultantes para el proyecto dispuestos ya en la pantalla.

Quizá una de las partes más interesantes en este proyecto fue la selección de un sistema iconográfico que apoyase a cada uno de los tratamientos de fisioterapia ofrecidos por la clínica… Encontrar recursos para reflejar este tipo de terapias complejas resultó ser un pequeño reto cuya solución consistió en mezclar algunos elementos de diferentes bancos de recursos y adaptar unos cuantos con técnicas de ilustración vectorial.

Y, por fin, los prototipos...

Tras todo este ejercicio intelectual (pero absolutamente necesario) de preparación e ideación, llega el momento de desarrollar los prototipos de alta fidelidad. Este paso es crucial, ya que los prototipos son la mejor guía para el posterior desarrollo del proyecto y —en mi caso— una garantía de que tanto yo como mi cliente estamos pensando conceptos similares.

En este punto, y tras haber probado unos cuantos, puedo afirmar que mis programas favoritos suelen ser Figma y Adobe XD por su funcionalidad y rapidez.

Veamos una de las versiones de prototipos generados para esa landing page:

Prototipo realizado para la landing page del proyecto.

Tras todo este ejercicio de planificación, quedaría solamente abordar un par de aspectos. Por una lado (y puede que lo hayas estado pensando hasta ahora), es necesario redactar los textos definitivos de todas las secciones planteadas y, por otra parte, sería ya el momento perfecto para empezarla maquetación web en sí.

En este proyecto trabajé en ambos frentes de forma paralela, en vistas a rentabilizar tiempos. Es muy importante no perder de vista el aspecto del SEO en esta fase, pues afecta de forma global. En este sentido, hay que optimizar el contenido del texto, pero también ser bastante metódicos en aspectos más ligados al desarrollo, tales como las metadescripciones, etiquetas, optimización de recursos, etc.

Por supuesto, no creo que haga ni falta aclarar a estas alturas lo importante que es garantizar a lo largo de todo el proceso que he relatado el aspecto de la adaptabilidad a diferentes resoluciones de pantalla… 

¡Una web es mucho más de lo que puede percibirse a simple vista!

Conclusiones y cierre

Si tras leer todo esto, sientes curiosidad acerca del resultado final, te invito a que le eches un ojo a la web de Orbe Fisioterapia & Rehabilitación

Ellos llevan más de diez años en el madrileño barrio de Carabanchel prestando un excelente servicio a pacientes con todo tipo de necesidades, aunando terapias de toda la vida con las técnicas más punteras. Así que, más allá del aspecto formal de su web (que es de lo que te hablo yo aquí), ¡seguro que encuentras interesante la visita!

Por lo demás, muchas gracias por leerme hasta aquí y no dejes de dejarme un comentario o seguirme en mis cuentas de Instagram o Dribbble.

Pablo Bonnet <br> <span class="charge">Diseñador web & Creativo digital</span>

Pablo Bonnet
Diseñador web & Creativo digital

Dueño y señor de estas tierras. Quien gestiona el cotarro en este lugar.

Sobre mí

Contacta conmigo

Escríbeme para cualquier colaboración, proyecto u oferta. Generalmente tardo entre 1 ó 2 días en contestar.
También puedes encontrarme en estas redes sociales. Si te urge contarme algo, seguro que por aquí te leo antes:
¡Aviso! ¡Cookies!

Esta página web usa cookies para mejorar tu experiencia. Al seguir navegando aceptas su uso. Para enterarte de más, puedes leer la Política de Privacidad y Cookies.