¿Cómo no pensar en diseño adaptable?

El diseño adaptable (o responsive design) es la nueva manera de diseñar para medios digitales.

Retrato de Vero Orso Vero Orso Córdoba Seguidores: 66

Opiniones:
40
Votos:
75
Compartir:

Hoy en día diseñar con criterios de diseño adpatable (responsive design en inglés) ya no es opción, sino nuestra responsabilidad. Estamos en una etapa en la que lo móvil saturó nuestra vida y como diseñadores debemos pensar así.  ¿Darle la opción al cliente?, ¿para qué? Como profesionales sabemos qué es lo mejor para ellos, y dentro del proyecto ya tiene que estar implícito que el sitio web será adaptable para que pueda verse en cualquier dispositivo.

Ahora bien, ¿cómo diseñar únicamente desde una perspectiva adaptable? ¿Cómo adoptar este enfoque? Es simple, solamente debemos tener todo el tiempo presente que nuestros bloques de información se reacomodarán dependiendo dónde se vayan a mostrar. Entonces cuando estemos frente a nuestro lienzo en blanco acomodaremos los elementos y la información en bloques que se puedan ajustar fácilmente y no alteren el orden ni la estética en tableta o en el móvil. Suena fácil, ¡y lo es! Ya estamos tan acostumbrados a navegar sitios de esta manera que nuestra mente comienza a ajustarse por sí sola a este tipo de diseño.

Pero comencemos por el principio. Si aún no sabes qué es una página adaptable, debo decirte que me refiero a una página que se ajusta atomáticamente al tamaño de pantalla del usuario sin alterar la legibilidad del contenido y manteniendo un mismo orden y estética. Es decir que, la misma página html/css se ve diferente en tu pantalla de 21 pulgadas y en tu móvil, y, en base a unas reglas pre-definidas, se adapta para mostrarse de la mejor forma posible en cada formato, tamaño y proporción de pantalla, sea vertical o apaisada.

Algunos consejos:

  1. Antes que nada, habla con tu cliente y coméntale lo importante que es que su sitio sea adaptable, y del alcance que tendrá en cuanto a visitas y rebotes. Tómate el tiempo para explicarle las bondades de estar presente en los dispositivos que hoy lo usuarios manejan a diario y cuidar el contenido en todos los formatos.

  2. Define los puntos principales que tendrá el proyecto para evaluar lo que se requerirá en el armado y cómo acomodarás la información tanto en la página de inicio como en el resto de las secciones.

  3. Establece la prioridad de los contenidos según el contexto de lectura. Recuerda que estamos diseñando no solo para que el sitio se adapte a los formatos pequeños de pantalla sino también para dar al usuario la información que necesita en cada contexto. De todos modos deja siempre abierta la posiblidad de ampliar la información.

  4. Establece prioridades en el diseño:

    • Ajusta a tu lienzo guías que te ayuden a organizar elementos y contenido en forma de bloques. Resulta de ayuda organizar columnas y distribuir imágenes y texto en bloques sabiendo que luego podrán mostrarse unos debajo de otros en los diferentes formatos y proporciones de pantalla.

    • Utiliza elementos simples. Hay elementos que el usuario ya conoce sobre los modos de navegación en la Web (flechas, signos de más y menos, subrayados para los hipervínculos). Recuerda que estás diseñando un sitio que debe ser completamente navegable. Utilizar elementos intuitivos y ya aprendidos por el usuario es lo más eficiente.

    • Ten en cuenta que los elementos puedan ser «clickeables» también con los dedos también. Recuerda que dependiendo donde se vea el sitio, es como utilizará. El tamaño de los iconos y accesos debe ser suficiente, y debe haber buen espaciado entre ellos, para que en el móvil el usuario no necesite hacer malabares para poder tocar el que desee.

    • Optimiza siempre, siempre. Esto vale para cualquier tipo de diseño, sea o no adaptable. Al usuario no le gusta esperar, así que optimiza siempre tus imágenes para que no demoren en descargar. Eso ayudará a que no se vayan de tu sitio antes de tiempo.

    • Al terminar tu diseño debes prever cómo se acomodará cada página a los diferentes tamaños de pantalla, para verificar que todo se vea perfecto.

  5. Finaliza tu diseño con todos los elementos a tener en cuenta y enviálo a desarrollo para que puedan comenzar y optimizar los estilos también a dispositivos móviles.

