100 puntos a saber sobre...
Desarrollo de una web de diseño eco

Podemos desarrollar una estructura de wireframing exitosa para el diseño mobile first siguiendo 6 pasos:

1. Crear un inventario de contenidos

Al anotar el contenido que consideras esencial para el wireframing, filtras los elementos innecesarios.
¡Atención! El objetivo no es eliminar elementos, sino ordenar el contenido según su nivel de prioridad en primario, secundario y terciario.

2. Diseñar según la jerarquía visual

A partir de la información de tu inventario de contenidos, determina cómo vas a presentar los distintos elementos en función de su nivel de prioridad. Recuerda que los elementos considerados prioritarios deben aparecer en un lugar más destacado de tu sitio web.

3. Simplicidad

¿No sabes cómo mostrar el contenido ahora que has eliminado los elementos no esenciales? Aquí tienes algunos consejos de diseño para una presentación correcta:

• No abarrotes el menú de navegación con demasiados enlaces.
• Independientemente del tema, utiliza el menor número posible de páginas para mostrar el contenido.
• Estructura el contenido en dos columnas como máximo.
• Limítate a un tipo y tamaño de fuente para el texto (lo mejor es una fuente de sistema y tamaño 16pt para el cuerpo del texto).
• Utiliza el espacio en blanco para aumentar la legibilidad y reducir el desorden.

*Recuerda: Tu página web no debería tardar más de 3 segundos en cargar, ya que es más probable que los usuarios abandonen un sitio web que tarde más en cargarse. Mantener un diseño sencillo reducirá el tiempo de carga de tu sitio web.

4. Ten en cuenta el tamaño

Dado que el diseño mobile first tiene que adaptarse a un tamaño de pantalla más pequeño, el tamaño de los elementos influirá en el rendimiento del sitio web y en la experiencia del usuario. Tendrás que ampliar ciertos elementos porque los dedos humanos son menos precisos que los cursores del ratón. Es el caso de los botones y las funciones interactivas que pueden parecer más pequeños en los ordenadores de sobremesa. Sin embargo, ¡más grande no siempre es mejor para otros elementos de diseño! Por ejemplo, cuando añadas imágenes, evita las que sean demasiado grandes porque no se mostrarán correctamente.

5. Prueba en dispositivos reales

Una vez que haya completado una versión beta de su diseño, la mejor manera de determinar si se puede usar o no es comprobarlo por ti mismo. Carga las páginas de tu sitio web desde tu teléfono móvil y los de tu entorno.
Al hacerlo, pregúntate:

• ¿Se cargan rápido las páginas?
• ¿Se muestra primero el contenido más importante?
• ¿Es legible el contenido (texto e imágenes)?
• ¿Hay suficiente espacio en blanco alrededor de los elementos?
• ¿Los elementos interactivos se activan fácilmente al tacto?

6. Usa tu diseño como base para ir a más

Si has seguido los pasos anteriores y estás satisfecho con el funcionamiento de tu sitio web en teléfonos móviles, enhorabuena: ¡has creado con éxito una solución de diseño elegante y sostenible compatible con los dispositivos más pequeños (y más usados)! Ahora puedes empezar a pensar "a lo grande" y crear la versión de escritorio de tu sitio web ampliando y añadiendo soluciones a tu diseño.