Prepárate para tu próximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscríbete

Termina en:

7 Días
11 Hrs
47 Min
19 Seg

Términos generales de diseño de interfaces

7/10

Lectura

  • ¿Qué es UX y qué es UI?

La UX o “Experiencia de Usuario’’ y la UI o “Interfaz de Usuario” son dos conceptos susceptibles de ser confundidos, ya que están muy relacionados. Sin embargo, significan cosas diferentes, y debemos tener claro su significado.

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 93

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Aquí dejo un wireframe profesional para que se den una idea de como puede en celulares, tabletas y computadoras.

Un pequeño aporte visual para entender mejor el proceso de un diseño de interfaz c: Espero les sirva

Este es mi wireframe pensado para laptops/pc y celulares, se trata de un blog/pagina de ilustración donde se vendan productos del mismo ilustrador, se muestre sus colecciones y los recursos que aportaría a su comunidad, nunca había hecho esto pero si me enfocara en esta área me iría más profundo, me gustó hacerlo pero pensé mucho que podría hacer y pense en lo que más me gusta (la ilustración) aunque no encontre ni di con muchas referencias para lo que queria…
lo hice en photoshop.

RETO
Clase 7

Este es un wireframe que hice para una página de conciertos online ficticia en un ejercicio de la universidad.

Este diseño está inspirado para un website sobre trabajos en drywall ya que tenemos cuenta de instagram pero no es suficiente para hacernos conocer.

Para el curso de programación donde hacemos un Juego muy parecido a Pokemoón, haciedo el wirefrane y mockup me quedaría algo así:
.

.
y el diseño del prototipo (obviamente no terminado, pero Funcional )
.

Con Miro, podrás realizar Wireframe de tus proyectos.

Reto clase 7
Aquí dejo mi wireframe de pagina web.


reto wireframe, lo hice con papel y lápiz, y trata de una pagina web para vender artículos de moda

