¿Cuál es la importancia del diseño web para tu farmacia?

www.generali.es

¿CUÁL ES LA IMPORTANCIA DEL DISEÑO WEB PARA TU FARMACIA?1ª Edición Agosto 2020

GENERALI ©Reservados todos los derechos. Ninguna parte de esta publicación puede ser reproducida sin el permiso por escrito del titular del copyright.

Editado por: ContenidosClick.es

www.generali.es 1

Índice

1. ¿Qué es el diseño web?

2. ¿Cuál es la importancia del diseño web?

3. ¿Cuáles son los beneficios de un buen diseño web?

4. User Experience

4.1. ¿Qué es UX?4.2. ¿Por qué es tan importante el UX?

5. El diseño web mobile antes que el desktop

5.1. ¿Qué es el diseño web mobile?5.2. ¿Por qué centrarnos en el Mobile First?

6. ¿Qué es un mockup y para qué sirve?

7. 5 herramientas para la creación de mockups gratis

7.1. Gliffy 7.2. Cacoo 7.3. MockFlow 7.4. Frame Box 7.5. Wireframe.cc

8. Conclusión

5

8

11

15

1515

19

19

20

22

24

2425262728

30

www.generali.es 2

En Generali estamos convencidos de que la transformación digital puede marcar un antes y un después en la manera de gestionar tu negocio. Y no hablamos simplemente de lanzar tu tienda online; la digitalización es mucho más que eso. Nos referimos a una oportunidad de cambio para aplicar mejoras en todas las partes del proceso, desde la captación del cliente hasta el servicio postventa, pasando por acciones de marketing mejor enfocadas, e incluso por una gestión del inventario más ágil y eficiente, por poner varios ejemplos. En definitiva, a una serie de cambios cuya ventaja es que no hay límites, que el ritmo de implementación lo marcas tú, y el coste en relación con los beneficios es considerablemente competitivo.

Si desde hace unos años se venía hablando de la importancia de tener una página web, hoy, contar con una ya no es suficiente para las cada vez más exigentes demandas de los usuarios. Las búsquedas en Internet se realizan con mayor frecuencia desde los dispositivos móviles, y esto hace que la forma en que se concibe el diseño web de una página deba modificarse.

Así, ya no solo se habla de la importancia de la apariencia estética, que debe seguir siendo atractiva para llamar la atención del lector. Ahora, es también necesario que estos últimos puedan interactuar con facilidad y que obtengan con

www.generali.es 3

rapidez la información que solicitan. Si quieres conocer más detalles sobre la importancia del diseño web y cómo puedes crear uno para tu farmacia que cumpla con las nuevas demandas, en este manual daremos respuesta a todas las cuestiones de mayor relevancia.

¿Empezamos?

Javier Las Heras SaundersDirector de Marketing y Clientes

www.generali.es 4

01

www.generali.es 5

01¿Qué es el diseño web?

Para identificar lo que es el diseño web solo hay que echar un vistazo a internet. En tu día a día, es más que probable que inviertas parte de tu tiempo navegando por multitud de páginas webs, tanto por interés particular o entretenimiento, como por cuestiones de carácter profesional.

También es probable que algunas de esas páginas webs te resulten más atractivas que otras, te sea más fácil encontrar la información que buscas, o la simple presentación que tienen te parece más agradable a la vista.

Esto es exactamente lo que es el diseño web. Pero si preferimos una definición algo más técnica, podríamos decir que consiste en la planificación, el diseño, la creación y el mantenimiento de un sitio web. Además de los aspectos puramente

estéticos, es necesario tener en cuenta que la navegación por la interfaz debe ser fácil e intuitiva y visualizarse correctamente desde cualquier dispositivo. Los conceptos que engloban estas características son la usabilidad y la capacidad adaptativa o responsive de una página web.

Hoy en día, no es necesario contar con conocimientos avanzados de programación ni de diseño. Aunque algunas empresas optan por crear sus webs desde cero, es posible optar también por los gestores de contenidos. Son herramientas que cuentan ya con una interfaz, y en las que no es necesario que programemos nada. Solo hay que elegir una plantilla y organizar los elementos a nuestro gusto.

A diferencia de lo que es el desarrollo web, que abarca la

www.generali.es 6

