las claves para diseÑar una web enfocada … que no te desanimes, ... aunque sea solo una que...

1

Diseño web estratégico que da su frutoY KIWI

1


LAS CLAVES PARA DISEÑAR UNA WEB ENFOCADA A CAPTAR CLIENTES

Hazlo tú mismo,paso a paso


• Diseñadora gráfica y web

• Cofundadora Limón y Kiwi, diseño gráfico y web estratégico para pequeñas empresas y emprendedores con grandes metas

Esther Castells

3


1. Introducción .......................................................................................................................................4

2. La web como herramienta de venta .............................................................................6

3. Propuesta de valor única ..........................................................................................................8

4. Público objetivo ............................................................................................................................12

5. Estructura y contenidos .......................................................................................................15

6. Herramientas .................................................................................................................................22

7. Guía de estilos .................................................................................................................................25

1. La fotografía ........................................................................................................................... 27

2. Color ................................................................................................................................................ 30

3. Tipografía ................................................................................................................................. 31

4. Iconos ............................................................................................................................................. 32

8. Copywriting ......................................................................................................................................34

9. SEO .......................................................................................................................................................... 38

10. Analítica web ............................................................................................................................ 41

11. Anexos............................................................................................................... ..................................45

ÍNDICE

4


El camino del autoempleo es una aventura. Una senda con multitud de

baches, pero con destinos increíbles a los que tu también puedes llegar.

Para alcanzar tu destino (tus objetivos), puedes utilizar diversas

herramientas. Cada negocio es diferente, y por ello tendrá sus necesidades

particulares. Lo que es innegable, es que la página web se ha convertido

en uno de nuestros mejores aliados.

Antes de seguir, me presento; mi nombre es Esther Castells y soy

diseñadora gráfica y web. Mi especialidad siempre fue la maquetación,

hasta que me adentré hace 5 años en el mundo digital. A raíz de trabajar

como diseñadora web, decidí fundar mi propia empresa para ayudar a

personas como tú.

En mi recorrido, he aprendido a utilizar el diseño como arma para vender.

Se trata de una técnica basada en la estrategia y funcionalidad. El

diseño no es crear algo estéticamente bonito (olvida esta definición de

diseño). El diseño es comunicación. Y qué mejor que aplicarlo a una de las

mejores herramientas para vender, tu web.

¿Por qué te va a ayudar este ebook? Lo que te cuento aquí no va a ser

una teoría sin más. Te voy a dar consejos demostrados, con ejemplos.

Además, soy una persona como tu, detrás de esa pantalla. También tengo

mi negocio de servicios y he pasado por muchas de las situaciones que

seguro que también has vivido. Comprendo tus necesidades y mi objetivo

es ayudarte.

1INTRODUCCIÓN

5


No me detengo más, ¡aquí tienes nuestro pequeño regalo! Tanto todo

mi equipo como yo, esperamos que te sirva de ayuda en la ruta hacia

tu destino más deseado.

Un abrazo,

Esther Castells.

6


He tratado con diversos clientes que necesitan una web para su negocio.

Como es lógico, cada uno tiene sus propias necesidades. Para detectar

de manera rápida cuáles son, he formulado una pregunta inicial que tú

también puedes plantearte:

“¿Qué necesitas: Una tarjeta de visita / catálogo o una herramienta

para vender?”

Para que quede algo más claro, vamos a desarrollar cada una de las

opciones:

• Una tarjeta de visita o un catálogo. Este tipo de webs tienen

la finalidad de proporcionar más información sobre tu negocio.

Pueden servir para que las personas que te conocen consulten tu

horario, precios, localización, información de tus servicios y poco

más.

• Una herramienta de venta. Son páginas webs activas. Cuentan

con un diseño estratégico enfocado a transmitir soluciones

a un público objetivo concreto. Sus textos están cuidados y

enfocados a vender. Trabajan un posicionamiento orgánico de

forma continua para captar visitantes potenciales. Proporcionan

contenido regularmente de calidad para atraer nuevos usuarios

y fidelizarlos.

Y bien, ahora que ya conoces los tipos de webs, ¿ya tienes claro cual

quieres para tu negocio?

LA WEB COMO HERRAMIENTA DE VENTA2

7


Si lo que necesitas es una tarjeta de visita o un catálogo, has llegado

hasta el lugar equivocado. Lo único que puedo hacer antes de que

abandones este ebook, es decirte que replantees si realmente es

lo mejor para tu negocio. Si tu decisión es definitiva, espero volver a

encontrarte pronto en el camino.

En cambio, si buscas una web como herramienta de venta para tus

servicios, te voy a ayudar. Fundamentalmente, trataré el tema del

diseño estratégico para que tú mismo logres tus objetivos diseñando

tu propia página web.

No solo nos quedaremos ahí, también entraré en temas que están

estrechamente ligados con el diseño web. Te hablaré de marketing,

copywriting, fotografía, SEO y analítica. La página web funcional que

buscamos, cuenta con todos esos factores. No te agobies, ¡que casi

puedo escuchar desde aquí tu resoplido! Vamos a ir paso a paso.

8


Si ya estás descargando WordPress o abriendo tu panel interno para

empezar con los cambios… Tendrás que esperar. En muchos casos, lo

ideal es dar varios pasitos atrás para poder dar uno grande hacia el frente.

El primer paso para crear o modificar tu página web es verificar que

tienes claro quién eres y dónde quieres llegar. Debes hacer un estudio

exhaustivo de tu negocio. Las siguientes preguntas te servirán de ayuda:

• ¿Quién eres?

• ¿Qué servicios proporcionas?

• ¿Cuál es tu servicio fuerte?

• ¿Cuál es la antigüedad de tu empresa?

• ¿Cuál es tu objetivo?

• ¿Quién es tu competidor principal?

• ¿Cuál es tu carácter diferenciador frente a la competencia?

