SlideShare una empresa de Scribd logo
1 de 55
Descargar para leer sin conexión
por Nora Ferreirós
¿Por qué hay tantas webs que son
un desastre (visual)?
1 ABR 2019
Biblioteca Pública de Pontevedra Antonio Odriozola
Branding y diseño UX/UI
www.noradriana.com
@noradriana_
NORA FERREIRÓS
¿Por qué hay tantas webs que son
un desastre (visual)?
¿A qué me refiero con
desastre (visual)?
¿Cuándo consideramos que funciona
una web?
• Función técnica (funcionalidades).
• Función visual.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
¿Qué es la función visual?
Puntos negros de las webs
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
¿Por qué no funcionan (visualmente) la
mayoría de webs?
1. Análisis.
2. Objetivos.
3. Soluciones erróneas.
4. Estructura de contenidos.
5. Jerarquía.
6. Legibilidad.
7. Testeo.
¿Necesito una web?
¿Por qué? ¿Para qué?
¿Tiene web la competencia? ¿Cómo son?
¿Quién va a usar a esa web?
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Análisis
Briefing.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Análisis
¿Cuál es la finalidad de la web?
¿Qué espero conseguir (concretamente) teniendo
una web?
¿Qué acción o acciones principales quiero que
realicen los usuarios?
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Objetivos
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Objetivos
Los falsos objetivos.
¿Cumple la web con los objetivos marcados?
¿Me estoy dirigiendo correctamente al usuario?
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Soluciones erróneas
Una web es una herramienta, no un fin.
Los contenidos dirigen la web y no al revés.
La web funciona por capas, no por páginas o
secciones.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Estructura de contenidos
.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Estructura de contenidos
Los parches.
El escaneo visual: los usuarios no vienen a tu web
a dar un paseo.
¿Cómo encuentra el usuario lo que viene a buscar?
¿Tu web es más un manual de Ikea o un mercadillo
de segunda mano?
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Jerarquía
.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Jerarquía
.
No eres un trovador.
Ni Fidel Castro.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
.
¿Es posible leer tu
web o es sencillo
hacerlo?
1. Tamaño de letra.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
1. Tamaño de letra.
2. Longitud de líneas.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
1. Tamaño de letra.
2. Longitud de líneas.
3. Espacios entre letras, palabras y líneas.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
1. Tamaño de letra.
2. Longitud de líneas.
3. Espacios entre letras, palabras y líneas.
4. Formas de las fuentes.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
1. Tamaño de letra.
2. Longitud de líneas.
3. Espacios entre letras, palabras y líneas.
4. Formas de las fuentes.
5. Contraste¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Legibilidad
¿Cómo sé lo que funciona mejor para mi público o
mis objetivos?
¿Cómo puedo saber si he hecho bien todos los
puntos anteriores?
¿De dónde saco los datos?
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Pruebas y mediciones
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
.
Tu web no es un
santo: no la veneres.
Pruebas y mediciones
Recomendaciones
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Invierte en tu web:
no es un gasto
(si lo haces bien).
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Antes de decidir o
crear, valida.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Primero los
contenidos, después
la web.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Fórmate
(si no puedes
contratar a
profesionales).
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Contrata
profesionales.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Fórmate
(aunque puedas
contratar
profesionales).
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Fíjate en quién lo
hace BIEN.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
No infravalores el
trabajo de los demás.
¿POR QUÉ HAY
TANTAS WEBS QUE
SON UN DESASTRE
(VISUAL)?
Recomendaciones
Nunca va a estar
perfecta: lánzala de
una vez.
¡Gracias!
escribes@noradriana.com
@noradriana_

Más contenido relacionado

Similar a ¿Por qué hay tantas webs que son un desastre (visual)?

Juan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelizaciónJuan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelizaciónFundación FYDE-CajaCanarias
 
Rubrica:DISEÑO DE PAGINA WEB
Rubrica:DISEÑO DE PAGINA WEBRubrica:DISEÑO DE PAGINA WEB
Rubrica:DISEÑO DE PAGINA WEBalifoetydavid
 
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
Sitios Exitosos: De los Estándares Web a la Experiencia de UsuarioSitios Exitosos: De los Estándares Web a la Experiencia de Usuario
Sitios Exitosos: De los Estándares Web a la Experiencia de UsuarioGabriel Porras
 
TIC´S INTERNET, REDES SOCIALES Y BLOGS
TIC´S INTERNET, REDES SOCIALES Y BLOGSTIC´S INTERNET, REDES SOCIALES Y BLOGS
TIC´S INTERNET, REDES SOCIALES Y BLOGSMike Ziur
 
