Cómo diseñar un prototipo de sitio web a partir de una estructura alámbrica

Es posible que haya escuchado el viejo dicho: "Mida dos veces, corte una vez". Bueno, esa es exactamente la razón por la que debe planificar un sitio web antes de construirlo. Y ahí es donde entra en juego la creación de prototipos.

Cuando diseñamos nuestros sitios web, avanzamos desde el wireframing hasta la creación de prototipos y, finalmente, un diseño completo.

Quería explorar y ampliar lo que realmente significa la creación de prototipos al llevarlo a través del proceso completo.

Tenga en cuenta que creé otro curso que cubre el primer paso del diseño de un sitio web: construir un wireframe. Puede leer sobre wireframing y ver mi curso de video de 30 minutos aquí.

En este tutorial, cubriremos:

  1. Qué es un prototipo temprano
  2. Crear una estructura: marco, filas, columnas
  3. Agregar contenido: encabezado, control deslizante, acerca de
  4. Diseño de secciones
  5. Conclusión: lo que hemos aprendido del proceso de creación de prototipos

¿Qué es un prototipo inicial?

Un prototipo es normalmente la iteración secundaria de un diseño, ya que está construido sobre una estructura alámbrica.

Una estructura alámbrica generalmente implica un simple boceto dibujado a través de papel, lápiz o herramienta en línea. A continuación, construimos el prototipo, que es nuestra maqueta más refinada para el sitio web o la aplicación.

Echemos un vistazo al primer wireframe que creamos en el artículo anterior:

Tiene varias páginas, secciones y áreas donde se agregarán texto e imágenes más adelante.

El objetivo, entonces, en el Prototipo es construirlo visualmente, pero sin agregar color ni imágenes.

En este ejemplo, usaré Figma para hacer el prototipo. Puedes ver el prototipo completo de Figma aquí.

Cómo crear una estructura de prototipo de sitio web: marco, filas, columnas

Cuando creamos la estructura alámbrica, consideramos las cuadrículas, pero fueron dibujadas a mano.

Al hacer un prototipo inicial, tenemos que definirlos correctamente para que todo el diseño siga la estructura de la cuadrícula.

En este ejemplo, usaré un diseño de 12 columnas con un ancho regular de 1140px, que se usa y se ve tradicionalmente en los diseños de Bootstrap. Esto nos da un margen de 15-30px entre unidades de cuadrícula.

Esto será útil más adelante cuando colapsemos las columnas en filas para mejorar la capacidad de respuesta móvil.

Puede crear su propia estructura de cuadrícula en Figma. Pero tenga en cuenta que usted (u otra persona) necesitará codificar estos diseños más adelante.

Siempre que diseñe algo, asegúrese de tener en cuenta al desarrollador.

Cómo agregar contenido a un prototipo de sitio web: encabezado, control deslizante, secciones

A diferencia de Wireframe, ya no representamos texto con líneas y encabezados con bloques. En su lugar, necesitamos completar el contenido para una maqueta.

Esto no significa agregar colores o imágenes. Pero sí significa que tenemos que mostrar texto real.

En esta etapa, es una gran idea asegurarse de que el encabezado y las secciones se muestren con el contenido real que deben contener. Esto permitirá una mejor selección de colores e imágenes en etapas posteriores del diseño.

En esta parte del ejemplo, construí el control deslizante con el texto del héroe y una descripción debajo. Hay algunas cosas a tener en cuenta en esta fase del proceso de prototipo:

  • Posicionamiento y tamaño de fuente
  • Ubicación y espaciado del contenido
  • Márgenes y relleno entre secciones y contenido

Cómo diseñar secciones del prototipo de sitio web

Para la creación de prototipos y la maqueta final, es importante comenzar a colocar capas en sus grupos y secciones. Las secciones pueden incluir cosas como el encabezado, la sección "acerca de nosotros" y la sección de patrocinadores.

Puede crear grupos en su herramienta de interfaz de usuario (Figma hace esto con Ctrl + G). Etiqueta tus secciones y configúralas con diferentes colores de fondo. Esto facilitará su identificación y le permitirá moverlos fácilmente.

Demasiadas veces me han pedido que mueva ciertas partes de un sitio web hacia arriba y hacia abajo en la agrupación. Al agrupar todos sus componentes en secciones, se lo hará mucho más fácil durante la fase de prototipo del trabajo de diseño.

Conclusión: lo que hemos aprendido del proceso de creación de prototipos

A medida que desarrollamos el resto del diseño, es importante asegurarse de que este primer prototipo no se convierta en una maqueta completa para el diseño de un sitio web.

Es fácil dejarse llevar. Pero el objetivo de hacer un prototipo después de un wireframe es garantizar que podamos continuar planificando el desarrollo del sitio web.

Es mucho más fácil identificar problemas y problemas en las primeras etapas de planificación y actualizarlos antes de sumergirse en la creación del diseño completo. Tal creación de prototipos solo puede llevarle unas pocas horas, pero puede ahorrarle días de esfuerzo más adelante en el proceso.

Una vez que haya creado un prototipo de varias páginas, puede pasar a la fase de diseño de la maqueta completa. Esto implicará descubrir la teoría del color, la tipografía y las imágenes que funcionen en consecuencia. Veremos esto en el próximo artículo de esta serie el próximo mes.

Bono: agregar un prototipo interactivo

Solo creamos una página para este ejemplo. Dicho esto, la creación de prototipos también le permite crear un ejemplo emulado del funcionamiento del sitio.

Esta emulación es muy útil para realizar demostraciones, probar cómo responden los clientes al ver un ejemplo del mundo real de una maqueta temprana y revisar cómo fluyen todos sus enlaces.

Espero que hayas disfrutado de este artículo. Si no sabes quién soy, soy Adrian de Australia. ? Tengo un pequeño canal en Twitter y YouTube, así que si quieres saber más sobre mí o disfrutar de mi contenido, ¿me puedes visitar alguna vez?

  • Youtube: //youtube.com/adriantwarog
  • Gorjeo: //twitter.com/adrian_twarog