En la novena clase del curso de diseño web efectista haremos la primera fase de adaptación de nuestros diseños a la versión móvil.
9.1 - Versión responsive de la home
Crearemos un nuevo PSD para cada una de las páginas y veremos cómo reciclar los elementos de los diseños de escritorio. ¡Empecemos por la home!
¡Ya lo veis! Una vez creado el diseño de escritorio, resulta relativamente sencillo generar la adaptación a móvil. Deberemos tocar el CSS y cambiar algunos elementos de orden así como ampliar textos. Recordemos siempre respetar los márgenes, que corra el aire :)
9.2 - Versión responsive de proyecto y conciertos
Vamos ahora ver la versión desponsive de las páginas de proyecto y conciertos, que ya habíamos diseñado en su momento en versión de sobremesa.
9.3 - Versión responsive de la página de contacto
Ahora nos queda la página de contacto, donde veremos como darle formato claro a un formulario para que sea fácil e intuitivo desde móvil.
9.4 - Versión responsive del blog
Y finalmente, la última sección que nos queda: El blog. Vamos a hacerlo tanto para la vista de posts, como para cada uno de ellos, en su vista individual. ¡Venga, que ya acabamos!
Así pues, ya tenemos estas primeras pantallas adaptadas a móvil, no olvidéis enviarlos los diseños a vuestro dispositivo para verlos en tamaño real y hacer los ajustes necesarios.
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de contacto de la Intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso de diseño flipado #1. Introducción
- Curso de diseño flipado #2. Jerarquía y combinación tipográfica
- Curso de diseño flipado #3. Ritmo, composición y columnas
- Curso de diseño flipado #4. TIPS: Claves para el diseño web
- Curso de diseño flipado #5. Diseñando la Home
- Curso de diseño flipado #6. Diseñando una página de conciertos
- Curso de diseño flipado #7. Diseñando las páginas «El Proyecto» y «Contacto»
- Curso de diseño flipado #8. Diseñando el Blog
- Curso de diseño flipado #9. Adaptación a móvil
- Curso de diseño flipado #10. Repaso final