DESCARGA LOS ARCHIVOS DE EJERCICIO AQUÍ

Proyecto de la clase 01: página de inicio de Wireframe y página de contacto

Revisa el brief y la persona del cliente: muebles de Maynooth.
1. Archivos de ejercicio > Proyectos de clase 1 > Brief: Maynooth Furniture.pdf
2. Archivos de ejercicio > Proyectos de clase 1 > Persona - Maynooth Furniture.pdf
Página de inicio
1. Con las habilidades que hemos aprendido hasta ahora, enmarca la página de inicio con la función de página de inicio que se enumera en el resumen:
  1. Logo
  2. Nav
    1. Sala de estar
    2. Dormitorio
    3. Cocina y comedor
  3. Cesta de la compra
  4. Contacto
  5. Caja de búsqueda
  6. Hero Slider para el regulador/control deslizante
  7. vii.Nuevo en la tienda
  8. viii.Ideas de inspiración
  9. Ofertas de liquidación
  10. Pie de página
Contáctanos
1. Crea una segunda mesa de trabajo con el nombre de «contáctanos».
2. Puedes usar ejemplos de la plantilla XD de 'cables' o crear tu propia versión. Crea un formulario de contacto simple.
3. Busca ejemplos en otros sitios.
Crea JPG del trabajo terminado.
1. Archivo > Exportación de todas las mesas de trabajo > Jpeg
Comparte tu trabajo en cualquiera de estos métodos o en todos:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 02: prototipo

Conecta tu página de inicio a tus mesas de trabajo de contáctanos.
Tu página de contacto puede ser una página o un modal emergente.
Toma una captura de pantalla de tu Prototipo.
1. Asegúrate de estar en el modo Prototipo.
2. Edición > Seleccionar todo
3. Toma capturas de pantalla
  1. Mac
    1. CMD + Shift + 4
    2. Luego, arrastra una caja por tus mesas de trabajo.
    3. Tu captura de pantalla aparecerá en el escritorio.
  2. PC
    1. Clave del logotipo de Windows + PrtScn
    2. O la clave del logotipo de Windows + Ctrl + PrtScn
      1. O la clave del logotipo de Windows + Fn + PrtScn
    3. Tu captura de pantalla aparecerá en una carpeta llamada “Screenshots” dentro de tu carpeta “Imágenes” predeterminada.
Comparte tu trabajo en cualquiera de estos métodos o en todos:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 03: símbolos y cuadrículas de repetición

Despeja tu panel de activos de cualquier activo no intencional.
Haz que tu navegación y tu pie de página sean un símbolo con nombre en tu panel de activos.
Crea una nueva mesa de trabajo llamada ‘Página de categoría: sala de estar’
Usa tus habilidades de wireframing actuales, incluida la cuadrícula de repetición, para crear una página en la que se enumeran todos los productos que aparecen en esa categoría.
1. Enumera las cosas que necesitas en esta página. Si hay tarjetas, qué debería estar en ellas. ¿Necesita una maqueta de navegación izquierda como la maqueta de instructorHQ? ¡Recuerda tener a Katherine en mente!
2. Busca ideas sobre cómo puede funcionar una página de categoría en los sitios web de comercio electrónico existentes.

Por ejemplo: www.ikea.com, www.dfs.co.uk, www.habitat.co.uk, www.amazon.com, www.ebay.com.

Crea una nueva mesa de trabajo llamada ‘Página de producto’
1. Con tus habilidades de wireframing actuales, crea una página que muestre detalles sobre el producto final.
2. Como en el caso anterior, haz una lista de todas las cosas que crees que deberían estar en esta página para ayudar a Katherine a realizar una compra.
Crea prototipos de todas las páginas.
1. Conéctalos a todos en una maqueta de trabajo.
Toma una captura de pantalla y compártela con las opciones que se mencionaron anteriormente.
1. Después de compartir tu trabajo, mira las versiones de otras personas y ofrece alientos y críticas constructivas.

Proyecto de clase 04: comentarios de Wireframe

Crea un prototipo público.
1. Dale un nombre: Maynooth Prototype V1.0
Comparte el enlace con alguien que conoces y pídele que te deje un comentario.
Graba tu mismo haciendo una demostración básica.
Comparte tu enlace y video en uno de estos enlaces o en todos ellos:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores
Asegúrate de comentar la maqueta de otra persona para que comprendas cómo es ser el cliente. Alguien hará lo mismo por ti para que puedas ver cómo es recibir comentarios.

Proyecto de clase 05: Moodboard

