No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones

22/29
Recursos

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:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

En mi caso denominé al proyecto “Pika”.

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

![](

RESULTS

![](

DETAILS

![](

CONTACT

![](

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

Web: https://martincoronel.com/

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






![](
![](
![](

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!!

![](

![](

![](

![](

![](

holaa este es mi prototipo hecho en figma

Mi aporte: Hecho en Figma


Gracias



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>
<h3>El estado cambia según el tipo de filtro</h3>

<h3>Resultados</h3>
<h3>Detalles</h3>
<h3>Mensajes</h3>
<h3>Mensajes - error</h3>
<h3>No results</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

<h3>Home</h3>
<h3>Busqueda</h3>
<h3>Anuncio Individual</h3>

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