programación del sitio y todas las posibilidades en cuanto a los contenidos que incluye, el diseño web se centra únicamente en la cara visible. Es decir, la estructura que se sigue para agrupar la información, la forma y la imagen que toma.

La finalidad de estos factores es, además de la estética, ofrecer una experiencia de calidad a los usuarios a través de la información que se comparte. Ya sea mediante los contenidos escritos como los audiovisuales.

www.generali.es 7

02

www.generali.es 8

02¿Cuál es la importancia del diseño web?

Una página web es concebida en la actualidad como la carta de presentación de una empresa o equivalente. El uso de Internet es cada vez más extendido entre los consumidores con independencia de su edad, y las nuevas generaciones no conciben su vida sin la tecnología. Por todo ello, cualquier marca que se precie debe contar, por muy sencillo que sea, con un sitio web.

No solo transmite profesionalidad y ofrece información relevante a las personas visitantes sobre la actividad y el sector en el que se opera, sino que además las estadísticas revelan que los usuarios confían más en aquellas empresas que cuentan con una.

Por otra parte, mediante el marketing de contenidos se ofrece información interesante y de valor a los lectores. A través de esta,

una empresa puede demostrar su conocimiento y experiencia en su campo, además de dar respuesta a cuestiones actuales y de interés. Si todo son beneficios, ¿por qué no invertir en una página web?

Pero más allá de su funcionalidad, el diseño web es lo que permite que una página logre sus objetivos. Y por eso, no podemos contentarnos con tener una, sino que hay que trabajar su estructura. Los objetivos a los que se hace referencia son el posicionamiento en los buscadores y un aumento de la visibilidad, además de despertar el interés de los lectores y de afianzar la relación con estos.

Otra herramienta de gran utilidad en el marketing digital y que también está relacionada con el diseño web es la landing page. Una página de aterrizaje en la que

www.generali.es 9

invitamos al lector a tomar una acción en concreto y, así, obtener conversiones.

Puede hablarse entonces de tres elementos fundamentales, que, tanto en conjunto como por separado, permiten transmitir algo nuevo a

los lectores y hacerlo de una forma eficaz. Son el diseño en sí mismo, la usabilidad, es decir la facilidad para navegar, y la comunicación que se ofrezca. Todos ellos conforman lo que se conoce como la experiencia del usuario. Pero de este concepto hablaremos más adelante.

www.generali.es 10

03

www.generali.es 11

03¿Cuáles son los beneficios de un buen diseño web?

Ya tenemos claro lo que es el diseño web en una página y la importancia que este tiene. No solo como presentación de la empresa, sino también como herramienta que permita aumentar la visibilidad y el número de clientes potenciales, así como afianzar la relación con estos.

Si nos centramos en los beneficios que el diseño web ofrece a una empresa, en este caso una farmacia, podríamos establecer los siguientes:

Captará la atención de los usuarios

A menudo se habla de que una imagen vale más que mil palabras, y es que las formas y los colores atraen más nuestra atención que los textos. Por eso, utilizar un diseño web que sea llamativo, pero que

a la vez vaya acorde con nuestro perfil de empresa, es el primer paso para transmitir a nuestra audiencia un mensaje de profesionalidad y de compromiso con lo que se hace.

Las farmacias pertenecen al sector de la salud. Sin embargo, puesto que la variedad de productos disponibles es muy amplia, las posibilidades a la hora de enfocar el diseño web son múltiples, y puede optarse por multitud de colores y estructuras que se alejen de la seriedad que debería transmitir, por ejemplo, la web de un hospital.

Mejora la experiencia del usuario

Aunque a continuación profundizaremos en lo que significa la experiencia del usuario y su importancia, podemos decir que

www.generali.es 12

hace referencia a los beneficios que este obtiene cuando utiliza nuestro sitio web. En la actualidad, tanto en lo que se refiere a las prestaciones como al consumo de productos y servicios, los usuarios priorizan la experiencia que se llevan frente a las características técnicas.

Por ejemplo, la página web de una farmacia deberá incluir contenidos

que ofrezcan información a los visitantes sobre productos, salud, consejos y todo aquello que tenga que ver con este sector. A través de ellos se logrará captar su atención. Pero además de esto, es más que probable que no solo se conecten desde un ordenador, sino también desde otros dispositivos móviles. Por eso, todos los contenidos deben ser accesibles con facilidad y la

