Cómo mantener el diseño receptivo involucrado
El diseño web receptivo es popular y no es un secreto en absoluto. Es lo que los expertos están pidiendo y lo que muchas marcas están cambiando. No se trata solo de crear un sitio listo para dispositivos móviles, sino de hacer que su sitio sea visible para todos los tamaños de navegadores, ya sea en computadoras de escritorio, tabletas o teléfonos inteligentes.
La parte difícil de diseñar para la capacidad de respuesta es crear un sitio que se vea bien, grande y pequeño. Debe tener mucho en cuenta antes de abrir su programa de diseño e ir a trabajar. Es un paso adicional que generalmente vale la pena en el producto final. Es muy evidente cuando un diseñador no planifica la capacidad de respuesta; los sitios tienden a verse realmente desnudos y aburridos.
Es absolutamente imprescindible que los diseñadores mantengan su creatividad en sitios receptivos. Con más personas que usan tabletas y teléfonos inteligentes, debe asegurarse de que todos puedan ver su sitio. Aquí hay algunos consejos para ayudarlo a mantenerse creativo y efectivo al diseñar para la web receptiva.
1. Usa una excelente tipografía
Con sitios receptivos, debe considerar lo que se verá bien en una pantalla más pequeña. La buena tipografía es un elemento básico de cualquier buen diseño web, pero es casi necesario en el diseño web receptivo. A medida que el tamaño de la pantalla disminuye, la mayoría de los elementos deberían transformarse y reducirse o moverse también. En primer lugar, su tipografía debe tener esta capacidad.
En segundo lugar, debe usar diferentes encabezados y varios tamaños en el texto. Ahora, generalmente usamos titulares y encabezados de gran tamaño para nuestros diseños de escritorio. Esto no tiene que descontinuarse en su totalidad porque está pensando en tamaños más pequeños. Solo asegúrate de estar usando un complemento, como FitText, para disminuir el tamaño de tu texto Esto ayuda.
Herrero utiliza muchos tipos de letra diferentes para crear un aspecto y una sensación muy interesantes. También varían los tamaños de estas fuentes en todo el sitio. Lo que es interesante en el modo de escritorio es la forma en que el texto y los párrafos se alinean en diferentes columnas. Cuando la ventana se reduce, el texto se colapsa en una columna. Afortunadamente, el texto permanece constante manteniendo la misma escala y estilo.
La revista Smashing tiende a hacer lo mismo. Se deshacen del lado derecho del diseño (los anuncios) por completo cuando la ventana se reduce. Sin embargo, el texto se ajusta dentro de la ventana y los estilos, colores y tamaños se mantienen consistentes.
2. Usa excelentes imágenes
Las imágenes, como la tipografía, son extremadamente importantes en cualquier diseño de sitio web. También al igual que la tipografía, en los diseños receptivos, cuando ve un sitio en pantallas más pequeñas, sus imágenes también deberían aparecer más pequeñas o reducidas. Hay toneladas de diferentes diseños y tamaños de imagen diferentes que se pueden utilizar en un diseño receptivo. Es importante prestar atención a las imágenes que eliges y cómo las estás usando porque sin duda cambiarán. A medida que las pantallas se hacen más grandes o más pequeñas, las imágenes cambian de forma y revelan o recortan ciertas partes de la imagen.
Lo ideal es asegurarse de que sus imágenes fotográficas grandes no tengan contenido gráfico que pueda recortarse cuando Windows cambie de tamaño. Además, cuando está creando imágenes gráficas, debe asegurarse de crear una imagen que se cargue rápidamente y sea visible en una pantalla más pequeña. Esta es la razón por la cual los diseñadores han adoptado el diseño plano. Es simplemente más fácil.
En Pandiscio, primero debe observar cómo se ve la imagen del encabezado más grande en un escritorio. Está lleno, se extiende a los lados y es de muy alta calidad. A medida que reduce el tamaño de la ventana, las imágenes se vuelven más pequeñas, cambian de forma (de rectangular a cuadrado) y se recortan. Han encontrado imágenes que se ven bien cuando la pantalla cambia de tamaño.
KinHR es un sitio que utiliza muchos elementos gráficos diferentes, así como fotografías. Tenga en cuenta que cuando es grande y pequeña, las imágenes del encabezado se vuelven más pequeñas, como en el sitio web de Pandiscio. Sin embargo, con los elementos gráficos en el cuerpo, las imágenes se vuelven más pequeñas pero mantienen su forma y no se recortan.
3. No duerma en la navegación
En blanco, si las personas no tienen idea de cómo moverse por su sitio, simplemente no lo harán. La navegación es más difícil cuando se trata de diseños receptivos porque estamos acostumbrados a crear navegación para diseños de paisajes. Ahora, tenemos que crear una navegación que se pueda condensar fácilmente para adaptarse a las dimensiones del retrato.
No es un gran problema cuando tienes un puñado de enlaces. Puedes hacer que tu menú sea más pequeño o condensado cerca de la parte superior o puedes crear un menú desplegable para los espectadores. De gran importancia es cómo manejar la navegación con más sitios web pesados de contenido.
Mashable tiene toneladas de enlaces porque tienen toneladas de categorías y más artículos. Además de eso, tienen sus propias páginas centradas en la compañía que deben estar vinculadas también. Mashable decide crear un menú emergente en el lado izquierdo de la pantalla para navegadores más pequeños.
Monocle tiene dos niveles principales de navegación extensa para su sitio. Para navegadores más pequeños, han creado un menú deslizable para obtener el máximo contenido y han condensado el segundo nivel de navegación.
4. Hazlo divertido de usar
Cuando hace clic en enlaces en línea, es probable que deba sentarse allí y esperar a que se carguen las cosas antes de ver una página. En los teléfonos, es muy molesto tener que encontrar el siguiente botón con precisión para avanzar hacia más contenido. Cosas como esta no son divertidas ni intuitivas.
Prestar atención a los detalles y hacer que su sitio sea más intuitivo hace que su sitio sea más compartible. Piensa en lo que es usar un sitio en cualquier tamaño de navegador. Piensa en qué deberían hacer los sitios web cuando solicites una acción. Encuentre estas cosas y corrígelas para que su sitio sea fácil, divertido e intuitivo de usar. ¡También lo hace un poco más interesante!
Mud hace que su sitio sea más interesante al prestar atención a sus transiciones. Crean una sensación muy elegante al permitir que muchos de sus elementos se deslicen y se desvanezcan en lugar de simplemente moverse bruscamente y aparecer. Hace un mundo de diferencia.
Neue Yorke usa mucho movimiento cuando pasa del artículo de la cartera al artículo. De nuevo, crea una sensación muy alta y mantiene a los espectadores interesados en lo que pronto se revelará.
5. Piensa fuera de la caja
Cuando todo lo demás falla, solo sé creativo. El diseño web receptivo no pretende ser una limitación en la forma en que creamos sitios web. Siempre hay espacio para usar la creatividad, ya sea a través de la codificación o el diseño.
Enso ha creado un sitio que parece no tener posibilidades de ser receptivo. Observe cómo han cambiado el diseño un poco cuando el tamaño se reduce, pero han mantenido su marca y creatividad.
TBWA tiene un sitio que tiene un gran diseño. Pero también tienen excelentes imágenes. ¡Y también tienen una gran tipografía! Lo han usado todo aquí para crear un diseño web muy único e interesante.
Conclusión
Mantener su creatividad en un diseño receptivo o en cualquier diseño web es tan simple como esbozar su concepto y revisarlo para mantener sus objetivos. Las cosas divertidas ocurren más fácilmente a medida que comienzas a planear cómo quieres que funcione tu sitio web, en lugar de comenzar con eso. El diseño web receptivo no tiene por qué ser una tarea tan grande y omnipotente que los diseñadores temen. ¡Es bastante simple! ¡Mantenga en mente todas las cosas anteriores que hemos discutido y cree sitios que están fuera de este mundo! Buena suerte con su diseño web receptivo.
¿Qué consejos compartirías para mantener atractivo el diseño receptivo? ¿Has encontrado un diseño receptivo muy creativo? Háganos saber en los comentarios.