Introducción

Recuerdo la primera vez que entré a un iStore. No entré por un iPhone ni por una MacBookAir, no entré para encontrarme con alguien ni por el aire acondicionado; entré simplemente porque me llamó. Una vez adentro me pavonié por los smartphones (que eran una novedad para la época) y los manoseé uno por uno, y antes de endeudarme con algún modelo salí del local. Nada más que eso, pero lo recuerdo.

Y creo que si bien esta marca tiene un branding super minucioso que te hace sentir como que el futuro ya llegó y vos tenés que entrar en él, no es solo por eso que recuerdo esta experiencia que parece tan intrascendente, sino más bien porque fue la primera vez que entraba a un iStore.

La vida está llena de primeras veces, pero también de segundas, terceras y últimas, entonces ¿por qué las primeras veces resultan tan memorables?

La respuesta es sencilla: es la primera. Tu primer beso, tu primera bici, tu primer día de trabajo, tu primera mudanza, tus primeras vacaciones con amigues; son experiencias que no podés olvidar porque el vivenciarlas significó un quiebre en la narrativa de tu vida, el principio de una aventura.

La memoria es selectiva y su capacidad limitada, por lo que el lugar que ocupan los recuerdos es realmente algo preciado. Por supuesto, no todas las primeras veces resultan memorables pero sin lugar a dudas las experiencias primigenias son momentos proclives a ser recordados. Y es que los orígenes son algo que ha fascinado al humano desde el inicio de los tiempos.

Es esta la razón por la que al pensar tu página web, debes saber que, en promedio, un usuario tarda entre 10 y 20 segundos en decidir si abandona o no un sitio web. Por lo tanto, la primera impresión es crucial para vincularte con tu posible cliente. 20 segundos son los que te toma lavarte las manos, o atarte los cordones de las zapatillas. Es el tiempo promedio que aguanta una persona sin respirar o lo que tardas en cambiar una bombilla; también es lo que dura un abrazo añorado, un beso inolvidable o una carcajada estrepitosa. En resumen, todo depende de como necesites que sienta tu audiencia su primer contacto con tu marca.

El tiempo es relativo, pero en Internet 20 segundos puede ser mucho tiempo, y si sabes que ese es el tiempo máximo que tienes para convencer al navegante de que invierta aún más en surfear tu página, la pregunta es: ¿cómo sacarles el máximo provecho?

En este posteo vamos a responder 5 preguntas claves del proceso creativo de la construcción de una página web, y al final les dejaré un enlace a una herramienta para cotizar un valor estimado para su proyecto web.

¿Cómo se empieza a diseñar una página web?

El cogito cartesiano ha quedado obsoleto para resumir la existencia humana, pero aún es útil para entender el proceso creativo de nuestros inventos, puesto que todo lo que el humano ha creado primero ha sido pensado; algo así como “pienso, luego existe”. El detectar un problema e imaginar mentalmente una solución es el principio del diseño en sí. De la misma manera se empieza un sitio web: pensándolo, diseñándolo.

El proceso de diseñar estimula la creatividad y habilita el momento para que las ideas salgan a la luz, por lo que cabe aclarar que, llegado el momento de diseñar tu página web, tu identidad organizacional debe estar estudiada y consolidada, debe ser coherente y robusta, para que sirva como guía en el posterior desarrollo del sitio.

Además de la identidad de marca, los otros dos pilares para la creación de tu sitio web son el diseño UX (experiencia del usuario) y el diseño UI (interfaz de usuario).

¿Qué es el diseño UX y el diseño UI?

Diseño UX

Diseño UX (user experience) hace referencia al planeamiento de las impresiones que va a dejar en les usuaries los recorridos de tu página web. En esta instancia debemos considerar sus sentimientos previos a entrar al sitio, sus frustraciones, necesidades y razones que le hacen buscar lo que vos estás ofreciendo. También cuál es el efecto que quieres que repercuta después de que ya haya salido, pero sobre todo pensar en la sensación que tendrá mientras navega tu página web.

Para esto tenemos que entender que la relación entre les humanes y la tecnología naturalmente propone una fricción, pues como ya mencionamos, el tiempo es relativo y nuestra expectativa sobre la velocidad de la tecnología nos impacienta cada vez con mayor facilidad.

