¿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.

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

Retrato de Dante Claudio Reynoso
Autor:
Dante Claudio Reynoso
Título:
¿Hay que estar en las redes sociales?
Sinopsis:
Los usuarios de las redes sociales han impuesto un desafío comunicativo a las organizaciones, que se ven desbordadas por la novedad y no logran comprenderlas y aprovecharlas.
Compartir:
Interacciones:
Votos:
80
Opiniones:
50
Seguidores:
52
Retrato de Samuel Cortina
Autor:
Samuel Cortina
Título:
La nueva evolución de la información
Sinopsis:
¿Cómo se llama la mayor luna del planeta enano Plutón? Preguntas como esta parecieran estar reservadas únicamente a especialistas o expertos en la materia.
Compartir:
Interacciones:
Votos:
44
Opiniones:
11
Seguidores:
26
Retrato de Luis Correa
Autor:
Luis Correa
Título:
La percepción en la experiencia de usuario
Sinopsis:
Cómo funciona la percepción, mediante el proceso de reconocimiento visual por referencia, en los procesos de interacción humano-computador.
Compartir:
Interacciones:
Votos:
57
Opiniones:
30
Seguidores:
19
Retrato de Luis Correa
Autor:
Luis Correa
Título:
Comunicabilidad y usabilidad
Sinopsis:
Un modelo que describe las etapas asociadas al desarrollo de interfaces gráficas de usuario desde el punto de vista de su efectividad comunicativa.
Compartir:
Interacciones:
Votos:
36
Opiniones:
9
Seguidores:
19
Ilustración principal del artículo Redes sociales de nicho del arte y el diseño
Autor:
Gisela Eblagon
Título:
Redes sociales de nicho del arte y el diseño
Sinopsis:
Los usuarios, los generadores de contenido, los contenidos y las políticas de publicación.
Compartir:
Interacciones:
Votos:
118
Opiniones:
46
Seguidores:
20
Retrato de Samuel Cortina
Autor:
Samuel Cortina
Título:
El futuro del libro en la era digital
Sinopsis:
Prácticamente todos los que disfrutamos de la lectura sentimos una especial atracción por los buenos libros, y no solamente por su contenido.
Compartir:
Interacciones:
Votos:
88
Opiniones:
83
Seguidores:
26

Próximos seminarios online

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

Branding Corporativo

Branding Corporativo

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

20 horas (aprox.)
1 diciembre

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.)
1 enero

Estrategia de Marca

Estrategia de Marca

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

20 horas (aprox.)
1 febrero

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.)
2 febrero

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.)
2 marzo