En la quinta clase del curso de diseño web vamos a ver cómo crear el wireframe, es decir, la estructura de la web, para tener la aprobación del cliente.
5.1 - Retícula y wireframe de la home
En esta clase veremos la importancia de la retícula creada con Photoshop mediante reglas, que nos servirán para estructurar toda nuestra página web.
Esta estructura general a la que llamaremos wireframe la desarrollamos también en Photoshop, para familiarizarnos con el programa de Adobe que nos acompañará durante el desarrollo de todo el diseño de nuestra web.
Empecemos pues, por el principio: La Home. Veamos cómo crear el documento, cuantos pixeles debe medir, y cómo crear la retícula base mediante guías. Además, crearemos la estructura básica de nuestra home ubicando los elementos principales.
Así pues, ya vemos que la retícula nos permite crear una estructura totalmente libre y empezamos a descubrir la grandeza de poder hacer un diseño totalmente a medida. ¿Nada que ver con una plantilla ya hecha, verdad? :)
5.2 - Categoría, resultado de búsqueda y ficha de producto
Vamos ahora a por el wireframe de tres páginas clave: Las categorías, los resultados de búsqueda, y la ficha de producto.
Y atención porque veremos como trabajos anteriores nos van a ayudar a diseñar estas nuevas reciclando muchos de los elementos que ya teníamos.
Una vez más, insistimos: Esto es solo la estructura, ¡No os fijéis en el diseño! Simplemente en los elementos que aparecen y su distribución. ¡Seguimos con los vendedores!
5.3 - Nuestros vendedores, ficha del vendedor y cuenta
Turno ahora de ciertas páginas especiales para este proyecto. El apartado de nuestros vendedores y el contenido esencial del apartado de mi cuenta, donde el usuario podrá ver sus datos y pedidos.
Quizás en vuestro proyecto estas páginas no existan, pero en todo caso los principios a aplicar son los mismos, o sea que vamos a por ellos!
Ya veis que durante el proceso de diseño, aunque nos olvidemos una sección, la podemos incluir sin problema alguno. Estamos diseñando todos los wireframes en un orden concreto, pero en vuestro caso podéis optar por el que prefiráis. Y ahora... ¡A por el carrito y el checkout!
5.4 - Carrito y checkout
Para finalizar, en este último vídeo creamos dos páginas clave de nuestra web y de cualquier e-commerce, el carrito y el checkout (proceso final de compra). Ojo con las distracciones que podamos colocar en estas páginas, porque pueden marcar la diferencia.
¡Ya tenemos todo nuestro esqueleto creado! Ahora nos quedará contrastar con el cliente todos los elementos, darle vueltas, pensar, asegurarnos de no dejarnos nada importante y ya estaremos listos para empezar a diseñar nuestra web.
5.5 - Validación del wireframe
Efectivamente, a pesar que parece que ya lo tenemos todo hecho, nos falta el último detalle, que de hecho, no es tan "detalle", sino que es muy clave. La validación del cliente.
En este caso, tenemos la suerte de que el cliente es... ¡Yo mismo! Así que hoy me voy a colar en el curso, para comentar con Álex cada página. ¡Vamos a ello!
Y ahora sí que sí... Con la aprobación del cliente, ya podremos empezar a diseñar detalle a detalle. O sea que ya sabéis lo que toca: Todos a crear la estructura básica de vuestra web, porque en la próxima clase vamos a empezar a "rellenarla". Nos vemos en ella :)
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