Diseño y desarrollo web: 8 pasos para crear una web eficiente

  • Diseño y desarrollo web pasos

Lo primero que se nos viene a la cabeza al hablar de diseño, son elementos visuales. Pero en el diseño y desarrollo de una web entran en juego muchos otros factores que no hay que pasar por alto si buscamos obtener resultados eficientes. Para ello necesitamos elaborar una buena estrategia de marketing digital y un buen plan de acción.

Una web bien diseñada no es sólo una web bonita sino que tiene que atraer usuarios. Tu web puede ser la número 1 en originalidad estética, pero si los usuarios no la entienden bien y no saben cómo navegar por ella, no habrá cumplido su función.

Es importante que cada elemento de la página web funcione conjuntamente respondiendo a un objetivo común definido en la estrategia del proyecto.

Vale, muy bien, pero ¿por dónde empiezo? Hemos simplificado el proceso en 8 pasos para ayudarte a definir las fases y que no te vuelvas loco en el camino (no prometemos nada, ya se sabe que los diseñadores/as tenemos ese rollo de locura que nos hace tan creativos 😛 )

Análisis funcional ¿qué hará esta web?

¿Qué nos están pidiendo?, ¿cuál es el objetivo?, ¿cuáles son los requerimientos de esta web?, ¿es su principal objetivo informar, vender o divertir? Es importante entender lo que el cliente está pidiendo y tener muy claro este punto, ya que sino, el proceso posterior no será tan eficiente como nos gustaría. Para ello, la creación de user personas (perfiles de usuarios tipo a los que nos vamos a dirigir) y user journeys (camino que el usuario sigue en el proceso de interacción con tu web o app) entre otros.

Benchmark o investigación de la competencia

Después de haber comprendido los requerimientos del proyecto, es muy importante realizar un análisis profundo de la competencia; ¿qué están haciendo?, ¿cómo se han planteado ciertos problemas de usabilidad? y ¿cómo lo han solucionado?, definir el comportamiento de los usuarios, etc., plantear las últimas tendencias en usabilidad para que, a la hora de plantear el árbol de contenidos, lo hagamos con sentido y coherencia.

Desarrollo del contenido web

Este paso puede variar, ya que dependerá de lo que el cliente haya contratado. En muchas ocasiones, el contenido ya está escrito pero no bien está estructurado y hay que unificarlo y ordenarlo. Si hay que desarrollar contenido, es importante definir el tipo de usuario que nos leerá –buyer persona-, qué palabras claves nos interesan para potenciar el posicionamiento web (SEO) y crear copys incluyendo estos términos. Una de las herramientas que nos ayuda mucho es Google Trends para comparar resultados y elegir las palabras más eficientes para cada desarrollo.

Wireframes y flujos de navegación

Hora de recopilar todas las ideas que se han ido desarrollando durante el proceso de investigación anterior. Antes de empezar con este punto es importante haber llevado a cabo un brainstorming donde hasta las ideas más locas hayan tenido su cabida. Una vez centrados, ¡empezamos a dibujar! Si si, no de esos dibujos que haces mientras hablas por teléfono, hablamos de dibujar wireframes (puede que algún dibujito se nos escape :P). Los wireframes son las estructuras que va a tener nuestra web de una manera muy esquemática.
En esta parte es especialmente importante definir el flujo de contenidos y la navegabilidad. Junto con ello, definiremos y estructuraremos el contenido que dispondremos en la web antes de pasar al siguiente punto.
Aquí termina más o menos la misión del Diseñador UX (digo más o menos porque depende de muchos factores; de si el diseñador es también UI o no, entre otros factores).

Diseño web

Aquí empieza el trabajo del Diseñador UI. Después de tener una idea global y clara del proyecto, tenemos que trasladar toda esa información a un nivel visual. ¿Qué colores voy a utilizar y cuáles serán los principales o secundarios?, ¿qué tipografías usamos y cómo la combinamos de manera que transmitan los valores del proyecto?, ¿qué estilo de iconografía vamos a implementar? ¿más minimal o más ornamental?, ¿qué tipo de imágenes y qué tratamiento?, ¿cómo diseño los ctas? Estas y otras preguntas son las que le surge a un diseñador UI donde el reto es encontrar soluciones creativas y eficientes.

Desarrollo web

Dependiendo del tipo de proyecto, si es un diseño a medida, una tienda online o un portfolio personal se elegirá un sistema u otro para la implementación del mismo. Si es un diseño a medida, y dependiendo de la magnitud y la complejidad de este, necesitaremos trabajar con un Programador Front y Backend. Si por otro lado, nos sirve una plantilla de las que proporcionan por ejemplo plataformas como Prestashop o WordPress, entre otras, y dependiendo de las modificaciones de la misma que se quieran hacer, podría ser desarrollado por un diseñador visual o diseñador web. Habrá que desarrollar la web siempre teniendo en cuenta el ya obligado “mobile first” sin hablar por supuesto del responsive. Y tener en cuenta todos los dispositivos donde se visualizará la web.

Evaluación y testeo web

Una vez finalizada la web y antes de su “puesta en life”, debemos hacer una comprobación general, no sólo a nivel visual o en términos de flujos de navegación, si no también empleando tests de usabilidad y/o tests A/B con usuarios reales y ajenos al proyecto para comprobar de manera empírica que el proyecto dispone de unas medidas de usabilidad eficientes.

Lanzamiento de la web

Hora de aguantar la respiración y hacer que el proyecto cobre vida dentro de Internet. ¡Nuestra web está visible! Por supuesto, después de estos testeos, y una vez la web esté en vivo, es muy importante seguir haciendo un seguimiento, realizar informes y comprobar que efectivamente, el proceso de navegación e interactividad con la web funciona y es óptimo, para ello disponemos de numerosas herramientas  que nos aportarán métricas para hacer seguimientos a los comportamiento de los usuarios dentro de la web. Una de estas herramientas, de la que seguro has oído hablar es Google analytics.

Este es el proceso que seguimos en novva_ para el diseño de una web (con algunas excepciones, ¡ya sabemos que cada proyecto es un mundo!) ¿Cuál es el tuyo?

By |2019-02-11T07:30:02+00:0018/01/2019|Diseño web, Marketing Online|

Utilizamos cookies analíticas de terceros que permiten elaborar información estadística sobre distintos aspectos de la actividad de los visitantes de esta página web. Si continúa navegando consideramos que acepta su uso. Puede obtener más información consultando nuestra Política de Cookies

ACEPTAR
Aviso de cookies