• ¿A quién quieres que se dirijan tus servicios?

Voy a realizar el ejercicio con un ejemplo de una empresa para que

puedas comprenderlo mejor:

• ¿Quién eres?

Mi nombre es Sara, tengo 35 años y tengo mi propio centro de

belleza.


Tratamientos faciales y corporales, maquillaje, depilación, uñas.

PROPUESTA DE VALOR ÚNICA3

9



Los tratamientos faciales orientales


3 años


Ser un centro de referencia en Valencia, mi ciudad. Crear imagen

de marca para poder aumentar el precio de mis servicios y la

calidad. La finalidad es mejorar mi propia calidad de vida.


Actualmente, mi mayor competidor es el centro más cercano a

la zona, pero me gustaría competir en un futuro con los 3 centros

referentes en Valencia.

• ¿Cuáles son tus puntos débiles frente a la competencia?

No dispongo de tanta variedad de maquinaria y tecnología.

No puedo contratar a tanto personal.

No estoy en una mala zona, pero la competencia fuerte está en

ubicaciones mejores.

• ¿Cuáles son tus puntos fuertes frente a la competencia?

Dispongo de servicio de tratamientos específicos orientales,

realizados por un especialista del sector. La competencia no

ofrece este servicio.

10


Nuestra atención se basa en el análisis personal de cada caso

para ofrecer un tratamiento 100% personalizado. La gran parte

de la competencia ofrece servicios sin más.

Ofrezco unos servicios con productos 100% naturales y que se

basan en potenciar la belleza natural y no la artificialidad.


(La respuesta a esta pregunta… ¡En el próximo capítulo!)

La encuesta anterior, representa un caso real. Teniendo el ejemplo de

Sara, seguro que comprendes mejor cómo desarrollarlo, así que ahora es

tu turno. Accede a la página para realizar el ejercicio aquí: Ejercicio 1

¿Ya has acabado?

¡Perfecto! pues ahora vamos a examinar lo que nos interesa extraer

del cuestionario, utilizando el caso práctico de Sara. Una vez claro,

estaremos un poquito más cerca de poder crear nuestra web ideal.

Empezamos:

Sara no quiere tener un centro de belleza más, ella quiere ser referente

en su ciudad. En el sector hay mucha competencia, pero realmente

solo hay 5 centros muy bien posicionados en su ciudad. El camino es

complejo, pero su objetivo es viable.

Tiene claras cuales son sus debilidades frente a la gran competencia:

http://limonykiwi.es/ejercicio-1/

11


“No dispongo de tanta variedad de maquinaria y tecnología, no

puedo contratar a tanto personal y no estoy en una mala zona, pero la

competencia fuerte está en zonas mejores”. Tus debilidades existen

y debes tenerlas en cuenta, ya que te ayudará a detectar los puntos

fuertes. Así que no te desanimes, porque estos últimos serán los que

te ayudarán a extraer tu propuesta de valor única.

Como puntos fuertes, Sara cuenta con unas propuestas valiosísimas:

Ofrece un servicio específico (tratamientos faciales orientales) que no

disponen los demás. También se basa en el uso de productos naturales

y el fomento de la belleza natural frente a la artificialidad. Y además,

su equipo hace tratamientos 100% personalizados para cada cliente…

¡Con lo que nos gustan las cosas personalizadas!

Seguramente, Sara tenga más propuestas de valor. Pero si tu tienes

aunque sea solo una que aporte mucho valor a tu cliente, es más que

suficiente. Tómate tu tiempo para tomar la decisión.

¿Ya la tienes?

Si es así, enhorabuena. Acabas de dar un gran paso, amigo. Esto te va

a dar muchas pautas clave a la hora de diseñar tu web. Más adelante

lo vas a comprobar.

12


Si eres curioso, seguramente recuerdes que nos hemos dejado una

pregunta pendiente en el ejemplo de Sara:

¿A qué público quieres llegar?

Y es que tal pregunta, merecía al menos, un capítulo para poder

desarrollarla. Ojo, no es lo mismo “A qué público quieres llegar” que

“A qué público estás llegando”. La diferencia es que una se basa en

tu realidad, y la otra representa tu objetivo.

Por ejemplo, Sara actualmente está llegando a un público cercano a

la zona donde se encuentra su local. Son chicas sobre los 30 años. El

nivel económico de su público actual es medio/bajo o medio. Este

público no le permite aumentar sus precios como a ella le gustaría.

Además, ahora mismo, se encuentra limitada por una visibilidad única

dentro de la zona de su negocio.

El público al que le gustaría llegar sería de una edad algo mayor y con

un nivel económico medio alto. También podría estar ubicado en otras

zonas de Valencia que no fueran la de su negocio.

Esta es una breve idea del concepto que tiene Sara sobre su público

objetivo. La finalidad es que comprendas a grandes rasgos la idea.

Tener claro tu público y tus objetivos te va a acercar cada día más

a tu negocio y web ideal. Por esta razón, vamos a profundizar en el

tema.

PÚBLICO OBJETIVO4

13


¿Cómo defino mi público objetivo ideal?

Para ello, te he preparado algunas cuestiones que deberás responder

más adelante a través de la página del ejercicio 2. Antes de empezar,

has de tener en cuenta que posiblemente no puedas elegir 100% tu

público objetivo. Tu target1 debe tener una necesidad real por tu

servicio, o en el caso contrario, tendrás que crearle tu la necesidad.

• Sexo

• Edad

• Localización

• Empleo

• Nivel económico

• Estado civil

• Hobbies

• Que marcas consume o le gustan

• Con qué frecuencia utiliza internet y las redes sociales

• Cual es su carácter

Debes añadir nuevos datos si así lo consideras, además focalizar en

las que sean más relevantes para tu negocio.

Con esta lista, vamos a dar el siguiente paso que será crear una “buyer

persona”. Se trata de un ejercicio muy divertido, en el que vas a crear