El diseño UX tendrá en cuenta, por un lado, los aspectos estéticos y el impacto de las emociones que estos generan, y además se ocupará de pensar cosas como sobre qué objetos recae la mirada al entrar a la página web, la memorabilidad de los recorridos, la retentiva de la información y las motivaciones que le harán a tu usuario seguir navegando.

Este enfoque te ayudará a decidir qué mostrar primero y cómo administrar esos valiosos 20 segundos.

Si tu cliente ideal entra porque necesita resolver inmediatamente un problema, conviene presentarle primero tus servicios o tener un cta de contacto above the fold (bien al comienzo de la página). Pero quizás tu potencial cliente entra con mucha más parsimonia y llega a vos porque comparten ideales en común, entonces conviene que tu página principal sea un about o que figure la misión, la visión y los valores de la organización.

Siempre debes pensar en tu target o público objetivo

Para saber que quieres mostrar tienes que saber a quien se lo vas a mostrar, y no me refiero a preguntarte únicamente por el género, sector social o rango etario, sino también cosas como ¿le gustan las sorpresas? ¿consume más libros o videos? ¿con quienes convive? ¿navega con auriculares o con parlantes? ¿valora más la practicidad o la teorización? ¿desde que dispositivo accede? ¿Cuál es su mayor miedo?

Estas son algunas de las preguntas que te permitirán desarrollar un perfil completo de tu cliente ideal, que luego utilizarás como herramienta para elaborar un buen diseño UX.

La experiencia de una página web está atravesada por lo estético y lo empírico, uno es la percepción de lo que se considera bello y lo otro es la percepción de lo que se considera útil. Sobre esto hablamos a profundidad en un blog anterior llamado 3 tipologías nuevas para categorizar al diseño. Estos son los dos ejes que irán definiendo lo que será tu sitio web. El diseño UX se centra en lo estético, lo emocional y sensoperceptivo, mientras que el diseño UI en lo instrumental y utilitario.

Diseño UI

El diseño UI refiere a las posibilidades de interacción que tendrá el usuarie con tu página web. Esta parte es crucial pues es acá donde se piensa en el aspecto funcional de tu sitio, cuál es el propósito en general y de cada sección, cómo se conectan estas secciones, dónde ubicar los cta y cuantos poner, cómo se va a interaccionar con la información y demás aspectos. Es en este momento en el que aquellos 20 segundos estadísticos se ponen en juego y en el que deberás planificar las conexiones entre los distintos destinos que vas a posibilitarle a tu navegante.

Para encauzar estos dos criterios haremos uso del wireframe, que es un plano modelo en el que se detalla la interconectividad de los elementos de tu página web. Hacer un wireframe no es para nada complicado, aunque sí requiere de orden y visión.

Para diseñarlo empieza con un rectángulo que simule la pantalla de tu sección principal (o Home) y después dibujarás tantos rectángulos como secciones quieras que tenga tu sitio web. Si alguna de estas secciones quieres que sea scrollable simplemente alargas la línea inferior del rectángulo hacia abajo tanto como quieras que se pueda desplazar.

Luego buscarás simbolizar los componentes que estarán involucrados en cada sección con otras figuras, acá te doy algunos ejemplos: 

• Las líneas pueden hacer referencia al texto. 
• Los cuadrados pueden ser imágenes.
• Los cuadrados con un triángulo dentro pueden representar videos. 
• Los óvalos pueden ser los botones. 
• Las flechas van a ayudarte a definir mediante qué elementos se pasa de una sección a otra
• Las flechas seccionadas especifican los movimientos de algunas de las piezas de tu página web, es decir si quieres que algún botón al apretarlo haga un scroll down hasta abajo o que algún menú entre por la izquierda, como sucede en la página web que diseñamos para 66 un juego de escena.

Una vez que tienes definida la experiencia y la interfaz en tu wireframe entonces pasamos a la construcción del sitio.

¿Cómo es el desarrollo de una página web?

En esta etapa del proceso de creación de tu página web es donde entran en juego aquellos equipos que se encargan de darle vida al prototipo anterior y estos son básicamente les copywriters y les diseñadores web.

Copywriters

Les copywriter son quienes redactan el texto que va a contener tu sitio. Lo que se vuelve una tarea compleja cuando sabes que el visitante promedio lee menos del 30% del contenido total. A sabiendas de esto, les copywriters están muy atentos a crear titulares contundentes, ya que son los lugares más comunes en donde se detiene la mirada.

