¿Cuáles son algunos ejemplos de diseño que brindan una solución a un problema? Estilo de Vida y Elegante

Gracias por la solicitud. Introduciré algunos conocimientos básicos y excelentes ejemplos de diseño web adaptable.

1. Principio: ¿Qué es el diseño web adaptativo?

En 2011, un diseñador web, Aaron Gustafson, dio una definición de Diseño web adaptativo (AWD) en su libro, Diseño web adaptativo: Creación de experiencias ricas con mejora progresiva. También se conoce como mejora progresiva de un sitio web.

El diseño adaptativo significa crear una página diferente para diferentes tipos de dispositivos, las páginas web actuales de AWD están dirigidas a estas resoluciones (320, 480, 760, 960, 1200, 1600).

A diferencia de las páginas web receptivas (RWD), el diseño adaptativo se basa en puntos de interrupción que utilizan diseños estáticos. RWD no es AWD , una vez cargada la página, ya no se puede adaptar automáticamente, y la detección automática detectará automáticamente el tamaño de la pantalla para cargar el diseño apropiado. Por lo tanto, cuando visite el sitio web en el navegador de su computadora, el sitio detectará y seleccionará automáticamente el mejor diseño de la pantalla del escritorio.

2. ¿Cómo hacer un diseño web adaptativo?

El diseño web básico cubre varios aspectos importantes:

Diseño de prototipo con prototipo rápido como Axure, Mockplus,

Diseño UI / UX

Desarrollo front-end: HTML, CSS, JS.

Desarrollo de back-end: Java, PHP, Ruby, etc.

Si bien el gran diseño web adaptativo debe seguir los siguientes pasos:

Paso 1: metaetiquetas

Para adaptarse a la pantalla, muchos navegadores móviles colocarán la página HTML en un ancho de ventana gráfica mayor (generalmente mayor que el ancho de la pantalla), puede configurar la metaetiqueta de ventana gráfica. La siguiente metaetiqueta de ventana gráfica le dice al navegador que el ancho de la ventana gráfica es igual al ancho de la pantalla del dispositivo y no se inicializa:

Paso 2. Estructura HTML

En este ejemplo, el diseño de página incluye encabezado, contenido, barra lateral y pie de página. La altura fija es de 180 píxeles, el ancho del contenido es de 600 píxeles y el ancho de la barra lateral es de 300 píxeles.

Paso 3. Consultas de medios

La consulta de medios CSS3 es la clave para el diseño web adaptativo, al igual que la declaración condicional en un lenguaje de alto nivel, que le dice al navegador que presente la página de acuerdo con el ancho de la ventana gráfica diferente.

3. Ejemplos de diseño web adaptable

Algunas personas dijeron que el diseño receptivo está fallando UX móvil. Si bien actualmente, muchos sitios web se han configurado para ser sitios web optimizados para dispositivos móviles, ya que adoptaron un diseño web adaptativo en PC y dispositivos móviles. Por ejemplo, Amazon, USA Today, Apple y http://About.com. Pero el diseño del diseño adaptativo de los dispositivos móviles puede ser diferente de la versión de escritorio. Entonces, al hacer un diseño web adaptativo, los diseñadores web tienen mucho más trabajo que hacer para cumplir con los al menos seis requisitos de diseño diferentes.

Aquí hay 5 excelentes ejemplos de diseño web adaptativo para referencia.

1. Amazon

Al igual que otros sitios que usan diseño web adaptativo (como CNN), Amazon alienta a los usuarios a descargar sus aplicaciones de marca. Se informa que, adoptó el diseño adaptativo, la velocidad de acceso de Amazon en los dispositivos móviles que el diseño web reactivo anterior aumentó en un 40%. Además, el sitio web adaptable de Amazon ofrece a los usuarios móviles la oportunidad de usar “Compras en línea de electrónica, indumentaria, computadoras, libros, DVD y más sitios completos” en dispositivos móviles, mientras que el diseño receptivo no estará disponible.

2. Apple

El diseño de Apple siempre ha sido conocido por su simplicidad, ya sea que el diseño de su sitio web, tienda o producto refleje su tema limpio. No usar un diseño web receptivo, lo que hace que Apple sufra críticas durante mucho tiempo. Después de todo, una serie de productos inteligentes es una de las razones de la existencia de un diseño receptivo. Sin embargo, hoy, Apple utiliza un diseño web adaptable, lo que también significa que Apple hará cambios con el tipo y la función del dispositivo.

3. Avenue 32

El sitio de compras de lujo en línea Avenue 32 es un modelo con diseño web adaptable. Esta marca cuenta con un diseñador que trabaja con Usablenet para crear una experiencia móvil y de tableta perfecta, intuitiva y muy atractiva visualmente. Según Usablenet, la versión de escritorio del sitio está llena de páginas web ricas en contenido, que incluyen imágenes de productos, detalles del diseñador, apariencia del curador, etc. La marca debe crear una experiencia visual y funcional con este producto de red de escritorio multicanal.

“El uso del diseño web adaptativo permite a Avenue 32 resaltar las funciones de descubrimiento y negocios, lo que permite a los clientes navegar y comprar en cualquier lugar”, dijo Carin van Cuuren, directora de marketing de Usablenet. “Y el pedido de teléfonos inteligentes y tabletas creció un 40%, el tráfico móvil se duplicó y la transacción móvil promedio aumentó un 27%”.

4. USA Today

El diseño web adaptativo permite a USA Today elegir un método adaptativo, ya que la tecnología permite a la marca detectar equipos específicos al considerar el sistema operativo y el tamaño de la pantalla, a fin de proporcionar una experiencia personalizada. Por lo tanto, proporcionar una experiencia rica en el tipo de noticias es más popular que el diseño receptivo.

5. About.com

Todo tipo de sitios de noticias, como CNN, USA Today, han adoptado un diseño web adaptable porque puede cargar rápidamente páginas web y conocer a los lectores de todos los diferentes dispositivos para visitar el sitio.

Los 5 ejemplos de diseño web adaptativo geniales anteriores interpretan por qué el diseño web adaptativo se hizo popular, desde una perspectiva diferente, ya sea la velocidad de acceso web, el impacto de la marca y la experiencia del usuario.

Si lo desea, aquí tiene mi propio medio sobre < 25 Mejores ejemplos de diseño personal y recursos para su inspiración >

Espero que pueda ayudarte, y si te gusta, ¡aplaude este artículo! ¡Muchas gracias!