www.generali.es 13

interacción con la empresa por esta vía rápida y eficaz.

Permite la adaptación a todos los dispositivos

Anteriormente, las versiones móviles de una página web suponían una duplicación de contenido. Y esto equivalía a una penalización en el posicionamiento en los buscadores. Sin embargo, en la actualidad los llamados diseños webs responsive logran la reorganización de toda la información a las medidas de diferentes dispositivos. De este modo, se facilita la visualización y se mejora el posicionamiento, y así la visibilidad.

Contribuye con el posicionamiento en los buscadores

Un diseño web intuitivo y fácil de utilizar, que se combina con contenidos originales y de calidad con orientación SEO, atrae más visitas. Si, además, estas disfrutan con lo que encuentran, se reduce la tasa de rebote, y se potencia el

que estas visitan compartan los contenidos. Este aumento del tráfico y de las interacciones hace que se mejore el posicionamiento en los buscadores, que a su vez facilita que acudan nuevos visitantes.

Mejora la seguridad

Aquellas páginas que utilizan un buen diseño web con códigos escritos correctamente por profesionales ofrecen mejor protección ante los virus. Pero no solo se trata de la protección de esta, sino que además una buena gestión repercute también directamente en la experiencia del usuario durante la navegación.

www.generali.es 14

04

www.generali.es 15

04En varias ocasiones hemos hecho énfasis en la llamada experiencia del usuario o User Experience. Puesto que en la actualidad es un concepto extremadamente importante, es conveniente profundizar más en él dentro de lo que es el diseño web.

4.1. ¿Qué es UX?

La User Experience o UX hace referencia a la calidad, desde el punto de vista de la facilidad, que tiene una interfaz web para el uso. Dicho de otro modo, consiste en ofrecer una estructura en el diseño que permita a las personas que visitan la página interactuar y acceder a los contenidos con el mínimo esfuerzo.

¿Y por qué es esto importante? Porque de no encontrar lo que están

buscando, las estadísticas dicen que la gran mayoría de los usuarios abandonará nuestra página web. A esta característica se le conoce como usabilidad, y es decisiva para lograr las tan ansiadas conversiones de meros visitantes en clientes potenciales. Así, rentabilizaremos las visitas y evitaremos que los usuarios dejen comentarios negativos.

4.2. ¿Por qué es tan importante el UX?

La importancia de la experiencia del usuario reside, como hemos indicado, en que está directamente relacionada con las conversiones. Si utilizamos el caso de una farmacia como ejemplo, sería como tener las estanterías expositoras llenas de productos mezclados, tanto las marcas como la finalidad de aquellos. El caos que esa imagen

User Experience

www.generali.es 16

transmite probablemente llevaría a la mayoría de los usuarios a abandonar nuestro local. Algo parecido sucede con el diseño web.

Por suerte, existen varios factores que pueden ayudarnos a mejorar la usabilidad de una página, de forma que sea más efectiva y que potencia la interacción entre los visitantes y nuestro contenido. Las principales son las siguientes:

Navegación y estructura

La estructura debe ser sencilla para permitir que haya un camino corto que dé acceso a la información buscada. Para ello, habrá que ponerse en el lugar del visitante y hacer el mismo recorrido que podrían hacer. Esto nos ayudará a identificar problemas. Se recomienda no emplear abreviaturas en los títulos, ofrecer un menú visible y con accesos directos y añadir imágenes o ayudas visuales que faciliten la identificación.

Diseño atractivo

Toda la página web debe seguir una misma línea para evitar que el usuario se pueda desorientar. Por lo tanto, la coherencia y la uniformidad deben ser siempre una prioridad. La navegación debe ser sencilla desde la primera visita, es decir, que sin tener conocimientos sobre la web en cuestión, debe ser posible identificar dónde se encuentra cada apartado.

Legibilidad

El texto en una página web es imprescindible porque los buscadores lo utilizan para el posicionamiento. Sin embargo, desde el punto de vista del diseño, el contenido en sí tiene menos peso. Cuando los usuarios acceden a una página no leen toda la información, sino que echan un vistazo general para valorar inconscientemente la usabilidad que tiene.

¿Y qué aspectos influyen? Pues el color, la fuente que se utiliza y el

www.generali.es 17