Con los muebles de Maynooth en mente, crea un panel de inspiración para ideas de estilo, fuentes, color y diseño.
Añade la tabla de humor a tu mesa de trabajo o niiice.io.
Toma una captura de pantalla de tu panel de inspiración.
Comparte tu panel de inspiración en uno de estos paneles o en todos ellos:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 06: colores

Opción 1: uso de los colores existentes.
1. Importa el logotipo de Maynooth.
  1. Archivos de ejercicio > Proyecto de clase 1 > Logos > Logo-Maynooth-Option1.svg
2. Añade los colores del logotipo a tu panel de Assets.
3. Añade los colores del logotipo a tu panel de muestras.
4. Reordena ambos conjuntos de colores.
Opción 2: uso de tus propios colores.
1. Elige tus propios colores y actualiza el logotipo.
2. Importa el logotipo de Maynooth.
  1. Archivos de ejercicio > Proyecto de clase 1 > Logos > Logo-Maynooth-Option1.svg
3. Desagrupa el logotipo.
4. Actualiza con tus propios colores.
Compartir
1. Solo comparte tu trabajo en el momento si has elegido tus propios colores.
2. Haz capturas de pantalla de tu nuevo logotipo de color y compártelo:
  1. Sección de signaciones de este sitio web
  2. Añade los comentarios de la página.
  3. Redes sociales y etiqueta de Dan
    1. Instagram: @bringyourownlaptop
    2. Twitter: @danlovesadobe
    3. Grupo de Facebook aquí.
  4. Todos los â˜º anteriores

Proyecto de clase 07: texto y buttons

Crea tu pila de texto.
1. Título 1, título 2, etc.
Añade tus estilos de personajes.
Crea tu texto de héroe (texto del encabezado 1 y del cuerpo).
1. Como tu sitio es un sitio de comercio electrónico, te darás cuenta de que el espacio de héroe se centra más en ofertas especiales y promociones y menos en el desarrollo de la marca, por lo que tendremos una imagen de héroe de temporada.
  1. Por ejemplo, la primavera, Navidad, el Black Friday, etc.
2. Busca inspiración en los sitios de muebles existentes.
Crea un botón en la sección de héroe
1. Lo que se ajuste a la promoción que has decidido usar.
  1. Por ejemplo, comienza a comprar, compra ahora, más detalles.

Proyecto de clase 08: dibuja tus propios iconos

Con cualquiera de las herramientas aprende hasta ahora en el curso (herramienta pluma o Boolean) crea:
1. Icono de la cuenta.
2. Icono del carrito de compras.
3. Más un icono más de tu elección.
Agrégala a tu maqueta de muebles de Maynooth.
Captura de pantalla de los iconos de tu maqueta y comparte.
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 09: maqueta completa de Hi Def

¡Este es uno grande para ti! Hemos aprendido mucho sobre la creación de imágenes y gráficos. Ahora es el momento de poner en práctica las herramientas para convertir tu maqueta en un diseño terminado. Quiero que uses todas las herramientas y técnicas que se enumeran a continuación en tu diseño de muebles de Maynooth. Serás mejor en algunas cosas que otras. Quiero que te centres en las cosas en las que no eres bueno en â˜º

Compite con las vistas de escritorio del sitio web de sitio web para las siguientes páginas. Trabajaremos en las versiones para móviles o de la aplicación más adelante en el curso. ¡Recuerda que estás diseñando para Katherine!
1. Página de inicio
2. Página de categoría, por ejemplo, Sala de estar
3. Página del producto, por ejemplo, el sofá de 3 plazas
Asegúrate de incluir todas las características del resumen (Archivos de ejercicio > Proyecto de clase > Brief: Maynooth Furniture.pdf).
1. Nota: si hay algo en la lista que no entiendas, el significado de la nota, simplemente ignóralo y sigue adelante. Por lo general, el cliente te dará una aclaración, pero es probable que no pueda responderte lo suficientemente rápido y que yo te sostenga.
Usa al menos una instancia de las siguientes herramientas o técnicas en tu diseño.
1. InDesign
  1. Crea al menos un objeto/gráfico en InDesign y tráelo a tu maqueta de XD.
2. Unsplash
  1. Descarga al menos 1 imagen de Unsplash para usar en tu diseño.
  2. Añade la imagen a la biblioteca de CC a través de Photoshop, Illustrator o InDesign y encuentra imágenes visualmente similares.
    1. Depende de ti si usas la imagen de Adobe Stock con marca de agua en tu diseño, pero asegúrate de hacer capturas de pantalla de tus resultados en la biblioteca de CC y de compartirlos con tu propia tarea.
