1. Leer los siguientes documentos:
⚠️ La lectura de estos documentos es importante para el desarrollo del resto del taller
2. Consulte dos empresas que sean exitosas por seguir las técnicas y metodologías vistas en los documentos.
Presente un breve resumen de las empresas, por que se destacan y mencione un producto diseñado usando DCU o design thinking. Incluya en las diapositivas, videos cortos, pagina web, imágenes, entre otros.
3. Identifique dos empresas o productos que hayan fallado por no seguir una metodología de diseño.
Incluya una dispositiva por producto y responda:
¿Por qué cree que no tuvieron exito?
4. Teniendo en cuenta los documentos, seleccione de la siguiente pagina web:
Design Toolkit
Cinco herramientas que usaría en un proyecto de diseño de un sitio web, en una diapositiva por
recurso explique
ventajas y desventajas de su uso.
⚠️ Búsque recursos diferentes a los wireframes y al método persona.
5. Finalmente en dos o tres diapositivas explique:
Tinker Hatfield: Footwear Design
The Inventor: Out for Blood in Silicon Valley
Simon Sinek: Cómo los grandes líderes inspiran la acción
Existió en Medellín - Lime Scooter
Es un exito en varios países - Lime Bike
Innovación y diseño en sector tradicional - Nu bank
¿Inteligencia artifical, es tecnología nueva? - Dr Watson IBM
I dig “write nonsense.” That’s a good suggestion and a great way to brainstorm. No idea is a bad idea. Write it down even if you think it’s dumb. Flushing out ideas that way will help you come up with ALL the possibilities.
- Ian SplaterHerramientas manuales y digitales y ejemplos de su uso. Para crear aplicaciones moviles, web, de escritorio entre otras. Siguiendo una metodología donde predomina el usuario, y donde intervienen actores como: Diseñadores de experiencia UX, Diseñadores de interfaz gráfica UI, Diseñadores de experiencia cliente CX, Maquetadores, Frontends y el resto de los roles que hacen parte del flujo de trabajo de una aplicación.
1. Mirar video, sobre el proceso de creación de un producto digital usando DCU
2. Tomar de punto de referencia esta presentación para realizar la identificación del usuario
3. Utilizando la guía que aparece a continuación, elabore dos user persona, perteneciente al
target de segmentación del usuario escogido.
Guía creación
user persona
Incluya el formato para explicarlo en clase.
4. Diseñar por medio de wireframes, un sitio, aplicación, juego, landing page,comic digital, infografico interactivo, entre otros. Que tenga como mínimo 10 secciones diferentes. Puede incluir login, registro, recordar contraseña, créditos, acerca de, contactos, perfil. Y otras secciones internas...
Incluya dos secciones que tengan una interacción específica con el usuario, tenga en cuenta
considerar incluir: video, sonido, animación, ilustración, infográfia, tipografías, etc.
Como mínimo en dos secciones se debe evidenciar un mayor esfuerzo en la implementación de la
experiencia e interacción con el usuario.
Tenga presente que el uso de la interfaz gráfica (UI) puede cambiar según el tamaño del dispositivo, hay contenido que se puede ocultar o mostrar según el ancho de la pantalla y que todo es posible desde la creatividad teniendo presente el alcance técnico de la herramienta.
5. Presente los resultados en una presentación (entrega 1), incluya wireframes manuales (fotografías), wireframes digitales en figma. De la primera versión en formato móvil.
Diseño aplicación para tablet y diseño en alta del look gráfico de la versión móvil del sitio.
En este taller, los estudiantes trabajarán en la integración de librerías y frameworks en sus proyectos.
Apoyarse de tailwind, y agentes de IA para actualizar las vistas de la aplicación, según se requiera el uso de los paquetes en mención.
Recuerde que darkmode y lightmode, debe funcionar en toda la aplicación.
Los criterios de evaluación para este taller son los siguientes:
Este taller es un desafío para aplicar habilidades del diseño adaptable y desarrollo web moderno. El objetivo es seleccionar una plantilla de ThemeWagon y convertirla en una aplicación React funcional, utilizando Shancn y Tailwind CSS para una interfaz de usuario moderna y responsiva.
Taller individual
npm create vite@latest mi-proyecto-react --template reactcd mi-proyecto-react && npm installnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -pnpx shadcn-ui@latest initSigue las instrucciones en consola para configurar Shancn/ui
El objetivo de esta entrega es consolidar las habilidades en diseño y desarrollo adaptable. Deberán traducir los prototipos de Figma a una aplicación funcional en React, prestando especial atención a la calidad de la interfaz y la experiencia de usuario en diferentes dispositivos.
Antes de pasar al código, es crucial finalizar la etapa de diseño para asegurar una visión clara del producto final en todas sus vistas.
Es hora de materializar los diseños. Se espera un código limpio, componentizado y que haga un uso efectivo de las herramientas del curso.
La documentación y la comunicación de los avances son tan importantes como el desarrollo técnico.
Publicación en producción ejercicio terminado.