Proyecto: Rediseño de una pantalla

¡Hola a todos!
Yo he elegido para el ejercicio al home del sitio web del Centro de Investigaciones Oceanográficas e Hidrográficas de la Armada Nacional de Colombia (CIOH):

Esta es mi propuesta con una barra lateral izquierda retraída (no se si esté bien dicho), para los productos (al mejor estilo de Platzi); y en ella busqué darle mayor visibilidad a aquellos elementos de la pantalla que pueden resultar más relevantes para el usuario, lo que es contrario al diseño original que busca darle mayor relevancia a lo institucional, quizá por el perfil militar del CIOH:

Y así se vería dicha barra lateral expandida:

Pantalla de suscripciones

wireframe modificado

Aunque se suban los ejercicios… ¿no hay ningún feedback por parte de la profesora María Isabel, verdad?
Estaría bien, ya que son retos del curso, que hubiese una respuesta por parte de Platzi o de la profesora, para poder saber si hemos cometido algún error importante o, por el contrario, conocer si el proyecto se ha realizado correctamente.

Hice 2 prototipos de baja fidelidad en papel para probar el diseño:
![](

![](

Y luego pasé a un wireframe de media fidelidad… les agradezco su feedback 😁:
![](

Para mi ejercicio escogí un proyecto que consistió en rediseñar la landing page de evento de mi trabajo.
Les comparto el diseño que construí en calidad media, usando texto real justo por lo que comentaba María en clase, es importante estar consiente del espacio que ocuparían nuestros copies para evitar modificar los tamaños de contenedores.
En mi caso solo use una imagen real, ya que al tener los tiempos de entrega tan ajustados, este wireframe se compartió con el equipo de desarrollo para que iniciaran una cotización.

Yo hice el rediseño del home del sitio GAM (Centro Cultural Gabriela Mistral) a mi me parece que es un sitio bonito con buenos diseños pero la información no es tan clara para el usuario, por ejemplos el hazte socio y la cartelera de las actividades no estaban a simple vista, casi toda la información relevante se encontraba en el footer.

Rediseño:

Hola me gustaría compartir con ustedes, la propuesta de rediseño para Greenpeace Brasil

HOME actual

Wireframe - Quise aprovechar mejor el espacio para algunas sesiones del home, como el blog y los dos articulos que están abajo del slide en la portada; siento que no se le esta dando la importancia que debería tener

Les comparto mis propuestas para el rediseño de una pantalla, tomé como base la página de mi escuela, SAES (Sistema de Administracion EScolar) del IPN (Instituto Politécnico Nacional.

Quiero aclarar que esta página ni existe en el sitio oficial, siempre fue un suplicio saber cuántos créditos vale cada materia, o qué calificación y porcentaje de asistencia obtuviste en materias que tiene años que cursaste, sobretodo porque hay formatos donde te piden esta información.
También considero importante informar acerca de qué materias son necesarias haber cursado previamente para poder inscribir una nueva, esto porque en mi escuela, UPIBI (Unidad Profesional Interdisciplinaria de BIotecnología) te dan la libertad de poder inscribir la materia que tú quieras a partir de segundo semestre, suena bien, pero en la práctica puede ser caótico puesto que, sobretodo al principio, uno no tiene idea de si una materia que suena interesante o se acomoda perfecto para no tener horas muertas, necesita de otras materias para su correcta comprensión y aprovechamiento.

Sin más, comparto mis propuestas, la retroalimentación es muy bienvenida, aún cuando tú que lees esto estés a meses o incluso años de distancia de cuando escribí estas palabras.

😃

Propuesta 1:

Propuesta 2:

Propuesta 3:

Captura de pantalla (modificada, porque repito, esta pantalla no existe en el sitio original de mi escuela) del estilo actual del sitio:

Página anterior:

Página rediseñada:

1. Selección de pantalla

1. Lista de elementos

1. Nueva distribución sin detalle

1. Contenido de prueba

Rediseño

Yo escogí el sitio web de Postobón, que necesita modificaciones drásticas:
Home

Submenú

Nuestros productos

Aquí mi ejercicio para el diseño en prototipo de baja fidelidad del proyecto Expertos.

pagina actual:

resalta de manera inecesaria informacion que no es relevante para el usuario, tampoco es de relevancia para el banco, por lo que se sugiere un rediseño mas simplista:

donde se añaden dos secciones para que el banco agregue la informacion que desee destacar

Este es un wireframe para un proyecto en el que estoy trabajando, poniendo en práctica los elementos aprendidos en clase.

![](

Les comparto mi ejercicio: Página web Decider

Elementos del sitio:

• (3) Post con sugerencias sobre series o películas para ver. Contienen foto (3.2), título (3.1), autor (3.3) y fecha de publicación (3.4).

• (2) Carrusel con sugerencias sobre series o películas puntales para ver: Contiene foto (2.1), nombre (2.2) y pequeña descripción(2.3).

• (6) Noticias sobre series o películas. Contiene foto (6.2), título (6.1), autor (6.4), fecha de publicación (6.5) y pequeña descripción (6.3).

• (4) Listado de los post en tendencia tendencias ahora.

• (5) Película o serie popular reciente.

• (1) Menú principal:
  Qué ver (1.1)
  Filtro por películas o shows (1.2)
  Filtro por plataformas de streaming (1.3)
  Buscador general (1.4)

Hola compañeros! les comparto un poco el rediseño de la página web de LA14 haciendo algunos ajustes en la arquitectura y jerarquización de la información.
Actualmente esta es la página de LA14 (que por cierto es muy lenta al cargar) Creería que muchas personas dejan la página y se van antes de que esta cargue por completa, pero sin desviarme del tema así luce actualmente la home.
![](

Observaciones: Vi que la home tiene una mala arquitectura de información en varios de sus contenidos. Por ende opté por hacer algunos ajustes referentes a lo que ellos ya tienen clasificándolo por orden jerárquico y pensando lo que sería más relevante para el usuario.

Rediseño con Wireframe:
![](

Espero les haya gustado, espero sus feedbacks!

a trabajar

Dándole continuidad a la práctica anterior con el mismo cliente.

![](

Elegí un proyecto sobre telemedicina.

He elegido para el ejercicio la página de uno solo de los grupos de investigación del Servicio Geológico de Colombia. En la primera imagen el sitio real, en la segunda; mi propuesta de wireframe optimizando el espacio, mejorando las jerarquías de información las cuales eran nulas, prioricé el menú local de navegación en el cual incluyo todos los grupos de información que estaban incluidos en el área de carga de manera desordenada.

Elegí la pantalla de descripción de un artículo.

Hola!
Les muestro mi ejercicio de wireframe realizado a partir de una propuesta para un servicio de localización de mascotas.
Saludos

1. watchman
   
   
2. Imagen, y tres vínculos - Servicios, Novedades, Watchman Online.
3. Elemento mas importante, Nuestros clientes, debemos mostrar quienes confían en nosotros para lograr un impacto ya que el principal principal fuerte es nuestra base de clientes reconocidos, un titulo que muestre que somos una empresa Privada Argentina , y un CTA que invite a contactarse con el área de Ventas directamente.

Esta es la pagina de una panaderia muy rica y popular.

lo que modifique y agregue fue la opcion de una membresia, una mesa de postres para eventos, y los productos mas populares.

Rediseño de la página de inicio de Star+
![](

Esta es mi propuesta! 😄

Este es el sitio

Es la modificación de la pagina de steam en el apartado de videojuegos por categorías

Les comparto el rediseño que hice.

Como vamos a estructurar el home

Rediseñe el Home de Airbnb, agregando contenido a su home, que me parece importante destacar.

¡Hola! Este es mi ejercicio. Elegí a una e-commerce de mi país. Esta es su home page:

Esté es el Wireframe que le rediseñe:

Esta es la pagina actual del Registro Civil de Peru

Y este es el nuevo Wireframe basado en el SIteMap que hicimos en una clase anterior

Yo usé una página del gobierno de mi país para esto porque la se que tiene muchos problemas, esta es una foto del antes:

Y esta una foto del después:

Hola! este es mi rediseño, no esta completamente terminado, pero decidi hacerlo asi y seguir, para eventualmente ir iterandolo.

hola a todos adjunto el ejercicio lo tome del mismo ejemplo de los anteriores de una tienda naturista

Me gustaron los cursos. 😊

aqui dejo un rediseño de web site que aún no se implementa pero es una tienda e-commerce de venta de productos industriales

Wireframe de una propuesta de automatización:
Original: https://www.dropbox.com/s/3csl6p8zjg9c13j/PI.png?dl=0
Prototipo: https://www.dropbox.com/s/7geay4amt4wcmwn/PI_Prototipo.jpg?dl=0

Propuesta de automatización:
Original: https://www.dropbox.com/s/3csl6p8zjg9c13j/PI.png?dl=0
Prototipo: https://www.dropbox.com/s/7geay4amt4wcmwn/PI_Prototipo.jpg?dl=0

Original Wikipedia
https://es.wikipedia.org/wiki/Wikipedia:Portada

Rediseño de Wikipedia

https://app.moqups.com/75aMPDDcU5/view/page/ad64222d5

no puedo subir las imágenes… 😦

Realice 3 diseños para la pagina principal

Hola! A lo largo del curso he venido trabajando la pagina del RUNT (Regitro Único Nacional de Transporte). Para este reto decidí trabajar con una sección especifica ya que es, probablemente, una de las más visitadas de la pagina así como una de las que más necesita trabajo. Esta es la pagina de Ciudadanos del RUNT.

En ésta pagina se encuentra todo lo relacionado a consultas de personas y de vehiculos ante las entidades estatales respecto a transito y transporte. Como se ve en la imagen, cuenta con una navegación lateral con muchisimas opciones, sin categorizar, y se hace necesario entrar a cada enlace para saber que tipo de consulta se puede hacer. Decidí categorizar las opciones por consultas y documentos, así como crear atajos para los usuarios mas experimentados (consultas mas frecuentes).

Agradezco la retroalimeación 😃

Iterar!!

Buenas noches comunidad. Les dejo mi ejercicio, lo hice con una página del gobierno de México.

Agradezco cualquier retroalimentación. ¡Saludos!

Pantalla principal:

Después de unos cuantos wireframes pude llegar a esto:

Rediseño HOME alternativa 1.

Rediseño HOME alternativa 2

.

Escogí la página de Pyladies, una organización sin fines de lucro que utilizan el lenguaje Python para programar, esta página se creó originalmente para publicar contenido, noticias, meet ups, entre otras cosas. Me llamó mucho la atención que su diseño se ve amigable a simple vista, pero realizando los ejercicios de este curso me dí cuenta que la información está muy revuelta, y no es nada amigable navegar por ahí.
De toda la página escogí la sección de Location, ya que cuesta mucho trabajo encontrar las locaciones, no cuenta con una barra de búsqueda, por lo que lo reediseñé de esta manera:

En este wareframe de fidelidad media, intenté rediseñar la interfaz de flatincon

Mi elección fue la pantalla principal de la empresa Alquería.

Original :

Wireframe modificado :

Hola a todos el Rediseño de pantalla es del Equipo Ingles Everton FC, la cual de principio tiene una pagina que hay que darle demasiado scroll con mucha información regada y diversa,

mi propuesta es una pagina de inicio mucho mas corta pero con la información mas valiosa relacionado con el equipo el cual creo que si hace un poco falta con algunas Ej: la tabla de posiciones y los torneos que disputa, y realice un esquema más mas dinámico