3. Photoshop
  1. Abre una de tus imágenes de Unsplash en Photoshop.
  2. Agrégalo a tu biblioteca de CC.
  3. Luego agrégalo a tu maqueta de XD.
  4. Luego, abre el elemento de la biblioteca de CC (no el original)
  5. Recuerda, para abrir el elemento de la biblioteca de CC en XD, necesitas abrir la biblioteca: Archivo > Abrir bibliotecas de CC, haz clic derecho en él y elige ‘editar’.
  6. Ajusta la imagen en Photoshop
    1. Por ejemplo, enmascaramiento, nivel/curvas, filtros, escala consciente del contenido: lo que sea.
  7. vii.Guarda y cierra la imagen actualizada y verla actualizarse en XD… eventualmente.
4. Enmascararás al menos una imagen.
5. Ajusta el desenfoque u la oscuridad de al menos una imagen.
  1. Tal vez como una imagen de fondo, como lo hicimos para la página de preguntas frecuentes.
Captura de pantalla de la página 3 de tu maqueta y compártela.
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 10: aplicación / sitio web para móviles

El cliente ha pedido una versión de APP de su sitio de comercio electrónico.

Crea versiones para móviles de las 3 páginas que has creado para la vista de escritorio del sitio web.
1. Página de inicio
2. Página de categoría, por ejemplo, Sala de estar
3. Página del producto, por ejemplo, el sofá de 3 plazas
Como esta es una aplicación, quiero que crees una página de inicio de sesión y registro.
No te preocupes por los prototipos en esta etapa. Veremos los prototipos específicos para dispositivos móviles en los próximos videos.
Captura de pantalla de la versión móvil de tu maqueta y tu contenido.
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 11: microinteracciones

Con tu proyecto de muebles de Maynooth para crear al menos 3 ejemplos de tus micro interacciones. Puedes usar cualquiera de las técnicas aprendidas hasta el momento en el curso o para crear las tuyas.
Graba tu prueba de las animaciones.
Crea una versión GIF animada de tu prototipo
1. Puedes usar Adobe Media Encoder o https://ezgif.com/video-to-gif
Comparte tu GIF animado:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.
4. Todos los â˜º anteriores

Proyecto de clase 12: pruebas de usuarios

Quiero que todos hagan una prueba moderada. Esto se hace en persona. Toma notas y cambios en función de sus comentarios.
Regístrate para obtener una cuenta de prueba con usertesting.com y prueba tu diseño de Maynooth.
En este ejercicio, quiero que compartas tu experiencia con todos en lugar de con capturas de pantalla o prototipos. Cuéntanos cómo fue. Lo que aprendiste. lo que harías distinto la próxima vez. Haz preguntas.

Proyecto de clase 13: ciclos de rugido

Este es uno grande. Puede ser tan grande o pequeño como quieras tomarlo. Sería un proyecto perfecto para tu portafolio. Usa todas las habilidades que has aprendido en el curso para crear un sitio web y/o una aplicación móvil para ciclos de Roar.

Revisa el brief y la persona del cliente: Roar Bikes.
1. Archivos de ejercicio > Proyectos de clase 2 > Brief: Roar Bikes.pdf
2. Archivos de ejercicio > Proyectos de clase 2 > Persona - Roar Bikes.pdf
El logotipo está disponible en Archivos de ejercicio > Proyecto de clase 2 > Logo
Necesitarás crear Wireframes y prototipos de Hi Fidelity.
Las fuentes, los colores y las imágenes dependen de ti.
Haz que prueben tus prototipos de alta fidelidad.
Crea y comparte:
1. Pisos
  1. Capturas de pantalla de tus versiones de wireframes y de alta fidelidad.
2. Enlaces públicos a tus ejemplos de Hifi.
3. Maquetas in situ
  1. Ejemplos de tu trabajo en el lugar que se está usando.
  2. Como las versiones que hicimos con objetos inteligentes en Photoshop con los gráficos de Adobe Market > For Placement.
4. Micro interacciones x3
  1. Me gustaría que animaras cualquiera de tus micro interacciones o transiciones de la mesa de trabajo y que las compartieras a través de MP4 o Gif animado
  2. Puntos adicionales: ejemplos de After Effects o Proto Pie.
Comparte tu trabajo en cualquiera de estos métodos o en todos:
1. Sección de signaciones de este sitio web
2. Añade los comentarios de la página.
3. Redes sociales y etiqueta de Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo de Facebook aquí.

Todos los â˜º anteriores