cómo se diseña la primera sección de la página de ...€¦ · cómo se diseña la primera...
TRANSCRIPT
![Page 1: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/1.jpg)
Cómo se diseña la primera sección de la página de inicio
de nuestra webNora Ferreirós // @noradriana_
![Page 2: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/2.jpg)
wpfem.org
Me llamo Nora.Soy diseñadora UX/UI y por eso vengo a hablaros de diseño.Podéis cotillear sobre mi trabajo en www.noradriana.com
¡Hola a todo el mundo! 👋
![Page 3: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/3.jpg)
Cabecera principalSección inicial
EncabezadoHero
JumbotrónHeader
Módulo de aperturaEl tochaco de arriba
![Page 4: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/4.jpg)
Cabecera principalSección inicial
EncabezadoHero
JumbotrónHeader
Módulo de aperturaEl tochaco de arriba
![Page 5: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/5.jpg)
Quiénes somos
![Page 6: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/6.jpg)
Quiénes somos
Qué hacemos/Qué solución damos
![Page 7: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/7.jpg)
Quiénes somos
Qué hacemos/Qué solución damos
Interacción
![Page 8: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/8.jpg)
![Page 9: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/9.jpg)
¿Cuáles son las tipologías de estructuras para un hero?
Tipos de hero(según la estructura)
![Page 10: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/10.jpg)
![Page 11: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/11.jpg)
![Page 12: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/12.jpg)
![Page 13: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/13.jpg)
Antes de poneros como locos con vuestro Page Builder favorito, meditad sobre esto.
Cosas (importantísimas)a tener en cuenta
![Page 14: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/14.jpg)
La primera impresión es la que cuenta
![Page 15: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/15.jpg)
El click más rápido del oeste
![Page 16: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/16.jpg)
¿Y ahora por dónde sigo?
![Page 17: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/17.jpg)
Análisis básico y algo genérico de cómo funciona nuestro cerebro cuando entramos en una web
Proceso mental del usuarioen una web
![Page 18: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/18.jpg)
Reacción emocionalNo sé de qué va esto pero me gusta
¿Y esta paranoia qué viene siendo?
Pinta interesante, vamos a ver...
Vaya cosa más cutre
Ah, la típica web...
![Page 19: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/19.jpg)
¿Qué es esto?
¿Qué tipo de gente lleva esto?
¿Dónde puedo saber más?
![Page 20: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/20.jpg)
Análisis de algunos ejemplos útiles de composición, contenido y experiencia de usuario
¿Qué se hace por ahí en cuanto al hero?
![Page 21: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/21.jpg)
![Page 22: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/22.jpg)
![Page 23: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/23.jpg)
![Page 24: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/24.jpg)
![Page 25: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/25.jpg)
![Page 26: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/26.jpg)
![Page 27: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/27.jpg)
![Page 28: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/28.jpg)
![Page 29: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/29.jpg)
![Page 30: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/30.jpg)
![Page 34: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/34.jpg)
¿Cómo diseñar un hero que realmente sirva de algo?
![Page 35: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/35.jpg)
HACED UN ANÁLISIS Y
DEFINID OBJETIVOS
![Page 36: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/36.jpg)
![Page 37: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/37.jpg)
Primero contenidos, luego diseño
![Page 38: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/38.jpg)
Haced wireframes a mano
![Page 39: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/39.jpg)
![Page 40: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/40.jpg)
Ahora sí, vamos a WordPress
![Page 41: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/41.jpg)
Recomendaciones para proyectos con pocos recursos (pero con ganas de hacerlo bien)
![Page 42: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/42.jpg)
Si no sabes qué poner, investiga qué hacen los demás.
![Page 43: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/43.jpg)
Si no sabes qué hacer, busca ejemplos.
![Page 44: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/44.jpg)
No uséis material sin permiso.
![Page 45: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/45.jpg)
Ante la dudalo sencillo funciona.
![Page 46: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/46.jpg)
Testea, arregla, actualizay repite.
![Page 47: Cómo se diseña la primera sección de la página de ...€¦ · Cómo se diseña la primera sección de la página de inicio de nuestra web Nora Ferreirós // @noradriana_ wpfem.org](https://reader034.vdocuments.co/reader034/viewer/2022052017/602fef9ff1f168505343b3a9/html5/thumbnails/47.jpg)
Cómo se diseña el hero de nuestra web
Nora Ferreirós // @noradriana_
¡Muchas gracias!