Metodología Cisne. Especialsitas en Diseño Web

Tras varios años implementando el diseño en web para empresas hemos creado una metodología de diseño que nos ha dado una identidad.

Existen muchas fórmulas, sistemas y plataformas para diseñar páginas web y dentro de esto, mucha venta de páginas web. Lo malo de cobrar por hacer una web es solo cobrar por un servicio que aporta poco valor.  Son webs que están hechas para cobrar y punto. Esta idea de aportar valor diseñando no es suficiente hoy en día. No se puede colocar imagenes, títulos, textos, animaciones y ¡ale! toma tu web. Para eso, hazte un curso básico de WordPress y tienes creada la web tú mismo y encima formado para hacerle cambios cuando a ti te apetezca. Si se contrata a profesionales es para buscar algo más. ¿Qué más? te lo cuento aquí.

¿Qué es la Metodología de Diseño Cisne?

Nuestra metodología creada por nuestro CEO (José Leandro) se basa en 3 pilares de construcción. Buscamos un Sistema pensado para generar ventas, simple y eficaz. Optimizado para buscadores y que tenga una buena experiencia de usuario con una velocidad de carga excelente. Además, como siempre, nuestro famoso Coaching y Asesoría Prediseño.

¿En qué consiste?

Podemos simplificar mucho el proceso en 3 puntos clave:

1. Diseño Web elegante igual que un cisne, enfocados en el contenido con información relevante, navegación intuitiva y coherente. Pero, sobre todo una web, limpia, clara y bonita como un Cisne.
2. Pensada para vender, por lo que buscamos que esté SEO optimizada desde el principio y con una buena experiencia de usuario. #SEOLOVERS
3. Buena velocidad de carga que parezca que flote en el mar como un cisne. Velocidad mayor siempre al 90% en GT METRIX. Por lo que usamos pocos objetos pesados o que hagan que la web se ralentice, tales como, muchos vídeos y uso desproporcionado de javascript.

Por lo tanto, damos mucha importancia a la parte técnica del diseño de la web. Sí, esa parte que no se ve con los ojos y que de cara a un cliente puede parecer que no ha habido trabajo detrás.

Trabajamos mucho la parte de SEO, la parte de experiencia de usuario y la parte de velocidad de carga. Evitamos plantillas pesadas que ralenticen tu web, evitamos estructuras con demasiada carga de código y sobre todo, buscamos que tenga una estructura lógica para que Google la tenga en cuenta rápidamente.

Fases y Metodología del Proceso de Diseño Cisne

Si vas a hacer un diseño de una web, tanto tienda online como corporativa debemos hacer un trabajo previo al diseño. Este trabajo será contestar una serie de preguntas para establecer una hoja de ruta clara.

COACHING Y PLANIFICACIÓN PREVIA AL DISEÑO

Además de Marketing, somos unos enamorados del coaching. El coaching es esa rama científica que permite llevar a cabo un proceso de ayuda en el ámbito personal o profesional maximizando la efectividad de sus acciones a través de un plan de acción. Ese plan de acción es el que nos vuelve loco para llegar a ser realmente prácticos y trabajar para un objetivo claro.

Es por eso que a nuestros clientes les hacemos una serie de preguntas antes de comenzar con su proyecto:

Preguntas previas de Coaching:

• ¿Qué quieres hacer?
• ¿Para qué?
• ¿Cuándo lo quieres?
• ¿De qué medios dispongo para llevarlo a cabo?
• Descargar nuestro Proceso de Coaching Previo (Word)
• Definición de briefing, ideas que queremos compartir, objetivos y definición del Alcance
• ¿Cuál es el Modelo de Negocio?
• ¿Cuáles son los servicios/productos que ofrece?
• Carta de Presentación y Esquema de Contenidos
• Refuerzo de la estrategia de contenidos

MAQUETACIÓN DEL DISEÑO

Vamos ya con la parte más bonita, esa en la que todos nos quedamos horas y horas pensando y descubriendo cosas chulas por hacer. En mi opinión, siempre es ideal partir de algo que ya exista y reconvertirlo en algo increible. al fin y al cabo «“La originalidad no es más que una imitación hecha con juicio.”

Dentro de la maquetación hay muchas cosas a pensar y decidir:

• Estilo de Web (Corporativa, Tienda online, One-Page, Portfolio)
• CMS y Sitios web de referencia y sitios web de la competencia
• Tipografía
• Colores
• Theme
• Mock up
• Prototipados
• Arquitectura y Menú de Navegación
• Diagrama de la página de Inicio (elementos estructurales,de diseño, imágenes, titles y más)

CREACIÓN DE CONTENIDO

El contenido sigue siendo el rey ¿no? o al menos, eso dicen. Vamos a crear un contenido que enamore. Un contenido que tenga calidad y cantidad. Queremos jugar a la lotería de posicionar en Google y queremos tener muchas papeletas. Imágenes SEO optimizadas y que cautiven al usuario. Por último, mover las redes sociales.