una personalidad ficticia de tu cliente ideal. Esta “personificación” te

1 Público objetivo al que va ir dirigido tu servicio

14


va a ayudar a entender cómo es la persona a la que tienes que llegar,

de qué manera hacerlo y qué decirle. Retomamos la situación de Sara

para crear un ejemplo de su buyer persona:

MÓNICA

Valencia, 35 años.

Blogger de moda, influencer.

Tiene pareja.

Nivel económico medio/alto.

Usuaria de Smartphone (iPhone).

Utiliza las redes sociales en su trabajo y en su vida cotidiana en

abundancia.

Le gusta ir de compras, tomar café con sus amigas, cuidarse, ir al

gimnasio, viajar, leer…

Es de carácter independiente pero muy social.

Compra en tiendas como Zara y Mango

Conduce un mini.

Mónica es un ejemplo de la clienta ideal que busca Sara. Sería conveniente

que creara dos o tres ejemplos más. Después, verificaría que ese tipo de

clientes está en su mercado y están dentro del rango económico de los

servicios que ofrece. Una vez claro esto, podría dar el siguiente paso.

¡Ahora es tu turno! Ve a la página del ejercicio 2: Ejercicio 2

¿Todo correcto? ¡Seguimos!


15


ESTRUCTURA Y CONTENIDOS5Tras hacer tu pequeño estudio, teniendo en consideración las pautas

anteriores, por fin podemos pasar a hablar de web (¡Si! Yo también me

moría ya de ganas).

El proceso que voy a describir a partir de estas líneas, es el que utilizamos

en nuestro estudio para abarcar proyectos web. Existen diversos

caminos, pero yo te voy a contar el que a nosotros nos funciona mejor.

Mi recomendación es que lo sigas paso a paso. Saltando procesos,

puedes provocar perder más tiempo enmendando futuros fallos.

Continuamos, vamos a pensar con un poco de lógica. Ya sabes que

saltarte procesos te puede llevar al error. Y los errores nos hacen

perder tiempo en un futuro. Por lo tanto, no tendría sentido empezar

a trabajar nuestra web directamente en Wordpress.

Entonces, ¿cuál es la solución?

Te presento a tu nuevo aliado, el Mockup o Wireframe.

¿Qué es un mockup?

Un mockup, es un boceto previo de estructura. Se podría decir, que

es el “esqueleto” de la web. En él no debes incluir ningún estilo (color,

tipografía, formas reales, etc). Solo arquitectura de la página.

16


17


Su finalidad es la planificación de la estructura, funcionalidades,

contenidos, navegación y diseño. Para tu caso concreto, nos

quedaremos únicamente con estructura, contenido y diseño.

Tendrás que crear un mockup para cada página de tu web (home, quienes

somos, servicios, contacto…) ¡Muy importante! Debes darle prioridad a

la versión para dispositivos móviles. Y te preguntarás, ¿por qué?

La respuesta, está en que a día de hoy, el 86% de los españoles

accedemos a internet desde el móvil. En resumen, estamos diseñando

webs mayoritariamente, para ser visualizadas desde estos dispositivos.

¿Cómo vas? ¿Te has perdido un poco en este tema?

No te preocupes, estamos entrando en algo más técnico, es normal.

Vamos a tomar un ejemplo y llevarlo a la práctica, seguro que así lo

comprendes mejor.

Te pongo rápidamente en situación. Imagínate a Manuel, de 35 años.

Tiene una clínica de fisioterapia y quiere captar nuevos clientes a través

de una web. Recientemente, ha realizado un curso de WordPress y se

ha lanzado a diseñar él mismo su propia web, ¡otro valiente!

Manuel empieza a trabajar en el mockup para su home. Comienza con

la versión responsive*2 y va pensando en función a los apartados que le

interesan:

2responsive web design: Diseño y desarrollo web adaptado a los diferentes tamaños y dispositivos móviles.

18


“Quiero una portada, con una fotografía de fondo, un titular y un botón.

Debajo, una sección que describa mi negocio. En 3ª posición, 3 iconos

con pequeñas descripciones de cada uno de mis servicios. En 4ª posición,

pondré una sección de testimoniales. Finalmente, añadiré un módulo con

un formulario de contacto”

Esta sería una especie de conversación mental que tendría Manuel

consigo mismo. Y así, paso a paso, iría creando todos los mockups de

las páginas de su web.

Pero, ¿Cómo creo los mockups, existe algún programa?

La opción tradicional a papel y lápiz, puede ser una solución rápida y

muy eficaz para principiantes.

En cambio, si quieres profesionalizar tu trabajo, efectivamente existe

ayuda. Si estás familiarizado con Adobe, podrás utilizar programas

como PhotoShop o Illustrator. En cambio, si no has trabajado nunca

con herramientas de diseño, puedes utilizar las que te recomiendo a

continuación:

• https://gomockingbird.com - Versión gratuita hasta 10 páginas

(suficiente para un proyecto básico). Interfaz amigable, te permite

arrastrar los elementos ya creados en tu mesa de trabajo

• https://moqups.com/ - Prueba gratuita. Después puedes hacer

hasta un proyecto medio por un precio razonable.

https://gomockingbird.com

https://moqups.com/

19


He decidido tomar papel y lápiz para hacerlos, pero… ¿cómo

represento mis ideas?

Puedes utilizar tu propia simbología o tomar las más comunes que te

describo aquí abajo:

• Textos: No tienes que crear ya los copies*3 definitivos, pero sí

debes planificar ahora qué contenido irá en cada sección. Coloca

los titulares aproximados, y un texto de lorem ipsum*4 en las

descripciones.

• Imágenes: Se representan colocando un cuadrado con una cruz

en diagonal en los espacios dónde aparecen.

• Iconos: Igual que las imágenes, pero en lugar de un cuadrado

puedes utilizar un círculo para diferenciarlos.