![]()![](https://static.platzi.com/media/user_upload/image-cf471cdf-98f7-4428-827f-ac3a7728afc0.jpg) Este seria mi ejemplo de wireframe para una pagina web de una empresa, específicamente la sección en la que se presenta la identidad de la empresa y a que se dedica
![](https://static.platzi.com/media/user_upload/image-51058f2a-fdd7-4aca-91e2-c08b1297db0b.jpg)![wireframe.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/e1f5b85b-61e8-4ffa-8bd4-037f38139e4f/2ef762f5-da4f-456e-8ef1-c10239fff9c5/wireframe.png)
pagina web para donaciones a fundaciones ![](https://static.platzi.com/media/user_upload/image-b558acf8-88e9-4a1e-904f-5547ccec796c.jpg)
paginas web para donaciones
Me parece que la definición de accesibilidad no es la adecuada, es un poco capacitista. Es decir la accesibilidad debería estar definida por la posibilidad de que cualquier persona pueda usar el producto, independientemente de si tiene una discapacidad o no. Para evaluar la accesibilidad por supuesto hay que tener en cuenta las todas las posibilidades de uso en relación a la discapacidad pero también hay problemas de accesibilidad que no surgen de la discapacidad sino de la simple facilidad de uso. La accesibilidad hace referencia a la habilidad de acceso (o posibilidad de acceso) por eso se tienen muy en cuenta las discapacidades porque son las que generan mas "barreras de acceso", pero eso también tiene que ver con cómo hemos construído la tecnología en torno a modelos puramente capacitistas. Esto viene de una mentalidad en la que no se concibe que las personas con discapacidad tengan acceso cotidiano a las distintas tecnologías, o a la consideración de que las necesidades de las personas con discapacidad deberían estar tan normalizadas como las necesidades de las personas sin discapacidad. Ya es hora (y más si vamos a ser diseñadores) de que cambiemos nuestro discurso y nuestra forma de pensar frente a este tipo de temas, sobretodo desde sus fundamentos. Y aún más si queremos crear sociedades que sean incluyentes para todas las personas.
![](https://static.platzi.com/media/user_upload/image-52514087-bd24-416d-ad22-fd06ab4b62af.jpg) representación de pagina web vista desde dispositivo móvil
![](https://static.platzi.com/media/user_upload/image-c794fd95-e11c-4c3e-a9bc-649535891cf5.jpg)
Yo suelo usar whimsical o figma para los wireframe. ![](https://static.platzi.com/media/user_upload/image-edd71b3b-d163-4f90-bed6-2652490a1c06.jpg)
Envío el wireframe sobre mi marca personal. Está pensado como diseño para pc, televisor, y tablets en horizontal, también tiene versión para celular. ![](https://static.platzi.com/media/user_upload/WIREFRAME%20ABOUT%20MY%20COMPANY-b5cdc338-d67b-4ab5-8f80-e1b540444199.jpg)
Envío el wireframe sobre mi marca personal. Está pensado como diseño para pc, televisor, y tablets en horizontal, también tiene versión para celular. ![](https://static.platzi.com/media/user_upload/WIREFRAME%20ABOUT%20MY%20COMPANY-b9bd76dd-a961-4884-ae94-17de375cd206.jpg)
![]()![]()![]()![]()![](https://static.platzi.com/media/user_upload/Screen%20Shot%202024-01-10%20at%2012.11.41%20PM-4f730f64-9b3d-4230-ae01-a186394bcf85.jpg) **Clase 7: Wireframe** Wireframe página web de reservas hoteleras
![]()wireframe de una estructura sencilla de servicios ofertados por una agencia de viajes, pensado para dispositivos móviles ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-01-05%20a%20la%28s%29%2011.16.10-4fb6e881-a4ef-457b-bd3c-7355c0484b7d.jpg)
![](https://static.platzi.com/media/user_upload/image-1e33ad9b-bf4c-4383-94f4-95cfdddb2ae7.jpg)![](https://static.platzi.com/media/user_upload/image-778bce2c-41bf-4d0b-a130-0f107b5b806b.jpg)
![](https://static.platzi.com/media/user_upload/image-a8b85de1-add2-4d81-b2e8-4c3eadc449c0.jpg)
![](https://static.platzi.com/media/user_upload/image-0fd091c0-33c1-486a-aa38-26eb79c445db.jpg)

Hola buenas tardes a todos, este es mi wireframe de una pagina web para mi marca personal, este nombre y marca la había creado hace unos años por un proyecto escolar, lo escogí por que es mi único creación mía que ha tenido éxito en nivel escolar, espero que les agrade

Aca presento mi wireframe realizado para una tienda de ropa, esta es la pagina principal donde se podra apreciar el logo, el acceso al menu, perfil y carrito, al igual que se mostrara al inicio las novedades que presenta la marca, luego la opcion general para hombres y mujeres, acompañado de un extra que serian los accesorios, al final se muestran las promociones del mes (es algo que se podrias mejorar debido a que no parece ser el lugar apropiado para esa categoria).

Pense en un wireframe para una tienda de ropa

Hola, realice este wireframe pensado para ver en computadoras. Lo hice pensando en una pagina web de una organización o institución. Lo primero que podemos ver es un espacio para el logo o titulo de mayor importancía. Justo debajo un espacio que se despliega con la informacion o actividad de la institución, junto con un menú hamburguesa a su izquierda que facilite la navegación por la web.
Debajo se destaca un espacio destinado a la información que el cliente precise que llame primeramente al atencion de quien interactue con la página. Este se conforma por un Banner destinado a imagenes, videos o diseños graficos, presentados de forma interactiva, que ilustres la informacion de forma llamativa y un boton de “ver más”, que nos lleve directo a la nota. A su izquierda un espacío de texto destinado a un pequeño resumen. Estos dos ultimos fueron separados ya que usualmente no me agrada que se interpongan.

Wireframe pagina de autor

Aqui el sketch de un proyecto para un botcamp.

Este es el wireframe de mi pagina personal, soy diseñadora gráfica y visual merchandising la idea es que sea fácil para los usuarios encontrar los servicios y mis contactos.

Conocer de UX y de UI, es uno de mis objetivos para aprender a generar productos innteresantes conocer estos conceptos me ayuda a entender su importancia y sus diferencias.

Gracias

Tengo una pequeña empresa personal que en algún momento deseo desarrollarle su pagina web y que los clientes puedan interactuar de manera adecuada con mi pagina.

Hice un wireframe que se adapta a celulares,pc y tablet, es una página estilo youtube con un reproductor que se mantiene fijo mientras se navega por ella
Lo de la esquina superior izquierda es el logo, luego está el buscador, para logear, el menú, más abajo sería la portada del video y abajo la descripción o letras de las canciones

  • para celular:

  • Para tablet:

  • Para web:

Este mi wireframe, es la maqueta para presentar un negocio en instagram trato de ajustarme a los lineamientos que la plataforma sumunistra.

****

Aqui dejo un wireframe de una pagina de videollamada

HOLA
ESTE ES MI WIREFRAME DE UNA PAGINA DE MAQUILLAJE

ESTE ES MI MOKUP

Acá les dejo mi wireframe para página web. Espero en un futuro hacerlo realidad!

El reto de hoy estuvo inspirado en uno de mis proyecto iniciales en el camino del UX/UI, el cual se trataba de una app que te ayudaba a cuidar tu salud partiendo de la premisa de que “somos lo que comemos” . La misma, funcionaba de la siguiente manera, te daba recomendaciones de opciones deliciosas y saludables, tomando en cuenta lo que tenias a la mano en tu cocina… estas opciones de recetas saludables estaban para todo tipo de usuario según la complejidad, alimentos, horarios etc.

Wireframe

Wireframe página web marca personal.

Wireframe educativo.

producto: té funcionales

Aquí está un Wireframe para una página web de mi marca personal.

Antes que nada debo decir que había visto la aplicación del wireframe y hasta lo habia usado, pero no sabía que tenía nombre hasta que lo vi en este curso, me ha encantado.

Ahora, en cuanto al reto, he dejado un wirefram de mi página web para mi marca personal/profesional hecho con hoja y lapicero.

Este es mi aporte, se trata del wireframe de lo que podría ser mi pagina web. Cuenta con un botón de búsqueda. A la derecha, los pequeños recuadros que hace referencia a distintos accesos directos. En el recuadro grande de la izquierda, iría una fotografía de mi y a la derecha un about me, y por ultimo la bandeja de abajo seria mas fotografías y textos explicando lo que hago y algunos de mis mejores proyectos, mientras vas bajando con la rueda del ratón.

Idea de una App para Ventas de diseño de tarjetería.

una introducción a una tienda de música que apenas empieza, se utilizara la primera parta para el logo de la tienda después una parte para ofertas o ventas flash y se mostraran las imágenes de los productos con los respectivos precios y detalles del producto y se seguirá la secuencia de la clasificación de tipos de instrumentos con los que cuenta la tienda, al final se contara con la información de la tienda: dirección, números de teléfonos y apps donde se puedan localizar.
:3

Reto:
Mi wireframe esta basado en la página web de mi portafolio de diseños e ilustraciones que tendré próximamente.
Donde en la parte superior muestro el isotipo de mi marca, para después mostrar el catalogo de diseños, divido en secciones.

Bosquejo de un esquema de un blog con videos e imágenes

Wireframe

Creo que tengo mucho que aprender en cuanto a diseño web.

Mi wireframe básico de mi sitio web.
(Utilicé la app de Adobe Illustrator, aunque he visto que es mucho mejor Figma o Sketch para este tipo de soluciones).

esta diseñado para computador


Este wireframe esta pensado para ser una página de inmobiliaria.

Este seria como el esqueleto o pagina principal para una tienda de cocina, baños y pisos

Este es mi wireframe el cual hice a mano y despues lo represente en un mockup , saque la idea de Zara

Excelente clase…

Este es una propuesta que se me ocurrió para presentar un portfolio digital en una pagina web. lo divido por el contenido que se desee revisar. lo hice muy básico pero se entiende.

Tomado de la web…

wireframe sobre paracaidismo

Reto Wireframe para página web:

my wireframe.thankyou by class

Saludos dejo mi aporte

 

Reto del Wireframe 😃

Reto 7