formato. Las farmacias se asocian al color verde. Sin embargo, como también este se relaciona con el medio ambiente, pueden añadirse otras tonalidades que le den vida, ya que, al fin y al cabo, va de la mano de la salud.

Pero no solo debemos tener en cuenta el color, también debe haber contraste entre el fondo y las letras. Además de facilitar la legibilidad, podemos realzar la información que tiene mayor relevancia mediante el formato. Así, dirigiremos la mirada del lector hacia donde nos convenga. En cuanto a las fuentes, la sencillez siempre gana.

El tiempo de carga

En la era de la inmediatez, una página web que tarda diez segundos en cargar será abandonada por los usuarios. Por lo tanto, hay que tener en cuenta el servidor que se utilice y la capacidad de almacenamiento, ya que cuando se incluyen imágenes y contenido multimedia se puede ralentizar en gran medida el tiempo de carga.

Diseño adaptable

Nuevamente, mencionamos al diseño responsive o adaptable, y que significaba que debe adaptarse a la pantalla del dispositivo que se esté utilizando para visualizar la información. Así, se mejora la navegación y, en consecuencia, la experiencia del usuario. Además de los diferentes dispositivos, hay que tener en cuenta los navegadores y los sistemas operativos.

www.generali.es 18

05

www.generali.es 19

05El diseño web mobile antes que el desktop

Ya que hemos mencionado la importancia de que el diseño web sea responsive, es conveniente que hagamos una pausa para tratar este punto, porque en la actualidad las preferencias han cambiado. En 2015, Google ya anunciaba que las búsquedas realizadas desde un dispositivo móvil habían superado a las realizadas desde un ordenador de escritorio. ¿Qué significa esto? Que los tiempos están cambiando y que debemos adaptarnos, especialmente con el diseño web.

5.1. ¿Qué es el diseño web mobile?

Estos cambios en la forma de actuar de los usuarios han hecho que surja lo que se conoce como diseño web mobile o Mobile First, y que significa que en lugar de hacer

una estructura para escritorio que se adapte a los móviles, la atención se centra en primer lugar en la creación de páginas para estos terminales. Y, desde ahí, se adaptarán a la pantalla del ordenador.

En otras palabras, el Mobile First consiste en crear diseños webs que estén optimizados para los móviles, por lo que se crea una página web adaptada para tablets y smartphones, para luego ajustarla a los requisitos de los navegadores de escritorio.

Por lo tanto, el flujo de trabajo se está invirtiendo. Y si antes los diseñadores y programadores no le daban a la web móvil la importancia que tenía, hoy en día los usuarios han dejado claro cuáles son sus preferencias y, así, ha habido que adaptarse para poder satisfacer sus necesidades.

www.generali.es 20

5.2. ¿Por qué centrarnos en el Mobile First?

Las cifras hablan por sí solas, y el número de visitas a las páginas webs desde dispositivos móviles continúa incrementándose año tras año. Así, el Mobile First se ha convertido en todo un mercado en sí mismo, y debe ser la prioridad a la hora de diseñar cualquier contenido digital.

Hemos dicho que los usuarios demandan páginas que sean intuitivas y fáciles de utilizar, y eso es lo que consigue el Mobile First. El tamaño reducido de las pantallas puede parecer una limitación en primer lugar, ya que no podrá visualizarse toda la información correctamente.

Sin embargo, se trata de una oportunidad, pues al lograr ajustar el contenido que tiene mayor peso al tamaño reducido de una pantalla, estamos ya facilitando la navegación y la experiencia del lector. Adaptarla desde ahí al navegador de escritorio resulta una tarea mucho más sencilla que cuando el proceso se realiza a la inversa.

Además de Mobile First, suele hacerse referencia también al carácter user-friendly, es decir, que la web sea amigable. ¿Y cuáles son las características que debe reunir para lograrlo? Pues, en primer lugar, debe ser posible acceder a los contenidos con facilidad, y este debe ser también responsive y facilitar la lectura. Además, los tiempos de carga serán cortos y los enlaces visibles y accesibles.

Como vemos, son las características que ya mencionamos en el apartado anterior. Y, por tanto, su importancia es también la misma. No solo aumentaremos las visitas, sino que estas se quedarán y tendremos mayores probabilidades de lograr conversiones.

www.generali.es 21

06

www.generali.es 22