• Botones: Un rectángulo que encuadre tu texto.

• Videos: Similar a la imagen, pero con un triangulo de reproducción

en el centro.

• Cambios de sección: Sepáralos mediante líneas horizontales.

• Herramientas para formularios de contacto (select, text area,

3 Copies: Textos enfocados a influir a un público objetivo y llevarlos a una acción comercial concreta.4Texto de relleno

20


radio, check…) Simulamos su forma, tal y como se muestra en la

imagen inferior.

Existen más elementos, pero con los que te he citado anteriormente

tendrás suficiente para tu página.

21


Consejo: No tengas miedo a equivocarte, de eso se trata. Esta es la

parte del proceso en la cual tienes que cometer errores. Además,

en el siguiente capítulo, tendrás que adaptar tus planteamientos

a la herramienta de trabajo que utilices. Pero eso lo vamos a ver a

continuación.

22


Una vez planteada la estructura de tu futura web, y tener una idea

clara del contenido que va a incluir, llega el momento de seleccionar

tu herramienta de trabajo. Sin duda, mi recomendación es que

utilices la plataforma de CMS WordPress. Este ebook, está enfocado

principalmente a un proceso de trabajo mediante esta herramienta. Para

que comprendas por qué WordPress será tu mayor aliado, te voy a dar

varias razones que te convencerán:

En primer lugar, ¿qué es WordPress?

Nuestra querida Wikipedia, nos da la siguiente definición:

WordPress es un sistema de gestión de contenidos o CMS enfocado a

la creación de cualquier tipo de sitio. Originalmente alcanzó una gran

relevancia usado para la creación de blogs, para convertirse con el tiempo

en una de las principales herramientas para la creación de páginas web

comerciales.

¿Por qué utilizar WordPress?

• Existen multitud de plantillas fáciles de usar y con diseños

profesionales. Además, cuentan con panel de gestión interno

mediante interfaces muy intuitivas.

• Es mucho más fácil posicionar un WordPress que una página de

código.

HERRAMIENTAS6

https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_contenidos

https://es.wikipedia.org/wiki/Blogs

23


• Existen miles de tutoriales y cursos (incluso gratuitos) que te

permitirán aprender a utilizarlo.

• Cualquier duda, puedes resolverla fácilmente mediante foros.

Hay muchísima información disponible en la red.

• Cuenta con una variedad de plugins*5 que te permitirán añadir casi

cualquier funcionalidad a tu página sin necesidad de programar.

Bien, ¡me has convencido! Voy a utilizar WordPress, ¿qué tengo que

hacer ahora?

Para poder empezar a diseñar tu web, necesitas seleccionar una

plantilla. El primer consejo; huye de las gratuitas (solo dan problemas).

Esta es una de las primeras inversiones inteligentes que necesitas para

el diseño de tu web.

El lugar para encontrar la plantilla ideal, el paraíso de las plantillas :

Theme forest . Por aproximadamente 50€, puedes adquirir un theme

con un diseño profesional, acorde a tus necesidades y fácil de gestionar.

¿Qué debo tener en cuenta para comprar una plantilla?

Este es un apartado en el que debes indagar antes de tomar una

decisión precipitada (recuerda: decisión precipitada = posible error

futuro = pérdida de tiempo) Ten en cuenta los siguientes factores:

5Plugins de WordPress: Herramientas que extienden las funcionalidades de WordPress.

https://themeforest.net/

24


• Busca un diseño dentro de tu sector (p.ej.: salud, estética,

educación infantil, deportes, etc.) Generalmente, los diseños que

expone Themeforest están estratégicamente preparados para

responder a necesidades por sectores.

• Revisa por igual la versión para escritorio y dispositivos móviles.

• Ten en cuenta las valoraciones

• Busca un servicio técnico responsable

• Y por supuesto, que se adapte lo mejor posible a tus ideas

planteadas en los mockups. En este punto podemos entrar en

un pequeño conflicto, ¿por qué hacemos el mockup antes de ver

las plantillas? Respeto otros métodos de trabajo, pero pienso que

lo ideal para no condicionar tus ideas es dejarlas fluir sin primeras

influencias. De nuevo, hago hincapié en que la parte del “mockup”,

está para equivocarte y rectificar.

Ya he seleccionado una plantilla que me enamora, y cumple los

requisitos

¡No sabes cuanto me alegro! Ya estás mucho más cerca de ponerte

manos a la obra con tu web. El siguiente paso, es que revises los mockups

y tus ideas iniciales. Rectifica los aspectos que creas convenientes . En

caso de ser necesario, puedes adaptarlos a la estructura de tu nueva

plantilla

25


¡Llegó mi parte favorita! Espero que tu la disfrutes tanto como yo.

En esta ocasión, tu misión será darle estilo a esos grises mockups

que acabas de construir. A continuación, te daré las claves para que

puedas traducir tu estudio (propuesta de valor, target, etc) en un diseño

enfocado a cumplir tus objetivos y llegar a tu público ideal.

Antes de empezar, te quiero hacer una pregunta: ¿Tu marca tiene

una identidad visual*6 profesional?

Si la respuesta es sí, acabas de adelantar un recorrido importante. El

profesional que haya desarrollado este trabajo, te habrá dado ciertas

pautas que ya contienen un estudio previo de objetivos y target. En

este caso, podrás saltarte algunos de los siguientes pasos.

Si la respuesta es negativa, no te preocupes. Mi objetivo en este

manual es enseñarte a diseñar una web (aunque te advierto, que debes

plantearte seriamente desarrollar una identidad visual cuanto antes).

Para ponerte en situación, vamos a centrarnos de nuevo en el caso de

Manuel, el fisioterapeuta. Lo traduciremos en un estilo para su web:

• ¿Quién eres?

Manuel, 35 años. Licenciado en fisioterpia con Máster en

Fisioterapia Deportiva y formación en osteopatía. Soy dueño de

