En este curso de diseno responsive aprenderemos a plantear wireframes y disenos para escritorio, tablet y movil con Photoshop.
A lo largo de diez clases practicas veremos como disenar una web responsive desde la fase de planteamiento hasta la entrega final al programador. El objetivo es aprender a tomar decisiones de diseno pensando en distintos anchos de pantalla, no simplemente encoger una web de escritorio.
Empezaremos entendiendo que es el diseno responsive, que saltos debemos tener en cuenta y como se comportan webs reales cuando cambian de pantalla. Analizaremos ejemplos buenos y malos para detectar problemas de jerarquia, lectura, navegacion, composicion y experiencia de usuario.
Despues veremos tips y buenas practicas: menus, margenes, above the fold, composiciones, priorizacion de contenido y decisiones que conviene prever antes de abrir Photoshop. Esta parte nos ayudara a entender que el responsive no es solo una cuestion tecnica, sino tambien una cuestion de criterio visual y funcional.
En la parte de preparacion crearemos mesas de trabajo y guias en 12 columnas para una one page con tres anchos de referencia: escritorio, tablet y movil. Veremos como organizar el documento para comparar versiones y mantener una estructura limpia durante todo el proceso.
A continuacion disenaremos el wireframe de escritorio, planteando una pagina para vender una aplicacion movil. Despues adaptaremos ese wireframe a tablet y a movil, viendo como reorganizar secciones, columnas, tablas de precios, testimonios, textos e imagenes segun el espacio disponible.
Una vez tengamos la estructura clara, pasaremos del wireframe al diseno real. Crearemos la version de escritorio de la web, definiendo estilo visual, imagenes, botones, bloques de contenido y jerarquia. Luego adaptaremos ese diseno a tablet y movil, ajustando tamanos, composiciones y decisiones que cambian cuando el ancho de pantalla se reduce.
Terminaremos con un repaso final para ordenar capas, eliminar elementos sobrantes, revisar que no falte nada y dejar el archivo listo para entregar. Tambien definiremos estados de botones, menus moviles y detalles utiles para que el programador entienda exactamente como debe comportarse la interfaz.
En definitiva, este curso nos ensena a disenar webs responsive con un proceso ordenado, desde wireframes hasta versiones finales para escritorio, tablet y movil. ¡Vamos a ello!