Yahoo | Búsquedas: su uso para diseñar un mejor sitio
Yahoo | Búsquedas: su uso para diseñar un mejor sitioYahoo | Búsquedas: su uso para diseñar un mejor sitio
Yahoo | Búsquedas: su uso para diseñar un mejor sitiosearch congress
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Nervo Verdezoto
 
TALLER NO. 1 INTERNET
TALLER NO. 1 INTERNETTALLER NO. 1 INTERNET
TALLER NO. 1 INTERNETYILMAR
 
creación de paginas o sitios webs
creación  de paginas o sitios webscreación  de paginas o sitios webs
creación de paginas o sitios websPARAGUAYOSPYXD
 
Elearning portales
Elearning portalesElearning portales
Elearning portalesninilu13
 
Elearning portales
Elearning portalesElearning portales
Elearning portalesninilu13
 
Autoinstrucional de informatica vero 1
Autoinstrucional de informatica vero 1Autoinstrucional de informatica vero 1
Autoinstrucional de informatica vero 1Veronica Bohorquez
 
Sistemas herramientas tecnologicas 2
Sistemas herramientas tecnologicas 2Sistemas herramientas tecnologicas 2
Sistemas herramientas tecnologicas 2JhoanAntonio
 

Similar a ¿Por qué hay tantas webs que son un desastre (visual)? (20)

Juan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelizaciónJuan Merodio. Las redes sociales como herramienta de marketing y fidelización
Juan Merodio. Las redes sociales como herramienta de marketing y fidelización
 
Rubrica:DISEÑO DE PAGINA WEB
Rubrica:DISEÑO DE PAGINA WEBRubrica:DISEÑO DE PAGINA WEB
Rubrica:DISEÑO DE PAGINA WEB
 
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
Sitios Exitosos: De los Estándares Web a la Experiencia de UsuarioSitios Exitosos: De los Estándares Web a la Experiencia de Usuario
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
 
Fernanda huertas
Fernanda huertasFernanda huertas
Fernanda huertas
 
Introducción
IntroducciónIntroducción
Introducción
 
TIC´S INTERNET, REDES SOCIALES Y BLOGS
TIC´S INTERNET, REDES SOCIALES Y BLOGSTIC´S INTERNET, REDES SOCIALES Y BLOGS
TIC´S INTERNET, REDES SOCIALES Y BLOGS
 
Yahoo | Búsquedas: su uso para diseñar un mejor sitio
Yahoo | Búsquedas: su uso para diseñar un mejor sitioYahoo | Búsquedas: su uso para diseñar un mejor sitio
Yahoo | Búsquedas: su uso para diseñar un mejor sitio
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
 
buscadores y metabuscadores
buscadores y metabuscadoresbuscadores y metabuscadores
buscadores y metabuscadores
 
TALLER NO. 1 INTERNET
TALLER NO. 1 INTERNETTALLER NO. 1 INTERNET
TALLER NO. 1 INTERNET
 
creación de paginas o sitios webs
creación  de paginas o sitios webscreación  de paginas o sitios webs
creación de paginas o sitios webs
 
Elearning portales
Elearning portalesElearning portales
Elearning portales
 
pagina web
pagina webpagina web
pagina web
 
Prueba
PruebaPrueba
Prueba
 
Elearning portales
Elearning portalesElearning portales
Elearning portales
 
Autoinstrucional de informatica vero 1
Autoinstrucional de informatica vero 1Autoinstrucional de informatica vero 1
Autoinstrucional de informatica vero 1
 
Diego
DiegoDiego
Diego
 
Sistemas herramientas tecnologicas 2
Sistemas herramientas tecnologicas 2Sistemas herramientas tecnologicas 2
Sistemas herramientas tecnologicas 2
 
Diego
DiegoDiego
Diego
 
User Experience UX
User Experience UXUser Experience UX
User Experience UX
 

Más de noradriana.com

Fases del desarrollo de un WordPress a medida
Fases del desarrollo de un WordPress a medidaFases del desarrollo de un WordPress a medida
Fases del desarrollo de un WordPress a medidanoradriana.com
 
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libre
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libreEmprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libre
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por librenoradriana.com
 
"No me chilles que no te veo". La jerarquía visual en pantalla.
"No me chilles que no te veo". La jerarquía visual en pantalla."No me chilles que no te veo". La jerarquía visual en pantalla.
"No me chilles que no te veo". La jerarquía visual en pantalla.noradriana.com
 
