En la séptima clase del curso de diseño responsive veremos como convertir nuestro wireframe de escritorio en un diseño real de nuestra web one page.
Para ello, nos hemos inventando una app llamada "TimeYou" destinada a medir el tiempo que dedicamos a las distintas tareas como centro de la web que nos ocupa. Los textos en nuestro diseño seguirán siendo falsos (Lorem Ipsum) dado que la app es 100% inventada para la ocasión.
También definiremos el tamaño de nuestra tipografía, en este caso, una Google Font fantástica llamada Montserrat e integraremos imágenes, iconos y colores para darle a nuestro diseño el toque final.
¡Ya lo veis! El wireframe nos ha servido como base para realizar nuestro diseño aunque algunos elementos han cambiado.
Destacar lo importante y cómo de duplicar la mesa de trabajo de nuestro wireframe de escritorio y crear nuestro diseño sobre esta base eliminando los elementos que nos sobren, pues así optimizamos mucho más nuestro tiempo.
Hemos realizado modificaciones en elementos y alineaciones respecto a las columnas que teníamos definidas previamente y precisamente de eso se trata: ensayo error. El wireframe debe servirnos a nosotros, no nosotros a él.
En la siguiente clase, adaptaremos este diseño al siguiente salto de programación según el ancho de pantalla anteriormente comentado.
Todos los capítulos de este curso:
- Curso de diseño responsive #1. Introducción
- Curso de diseño responsive #2. Tips de diseño responsive
- Curso de diseño responsive #3. Mesas de trabajo y guías
- Curso de diseño responsive #4.Wireframe web de escritorio
- Curso de diseño responsive #5.Wireframe Web Tablet
- Curso de diseño responsive #6. Wireframe Web Móvil
- Curso de diseño responsive #7. Diseño Web de Escritorio
- Curso de diseño responsive #8. Adaptación Tablet
- Curso de diseño responsive #9. Adaptación móvil
- Curso de diseño responsive #10. Repaso final y menús