Fases del diseño UX

Realicé un sketch de una página para comprar videojuegos:

• Los rectángulos grandes serían los juegos principales, con sus precios y descripciones.
• Los rectangúlos con un triangúlo en el centro sería el sector de multimedia, donde muestre los trailers de los videojuegos.
• Por ultimo, una barra de navegacion, con un icono de inicio, uno de + y un carrito.

Yo hice el Sketch pensando en una app de Mindfulness que te ofrece frases motivadoras de diferentes temas

Mi sketch es sobre una app de una marca de chocolate en donde se puede ver recetas para hacer con ese producto.
1- En la parte superior, a la izquierda ubiqué un menú desplegable y a la derecha el acceso a las redes sociales.
2- Luego está el logo y abajo una caja de búsqueda.
3- Un texto recomendando recetas
4- Luego puse categorías (pueden ser “tortas”, “ galletitas”, “postres”)
5- El título “Los más buscados”
6- Videos con recetas más buscadas por las personas usuarias.

El uso de wireflows (combinación de wireframes) nos facilita entender de mejor manera las interacciones entre pantallas, y así poder documentar cada parte del proceso que lleva al usuario de un punto A a uno B, para acabar una tarea o completar el flujo de tarea completo en la app o producto digital.

Elegí hacer una página para vender café, en granos y en cápsulas

acá la explicación de las moleculas

Recomiendo https://whimsical.com/, es una herramienta que nos ayuda precisamente en esto

Hice un sketch de una app para ver videos basándome en YouTube

• En la parte superior podemos ver el logo como las opciones para suscribirse, ver tu biblioteca, notificaciones.
• Luego de eso, podemos observar la barra de navegación por temas de interés o tendencia.
• Luego vemos los videos recomendados por la app, con sus respectivos creadores títulos y vistas.
• Y al final vemos otros aparatados para crear videos.

Hice un primer boceto de lo que sería una tienda de infornática, con la cabecera donde va el logo y un menú. Luego un slider y finalmente productos destacados en tarjetas.

Hello guys! 💻
I made an sketch of an App that will offer you the option to organize your time and also to verified the goals that you have achieved along the week -and month if you want- this will be like a personalized agenda where you are going to be able to left your thoughts

1- 📲 Firtst part left: will be the view for new members
first part right: will be the view for common users

2- 📲

• on the top left we will the date
  below we will have the goals and agenda for today
  and finaly below then we will have a part where the member can acces to see some advises and knowledge he will be intereted

• On the top right we will see a chart that has the pending task that the user has
  Below that we will have an option to the user to share the advance he & she has had

Boceto para una miniweb de una psicologa.

Aqui mis sketchs. Se tratan del rediseño de una app para pedir comestibles. La idea era hacer mas atractivo el uso de la app y propuse incuir mas fotos en las que el usuario se identificara con el campo, para que observara la frescura de los alimentos y las personas que los producian .

Yo escogí como producto una app para hacer citas en una barbería.

En caso de que no sea vea o aprecie del todo bien (porque, sí, ya sé que tengo una letra feísima 😂), acá lo explico:

• Comenzamos con el logotipo al centro y en la parte superior
• Seguimos con un carrusel donde se muestra la imagen del barbero y su nombre, acompañado de flechitas para que justamente dé el efecto de carrusel.
• El siguiente paso sería mostrar un calendario donde el usuario pueda escoger el día y la hora de las opciones disponibles
• Después tenemos un apartado que diría “Servicio”, acompañado de un menú desplegable donde puede escoger entre los servicios que ofrece la barbería.
• Para finalizar tenemos el botón de “AGENDAR”

SKETCH

Realicé un sketch de un proyecto de una calculadora que quiero realizar utilizando JavaScript

Escogí un sitio web para la venta de productos y servicios de una sastrería, a continuación se puede ver un ejemplo de wireframes de baja fidelidad. En él se puede apreciar los lugares para el logotipo, la barras de menú, algunas imagenes e incluso el carrito de compras.

Realicé un sketch de una página para el grupo de fans de BTS, la cual proporcione contenido de ellos y eventos.

• En la parte superior encontramos el logo (derecha), el nombre de la página (centro) y la parte de la búsqueda (izquierda).
• Los círculos hacen referencia a la imagen del perfil de cada integrante de BTS y abajo esta la información relevante de ellos y sus redes sociales.
• Los rectángulos nos da paso para la multimedia (vídeos musicales) que tienen como grupo y en solitario.
• En los cuadrados encontramos información acerca de las votaciones vigentes en las cuales han sido nominados el grupo y los diferentes medios para hacerlas.
• Contamos también con la sección de vacaciones que ha tenido el grupo y está separada por temporadas, allí están los capítulos por cada temporada.
• Por último, están los íconos para el acceso a cada red social que tiene el grupo.

Mi sketche va sobre una app para telefonos que se encarga de controlar aberturas y electrodomesticos que estan dentro de un espacio dentro del hogar. Mi diseño se divide en 3 organismos:

• En el primer organismo tenemos 3 moleculas que:

1. La primera se encarga de adicionar informacion acerca de del usuario, personal, settings, preferencias, sobre los electrodomesticos, aberturas del hogar.
2. En segunda instancia tenemos el motor de busqueda o swich que nos cambiará de espacio para controlar
3. Por ultimo tenemos un boton SOS

• En el segundo organismo tenemos dos moleculas indenticas que se encargan de separar si vas a manejar un electrodomestico o una abertura. Debajo tiene el nombre de los elementos que pertenecen al grupo superior.

• En la tercera instancia tenemos 3 atomos que:

1. Podemos eliminar un item.
2. Agregamos un nuevo item.
3. Modo seguridad que se encarga de bloquear y cerrar todas las aberturas y apagar dispositivos.

Mi Producto digital sería una plataforma para encontrar trabajo como diseñadores. Aquí una imagen de un sketch de lo que sería el Inicio de la versión móvil.