mi propia clínica de fisioterapia.

6 Identidad visual de una marca: Estilos y elementos estratégicos que representan una marca.

GUÍA DE ESTILOS7

26



Fisioterapia, rehabilitación, ejercicio terapéutico y reeducación

postural.


Fisioterapia deportiva, es mi especialización y la que más dinero

me da.


1 año


Ganar visibilidad y aumentar mi cartera de clientes.


Las 2 clínicas de fisioterapia cercanas a mi local. Las clínicas más

reconocidas en Valencia y las mejor posicionadas en Google.

• ¿Cuál es tu carácter diferenciador frente a la competencia?

Mi especialidad es la fisioterapia deportiva, he trabajado durante

años con deportistas de élite ayudándoles a recuperarse de sus

lesiones.


A cualquiera que los necesite*7 (¡ojo! Quédate con esta frase)

7 Segmentar tu público lo máximo posible te ayudará a captar menos cantidad de clientes, pero de mejor calidad y más interesados por tu servicio.

27


¡Empezamos!

1. La fotografíaUno de los factores más importantes, sin duda, es la fotografía de tu web. Te brinda la oportunidad de generar confianza, enseñar tu negocio y conectar con tu público objetivo, ¡su poder es magistral!

Si está dentro de tus posibilidades, otra inversión inteligente será contratar a un fotógrafo profesional. Puedes planificar una sesión específica de fotos para tu página web. No te anticipes, y estudia con antelación primero qué quieres mostrar.

Otra opción, es realizar la sesión por tu cuenta. Si quieres lanzarte a la

aventura, te va a ser de muchísima utilidad este artículo: Trucos para

mejorar las fotografías en tu página web.

Utilizar fotografías de bancos de imágenes, nos puede ser de utilidad

en algunos casos. Aún así, te recomiendo que las evites en medida de

lo posible. Reflejan distancia y frialdad, una de las cosas que queremos

evitar en nuestro diseño web.

He contratado a un fotógrafo, ¿qué tiene que hacer?

Primero, estudia bien qué necesitas y cómo. Retoma tus mockups y

revisa página por página los lugares reservados para tus imágenes.

Vamos a verlo de manera práctica en el caso de Manuel:

http://limonykiwi.es/trucos-para-mejorar-fotos-pagina-web/?preview_id=50615&preview_nonce=37d3f21928&post_format=standard&_thumbnail_id=51403&preview=true

http://limonykiwi.es/trucos-para-mejorar-fotos-pagina-web/?preview_id=50615&preview_nonce=37d3f21928&post_format=standard&_thumbnail_id=51403&preview=true

28


• Mockup home: Necesita una imagen para la portada + varias

fotos de testimoniales

Para la portada, sería ideal que Manuel mostrase una foto donde

aparezca él mismo tratando a un deportista de élite. La clínica de

fondo, un gesto de simpatía y seguridad por su parte, y de calma

y bienestar en el cliente.

Con todo esto, habría mostrado sus instalaciones, su público

objetivo y su lado humano. Todo en uno y además en la portada,

la cara de presentación de una web, ¡brillante!

• Para los testimoniales, incluiría fotografías 100% reales de

clientes suyos.

• Mockup quienes somos: Podría utilizar una foto con el conjunto

del equipo (simboliza unión, fuerza y personalidad). Y luego, una

foto individual de cada uno. Estarían tomadas en la misma clínica,

con sus respectivos uniformes. Además, el gesto del equipo

debería ser cercano, sonriente y con carácter profesional.

• Mockup servicios: Podría aprovechar la sesión fotográfica, para

invitar a varios clientes reales y proponerles ejercer de modelo

para cada uno de los servicios que requiera. Es importante, hacer

hincapié en mostrar el resultado antes que el servicio. Si Manuel

está tratando a una persona mayor, dirá mucho más el gesto de

el o ella relajado y sonriente, que mostrar cómo desarrolla su

29


técnica.

• Otros: Es posible que necesite alguna foto extra para portadas,

fondos, incluso para los banners del blog. En este caso, sería

buena idea para el fisioterapeuta recurrir a bancos de imágenes

profesionales. (Te recomiendo: Shutterstock )

En resumen, aprovecha al máximo tu sesión fotográfica para mostrar

los beneficios que aportas a tu cliente, que eres una persona cercana

tras la pantalla y tu producto siempre déjalo en un segundo plano.

¡Ya tengo las fotos! ¿Cómo las preparo para mi web?

Ya tienes la selección de las fotografías que mejor definen tus objetivos.

Ahora, te falta hacer el trabajo posterior de edición para web. Busca en

tu plantilla de WordPress alguna indicación de tamaños de imágenes,

o utiliza las de muestra para averiguarlo.

Abre tu programa de edición de fotografía favorito (como por ejemplo,

PhotoShop) y guárdalas en 72ppp (resolución para pantalla). Esto

ayudará a reducir el peso de tu web (lo que favorece a la carga más

rápida y posicionamiento en buscadores). Intenta que tus imágenes

grandes no pesen más de 300ks. Las pequeñas, redúcelas lo máximo

posible sin pixelarlas.

http://www.shutterstock.com

30


2. Color

Si tu identidad visual cuenta con una paleta de colores definida, esta

sección ya la tienes dominada. En cambio, si partes de cero, tendrás

que generarla tu.

Los factores a tener en cuenta son los siguientes:

• Preferentemente, utiliza de manera predominante o destacada

el color de tu marca. Este es tu sello de identidad, y lo que

queremos es que el usuario la memorice y nos recuerde.

• Ten en consideración la psicología del color. Cada tono tiene

unas connotaciones y tendrás que adecuarlas a tu mensaje y

target.

• Jerarquiza los elementos: Una vez seleccionados los colores

principales para tu paleta, selecciona otros tonos secundarios.

Esto nos ayudará a crear composiciones más elaboradas y a

jerarquizar los elementos según importancia.

