¿Tienes que hacer un diseño web desde cero y no sabes por dónde empezar? En el siguiente artículo, presentamos los procesos y herramientas básicas que necesitas para dar vida a un diseño web desde cero.

1. Establecer una jerarquía de contenido clara

Tenemos que tener muy claro a quién nos vamos a dirigir y los objetivos que debe cumplir el sitio web: ¿enfocado en la venta, captación de leads, marca? Todo ello nos dará una idea previa de cómo debe de ser el sitio web. Posteriormente, generaremos una jerarquía de la estructura web. Es decir, organizaremos todo el contenido en función del público objetivo: las páginas que tendrá, sus categorías, su jerarquía, orden, etc.

Intentaremos que esta jerarquía sea lo más sintetizada posible para mejorar la usabilidad del usuario. Hay que analizar los problemas que puede suponer cada estructura y sus beneficios y así, elegir la mejor para nuestra web.

Imagen cedida por David Rizo, profesor de la Escuela de Arte y Superior de Diseño de Alicante. (2019)

 

2. El boceto

El siguiente paso sería el bocetaje a papel, este nos va a permitir corregir, borrar, plasmar cualquier idea de forma rápida sin necesidad de estar delante de un software de edición. Haremos bocetos para diferentes dispositivos, sobretodo para móvil y escritorio. Esto quiere decir que nuestra web será responsive (adaptable a diferentes tamaños de dispositivos).

En esta parte de bocetos no pensamos tanto en los efectos que tendrá nuestra web cuando naveguemos por ella, bocetamos más a nivel estructural. Una vez tengas los bocetos definitivos podremos usar Balsamiq. Esta es una herramienta para hacer mockups de los bocetos, muy útil ya que trae por defecto plantillas de tamaños de pantallas e iconos.

 

3. Prototipos de alta fidelidad y herramientas

Es hora de comenzar a hacer los prototipos de alta fidelidad. Buscaremos y colocaremos los elementos que mejor se adapten a nuestros objetivos y público: imágenes, colores, tipografía, etc. 

Tenemos herramientas como Adobe XD o Sketch que nos permiten hacer estos prototipos de forma muy intuitiva y sencilla. Otra herramienta muy novedosa es SupernovaStudio, una app muy cómoda a la hora de hacer lo prototipos y los efectos que hará nuestra página web. Tiene una interfaz similar a Affter Effects de Adobe ya que tiene una línea de tiempo similar para realizar dichos efectos. Además crea de forma automática el código CSS, así que también podemos trabajar desde el propio código.

 

4. Front-End

El front-end es la parte visual de la web, una maqueta específica y realista de cómo la verá el usuario final, es decir, una capa de presentación. Se puede diseñar a través de código HTML y CSS. Hoy en día cada vez es más fácil aprender a crear un diseño web con frameworks como Bootstrap 4. Este framework nos permite hacer adaptables nuestra web, además tiene soporte para Flexbox y Css Grid, que nos ayudan todavía más a crear un sitio web responsive.

Bootstrap 4 se basa en un sistema de columnas (máximo 12 columnas), de forma que los elementos se adaptan a ellas. Solamente tenemos que definir cuánto ocupa cada elemento: col-12 ocupará todo el ancho, en cambio si definimos 3 elementos de 4 columnas sería col-4 col-4 col-4 de forma que es igual a 12 columnas. Esto es lo básico. No obstante, os dejo un interesante canal de Youtube de Falcon Master, donde podéis aprender mucho acerca de diseño web y front-end

Por último, el programador que se ocupará del back-end con nuestro diseño, es decir, la parte interna y no visible de la web, la capa de acceso de datos. Igualmente deberíamos tener continuos feedbacks con el programador para asegurarnos de que todo queda según el diseño de front-end o si en ciertos casos no es posible, buscar la mejor alternativa.

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *