En la octava clase del curso de diseño web vamos a diseñar las páginas de carrito, la del checkout (pedido) y finalmente la de "Mi cuenta".
8.1 - Diseñar la página de "Mi cuenta"
Empecemos por la página de "Mi cuenta", en la que el usuario podrá descargar sus facturas y modificar sus datos.
Veremos cómo el uso de los grupos de capas en Photoshop adquiere una gran importancia, pues nos permite diseñar páginas con varias pestañas en un mismo documento .PSD, y veremos cómo será el flujo de trabajo.
¡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. Ya se sabe que el reciclaje es clave ;)
8.2 - Diseñar la pagina de carrito
En este caso, el wireframe nos sirve 100% como base. Reciclaremos todos los elementos del PSD y cambiaremos la tipografía. También aplicaremos lo que comentamos en la lección 5: Eliminar el cupón de descuento y que solo sea aplicable para los usuarios que vienen desde una URL concreta.
Y por último, volveremos a ver la grandeza de los iconos y su gran valor: Facilitarnos muchísimo la comunicación directa con el usuario.
Bien, éste ha sido sencillo ya que la base del wireframe era muy buena. Es la ventaja de trabajar con PSDs que ya tienen la retícula buena: En muchos casos podremos aprovechar sus elementos. Ahora solo nos falta el checkout y ya tendremos lista la primera versión de nuestro diseño web.
8.3 - Diseñar página de checkout (pedido)
Ahora terminaremos con la página más sensible de nuestro Marketplace: La del pedido (o checkout, en Inglés).
Aplicaremos los comentarios que vimos en la fase de aprobación del wireframe y convertiremos el checkout en un elemento sencillo y vertical. Además eliminaremos el menú y el buscador de la cabecera para evitar distracciones para el usuario.
Como veis, cuantas más páginas tenemos diseñadas, más rápido avanzamos en el diseño de las siguientes y cuanto más definido y concreto tengamos el wireframe, más disfrutaremos y menos nos encallaremos en el proceso de diseño de nuestra web.
Ahora, vamos a dejar dormir el diseño, lo vamos a revisar el día siguiente, pediremos opinión a terceros y lo iremos mejorando.
Solo nos quedará la versión móvil, muy importante hoy en día ya que depende del sector tiene más de un 50% de usuarios que entran en su web desde estos dispositivos. ¡A por ella! 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