Para profundizar más sobre la psicología del color, la jerarquización

y conocer herramientas para generar paletas automáticas visita el

artículo: Cómo crear paletas de colores web

En total, podemos tener, por ejemplo, una paleta de 5 colores

aproximadamente con uno o dos colores principales, y el resto

secundarios.

http://limonykiwi.es/como-crear-paletas-de-colores-web/

31


Guarda los códigos hexadecimales en un documento junto al color.

Este sería el ejemplo de la paleta de colores web para Manuel:

3. Tipografía

En el caso de que no dispongas de tipografía corporativa, la propia

plantilla de WordPress te puede ayudar. Aún así, tener un criterio propio

y personal te ayudará a diferenciarte. También afinarás tu diseño en base

a tus objetivos y público.

Para seleccionar una tipografía de calidad y disponible para web, te

recomiendo utilizar : Google Fonts. Mediante esta herramienta, insertar

tipografías en tu web te será muy sencillo.

Te recomiendo que utilices una tipografía “sans serif” o de “palo seco”.

Facilitan la legibilidad en pantalla. Además tienen connotaciones de

modernidad y profesionalidad. Son flexibles para amplios públicos y

sectores.

Respeta los tamaños de los diferentes titulares y sus jerarquías

(h1,h2,h3,h4,h5,h6, p*8). De esta manera, acostumbrarás al usuario a un

mismo patrón que memorizará y amenizará su lectura. No olvides que

los espacios, son un factor importante para que respire tu lector y 8 Etiquetas de código HTML utilizadas para identificar titulares y textos según importancia

https://fonts.google.com/

32


no se agobie.

Si quieres conocer tipografías para aplicar en tu web, consejos para

utilizarlas de manera correcta y dónde encontrarlas, accede al siguiente

artículo: Qué tipografía utilizar en mi página web.

4. Iconos

Un contenido textual, ha de ir siempre acompañado de elementos

gráficos. Éstos se encargan de generar dinamismo y mejorar la

comprensión de la lectura. Así como utilizamos imágenes que

apoyen informaciones o argumentos, otra herramienta con muchas

posibilidades son los iconos.

Para saber qué iconos utilizar en tu página web, debes de fijarte en sus

rasgos. Manuel, por ejemplo, podría utilizar unos iconos suaves, con

bordes algo redondeados y de línea en lugar de rellenos. Su imagen ha

de transmitir bienestar, por lo que unos iconos agresivos, chocarían econ

esta idea.

http://limonykiwi.es/tipografia-utilizar-web/

http://www.withinkwebdesign.es/que-tipografia-utilizar-en-mi-web/

33


Puedes descargar todo tipo de iconos en Flaticon. Si quieres saber

más sobre el mundo de los iconos y cuáles seleccionar, consulta el

artículo: Qué iconos utilizar en mi página web.

Ya tengo listas mis fotografías, colores, tipografía e iconos, ¡pasemos

a la acción!

¡Estupendo! Realiza el ejercicio 3 donde tendrás que indicar tus

eleciones y justificarlas. Accede aquí: Ejercicio 3. Te daremos feedback

para que puedas reforzar tus elecciones.

Una vez lo tengas, mi recomendación es que apliques todo esto en

una especie de boceto digital sobre una imagen de tu plantilla de

WordPress. Realiza un boceto con los estilos aplicados de cada

página (responsive y sobremesa). Esto te ayudará a concebir un

resultado final, antes de aplicarlo en el panel interno de la web.

Repasa tu estudio previo y tus objetivos. No te quedes solo con tu

opinión, muestra al mundo tu diseño. ¿Representa tus valores? ¿Está

enfocado a tu público objetivo? Si la respuesta es positiva, ¡pasamos

al siguiente capítulo!

http://www.flaticon.com

http://limonykiwi.es/iconos-utilizar-pagina-web/


34


Una imagen vale más que mil palabras, pero sin duda, el complemento

ideal para ellas es el texto. Una vez hayas impactado a tu usuario con

los estilos de tu web, debes terminar de convencerlo mediante tus

palabras. Y este es el papel fundamental que juegan los copies.

Tendrás que formular textos estratégicos. Para crearlos, te voy a dejar

una selección de los mejores consejos:

• La primera regla y la más valiosa: Habla siempre en primer

lugar de los beneficios de tu servicio. Háblale al lector de “tú”

y deja en un segundo puesto las características de tu negocio

o servicios.

• Añade llamadas a la acción (call to action) estratégicas para que

los usuarios realicen las acciones que tu quieras. (p.ej.: solicita

más información, pide tu cita, llama al…)

• Adapta el tono a tu público. No es lo mismo dirigirte a un cliente

potencial en una agencia de abogados, que a un público de una

revista adolescente.

• Formula preguntas para entablar una “conversación” directa

con el lector.

• Apoya tus argumentos con números y porcentajes demostrables.

COPYWRITING8

35


• Justifica por qué tu usuario necesita lo que ofreces.

• No tengas miedo a utilizar espacios. Las zonas neutras en tu

web ayudan a separar conceptos, secciones y aliviar la visión.

• Acorta tus frases utilizando, como máximo, 20 palabras.

• Haz uso de subtítulos en la medida de lo posible

• Crea párrafos cortos, de aproximadamente 5 líneas.

Ya sé que son muchos conceptos a la vez, pero no te preocupes.

Como siempre, vamos a aplicarlos en la práctica. ¿Qué te parece si

pensamos los copies ideales para la home de Manuel? Seguro que te

da muchísimas claves para abarcar tus textos, ¡vamos a ello!

• Portada: Hemos decidido focalizarla en su punto fuerte: los

deportistas de élite. Para ello, escogimos una fotografía donde

se encuentra al atleta en primer plano sonriendo, mientras recibe

el tratamiento. Su rostro refleja bienestar. Manuel se encuentra al

fondo realizando la intervención en la clínica.

