En la séptima clase del curso de diseño web vamos a diseñar las páginas de categorías, de producto y de vendedores, paso a paso.
7.1 - Diseñar la vista de categorías de producto
Empecemos con la vista del listado categorías o productos. Para hacerlo según nuestro wireframe, nos irá fantástico duplicar el .PSD de la home para utilizarlo como base.
En este vídeo seguiremos descubriendo utilidades de Photoshop y crearemos el buscador lateral que nos encontraremos en cada categoría y además aplicaremos los comentarios de la sesión de aprobación de los wireframes para mejorar el SEO.
¡Así pues, ya vemos que cada vez vamos más rápido diseñando! Cuantas más páginas tengamos diseñadas, de más PSDS podremos partir y más elementos tendremos creados. A partir de ahora, se tratará de ir creando elementos nuevos y sobretodo de reciclar antiguos de otros PSDS.
7.2 - Diseñar la ficha de producto
Esta es una página clave para cualquier e-commerce. Es imprescindible que sea limpia y clara y que los elementos clave estén por encima de los preciados "700 píxeles de oro" que ya conocemos bien, o sus variaciones responsive.
En este vídeo seguiremos descubriendo la utilidad de las máscaras de capa y crearemos una ficha de producto partiendo una vez más del PSD de la home.
Cómo veis, también hemos tenido en cuenta los comentarios de la clase 5 sobre el wireframe, en este caso, añadir al cuadro de cantidad de producto los símbolos + y - para ponérselo fácil al usuario. Ahora solo quedará ver si dejamos o no los productos relacionados, pero eso lo puede decidir sin problemas el programador a posteriori.
7.3 - Nuestros vendedores y resultado de búsqueda
En este último vídeo de esta clase veremos cómo crear 3 páginas más a partir de páginas que ya hemos creado anteriormente. Cómo podéis ver, cuántos más PSDS tengamos creados, más rápido avanzaremos en el diseño de este tipo de página ya que podremos reciclar muchos elementos.
¡Ya lo tenemos! ¿Hemos ido mucho más rápido en estas últimas páginas que en las otras, verdad?
Cuándo tenemos que crear distintos documentos con las mismas bases y principios, nos damos cuenta de lo importante que es tener nuestros PSDs bien ordenados por grupos.
Ahora nos faltará el Carrito, Checkout y Mi cuenta, páginas especialmente sensibles (sobretodo las dos primeras) en un e-commerce, en las que aplicaremos las distintas apreciaciones que comentamos con Joan en el proceso de validación del wireframe.
O sea que nos vemos en la siguiente clase. No os la perdáis :)
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