En la novena clase del curso de diseño web vamos a diseñar todo nuestro web en versión responsive, algo vital en cualquier proyecto.
Ahora que ya tenemos el diseño de nuestra web en su versión de escritorio, no debemos caer en el error de descuidar la adaptación a dispositivos móviles. Recordemos que dependiendo del sector, el tráfico desde éstos puede llegar a ser de más del 50%. ¡Vamos a ello
9.1 - Diseño home móvil
En este primer vídeo nos centraremos en la home, la página de llegada a nuestra web de muchos de nuestros usuarios.
Descubriremos que crear el diseño móvil para una web debería ser el mismo proceso que el de crear una app. Debemos pensar una experiencia gráfica para el usuario, ponérselo todo muy fácil y sobretodo, ver cómo queda nuestro diseño en una pantalla de móvil real.
Así pues, ya vemos que no basta con mostrar y ocultar elementos de nuestra web y ponerlos uno debajo del otro, sino que debemos pensar en una cabecera intuitiva, seleccionar los elementos que queremos mostrar y sobretodo, no olvidarnos de dejar espacio entre elementos. ¡Que corra el aire!
9.2 - Menú móvil
Hora de ver cómo será el menú de nuestra web en su versión móvil. Como veréis, Álex es muy fan de fondos chillones y letras grandes y claras.
Una vez más, pensemos el menú diferenciando los diferentes tipos de enlaces que colocaremos en él y dejemos clara esta diferencia a nivel visual. ¡Vamos a ello!
Como veis, es importante hacer los textos grandes y claros. No tengamos miedo a ello. Muchas veces pecamos de hacer los textos de menú demasiado pequeño, pero debemos pensar, una vez más, en el contexto, en que nuestro diseño se va a ver en un dispositivo móvil y que el usuario debe verlo claro y al momento.
9.3 - Página de categoría y resultados de búsqueda
En la adaptación de estas dos páginas tan parecidas descubriremos cómo resolver el widget de filtros en la adaptación móvil.
Y a también, una vez más, veremos la importancia de los grupos de capas en Photoshop y la posibilidad de ponerle color a nuestras capas para hacerle la vida más fácil al programador que desarrollará nuestra web.
¡Ya lo veis! Copiar, arrastrar y seguir adaptando… Pero sin olvidar que estamos creando una experiencia móvil, los filtros no tienen nada que ver los de nuestra versión móvil con los de nuestra versión de escritorio. ¡De eso se trata! De adaptarse al contexto.
9.4 - Ficha de producto
Ahora vamos a por una de las páginas más importantes: La ficha de producto. Veremos en este caso como no nos limitamos a colocar el botón de comprar (CTA) en la parte inferior, sino que creamos una barra inferior que se mantiene fija para el usuario a medida que va haciendo scroll en nuestra web.
Así pues, no es simplemente arrastrar elementos de nuestra versión de escritorio a nuestro .psd móvil, sino que debemos pensar en el usuario, en hacerle la vida más fácil.
9.5 - Nuestros vendedores y ficha del vendedor
En este vídeo veremos cómo reciclar el .psd móvil de Categoría para crear la ficha del vendedor. También crearemos la página de Nuestros Vendedores en la que utilizaremos dos columnas para exponer logos y productos a la venta de los distintos vendedores.
Como podéis ver, aprovechar el trabajo que ya tenemos hecho nos ahorra tener que volver a empezar para cada vista de nuestro site. ¡Venga, enfilamos ya la recta final!
9.6 - Mi cuenta
Toca ya la adaptación de la página Mi Cuenta, en la que veremos como un menú vertical lo resolvemos en horizontal para nuestra versión móvil.
Una vez más, no se trata de colocar un elemento debajo del otro, sino de pensar en la experiencia de usuario. En este vídeo también utilizaremos los grupos de capa para crear distintas secciones dentro del mismo .psd.
¿Os dáis cuenta de la diferencia? No es "apilar el contenido uno debajo de otro", sino OPTIMIZARLO, modificando todo lo necesario.
9.7 - Carrito y checkout
Finalmente, llegamos a la última parte de nuestra adaptación responsive. Las páginas más sensibles e importantes de un e-commerce: El carrito y el checkout. Adaptaremos una vez más los elementos que ya tenemos en nuestro diseño de escritorio para finalizar nuestra adaptación móvil.
¡Hasta aquí la adaptación móvil! Si habéis visto todos los vídeos de esta clase, os merecéis un descanso y un aplauso. Y os podemos decir sin duda alguna, que habéis sido testimonios de cómo es el proceso de creación real, paso a paso :)
Ya estamos listos para el repaso final, la presentación al cliente y la exportación para entregar al programador. ¡Lo vemos en la siguiente clase!
Todos los capítulos de este curso:
- Curso de diseño web #2: Anatomía y claves
- Curso de diseño web #1: Introducción al diseño web
- Curso de diseño web #3: Esquema de una web
- Curso de diseño web #4: Photoshop
- Curso de diseño web #5: Wireframe
- Curso de diseño web #6: Diseñando la home
- Curso de diseño web #7: Diseño de categoría, ficha de producto y vendedores
- Curso de diseño web #8: Diseño de carrito, checkout y Mi cuenta
- Curso de diseño web #9: Adaptando nuestro diseño a móvil
- Curso de diseño web #10: Repaso final, presentación y exportación