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

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:
Título:
Una metodología creativa para creativos
Sinopsis:
Lego© Serious Play una metodología que sorprende en el mundo y que pone a altos ejecutivos junto con sus empleados a encontrar soluciones para sus empresas. Y todo esto, jugando...
Compartir:
Título:
¿Eres el líder de tu empresa?
Sinopsis:
Dos preguntas clave que debes hacerte si deseas encaminar el entusiasmo por el trabajo en tu empresa.
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 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:
25
Retrato de Lluïsa Díaz
Autor:
Lluïsa Díaz
Título:
La industria superlativa del videojuego se reunió en Barcelona
Sinopsis:
Lo ocurrido en la feria Gamelab 2012 en Barcelona, indica que el negocio del videojuego demanda nuevos modelos de negocio, múltiples plataformas y diversos géneros.
Compartir:
Interacciones:
Votos:
7
Seguidores:
21
Ilustración principal del artículo Diseño para la Web Social
Autor:
Laura Pérez Vanmorlegan
Título:
Diseño para la Web Social
Sinopsis:
Claves para diseñar sitios Web sociales que brinden una interfaz de usuario fácil de usar.
Compartir:
Interacciones:
Votos:
68
Opiniones:
38
Seguidores:
1
Retrato de Pablo Jasso
Autor:
Pablo Jasso
Título:
Las redes sociales sí convienen
Sinopsis:
Los medios sociales son un canal de marketing de productos y servicios que las empresas no pueden desaprovechar.
Compartir:
Interacciones:
Votos:
4
Opiniones:
5
Seguidores:
3
Retrato de Marcio Duarte
Autor:
Marcio Duarte
Título:
¿Tu presencia digital es relevante?
Sinopsis:
Actualmente las empresas buscan estar presentes en las redes sociales. ¿Qué tal relevante es para ellas esa presencia digital?
Traducciones:
Compartir:
Interacciones:
Votos:
5
Opiniones:
6
Seguidores:
7
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:
64
Opiniones:
18
Seguidores:
76

Próximos cursos online

Cursos 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

4 semanas
¡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...

4 semanas
¡Ya mismo!

Estrategia de Marca

Estrategia de Marca

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

4 semanas
17 Noviembre

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

3 semanas
3 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

6 semanas
6 Abril