Pruébalo en cuanto dispositivo tengas a la mano y quedará listo para que tus usuarios lo naveguen. No olvides incluir el código de Google Analitycs y revisarlo cada tanto, para ver qué páginas son las más visitadas, si hay rebote y conocer las preferencias y el comportamiento de tus usuarios.

Si aún no lo has hecho, adopta el diseño adaptable (responsive design) hoy mismo, y te acompañará para siempre, porque tu diseño debe verse perfecto en todos lados.

¿Qué te pareció? ¡Comparte tu opinión ahora! Necesitamos tu ayuda para continuar produciendo contenidos gratuitos. Considera apoyar el trabajo de FOROALFA con una donación de cualquier valor en PayPal.


Este video podría interesarte👇👇👇

Retrato de Vero Orso Vero Orso Córdoba Seguidores: 66

EdiciónGreta Sánchez Ciudad de México Seguidores: 79

Opiniones:
40
Votos:
75
Compartir:

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
Código QR de acceso al artículo ¿Cómo no pensar en diseño adaptable?

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web.

Descargar PDF

Vero Orso

Más artículos de Vero Orso

Título:
Neuromarketing: el nuevo proceso de compra
Sinopsis:
¿Realmente eres tú el que decide? Tu cerebro ya decidió si leer este artículo o no.
Compartir:

Debate

Logotipo de
Tu opinión

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Bryan Millas
0
Bryan Millas
Abr 2016

Gracias, personalmente estoy utilizando un framework excelente para esto, se llama bootstrap. Tiene un sitio muy explicativo. Lo recomiendo!

0
Responder
Retrato de Alfredo Texis Michicol
6
Alfredo Texis Michicol
Oct 2014

gracias esta muy interesante el tema felicidades

0
Responder
Retrato de Karen Cortes
0
Karen Cortes
Oct 2014

Gracias Verónica, tu artículo es claro y conciso, tal vez muchos veníamos practicando el diseño "responsive" sin ser conscientes que hoy en día ya es una necesidad para el usuario y no una opción.

Saludos.

1
Responder
Retrato de Andres Suarez Gomez
1
Andres Suarez Gomez
Jul 2014

hace una gran referencia para que un diseñador siga paso a paso el proceso para satisfacer el gusto y las necesidades del clienete (responsive design en inglés)

1
Responder
Retrato de Fran Silva
1
Fran Silva
Jun 2014

Primorosa concepção Verônica! Observação de que o Design dos Sites e Blogs deve sim dialogar com os aparelhos e suas novas tecnologias. Bem sabia da importância dessa intervenção o que percebi de muito rico foi essa terminologia de Design Adaptável. Isso mostra a importância e coerência visual do trabalho do Design em suas extensões da Web, ou seja, esses aparelhos: Smartphones etc... Como um complemento a sua ideia evidencio os textos de Vilém Flusser o filósofo das novas tecnologias. É bem legal!

Obrigada Verônica!

1
Responder
Retrato de Joan Betancur Ibagón
17
Joan Betancur Ibagón
Jun 2014

Mas que responsive design hoy en dia se debe tomar como un "responsible design".

Gracias Verónica

1
Responder
Retrato de Christian Portuguez Cuzque
0
Christian Portuguez Cuzque
Jun 2014

vale siempre tenerlo en cuenta... aunque a veces los costos de los clientes no lo justifiquen

1
Responder
Retrato de Magdalena García Pintos
0
Magdalena García Pintos
Jun 2014