Qué tener en cuenta a la hora de crear el contenido de tu web:

• Redacción de contenidos (Precio a parte) de contenidos de calidad, optimizados para SEO. Artículos creados para captar la atención del usuario.
• Elección de imágenes y Texto que incluirán la web
• Creación de un Blog profesional
• Aplicación de la normativa en materia de protección de datos
• Comercio electrónico y aspectos del LSSI
• Propiedad intelectual
• Publicidad legal y aspectos fiscales básicos
• Creación de Redes Sociales

ANALÍTICA WEB Y WPO

Como todos ya sabreís, WordPress sigue siendo el CMS más utilizado del mundo. Nuestro sistema de diseño parte de que una buena velocidad de carga se consigue desde que se compra el dominio en el hosting. Es por esto, que nos gusta crear los proyectos desde 0. Empezamos bien para continuar mejor.

Por supuesto, sin olvidar la parte analítica de las webs. No te voy a aburrir diciendote por millonesima vez que lo que no se mide, no se puede mejorar, pero ya lo he hecho.

Usando algunas herramientas que nos ofrece google como, analitycs, data studio o Search console podemos trabajar y ver qué está funcionando para mejorarlo y ver qué nos está faltando para agregarlo.

Tenemos un montón de características de WPO (Web Performance Optimization) que podriamos comentar en este artículo, pero vamos a avanzar las que trabajamos más en Madrid Web design:

• Plantillas y plugins optimizados
• Instalación de Google Analitycs y Google Search Console
• Segmentación de audencias, configuración de objetivos y filtros
• Definición y elaboración de KPI´s orientados al SEO
• Elaboración de un plan de medición
• Mejora de la velocidad de carga
• Minificación de html, css y Js
• Carga asíncrona de JS
• Web fonts
• Implementación de la caché a toda la web, siempre dependiendo de su tipología
• Instalación del certificado SSL
• Compresión Gzip
• Reporting estratégico

Consejos que usamos para crear una web WordPress orientada a velocidad

• Usa plugins que sean compatibles con caché
• Recomiendo evitar usar bloques que carguen demasiado CSS y JavaScript. Por ejemplo, los bloques para crear CTAs. Es más sencillo y ligero crear un CTA con un título, descripción y botón.
• No cargar formularios en toda la web,ni en todas las páginas porque estos suelen ralentizar. Lo ideal es cargar los formularios sólo en las páginas o más importantes. Hará la web más ligera y permite medir mejor las conversiones sin tantos eventos.
• Si usas plugins de bloques para Gutenberg o cualquier otro maquetador, desactiva los bloques que no uses. Esto aligera mucho el código CSS y JavaScript.
• optimización empieza en el hosting. Elije uno con discos SSD, GZIP, HTTP2, últimas versiones de PHP, buena memoria, etc.
• El siguiente paso es elegir un tema rápido. Recomiendo elegir un tema ligero y evitar los temas multipropósito. Toda función que se necesite, se agrega mediante plugins. Personalmente, recomiendo generatepress, astra, orbital (dependiendo del tema de la web)
• Define las fuentes y colores a usar. Esto evitará cargar fuentes o estilos duplicados en builders. Usa las mismas fuentes y colores en plugins, como por ejemplo un aviso de cookies.
• No diseñes entradas con builders, a excepción de Gutenberg. Tampoco es aconsejable diseñar la cabecera, ni el footer

POSICIONAMIENTO SEO

Vamos con la parte que más nos importa dentro del diseño, el SEO. Te voy a ser sincero en Madrid Web Design quizá no seremos los más originales dentro del diseño (que también), no seremos los mejores desarrolladores técnicos, ni los más puristas pero lo que si tenemos es un sentido increible para hacer desarrollos de web que estén centrados en monetizar. En definitiva, en ganar dinero. El SEO es la parte orgánica más sencilla y a largo plazo de ganar dinero. ¿Por qué digo esto? porque creamos muchas webs para clientes, pero sobre todo creamos web para proyectos propios. Dentro de nuestra empresa, trabajamos más de 30 proyectos propios. ¿Por qué hacemos esto? porque alguien que sepa ganar dinero por internet, primero lo gana él y luego lo hace para los demás. Con todos estos proyectos hemos tenidos muchos fracasos (de los que aprendemos) pero también éxitos.

Cuando realizas una web y quieres que esa web te de dinero, enfocas tiempo a estructurar de una manera sencilla para que no de problemas y que esté enfocada a conseguir tu objetivo.

Le dedicamos mucha parte del tiempo al SEO y sobretodo trabajamos:

