SlideShare una empresa de Scribd logo
1 de 45
Descargar para leer sin conexión
Las 5 claves del diseño de interfaces
1. Investigación
1. Brief
Definición del proyecto
¿De qué trata el proyecto?
El propósito
¿Cuál es el propósito, la causa o creencia que te inspira
a hacer lo que tu quieres hacer?
1. Brief
https://www.youtube.com/watch?v=w4VO4Lt1fqI
Información del mercado
¿En que rubro de negocio de encuentra y en qué
consiste?
¿Qué servicios/productos ofrece?
¿Cuál es la competencia?
1. Brief
Beneficio diferencial
¿Cuál es tu propuesta de valor?
¿Por qué deberían apostar por ti?
¿Qué es lo que te diferencia de los demás?
1. Brief
2. Audiencia
2. Target
Público objetivo
¿A qué personas te diriges?
¿Entre que rango de edad, sexo, demografía?
¿Qué es lo que les gusta?
¿Cómo piensan?
¿Cuáles son sus ambiciones, temores?
¿Qué canales usan?
2. Target
User stories, user flows, user journey
Técnicas para conocer a tus usuarios y el viaje que
realizan a través de la interfaz.
2. Target
2. Target
2. Target
3. Planeamiento
3. Planeamiento
Objetivos
¿Cuáles son las necesidades?
3. Planeamiento
Recursos
¿Qué es lo que necesitas para el proyecto? (logo,
imágenes, fuentes, videos, etc).
3. Planeamiento
3. Planeamiento
Estrategia de Contenidos
¿Qué temas de relevancia le puedes brindar a tus
usuarios?
¿Cuáles serían los puntos de interés?
¿En qué tono te vas a comunicar?
¿Qué términos legales implica?
¿Qué canales de distribución vas a usar?
¿Cómo potenciar el SEO?
3. Planeamiento
Funcionalidad
¿Qué funcionalidades va a tener la interfaz?
4. Arquitectura
4. Arquitectura de la información
Inventario de contenidos
¿Qué páginas va a tener la interfaz?
4. Arquitectura de la información
¿Cómo puedes organizar tu navegación y contenido en
una forma clara y consistente?
4. Arquitectura de la información
Mapa del sitio
4. Arquitectura de la información
¿Cómo las personas organiza ciertos items dentro de
categorías?
Card Sorting
4. Arquitectura de la información
4. Arquitectura de la información
5. Diseño visual
Es un panel de inspiración
5. Diseño visual
Moodboard
5. Diseño visual
5. Diseño visual
Es la idea que encierra el mensaje
Concepto
5. Diseño visual
Paleta de color
5. Diseño visual
Tipografía
¿Cómo será la iconografía? ¿Qué contenido van a
mostrar las fotos? ¿Cómo será el tratamiento de las
fotos?
5. Diseño visual
Elementos visuales
5. Diseño visual
Boceto a mano de la interfaz
5. Diseño visual
Sketch
5. Diseño visual
Esqueleto del diseño
5. Diseño visual
Wireframe
5. Diseño visual
Se define el “look and feel” de la interfaz.
Representación del diseño.
5. Diseño visual
Mock up
5. Diseño visual
Simula la interacción de interfaz de usuario.
5. Diseño visual
Prototipo
5. Diseño visual
¿Cómo los usuarios finales utilizan en realidad lo que
se ha diseñado?
5. Diseño visual
Test con usuarios
5. Diseño visual
5. Diseño visual
comunity

Más contenido relacionado

Similar a comunity

Clase U. del Pacífico 18 de marzo
Clase U. del Pacífico 18 de marzoClase U. del Pacífico 18 de marzo
Clase U. del Pacífico 18 de marzo
Darcy Vergara
 

Similar a comunity (20)

Conversion thursday -_user_experience
Conversion thursday -_user_experienceConversion thursday -_user_experience
Conversion thursday -_user_experience
 
Conversion thursday - User Experience
Conversion thursday - User ExperienceConversion thursday - User Experience
Conversion thursday - User Experience
 