Necesitamos un titular para atraer a una acción concreta al usuario

objetivo (en este caso, un deportista). Debemos centrarnos en su

beneficio y no en las características de los servicios. Podríamos

utilizar el siguiente: “Que nada te frene para disfrutar del deporte.

Cuidamos de ti”.

36


Ahora solo nos queda la llamada a la acción para llevarlo a donde

queremos. Su objetivo, es que el cliente llegue a la clínica, pero

el usuario todavía no dispone de la información suficiente. Pues

en el mismo botón, podemos poner el call to action: “Solicita más

información”.

• Beneficios: Es normal que el usuario necesite más datos para

llegar hasta Manuel. Podría aprovechar la siguiente sección para

incluir un listado de 3 beneficios. El titular podría ser: “¿En qué

podemos ayudarte?”

• Alivia tus dolores - Las lesiones no deben ser ningún

impedimento para que puedas continuar con tu deporte

favorito.

• Prevén los problemas musculares - Aprender a realizar

ejercicios y calentamientos de la forma más adecuada, te

ayudará a evitar futuros problemas musculares.

• Mantente siempre saludable - Llevar una rutina y revisiones

fisioterapéuticas te hará mantenerte siempre lleno de energía

y bienestar.

• En el espacio del “quienes somos“, explicaría las características

de sus servicios en segundo plano: “Somos especialistas en la

fisioterapia deportiva” ,“Más de 10 años de experiencia” , etc. Puede

utilizar este tipo de frases que hablan sobre su negocio y además,

generan confianza.

37


• Contacto: Tras los beneficios, quienes somos y testimoniales,

Manuel ha conseguido atraer al usuario, ¡ahora tiene que dejárselo

fácil! Qué mejor volver a incluir una llamada a la acción, ahora que

la decisión está tomada. ¿Un “Pide tu cita ahora”, por ejemplo?

El ejercicio de este apartado, es el desarrollo de un titular y tres

beneficios para tu web. Accede a la página del ejercicio aquí: Ejercicio

4

Hasta aquí, los consejos básicos para formular unos textos enfocados a

vender a través de tu web. Pero… ¿es suficiente con esto? La respuesta,

desafortunadamente es un no. Estos textos hay que trabajarlos

conjuntamente con una estrategia de SEO. Pero, ¡no te desanimes!

En el siguiente capítulo, vamos a entrar en este tema y te daré algunas

claves para atraer público de manera orgánica, ¡seguimos!

7. SEO



38


Antes que nada, quiero aclararte que el SEO es una disciplina compleja con

resultados a medio/largo plazo. Tú mismo, puedes trabajarlo día a día con

el contenido de tu web. Aun así, lo recomendable es que encomiendes esta

tarea a un profesional. Puedes encontrarte con directrices técnicas para

las que posiblemente, necesites contar con ayuda de un desarrollador.

Entonces, ¿cómo puedo mejorar mi SEO yo mismo mediante

contenidos?

¡Pues vamos al lío! Empieza a aplicar las siguientes pautas básicas que

te enumero a continuación:

• En primer lugar, debes clarificar cuál es tu palabra clave o

keyword. Este término, hace referencia a cómo quieres que te

encuentre tu cliente potencial. En el caso de Manuel, su término

ideal podría ser: “Fisioterapia deportiva en Valencia”. Cuanto más

específico seas, menos competencia tendrás. Esto se puede

traducir en menos tráfico, pero de mejores clientes.

Imagínate que Manuel utiliza como keyword “fisioterapia”.

Difícilmente pueda llegar a posicionar un término tan genérico.

El tráfico que llegaría a su web, podría ser de Barcelona o

Sevilla en lugar de Valencia. Incluso podría ser un usuario que

está buscando simplemente información sobre fisioterapia. En

conclusión, estaría perdiendo su tiempo.

SEO9

39


Debes incluir la keyword en tus titulares (especialmente, en los

h1 y también en los h2)

Añade también la palabra clave en tus textos de manera

coherente y moderada. Google detecta los sinónimos, utilizarlos

es una excelente forma de enriquecer tu texto.

• Incluye en medida de lo posible, etiquetas alt*9 con tu palabra

clave en todas las imágenes

• El blog se convertirá en tu mejor arma para SEO. Crea contenido

de calidad, con temáticas y palabras clave enfocadas a tu público

objetivo. Manuel podría crear un artículo, por ejemplo, sobre

calentamientos previos y posteriores al ejercicio físico.

• El posicionamiento también depende de los links que apunten a

tu web desde otras páginas. Tener links hacia tu web de páginas

referentes en tu sector, va a ser un factor determinante.

• Sé constante en tus redes sociales. Te dará visibilidad y ayudará

a generar links hacia tu web.

Una gran ayuda para trabajar el SEO de tu web, será la siguiente

herramienta: Plugin Yoast para WordPress.

9 Etiqueta de código HTML que sustituye con un texto a una imagen que no ha podido ser previsuali-zada.

https://yoast.com/wordpress/plugins/seo/

40


Hasta aquí, los consejos a tener en cuenta para planificar un contenido

amigable para tu posicionamiento. Con esto, concluyen todos los

elementos básicos necesarios para que planifiques el diseño de tu web.

Ya tienes tu plantilla de WordPress seleccionada con tu estructura y

estilos planificados. También cuentas con los copies y algunas claves

de SEO. ¿Tienes ya todo reflejado en tu boceto? Si es así, ¡es tu turno

de nuevo!

El siguiente ejercicio, es por fin… ¡empezar a construir tu web! Instala

tu plantilla, y empieza a enfrentarte al panel interno de la misma. Tu

objetivo será trasladar tus bocetos e ideas en tu nueva plataforma.

Tómate tu tiempo y comparte tus experiencias para que podamos

ayudarte en nuestra comunidad. Interactúa a través del siguiente

enlace con tus cuestiones, sugeriencias y experciencias: Ejercicio final

