Cómo crear un buen diseño web responsive
26/09/2017

Cómo crear un buen diseño web responsive

Diseño y producción audiovisual

Si realmente quieres existir como una de las primeras empresas en internet y que el usuario  encuentre rápidamente lo que necesita en tu web desde cualquier plataforma, fluyendo por tu web como un buen surfista de la red, ésta ha de cumplir las premisas de web responsive. Seguro que como diseñador web no has dejado de oír éste término y frase desde hace años, sobretodo desde el 2015 cuando google actualizó su algoritmo código para adaptar la web a android y móviles, con el objeto de llegar mejor al usuario. Así que de damos los tips necesarios de cómo crear un buen diseño web responsive.

Crear un diseño de web responsive es el arte de tener en consideración varios aspectos a la hora de crear una web y conseguir la gran web ideal, como un cocinero que planifica un plato de masterchef coge primero todos los alimentos y utensilios necesarios, los diseñadores webs antes de diseñar tenemos que saber diferentes aspectos del usuario, diseño, programación y SEO. Si sigues por orden los siguientes ítems será más fácil de lo que parece o al menos estarás preparado para hacer un diseño web responsive desde el principio adecuado, sin tener que retomar el diseño muchas veces, ahorrandote tiempo, problemas y mil pruebas.

Diseño de estructura web

Seguro que muchos de vosotros os habéis encontrado con el típico cliente que tiene una empresa pequeña que os dice “Necesito que me hagas una web”, pero solo sabe que ha de hacerla como el resto de empresas, porque toca, sin pensarlo demasiado. En ese momento se ha de poner la señal de “STOP” y decirle al buen cliente que para empezar ha de tener claro:

1- Qué quiere conseguir con la web su empresa

2- Qué quiere que consigan los clientes con su web y que beneficios les aportará

3- Entonces después de los puntos 1 y 2 sabrá: la estructura web (secciones) y sus contenidos

Sin estructura no hay web, igual que sin saber lo que necesitan los usuarios que llegarán y su usabilidad (como se moverán y buscarán en ésta). Desde hace poco ya se estan especializando profesionales en éste campo de estructura web y navegación, son los llamados diseñadores UX 

Diseño web diferenciador

Con la estructura podremos coger los siguientes ingredientes:

  • Identidad de la empresa: lo que la identifica y diferencia del resto, su branding (logotipo y colores colores corporativos, líneas, imágenes y símbolos propios)
  • Características y tendencias visuales del target o usuario potencial (público habitual que utiliza la empresa y del quien quiere conseguir la empresa)

En el briefing estudiamos estos factores visuales y conseguimos el diseño que identifique a la empresa, llegue al usuario, se encuentre cómodo y le atraiga. Con las premisas visuales de diseño, podremos aplicarlo en los elementos típicos del producto o plataforma web con sus elementos de interacción (botones, listados, navegación) y saber cómo se comporta el usuario con ellos.

Diseño web de elementos de interacción

Como cualquier diseño tenemos que saber cómo el usuario utilizará ese producto para crear el diseño ideal para su utilización, igual que el diseño de un pack sabes que se verá por diferentes caras, lo que espera ver el comprador, lo que necesita y que acceda al abridor rápidamente, en una web tenemos que saber lo que es habitual que éste haga, a lo que está familiarizado (botones típicos, búsquedas, volver, flechas,etc), lo que espera (accesos directos, menús, datos de contacto, formas de pago,etc), los límites de un producto interactivo en peso en kb por ejemplo y las posibilidades como adaptación de tamaño, visualizaciones de giro,etc.

Saber conocer el producto (web) y su funcionamiento es fundamental para conseguir un diseño web mejor y más rápido, tener conocimientos de CSS y el trabajo de construcción de programación te ayuda a crear el diseño adecuado y responsive.

Muchos de los elementos y animacione que antes se conseguían con JPG, GIF, SWF con Flash y PNG ahora se logran directamente con CSS y javascript, conociendolos ahorrarás tiempo de programación obteniendo menos peso y más rapidez al usuario que te agradecerá.

Diseño web fluido para diferentes plataformas y búsqueda SEO

Para que el diseño web sea Responsive ha de adaptarse a webs, tablets y móviles, en los últimos años ha aumentado casi a la mitad la navegación sólo por móvil y el futuro se ve por ese canal como fundamental. Google lo sabe muy bien y por eso ha dado las premisas y ayuda a las empresas para que se adapte mejor a ésta plataforma con Material Design.

Cuando creamos la estructura visual de la web con columnas, filas o elementos destacados es importante controlar o tener conocimientos de el código Media Query, donde indicamos en CCS3 como se ampliará o adaptará el elemento en la pantalla según su tamaño. Es importante que la web solo sea una, de forma que los elementos y contenidos se adapten a las plataformas de pantalla, tablet o movil,  porque la búsqueda SEO de google excluye si son diferentes versiones.

Unas herramientas útiles para comprobar la adaptabilidad de la web son Adobe Edge Reflow, Macaw y Webflow. Para crear los elementos repetitivos y claves a veces es una ventaja utilizar una biblioteca de patrones UX (por ejemplo que siempre se adapte al 100% anchura una imagen clave, posicionamiento en un lado, etc).

En cuestión de SEO los contenidos breves con palabras claves siguen siendo una ayuda en la búsqueda efectiva del usuario. Por eso es importante diseñar con contenidos reales, no caigáis en el defecto de muchas de poner texto en latín hasta que el cliente tiene el definitivo, porque después tardará en adaptarse los motores de búsqueda. Eso es muy útil en el diseño web para planificar titulares de 3 líneas máximo, destacados cortos, siglas, etc.

Apatir de todos estos elementos puedes crear un diseño web responsive, no estan complicado como parece pero una buena base puede dar el éxito a la web, a la navegación y satisfacción del usuario dentro de ella, después dependerá de la respuesta directa de la empresa con el cliente, pero ahí ya no interviene el diseñador.

Ahora además de Photoshop es la oportunidad de lanzarte a conocer algo de programación para entender mejor a nuestros compañeros informaticos y ahorrarte tiempo sobretodo como diseñador.

¿Has tenido casos de webs infinitas donde han habido mil cambios?¡Hazmelo saber en tus comentarios!

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Graduada en Diseño Gráfico por EASD Valencia. Multidisciplinaria con experiencia en Diseño Gráfico, editorial y Desarrollo Web. Especialista en Diseño y Maquetación de publicaciones juveniles y de empresas.

pdf interactivo
24/06/2020
Susana Perdomo

¿Cómo crear un PDF interactivo?

Crear un PDF interactivo es más fácil de lo que parece gracias a Adobe Indesign, el programa por excelencia de los profesionales de ediciones, revistas, periódicos,...

InDesign vs Illustrator
10/06/2020
Susana Perdomo

Diferencias entre InDesign e Illustrator. ¿Cuándo usar cada uno?

En este post verás las diferencias que hay en los principales programas de diseño vectoriales: Adobe Indesign y Adobe Illustrator, los favoritos en empresas de dise...

salidas profesionales del diseño gráfico y visual
28/05/2020
Susana Perdomo

El futuro de los profesionales del diseño gráfico y visual

El diseño gráfico y visual está más vivo que nunca porque la comunicación, búsqueda de información y compras se están centrando cada vez más en pantallas, som...