06Llegados a este punto, ya deberíamos tener claro cómo debe ser la estructura de una página web y cuáles son las prioridades que debemos buscar en esta. Pero desde el punto de vista de un usuario o de una empresa que quizás no tenga conocimientos de programación y de diseño web, puede resultar complejo visualizar cómo podría ser una estructura que cumpla con las características mencionadas.

Y ahí es donde entra en juego otro concepto de gran relevancia hoy en día. Son los mockup, y hacen referencia al montaje inicial que los diseñadores utilizan para mostrar los objetivos que se persiguen, y cómo

se lograrán mediante la estructura web. Sería como un boceto sobre el que luego se trabajará.

No incluye ninguna función en absoluto; simplemente permite conocer cómo quedará el proyecto una vez que se haya terminado. De esta forma, pueden marcarse los objetivos concretos y establecer las modificaciones pertinentes para asegurar que estos se consiguen.

¿Y necesitas trabajar con un diseñador web para obtener el mockup de la web de tu farmacia? No necesariamente. Internet tiene también herramientas disponibles, que además son gratuitas, y que permiten de manera sencilla crear la base del diseño web.

¿Qué es un mockupy para qué sirve?

www.generali.es 23

07

www.generali.es 24

075 herramientas parala creación de mockups gratis

Existen otras posibilidades, pero a continuación te dejamos cinco herramientas gratuitas y de uso

sencillo con las que podrás crear tu mockup con facilidad.

7.1. Gliffy

Gliffy es una de las herramientas más utilizadas para la creación de mockups para una página web, ya que además facilita el trabajo colaborativo. Cuenta con una librería con multitud de esquemas, y además permite realizar planos, mapas mentales y diagramas de flujo, así como añadir botones, barras o imágenes, entre muchos otros. Además, gracias a su API los desarrolladores web pueden integrar esta herramienta con las demás que utilicen para la creación propiamente dicha de la web. Su inconveniente principal es que está en inglés.

www.generali.es 25

7.2. Cacoo

Cacoo es otra de las herramientas más utilizadas para crear mockups, tanto para webs como para aplicaciones móviles. Su plan gratuito solo permite la exportación como un archivo en la extensión PNG, pero para obtener una visión global de la estructura final es válida. También permite a varios usuarios trabajar a la vez en tiempo real. Es algo menos completa que la anterior, pero aun así interesante.

www.generali.es 26

7.3. MockFlow

Con una interfaz muy intuitiva, MockFlow ofrece multitud de facilidades para crear mockups y sitemaps de un proyecto. Las opciones para la exportación se amplían, ya que permite diferentes formatos. Sus características también son muy variadas, y ofrece una librería con plantillas para elegir aquella que más se adapte a nuestro perfil de empresa.

www.generali.es 27

7.4. Frame Box

Frame Box es una de las herramientas más sencillas de todas para iniciarse en el mundo del diseño web. Su interfaz es extremadamente fácil de usar, y tan solo hay que arrastrar y soltar para añadir líneas, secciones de texto, menús desplegables, enlaces, texto y un largo etcétera de posibilidades. Para facilitar su uso posterior se guardan en proyectos.

www.generali.es 28

7.5. Wireframe.cc

Wireframe.cc ofrece también una interfaz muy fácil de usar para quienes cuentan con poca experiencia. Puede trabajarse en equipo, y se crean y comparten bocetos adaptados para páginas web y apps en móviles o tabletas. Como particularidad, pueden añadirse acciones con un clic para valorar el funcionamiento de los elementos que se hayan añadido.

www.generali.es 29

08

www.generali.es 30

08Conclusión

Aunque la base de una página web, así como su finalidad, sean aún las mismas, es necesario adaptar el diseño a los nuevos requisitos tecnológicos que imperan en la actualidad. Como todo lo relacionado con la era digital, la inmediatez y los beneficios para el usuario son los que marcan el camino que debe trazarse. Y, por lo tanto, cualquier acción que se lleve a cabo debe tener estos principios en mente.

El diseño web no es solo la carta de presentación de una farmacia, y debe transmitir los valores propios de la marca. Sino que, además, es la vía con la que esta se comunicará con su audiencia, y cuantas mayores sean las facilidades, y la calidad y el acceso a los contenidos, mayores serán también las posibilidades de lograr nuevos clientes y de fidelizar a los que ya se tienen.