En mi caso denominé al proyecto “Pika”.
Aprender las bases de un proyecto de Diseño de Interfaz y UX
Qué aprenderás sobre el diseño de interfaces UI y UX
¿Qué es user experience?
Qué implica ser un diseñador de interfaces
Básicos de Diseño
Principios de Gestalt y UX
Principios de Usabilidad y Heurística
Kickoff del proyecto del curso
Realizar la investigación inicial de un proyecto UI
Tipos de investigación
Entender el problema: ¿Qué queremos solucionar?
Benchmarking
User Research: Encuestas
User Research: Entrevistas
User Personas
User Journeys
Organizar la información y bocetar los primeros wireframes
Análisis de Interfaces
Introducción a la Arquitectura de la Información
Patrones de UI
Wireframes: comienza en papel
Guerrilla testing con Paper Prototyping
Wireframes digitales en Sketch
Diseñar los detalles de nuestra interfaz de producto
Mood Board
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
Diseño Responsivo y Adaptativo
Design System
User testing
Entregar el diseño de la interfaz e iterar
Cómo entregar para desarrollo: Zeplin
Cómo seguir probando tu interfaz: A/B Testing con Optimize y HotJar
Cierre del curso
Mentorías expert
Diseño UI en vivo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
22/29Recursos
Es importante recordar los principios de la Gestalt y los de usabilidad al diseñar. Los empty states son aquellas pantallas que muestran cuando algo que el usuario ha intentado encontrar o hacer no da un resultado, por lo que hay que notificar con mensajes concretos y claros que la acción no es posible. Después, se debe decir cómo continuar con el flujo o si desea realizar alguna otra acción relacionada.
No hay que dar mensajes que puedan parecer sarcásticos, o malintencionados de alguna forma. Lo ideal (y lo recomendable) es tener un tono y voz amigable y ameno, que incluso puedan aminorar las malas experiencias con sugerencias y opciones que inviten a seguir navegando por el sitio.
Comenzar un aprendizaje serio de alguno de los software de prototipado digital, es altamente recomendable. Aquí en Platzi se encuentran los cursos de las más populares:
Aportes 101
Preguntas 8
Ordenar por:
Mi proyecto se llama NewLife lo desarrolle en Adobe XD
Les comparto mis avances, espero tener algún feedback 😃
Home
Búsqueda
Interna - Detalle
Blank
Contacto
Les comparto mi diseño
MilDepas
Home
Resultados
Detalle
Empy State
Hola! Les comparto el proyecto que desarrolle 😃
https://www.behance.net/gallery/94469253/UIUX-UHOME-Web-Case-study
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
El proceso de pasar de un wireframe a un prototipo de alta fidelidad no es tan laborioso, una vez tengamos nuestros wireframes, moodboard, definición de color e identidad de marca podremos ir adaptando el wireframe que creamos anteriormente.
Algo que tenemos que tener en cuenta al crear la interfaz final es que no solo se trata de crear la interfaz y el happy path, tambien hay que pensar en errores y empty states.
Es importante que al escribir instrucciones, contenido, copy hagamos una revisión después para asegurarnos de que se entiende
Este es mi diseño
Bogar: Busca tu hogar ideal
Este es mi proyecto:
Holaa!, Así fue como me quedaron mis interfaces!!!
…
…
…
Les comparto mi diseño amigos!
_
_
Mi proyecto se llama Aparti!
Les comparto mi aporte…
Comparto un ejemplo, no me basé en inmobiliaria, hice un ejercicio de agencia de viajes ✈️
.
Dejo mi flujo Real Estate Inhome en Figma. Home | Búsqueda de propiedades | Propiedad en específico.
Puedo usar entonces Adobe XD en vez de Sketch… o es un disparate lo que estoy proponiendo??? …
Un empty state es aquel estado en el que se arroja al usuario un aviso que no se pudo encontrar información con el dato ingresado, o que no hay resultados de búsqueda para ese nombre que tecleó. Mientras que los mensajes de error le informan al usuario que agregue otra letra, número o símbolo faltante para que pueda tener resultados o se pueda registrar en un formulario, por ejemplo. En ambos casos, y siguiendo los principios de Usabilidad y Heurística, en todo momento se debe informar al usuario sobre lo que sucede y cómo puede resolver su problema de búsqueda o registro.
El link de Ejemplo Mockups que esta en la sección de archivos y enlaces no es público, pide solicitar acceso. Espero puedan corregir ese detalle. Saludos!
¿alguna página para encontrar imágenes que se puedan utilizar en páginas web?
Proyecto Reti (Adobe XD)
Con este curso estoy terminando el nivel básico de la carrera de UX. Sin embargo es un área totalmente nueva para mí. Nunca supe de sketch, adobe xd, etcétera. Me encanta haber conocido este nuevo mundo y estos nuevos aprendizajes.
Comparto mi trabajo hecho en Adobe XD.
.
Hola Todos, estos son mis avances de la clase… 😉
Mi proyecto Stay up
Para este proceso, les recomiendo mejor usar figma, ya que te permite hacer componentes prueba mas solidos y replicables.
Home
Results
Details
Este es mi diseño
Homerent: Busca el lugar perfecto para ti.
Wow, hace unas semanas no sabía usar Sketch y con este curso aunque no fue a detalle aprendi y creo logré hacer algo cool ya que nunca había hecho esto. Falta mucho por mejorar pero fue un excelente inicio
HOME
Excelente aporte respecto a la importancia de los empty states,mensajes de error y notificaciones tomando en cuenta conceptos anteriores como: los principios de usabilidad gestal, tipografía y color que se aprendió anteriormente.
Muy buena la recomendación de prestar atención a los empty states, siempre cometemos el error de emocionarnos con el diseño y olvidar esas pantallas vacías o errores que pueda encontrar el usuario.
1.-
2.-
3.-
4.-
Este es mi prototipo, lo realicé en Figma ✍🏼
Excelente clase, en mi caso use Figma, recomiendo hacer Atomic design para ir componiendo la interfaz, desde que hacemos los wireframes, es decir ir armando componentes desde el elemento mas pequeño de nuesta interfaz (Atom) hasta componentes mas complejos que generalmente son la union de atomos, ( Moleculas y organismos) medio complicado explicar por aqui pero si quieren saber mas me pueden escribir o googlear “Atomic design”, pueden ir armando su ui kit, al principio es muy tedioso y lleva tiempo pero despues ese ui kit les sirve para armar con consistencia el resto de las interfaces.
Saludos amigos!!
Martín Coronel
UX/UI Design
Mi resultado!
Les comparto mis avances, utilicé Figma
Les comparto mi avance
Hola, les comparto mi proyecto!
Es importante seguir el proceso de ir desde un wireframe, hacer varias iteracciones y despuès llegar a un resultado de interfaz final, exelente leccion
Esta clase creo que se complementa muy bien con las anteriores, integrando conocimiento que anteriormente se pudo considerar como muy suelto.
Comparto mi Wireframe realizado en canvas:
Les comparto mis Wireframes!!
Buena tarde subo mi proyecto con lunacy
Estos dos links han sido borrados de los blogs 😦https://blog.prototypr.io/why-empty-states-should-never-be-neglected-40592ddc980b
https://blog.prototypr.io/why-empty-states-should-never-be-neglected-40592ddc980b
mi aporte:
Aparta
Mi aporte:
Acabo de volver a este curso, hice una pausa para tomar el curso de Adobe XD
hola dejo aqui mi High hecho en figma. Lo hice en Ingles.
El home
Lo hice interactivo, al la persona hacer hiver sobre las cards saldra la informacion del inmueble, justo asi
Luego tengo la seccion de busqueda
Por ultimo las especificaciones
Listo, así quedó mi proyecto
Mi diseño
Home:
Busqueda:
Detalle del departamento:
Así va mi proyecto!!
Mi aporte: Hecho en Figma
Gracias
Hola! les comparto mi propuesta 😀
Hola [email protected] esto es lo que hice, cualquier apunte o critica en pro de mejorar, será bienvenida. 😄
[](file:///C:/Users/Usuario/Desktop/Web%201920%20%E2%80%93%201.png)
PIKArona, jajaja XD.
Prueba el prototipo aquí
Paper Plane
<h3>Home</h3>
optimizado menos ventanas es mas
Muy buenos artículos sobre Empty States en los Archivos y enlaces compartidos!
No olviden leerlos =)
Excelenet el articulo de los EMpy states 😃
Bueno, aqui esta mi mockup. Espero les guste:
Home:
Results:
Details:
Map:
Map details:
Chat:
contact:
Manejos de errores
No Results:
Contact Error:
Hola amigos, les compartó el prototipo de mi interface en Adobe XD: https://xd.adobe.com/view/21ca9745-df3d-4a3d-a140-7ebd2594ffac-7499/
quedo muy cool la interfaz principal, hasta me estan dando ganas de hacerla real, seria buena practica de maquetacion web
Mi prototipo, intente hacer una pagina de como responderia el sistema al encontrar un error en la busqueda
HOME
BUSQUEDA
RESULTADO
MESAJES DE ERROR
EMPTY STATES
SIN MAPA
Hola chicos!! aqui mi aporte 😄
PD: no sabia mucho de XD
Les muestros mis avances de las pantallas principales de la web, este proyecto lo llamé welcomehome
Hey no dejaste el adjunto de la interfaz, solo los links de los cursos
Mi proyecto se encuentra en esta url: https://xd.adobe.com/view/8b5735bb-0509-4f0d-ba5e-c9131d619d3f-de04/
Espero les guste 👌
Gracias, muy buena clase!! hay que guiarse mucho de las demas paginas para aprender, luego después si romper esquemas
Ahora sí!
mi primer intento prototipo digital
Este prototipo no es referente a la clase pero es un proyecto que estuve realizando para la empresa que me contrató a la par que me veia este curso. Actualmente ya se encuentra en estado de desarrollo junto al equipo de backend con Vue.Js y Laravel. Pueden checarlo aqui https://xd.adobe.com/view/ac0c34b4-e6e4-480f-bd8d-72f62aeca065-f95f/?fullscreen
Yo le puse de nombre morada, espero y les guste
MI proyecto se llama Urent:
Utilicé Figma para realizar el UI
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.