Antes de iniciar cualquier proyecto, siempre es indispensable conocer el contexto a través de un cuestionario de preguntas (el Brief). Este es el punto de partida para establecer todos los lineamientos del proyecto, donde el cliente responde de forma clara y precisa preguntas cruciales que determinan su alcance.
Por ejemplo:
¿Qué tipo de sitio web se va a realizar? ¿Es un ecommerce, solo informativo o busca recolectar una base de datos?
¿Cuál es el objetivo de la web? ¿El cliente cuenta con toda la información necesaria o depende de otros profesionales como copywriters, fotógrafos, especialistas en marketing, etc.?
¿La web tiene requerimientos especiales? ¿Existe una identidad visual definida?
¿En qué tipo de plataforma se subirá el diseño? ¿Hay limitaciones de diseño en dicha plataforma? ¿Hay un requerimiento específico en los entregables de la web?
Estas son algunas de las preguntas básicas, pero el brief de una web puede extenderse mucho más.
El objetivo del brief es recopilar toda la información posible para determinar los costos, el esquema de trabajo y la calendarización del proyecto.
A continuación, te comparto las 5 etapas que aplico en mi proceso al diseñar un sitio web:
ETAPA 1: ¿Cuál será la Organización del sitio web?
Una parte muy importante del diseño es ordenar y clasificar.
En este paso, se organiza, agrupa y clasifica toda la información que tendrá el sitio web. Una vez que entendemos el alcance del contenido web y tenemos clara la arquitectura de la información, es el momento de distribuirla mediante un nombramiento, definiendo las páginas, subpáginas y secciones en las que se estructurará la información. Este paso, aunque parece lógico, es de suma importancia no solo para crear los cimientos del diseño, sino también para facilitar que el usuario encuentre lo que busca o, si no está buscando algo en particular, descubra fácilmente lo que la web tiene para ofrecer.
Ejemplo Estructura Web de Great Wrap
Great Wrap es una empresa australiana que hace papel film transparente y compostable. Tiene una arquitectura de información sencilla ideal para explicar esta primera etapa.
En este caso en particular siendo una ecommerce la organización de la información para el público se ve reflejada en una principal y en una secundaria, ambas partiendo desde la página de inicio.
Podemos ver esta organización principal directamente en el menu
La organización secundaria tiene menos protagonismo y enlaza aquella información que es importante pero no es necesaria en el primer contacto con el usuario.
Y la organización secundaria directamente desde el pie de página
ETAPA 2: ¿Cuál es la ruta del usuario?
Embudo de ventas / Funnel de navegación web
En esta etapa, se define la ruta que seguirá el cliente potencial durante su estancia en el sitio web, de forma individual en cada una de las páginas internas. Es decir, a medida que el usuario navega y hace scroll, se determinan los elementos que le darán continuidad a su experiencia. Esto se realiza de manera esquemática y es esencial para guiar al visitante, mostrando lo que la web ofrece. Para ello, se utilizan botones CTA, banners y otros elementos que permiten al usuario seguir el camino diseñado para él.
Esta etapa va muy asociada a los objetivos de marketing del sitio web. El esquema de navegación se puede trabajar a diagramas de burbujas, el nivel de detalle dependerá de quien lo desarrolle y puede verse de esta forma:
Ejemplo de Nike
Nike le da prioridad en sus primero 5 segundos de scrolls al nuevo producto.
ETAPA 3: ¿Qué dice tu web?
Desarrollo del contenido / Copywriting
Definir el contenido es esencial. Con la información obtenida en las etapas anteriores, el copywriter puede desarrollar los textos generales del sitio web que se incorporarán en el diseño final y se contemplarán en el boceto web del siguiente paso.
Nota: Los textos suelen ir de la mano con el diseño y se ajustan según las necesidades de la página en términos de marketing.
ETAPA 4: ¿Cada cosa en su lugar?
Creación de wireframes
Cuando hablamos de wireframes, nos referimos a la estructura del sitio web. Básicamente, es un boceto de la ubicación de los elementos gráficos y de texto (imágenes, botones, títulos, encabezados, etc.) en concordancia con la organización planteada en el embudo de ventas y la estructura previa del sitio web. El enfoque principal de esta etapa es posicionar los bloques que representan los elementos sin enfatizar en el diseño. Aquí evaluamos las proporciones de todos los elementos compositivos y obtenemos una visualización previa de lo que será la web.
¿Diseño, el paso final?
Para establecer un diseño coherente, es necesario contar con sistemas de diseño. Esto permite estandarizar estilos, variables y componentes para que todo, desde el color hasta el relleno, se adapte perfectamente a la identidad de la marca. En esta etapa, es fundamental tener en cuenta el diseño responsivo y trabajar con plataformas que permitan visualizar el diseño en diferentes puntos de ruptura (breakpoints), como Figma, que además permite generar interacciones y visualizar prototipos.
El diseño web es subjetivo y depende de muchos factores, entre ellos la estética y los conocimientos del diseñador. Por ello, en este blog no me enfoco en cómo diseñar, sino en toda la información que se necesita tener de forma clara y precisa antes de llegar a la etapa de wireframe y de diseño, con el objetivo de que puede servir no solo a diseñadores principiantes, sino también a personas que desean contratar un servicio de diseño web y no tienen conocimiento del proceso previo al diseño en sí.
Lo ideal sería que estas etapas se desarrollarán de forma lineal en el tiempo, pero la realidad es que, dependiendo del proyecto y del contexto, es probable que se generen cambios en la etapa 1 cuando ya se ha avanzado a la etapa 4, o que se realicen modificaciones en los textos, fotografías, wireframes, etc. El diseño no es estático ni individual; debe ir en sinergia con las etapas previas.
Recomendaciones al lector
Si eres diseñador y estás comenzando en el mundo del diseño web, te recomiendo estructurar bien tu proceso y establecer una lista de preguntas que te permitan evitar vacíos informativos en el proyecto, los cuales podrían resultar en un esfuerzo no monetizado posteriormente.
Si eres una persona que desea contratar un servicio de diseño web para un proyecto determinado, ten en cuenta que necesitas contar con toda la información disponible de forma clara y precisa para optimizar el proceso. Además, recuerda que, dependiendo del alcance de tu proyecto web, podrías necesitar, aparte del diseñador, otros profesionales como fotógrafos (especialmente si tienes productos), copywriters, estrategas de marketing, especialistas en SEO y programadores.
Comments