No me hagas pensar - Don't make me think (Wireframes)

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

User avatar
xacarana
Site Admin
Posts: 1170
Joined: Fri Jan 15, 2016 6:13 pm

No me hagas pensar - Don't make me think (Wireframes)

Post by xacarana » Mon Jul 18, 2016 4:28 pm

En esta sección cada estudiante, debe publicar dos wireframes, los manuales revisados por el profesor y los digitales realizados luego de ajustes con el profesor.

Para arrancar les recomiendo tener muy presente la usabilidad de los documentos y diseñar teniendo en cuenta buenas prácticas de usabilidad, un buen ejemplo esta en el libro "Don't make me think" acá algunos enlaces e información importante:

Image
El público objetivo de los libros NO es en realidad los profesionales de la usabilidad, sino los responsables de sitios web que no se pueden permitir a un experto en experiencia de usuario.

..En "No me Hagas Pensar" repasa las claves básicas de la usabilidad web con bastantes ejemplos. En general todo lo que dice sigue estando vigente porque son conceptos básicos que es imprescindible conocer, aunque a veces se nota el paso del tiempo y cómo ha evolucionado la Web desde que publicó el libro. Si podéis, es preferible leerlo en inglés porque a veces la traducción chirría un poco.
Tomado de http://goo.gl/eO8bjN

Los libres se encuentran en pdf, acá algunas url

Versión en inglés
http://goo.gl/y33RlX

Versión español
http://goo.gl/oMlCgH

Herramientas para realizar wireframes, gratuitas o freemium
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
danielfelo
Posts: 2
Joined: Mon Jul 18, 2016 3:08 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by danielfelo » Mon Jul 18, 2016 4:55 pm

Página de desarrollo y proceso sobre algún tema, consiste de una pagina de inicio con el logo y algunas noticias destacadas
Image
Image
Image
luego una página con temas a discutir que se despliega en noticias o tópicos en los que la gente registrada puede comentar
Image
Image
y una pagina de perfil con datos y tu foto, además de las noticias que has marcado como favoritas y un historial de actividad reciente
Image

Daniel Londoño Correa

angelicajmllo
Posts: 1
Joined: Mon Jul 18, 2016 2:10 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by angelicajmllo » Mon Jul 18, 2016 5:01 pm

Wireframe Manual
Página de intercambios

Image

Image

Image
Angélica Jaramillo Guisao
Producción - Publicaciones Digitales

Andres Felipe Garcia
Posts: 2
Joined: Mon Jul 18, 2016 4:28 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by Andres Felipe Garcia » Mon Jul 18, 2016 5:39 pm

Wireframes

Image

Image

Image

Image

Image

Image
Last edited by Andres Felipe Garcia on Tue Jul 26, 2016 8:20 am, edited 1 time in total.

KeiHall
Posts: 2
Joined: Mon Jul 18, 2016 4:26 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by KeiHall » Mon Jul 18, 2016 11:01 pm

Image
Image
Image
Image
Image

User avatar
sebastián Zapata
Posts: 3
Joined: Mon Jul 18, 2016 4:23 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by sebastián Zapata » Tue Jul 19, 2016 12:58 pm

el sitio esta pensado para un evento de la empresa de comics MARVEL, el evento es "Avengers VS X-men" ( el cual consta en la confrontación de dos bandos). el primer WF es el inicio en el que el cabezote consta de el logo y una imagen representativa del evento, un menú con dos botones (para escoger cualquier de los dos bandos y ser direccionado al WF de cada uno) , en el body esta el prólogo del evento y en el footer la página oficial del evento y sus redes sociales.
Image

El segundo y el tercer WF son los que aparecen una vez escogido el bando del cual se quiere tener más información. En el cabezote se encuentra de nuevo el logo del evento para ya acompañado con el logo y una imagen representativa de cada bando, el mismo menú ahora con el botón que permite volver al inicio y el otro para escoger el oto bando, en el body se encuentra un slide con imagenes y textos para explicar cada una.
Image
Image

carolinaalza1
Posts: 1
Joined: Mon Jul 18, 2016 4:23 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by carolinaalza1 » Tue Jul 19, 2016 1:28 pm

La idea del sitio es un Portafolio, dividio en secciones.
Home
Image
Image

Sección Perfil
Image
Image

Sección Fotografia
Image
Image
Last edited by carolinaalza1 on Wed Jul 20, 2016 6:36 pm, edited 1 time in total.

User avatar
AlejandroCortes
Posts: 2
Joined: Mon Jul 18, 2016 4:22 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by AlejandroCortes » Wed Jul 20, 2016 1:28 pm

Wireframe Manual.
Pagina de una tienda de Skate y contenido audiovisual.

Pagina de Inicio.
(El logo funciona dando click para llevarte de nuevo al inicio)
Image
Wireframe Digital
Image

Tienda
Debajo de cada de una las imágenes iría la descripción del producto y su precio.
Image
Wireframe Digital
Image
Audiovisual
Debajo de cada imagen o vídeo, se encuentran los créditos de los que lo realizaron y una breve descripción.
Image
Wireframe Digital
Image
Last edited by AlejandroCortes on Fri Jul 22, 2016 12:50 pm, edited 1 time in total.

NataliaC
Posts: 2
Joined: Mon Jul 18, 2016 4:22 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by NataliaC » Wed Jul 20, 2016 1:55 pm

Wireframe manual.
Página de la artista Lora Zombie.

Página de inicio.
Image
Image

Galería.
Image
Image

Al dar click sobre una de las fotos, te llevará a esta página donde estará toda la información al respecto.
Image
Image
Last edited by NataliaC on Sun Jul 31, 2016 4:03 pm, edited 3 times in total.

User avatar
Danrincon_r
Posts: 2
Joined: Mon Jul 18, 2016 4:26 pm

Re: Ejercicio de bienvenida de vacaciones: Wireframes

Post by Danrincon_r » Wed Jul 20, 2016 4:41 pm

Pagina de decoración

Inicio con las galerías y las secciones
Image

Image

Interior de cada sección
Image
Image

Visualización de las fotos con la descripción
Image
Image
Last edited by Danrincon_r on Sun Jul 24, 2016 8:46 am, edited 1 time in total.

Post Reply