Clase 5 Estudio de la Audiencia
Clase 5 Estudio de la AudienciaClase 5 Estudio de la Audiencia
Clase 5 Estudio de la Audiencia
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Ux Arquitectura de Información
Ux Arquitectura de InformaciónUx Arquitectura de Información
Ux Arquitectura de Información
 
Presentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoPresentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º Curso
 
Shiftt Ricardo Azurdia Atractivo Y Efectivo
Shiftt   Ricardo Azurdia   Atractivo Y EfectivoShiftt   Ricardo Azurdia   Atractivo Y Efectivo
Shiftt Ricardo Azurdia Atractivo Y Efectivo
 
User experience design
User experience designUser experience design
User experience design
 
Ux interfaces persuasivas
Ux interfaces persuasivasUx interfaces persuasivas
Ux interfaces persuasivas
 
Que Es La User Experience
Que Es La User ExperienceQue Es La User Experience
Que Es La User Experience
 
Emprender en Internet
Emprender en InternetEmprender en Internet
Emprender en Internet
 
Taller de Gestión de Proyectos Web
Taller de Gestión de Proyectos WebTaller de Gestión de Proyectos Web
Taller de Gestión de Proyectos Web
 
Interfaces UI
Interfaces UIInterfaces UI
Interfaces UI
 
Arquitectura de información, construyendo UX con bases sólidas.
Arquitectura de información, construyendo UX con bases sólidas.Arquitectura de información, construyendo UX con bases sólidas.
Arquitectura de información, construyendo UX con bases sólidas.
 
Juan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelizaciónJuan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelización
 
Arquitectura de Información y DCU (Diseño Centrado en el Usuario)
Arquitectura de Información y DCU (Diseño Centrado en el Usuario)Arquitectura de Información y DCU (Diseño Centrado en el Usuario)
Arquitectura de Información y DCU (Diseño Centrado en el Usuario)
 
Metodologias y técnicas para llegar al ciudadano
Metodologias y técnicas para llegar al ciudadanoMetodologias y técnicas para llegar al ciudadano
Metodologias y técnicas para llegar al ciudadano
 
Clase U. del Pacífico 18 de marzo
Clase U. del Pacífico 18 de marzoClase U. del Pacífico 18 de marzo
Clase U. del Pacífico 18 de marzo
 
Usabilidad y diseño centrado en la experiencia del usuario
Usabilidad y diseño centrado en la experiencia del usuarioUsabilidad y diseño centrado en la experiencia del usuario
Usabilidad y diseño centrado en la experiencia del usuario
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario
 

Último

S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
eje12345ja
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
ramosrodrigo0710
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
clinivalleu
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
irenecarmona12
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
jose880240
 

Último (20)

LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptxLA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
 
S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
Metodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometroMetodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometro
 
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
 
que son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tiposque son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tipos
 
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTALLA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráfico
 
Presentación acerca del Design Thinking.pptx
Presentación acerca del Design Thinking.pptxPresentación acerca del Design Thinking.pptx
Presentación acerca del Design Thinking.pptx
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
Manual de uso Avanzado para Excel 2016.pdf
Manual de uso  Avanzado para Excel 2016.pdfManual de uso  Avanzado para Excel 2016.pdf
Manual de uso Avanzado para Excel 2016.pdf
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
Informe de Laboratorio 08 - Capacitores e Inductores.docx
Informe de Laboratorio 08 - Capacitores e Inductores.docxInforme de Laboratorio 08 - Capacitores e Inductores.docx
Informe de Laboratorio 08 - Capacitores e Inductores.docx
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
 
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdfBlue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
Curso Suoervición titulación UAP Ing Civil 2024.pptx
Curso  Suoervición titulación UAP Ing Civil 2024.pptxCurso  Suoervición titulación UAP Ing Civil 2024.pptx
Curso Suoervición titulación UAP Ing Civil 2024.pptx
 

comunity