Runaddict - ¿Dónde está tu límite?
Runaddict - ¿Dónde está tu límite?Runaddict - ¿Dónde está tu límite?
Runaddict - ¿Dónde está tu límite?noradriana.com
 
Topinstalacion.es Guidelines
Topinstalacion.es GuidelinesTopinstalacion.es Guidelines
Topinstalacion.es Guidelinesnoradriana.com
 
Digitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design ProposalDigitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design Proposalnoradriana.com
 
Fincas Cerdanyola Guidelines
Fincas Cerdanyola GuidelinesFincas Cerdanyola Guidelines
Fincas Cerdanyola Guidelinesnoradriana.com
 
Rebranding Vil·la Museu Pau Casals - Manual de identidad
Rebranding Vil·la Museu Pau Casals - Manual de identidadRebranding Vil·la Museu Pau Casals - Manual de identidad
Rebranding Vil·la Museu Pau Casals - Manual de identidadnoradriana.com
 
Fuelgrafics - Documento de prácticas
Fuelgrafics - Documento de prácticasFuelgrafics - Documento de prácticas
Fuelgrafics - Documento de prácticasnoradriana.com
 
Bytamaniac Portfolio Ilustrado
Bytamaniac Portfolio IlustradoBytamaniac Portfolio Ilustrado
Bytamaniac Portfolio Ilustradonoradriana.com
 
co·rent Barcelona Car Sharing
co·rent Barcelona Car Sharingco·rent Barcelona Car Sharing
co·rent Barcelona Car Sharingnoradriana.com
 
educactiva - Revista sobre educación alternativa
educactiva - Revista sobre educación alternativaeducactiva - Revista sobre educación alternativa
educactiva - Revista sobre educación alternativanoradriana.com
 
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...noradriana.com
 
The Coca-Cola Company: 125 años de identidad
The Coca-Cola Company: 125 años de identidadThe Coca-Cola Company: 125 años de identidad
The Coca-Cola Company: 125 años de identidadnoradriana.com
 

Más de noradriana.com (16)

Fases del desarrollo de un WordPress a medida
Fases del desarrollo de un WordPress a medidaFases del desarrollo de un WordPress a medida
Fases del desarrollo de un WordPress a medida
 
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libre
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libreEmprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libre
Emprende con WordPress: Cómo formar un equipo cuando todo el mundo va por libre
 
"No me chilles que no te veo". La jerarquía visual en pantalla.
"No me chilles que no te veo". La jerarquía visual en pantalla."No me chilles que no te veo". La jerarquía visual en pantalla.
"No me chilles que no te veo". La jerarquía visual en pantalla.
 
Abc4events Guidelines
Abc4events GuidelinesAbc4events Guidelines
Abc4events Guidelines
 
Runaddict - ¿Dónde está tu límite?
Runaddict - ¿Dónde está tu límite?Runaddict - ¿Dónde está tu límite?
Runaddict - ¿Dónde está tu límite?
 
Topinstalacion.es Guidelines
Topinstalacion.es GuidelinesTopinstalacion.es Guidelines
Topinstalacion.es Guidelines
 
Digitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design ProposalDigitaldixit.com - Web Design Proposal
Digitaldixit.com - Web Design Proposal
 
Fincas Cerdanyola Guidelines
Fincas Cerdanyola GuidelinesFincas Cerdanyola Guidelines
Fincas Cerdanyola Guidelines
 
Rebranding Vil·la Museu Pau Casals - Manual de identidad
Rebranding Vil·la Museu Pau Casals - Manual de identidadRebranding Vil·la Museu Pau Casals - Manual de identidad
Rebranding Vil·la Museu Pau Casals - Manual de identidad
 
Fuelgrafics - Documento de prácticas
Fuelgrafics - Documento de prácticasFuelgrafics - Documento de prácticas
Fuelgrafics - Documento de prácticas
 
Bytamaniac Portfolio Ilustrado
Bytamaniac Portfolio IlustradoBytamaniac Portfolio Ilustrado
Bytamaniac Portfolio Ilustrado
 
co·rent Barcelona Car Sharing
co·rent Barcelona Car Sharingco·rent Barcelona Car Sharing
co·rent Barcelona Car Sharing
 
Venturi Beauty
Venturi BeautyVenturi Beauty
Venturi Beauty
 
educactiva - Revista sobre educación alternativa
educactiva - Revista sobre educación alternativaeducactiva - Revista sobre educación alternativa
educactiva - Revista sobre educación alternativa
 
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...
Mejor campaña creativa para TWESTIVAL BARCELONA 2013 Participa. comunica. col...
 