• Palabras Clave (Keywords e intenciones de búsqueda) clasificación de dificultades, cálculo de volúmenes reales, construcción de listados, operadores avanzados de búsqueda, search intent y más.
• Taxonomías, Folksonomías, facetas, filtros tratamientos o parametraciones en el caso de ser Tienda Online.
• Arquitectura web. Extracción de conceptos desde el keyword research, combinación y priorización de conceptos, definición de categorías, secciones y urls, fases de la ejecución de la arquitectura y traspasos semánticos. (formas y escalabilidad)
• Indexación en motores de búsqueda y Enlazado interno
• Tratamiento de páginas irrelevantes con enlaces nofollow u ofuscación de enlaces.
• Análisis de LOG
• Tecnología soportada para Rich Snippets en consecución de mejora del CTR
• Apariencia en el buscador con tarjetas, html, amp o schema.
• Indexación y rastreo

INTERFAZ Y DISEÑO UX/UI

Un diseñador Ux es la persona que hace la forma fácil, intuitiva y amigable de solucionar un problema, en este caso dentro del diseño de una web. Me encanta coger una web y ponerme a trastear con ella haciendo que soy el usuario. Clicando botones, haciendo compras, viendo hacía donde me lleva un funnel de ventas, etc.

La diferencia entre UX y la UI es que la UI se refiere a la creación de la interfaz, que puede ser gráfica o desarrollada principalmente con lenguajes como HTML, CSS o Javascript. Si embargo,  UX se centra en la usabilidad del usuario.

El trabajo aquí es el de entender al usuario y guiarle a un fin. Buscamos un producto o servicio 100% enfocado a los clientes.

Temas a tratar dentro de este proceso:

• Mejora de la navegación del usuario
• Test A/B
• Diseño de la experiencia del usuario buscando que sea siempre satisfactoria y rápida.
• Implicaciones UX en el CRO de la propia web
• Puntos de salida del usuario
• Usabilidad buena tanto en pc como en móvil
• Flujo de usuarios (user flow)

HERRAMIENTAS DE MARKETING DIGITAL Y HERRAMIENTAS DE GOOGLE

Las herramientas profesionales en el marketing pueden dar una ventaja competitiva amplia si las saber usar. Nosotros usamos todo tipo de herramientas, y poco a poco las estamos recogiendo en nuestro listado de herramientas de marketing online.

¿Cuáles son las 5 herramientas que más usamos en nuestro día a día?

Claro, aquí depende del profesional del que hables, si hablas con el de diseño te dará 5, si hablas con el SEO te dará otras 5, pero aun así, vamos a intentar nombrar las 5 más importantes:

1. AHREFS: Aunque es una herramienta venida a menos, sigue siendo nuestro pan de cada día. Herramienta todo en uno para SEO
2. Photoshop. Se que os gustaría encontrar una herramienta super novedosa para probarla, pero lo siento. Esta herramienta de edición de fotos, está casis iempre abierta en nuestros pcs.
3. Screaming frog. Herramienta de crawleo indispensable para trabajar sobre proyectos, tienda online y cualquier web medianamente grande.
4. Google Search Console. Nos encanta esta herramienta para tomar decisiones y medir de forma simple sin quebrarnos la cabeza en métricas de análisis difíciles de entener, además haces un seguimiento muy completo de toda la web, tanto en indexación como en rendimiento.
5. GT metrix. Existen muchas herramientas de medición de velocidad como pingdom tools, page speed que es de Google pero somos más de GT metrix.

Podemos nombrar cientos de herramientas más, super útiles como ubersuggest,keywordtool, longtailpro, moz pro, semrush, sistrix, woorank, buzzsumo, majestic, dinorank, envato, freepik, canva, crello y muchísimas más.

DESCUENTOS Y CHOLLOS DE MADRID WEB DESIGN

Además, hacer una web con nosotros tiene especiales descuentos en herramientas que usamos y son necesarios. Herramientas que no van incluidas en los precios de diseño y que si además, puedes tener una rebaja, pues genial.

Los principales descuentos que ofrecemos son:

• Hosting. Descuentos muy buenos por la compra del alojamiento de tu futura web
• Dominios. Descuentos en el primer año, al escoger tu dominio.
• Temas o plantillas de WordPress o demás CMS. Siempre recomendamos comprar la plantilla, pero si no se quiere, ofrecemos las que nosotros usamos. Ejemplo: Avada o Generatepress
• Plugins premium. Algunos plugins pueden llegar a ser costosos. Nosotros te los instalamos de manera gratuita.

Espero que a la hora de elegir un diseño de tu proyecto evites los diseños pesados que ralenticen tu web, plantillas llenas de código, como por ejemplo, la archiconocida DIVI. Con estilos super chulos, que solo buscan lucir tu web. Todos los proyectos se deben trabajar a futuro y aunque solo se quiera una carta de presentación, pienso que debe ser una carta de presentación optimizada para el usuario. Busca profesionales que te gestionen un diseño completo y optimizado. Rehusa de precios bajos.

Si es un proyecto a largo plazo, lo barato sale caro en cuanto a conversión. Aunque ahora parezca caro, todo el tiempo que va a durar una web bien hecha, dará sus frutos con diferencia. Como diría mi abuelo: «tienes que hacer las cosas bien, porque los pobres no tienen dinero para hacerla dos veces.»