Sin embargo, el copy no se centra únicamente en la experiencia del usuario (diseño UX) sino también en que el contenido escrito responda eficientemente a los parámetros del algoritmo de búsqueda. Puesto que en internet no existen vitrinas convocantes, la manera de postularse dentro de las primeras opciones es cumpliendo con ciertos requisitos. 

Diseñadores de página web

Les diseñadores crean todas las piezas visuales para que el contenido sea coherente. Son quienes saben exactamente qué colores usar, la tipografía correcta, el formato de las imágenes, la estética de los botones y demás detalles. Les diseñadores, al igual que les copywriters, se basarán en tu manual de marca para volcar la identidad de tu organización en el sitio web.

Este equipo se va a encargar de maquetar el sitio implementando las especificaciones del prototipo y del contenido.

Otros aspectos importantes a tener en cuenta

Otra de las tareas es la de adquirir el dominio, es decir la dirección tu página web, y el hosting, que es el servidor que te proveerá del espacio y recursos para su construcción.

Hoy en día existen varios software que posibilitan a les diseñadores armar páginas web sin necesidad de programar. Sin embargo, las posibilidades se amplían mucho más mientras más conocimiento de programación tenga el equipo de diseño web. Y es que los templates de estos sitios, si bien son funcionales es imposible que sean personalizados y tu página corre el riesgo de parecerse a las demás.

Les diseñadores también se van a ocupar de hacer mantenimiento periódico para implementar nuevas funcionalidades, adaptar la imagen de la marca y en el mejor de los casos llevar un registro de las métricas para ayudar a mejorar el sitio.

Una vez que tenemos la página web que habíamos diseñado ya construida frente a nuestros ojos, es el momento de probar que todo funcione correctamente. Pasamos al testing.

¿Qué quiere decir testear tu sitio web?

Si hay algo que crea fricción más que cualquier otra cosa es que una página no ande como debería. Por eso es crucial que tu página web pase por un proceso de control de calidad mediante el testeo de la misma.

El equipo de testing desarrolla los casos de prueba, que son las acciones a probar y su funcionalidad esperada. Estos casos pueden ser diseñados desde el wireframe y definidos en el proceso de construcción de la página web, de esta manera se ahorra tiempo al momento de programarlos y dependiendo de la complejidad de la página incluso se puede ir testeando por secciones a la par de la construcción.

Estos casos de prueba son corridos las veces que sea necesario para reportar todos los incidentes que tiene la página. Deben ser testeados en cada una de las resoluciones en las que se planea habilitar la visualización, que es lo que se conoce como diseño responsive.

Hay que tener en cuenta que a veces al reparar un elemento o sección es probable que alguna otra pueda cambiar por efecto domino, razón por la cual los casos de prueba se suelen correr más de una vez y los reportes de sus incidencias se hacen mediante herramientas de ticket que ayuden al equipo de testeo y al de desarrollo a organizar el control de calidad.

Si les interesa saber sobre el tema hay mucha información al respecto en uqality.com, otra organización a la cuál le diseñamos su web.

Es importante mencionar que es óptimo que todos estos equipos trabajen de manera transversal y en estrecha comunicación. En algunos casos hay tareas que deben ser finalizadas para que comiencen otras, pero en general son trabajos que pueden y conviene hacerlos a la par, para que las perspectivas de cada especialista modifiquen positivamente la visión total de la página.

Habiendo pasado por todo este proceso, tu página ya está lista para ser publicada. Pero esto no quiere decir que acá finaliza el camino.

Tu página web es como la casa online de tu organización, y como toda casa va a haber veces en las que vas a querer redecorar para cambiar de aire. O tal vez necesitas construir un nuevo sector, o reparar algo urgentemente, o saber cómo se sienten tus invitades para poder brindarles la mejor estadía. Pero no te alarmes, esto no significa para nada que sea un proceso eterno, a lo que me refiero es que es tan modificable como necesites que sea.

¿Cuánto puede costar tu página web?

Y ahora, como lo prometido es deuda, si te interesa cotizar cuanto saldría el diseño de tu página web, puedes entrar a nuestra calculadora de proyectos, en la que respondiendo unas pocas preguntas podrás tener un estimado del presupuesto de tu sitio y agendar una reunión con nuestro equipo para charlar al respecto.

¡Hagamos que la primera impresión que generes sea inolvidable!