The Coca-Cola Company: 125 años de identidad
The Coca-Cola Company: 125 años de identidadThe Coca-Cola Company: 125 años de identidad
The Coca-Cola Company: 125 años de identidad
 

Último

diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddabuitragoi
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 

Último (20)

diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 

¿Por qué hay tantas webs que son un desastre (visual)?

  • 1. por Nora Ferreirós ¿Por qué hay tantas webs que son un desastre (visual)? 1 ABR 2019 Biblioteca Pública de Pontevedra Antonio Odriozola
  • 2. Branding y diseño UX/UI www.noradriana.com @noradriana_ NORA FERREIRÓS
  • 3. ¿Por qué hay tantas webs que son un desastre (visual)?
  • 4. ¿A qué me refiero con desastre (visual)?
  • 5.
  • 6.
  • 7. ¿Cuándo consideramos que funciona una web? • Función técnica (funcionalidades). • Función visual. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)?
  • 8. ¿Qué es la función visual?
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. Puntos negros de las webs
  • 14. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? ¿Por qué no funcionan (visualmente) la mayoría de webs? 1. Análisis. 2. Objetivos. 3. Soluciones erróneas. 4. Estructura de contenidos. 5. Jerarquía. 6. Legibilidad. 7. Testeo.
  • 15. ¿Necesito una web? ¿Por qué? ¿Para qué? ¿Tiene web la competencia? ¿Cómo son? ¿Quién va a usar a esa web? ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Análisis
  • 16. Briefing. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Análisis
  • 17. ¿Cuál es la finalidad de la web? ¿Qué espero conseguir (concretamente) teniendo una web? ¿Qué acción o acciones principales quiero que realicen los usuarios? ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Objetivos
  • 18. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Objetivos Los falsos objetivos.
  • 19. ¿Cumple la web con los objetivos marcados? ¿Me estoy dirigiendo correctamente al usuario? ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Soluciones erróneas
  • 20. Una web es una herramienta, no un fin. Los contenidos dirigen la web y no al revés. La web funciona por capas, no por páginas o secciones. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Estructura de contenidos .
  • 21. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Estructura de contenidos Los parches.
  • 22. El escaneo visual: los usuarios no vienen a tu web a dar un paseo. ¿Cómo encuentra el usuario lo que viene a buscar? ¿Tu web es más un manual de Ikea o un mercadillo de segunda mano? ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Jerarquía .
  • 23. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Jerarquía . No eres un trovador. Ni Fidel Castro.
  • 24. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad . ¿Es posible leer tu web o es sencillo hacerlo?
  • 25. 1. Tamaño de letra. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad
  • 26.
  • 27.
  • 28. 1. Tamaño de letra. 2. Longitud de líneas. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad
  • 29.
  • 30.
  • 31.
  • 32. 1. Tamaño de letra. 2. Longitud de líneas. 3. Espacios entre letras, palabras y líneas. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad
  • 33.
  • 34.
  • 35. 1. Tamaño de letra. 2. Longitud de líneas. 3. Espacios entre letras, palabras y líneas. 4. Formas de las fuentes. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad
  • 36.
  • 37.
  • 38.
  • 39. 1. Tamaño de letra. 2. Longitud de líneas. 3. Espacios entre letras, palabras y líneas. 4. Formas de las fuentes. 5. Contraste¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Legibilidad
  • 40.
  • 41.
  • 42.
  • 43. ¿Cómo sé lo que funciona mejor para mi público o mis objetivos? ¿Cómo puedo saber si he hecho bien todos los puntos anteriores? ¿De dónde saco los datos? ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Pruebas y mediciones
  • 44. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? . Tu web no es un santo: no la veneres. Pruebas y mediciones
  • 46. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Invierte en tu web: no es un gasto (si lo haces bien).
  • 47. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Antes de decidir o crear, valida.
  • 48. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Primero los contenidos, después la web.
  • 49. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Fórmate (si no puedes contratar a profesionales).
  • 50. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Contrata profesionales.
  • 51. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Fórmate (aunque puedas contratar profesionales).
  • 52. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Fíjate en quién lo hace BIEN.
  • 53. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones No infravalores el trabajo de los demás.
  • 54. ¿POR QUÉ HAY TANTAS WEBS QUE SON UN DESASTRE (VISUAL)? Recomendaciones Nunca va a estar perfecta: lánzala de una vez.