.Mi equipo y yo leeremos tus comentarios personalmente.


41


Espero que el proceso de creación para tu web haya ido genial y que

mis consejos te hayan servido de ayuda. El objetivo de este ebook, es

que aprendieses a hacer una web con un diseño enfocado a vender.

Sé que no es un camino fácil, pero estoy segura de que con estos

contenidos, habrás conseguido aprender muchos conceptos para

hacer un buen trabajo.

Y una vez tengo mi web, ¿puedo dar por finalizado el proceso?

Hacer una web que venda, no se trata de tirarse meses de trabajo

creándola y darlo todo por finalizado. Desde el principio, he defendido

que tu web es una herramienta de venta y por ello debe estar siempre

activa. Una de las condiciones que hemos nombrado, es que ser

constante en tu blog te puede ayudar muchísimo para posicionarte.

También lo hará actualizar regularmente tus redes sociales. Pero…¿Y el

contenido restante?

Aquí juega su papel la analítica. ¿Te has parado a pensar si tu web

es fácil de utilizar para los usuarios? ¿Si llegan correctamente a tu

objetivo?

La respuesta objetiva a estas preguntas, la podemos conocer mediante

herramientas de analítica web. Gracias a ellas, podemos conocer

prácticamente cualquier movimiento que realizan los usuarios navegando

en nuestro sitio. Estas son algunas de las cuestiones que debes tener en cuenta:

ANALÍTICA WEB10

42


• ¿Cuánto tráfico llega a mi web?

• ¿De dónde llega este tráfico?

• ¿Cuánto tiempo pasan en la plataforma? ¿La tasa de rebote*10

es alta?

• ¿Qué hacen los usuarios en mi web? ¿A dónde se dirigen?

¿Dónde hacen click? ¿Se pierden en algún lugar?

• ¿Cómo es el público que interactúa en mi web? (Edad,

localización, navegador, dispositivo…)

• Y lo más importante, ¿cuánta gente logra convertir*11?

Estudiar todos estos datos, te va a servir para sacar conclusiones sobre

qué aspectos mejorar en tu web. Por ejemplo, Manuel se percató de que

en relación al tráfico de su web, tenía pocas conversiones. Se le ocurrió

añadir un botón muy visible en el header con una llamada a la acción “Pide

tu cita”. Al poco tiempo, comenzaron a aumentar las llamadas a la clínica.

No tengas miedo a probar. Cambia colores, elimina elementos, añade

fotografías, cambia la disposición de un botón… Hazlo sin miedo y analiza.

Medir es la clave para definir cuales de tus acciones, realmente,

mejoran tus objetivos.

10 Se produce cuando un usuario abandona tu web a los pocos segundos de abrirla.11 Número de veces que se llega a un objetivo marcado

43


¡Voy a ello! ¿Qué herramientas me recomiendas para medir?

La plataforma reina es Google Analytics. Pero su interfaz, es bastante

compleja de utilizar. Puedes realizar cursos para dominarlo (incluso

Google te ofrece la posibilidad de sacarte el título en Analytics gratis).

Aunque sin duda es la mejor alternativa, también existen otras

aplicaciones más sencillas de utilizar que te pueden dar claves para

mejorar tu trabajo. El propio WordPess, cuenta con su sección de

analítica. Otra opción es el plugin JetPack, que te ofrece un apartado

para que analices tu web. Como última opción y más visual, puedes

registrarte en Metricool. Además de visualizar los datos de manera

sencilla, también puedes enlazar tus redes sociales y tener los datos

de las mismas.

En conclusión, debes trabajar continuamente en tu web. Aporta

contenidos de valor, mejórala en base a los datos que midas, actualízala

con tus noticias o novedades… Todo esto no solo atraerá a los clientes,

sino que también llamará la atención de Google y te lo recompensará.

Créeme.

Llegado hasta este punto, has demostrado que tienes interés por hacer

las cosas bien. Y todo esfuerzo, merece su recompensa. A continuación,

en la sección de anexos, puedes encontrar nuestros regalos. Seguro

que te ayudan a complementar todo lo que has aprendido y a resolver

tus dudas.

http://www.googleanalitycs.com

https://app.metricool.com/

44


Te agradezco que me hayas brindado tu confianza, haciendo que

formemos una pequeña parte de tu proyecto. El objetivo de mi negocio,

es ayudarte a ti en tu camino. Si lo he conseguido, mi equipo y yo nos

sentiremos muy orgullosos de ello.

ANEXOS

45


Encontrarás más guías, información y consejos a través de nuestro

blog con contenidos nuevos todas las semanas.

También puedes acceder a nuestra librería de recursos 100% gratis

con herramientas que te ayudarán a conseguir los objetivos de tu

negocio y optimizar tu tiempo: Librería de recursos gratis

Comparte toda esta información con todo el que creas que puede

necesitarla.

¿Necesitas ayuda? Si trabajamos juntos, estaremos más cerca de

conseguir tu web ideal como herramienta de venta. Te escuchamos.

SOLICITA UNA SESIÓN DE ASESORAMIENTO GRATUITO

ANEXOS

http://limonykiwi.es/blog/

http://limonykiwi.es/blog/

http://limonykiwi.es/descargas/

http://www.withinkwebdesign.es/descargas/

http://limonykiwi.es/asesoramiento-gratuito/

http://limonykiwi.es/asesoramiento-gratuito/

46


¡Hola! Mi nombre es Esther Castells y soy di-señadora gráfica y web. Mi objetivo del día a día es buscar estrategias eficaces para ayudar a negocios de servicios como el tuyo. Además, soy defensora de los anima-les y amante del rock and roll. Si necesitas ayuda, contacta aquí conmigo, ¡estaré encantada de escucharte!

http://www.withink.es/contacto

las claves para diseÑar una web enfocada … que no te desanimes, ... aunque sea solo una que...

Documents