No importa si es viejo, sigue siendo muy útil este artículo. En mi caso, me enteré hace muy poco sobre responsive web design.

1
Retrato de Vero Orso
66
Vero Orso
Jun 2014

¡Muchas gracias Magdalena! :) Me alegro que te sirva. Saludos

0
Retrato de Cesar Leigh
0
Cesar Leigh
Abr 2015

Veronica una pregunta como hago para publicar artículos en este foroalfa? gracias por tu respuesta :)

0
Responder
Retrato de Candelaria Argüello Pitt
0
Candelaria Argüello Pitt
Jun 2014

Gracias Verónica por tu aporte, aunque dicen que es viejo, muchos no lo tenemos en cuenta ni tenemos experiencia y conocimiento a la hora de diseñar.

1
Retrato de Vero Orso
66
Vero Orso
Jun 2014

Hola Candelaria, muchas gracias por su comentario, un placer poder aportar :)

0
Responder
Retrato de Luis Daniel Canales Parrilla
2
Luis Daniel Canales Parrilla
Jun 2014

Buen aporte, pero bastante viejo. Esto ya es un estándar desde hace bastante tiempo, pero igual gracias.

1
Responder

Te podrían interesar

Ilustración principal del artículo Smartphones en la clase de diseño: ¿un dolor de cabeza?
Autor:
Greta Sánchez
Título:
Smartphones en la clase de diseño: ¿un dolor de cabeza?
Sinopsis:
A raíz del uso cada vez más frecuente de dispositivos móviles entre los estudiantes, en las casas de estudios no se termina de definir qué hacer ante este fenómeno.
Compartir:
Interacciones:
Votos:
83
Opiniones:
85
Seguidores:
79
Retrato de Luis Roach
Autor:
Luis Roach
Título:
Diseño gráfico en la industria del videojuego
Sinopsis:
De qué piezas es responsable el diseñador, qué similitudes y diferencias existen con los rubros tradicionales del diseño gráfico y cómo es diseñar dentro de la industria.
Compartir:
Interacciones:
Votos:
117
Opiniones:
54
Seguidores:
39
Retrato de Cecilia Escobar
Autor:
Cecilia Escobar
Título:
Nuevas tecnologías en la enseñanza de nivel superior
Sinopsis:
Se habla mucho de los cambios que implica el uso de nuevas tecnologías en la educación superior, pero ¿realmente se aplican de manera correcta?
Compartir:
Interacciones:
Votos:
20
Opiniones:
7
Seguidores:
9
Ilustración principal del artículo Diseño y medios de fabricación personal
Autor:
Manuel Martínez Torán
Título:
Diseño y medios de fabricación personal
Sinopsis:
En la actualidad, los diseñadores estamos reflexionando sobre cómo buscar formas de producir y dar a conocer nuestra capacidad por nosotros mismos.
Compartir:
Interacciones:
Votos:
65
Opiniones:
18
Seguidores:
77
Retrato de Mauro Gullino
Autor:
Mauro Gullino
Título:
¿Cuál es el mejor formato de imagen?
Sinopsis:
No los distinguen solo sus extensiones: JPG, GIF y PNG. Sabemos que están ahí pero, ¿cuándo utilizar cada uno de ellos?
Compartir:
Interacciones:
Votos:
106
Opiniones:
53
Seguidores:
30
Ilustración principal del artículo Diseñar videojuegos
Autor:
Ernesto Antonio Santos León
Título:
Diseñar videojuegos
Sinopsis:
Un nuevo mercado profesional y laboral que emerge en América Latina.
Compartir:
Interacciones:
Votos:
39
Opiniones:
19
Seguidores:
32

Próximos seminarios online

Seminarios de actualización para especializarte junto a los que más saben

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

30 horas (aprox.)
6 Abril

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

20 horas (aprox.)
¡Ya mismo!

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

20 horas (aprox.)
¡Ya mismo!

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

20 horas (aprox.)
¡Ya mismo!

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

15 horas (aprox.)
¡Ya mismo!