Este documento resume las características de diseño de varias páginas web de noticias como Fox Sports, Radio Activa, CNN en Español, Caracol Radio y The New Yorker. Describe elementos como logotipos, menús, banners, cajas de texto e imágenes y cómo estas páginas dividen y organizan la información.
Your guide to picking the right User Interface (UI) and creating the best User Experience (UX) in just a short amount of time. Learn how to quickly create mockups, landing pages, and build mock integrations that turn into large ideas.
Have more questions about UX/UI? Contact mvp@koombea.com for additional information or questions and we will get back to you shortly.
Hablemos de UX - José Ma. Medina, UX UI designerJosé Ma. Medina
Introducción sobre el tema de UX,las ventajas de como integrar UX dentro de nuestro proceso de trabajo ayuda a mejorar el desarrollo de un producto digital y nuestra manera de pensar.
Objetivos:
Tomar decisiones del desarrollo de un sitio web analizando e interpretando las especificaciones del diseño
Conocer conceptos de diseño para la diagramación de paginas
Conocer los diagramas de flujo, guiones gráficos y diagramas para la creación de un Sitio Web.
Comunicarse con los clientes respecto de diseño y el contenido.
3. Links Logotipo Score: es un servicio de este web que muestra los resultado en tiempo real Menú principal Fondo blanco Banner de publicidad Espacio para la foto Sub-Menu de noticias Scroll de desplazamiento Esta es la pagina principal de Fox Sports, en ella se puede apreciar como la imagen y un breve lead son los que vende para que el usuario navegue por el web site
4. PAGINA SECUNDARIA En la pagina secundaria de Fox Sports se puede apreciar que el texto es el que sopesa la importancia de esta sección. es destacable que aun así se baje el scroll , el banner de los resultados acompaña al usuario para que este informado de los juegos. También es importante ver que el logotipo mantiene su misma posición y además sirve como botón para regresar a la pagina principal.
6. Logotipo Menú Principal Link para cámara Web (video) Fondo de color rojo pensado en 4:3 por ello el negro a los costados Banner publicitario de movimiento La pagina principal de radioactiva es un ejemplo de como se puede emplear las cajas de imagen y texto. En lo personal creo que esta pagina pierde la identidad y termina pareciéndose mas a un blog que a un Web Site.
8. Banner auto publicitario Logotipo Menú Secundario Encabezado Caja de Texto Menú Caja de video La pagina principal de CNN en Español, presenta un diseño a base de cajas como la de Radio Activa con la diferencia que la organización presentada acá es mas armónica y da un mejo golpe de vista.
10. Logotipo Caja de Texto Caja de imagen Banner auto publicitario Menú Principal Sub-Menú Banner de noticias ( en movimiento) Link de audio Banner de Publicidad Link de audio La pagina de caracol radio esta dividida por pequeñas cajas de textos que se reparten por toda la margen de la pantalla , donde el color rojo identifica el tipo de la noticia, los títulos utilizan el color gris con la opción bold y el lead va en un gris normal. Es una página que en si maneja tres columnas y el texto esta por encima de la imagen
12. Caja de Imagen Caja de Texto Banner de Publicidad Caja de Imagen Caja de Texto Logotipo Scroll Me pareció interesante analizar un Web Sites con glamur, y que mejor ejemplo que TheNewyorker En su pagina principal podemos apreciar una foto sobria , que al igual que caracol radio el tipo de notica lo resalta el color rojo, el bold esta empleado en el titulo y el lead se presenta normal. Lo llamativo esta, que después de las noticia principal la pagina se divide en tres columnas dos para información donde se aprecia una imagen relativamente grande, al lado el lead y en la parte superior el título. La tercera columna es reserva da a la publicidad.
